J'ai finalement réussi à ajouter des filtres énumérables en remplaçant certaines des méthodes telerik javascript.
Le code fourni ne fonctionne pas comme il est (il contient également la persistance des valeurs de filtre, utilise ui jquery), mais devrait être utilisable si vous avez assez d'expérience javascript:
var MyCompanyFilteringBaseImplementation = (function (
origCreateTypeSpecificInput,
origClearClick,
origFilterClick,
origCreateFilterMenu) {
return {
baseCreateTypeSpecificInput: origCreateTypeSpecificInput,
baseFilterClick: origFilterClick,
baseClearClick: origClearClick,
baseCreateFilterMenu: origCreateFilterMenu
};
} ($.telerik.filtering.implementation.createTypeSpecificInput,
$.telerik.filtering.implementation.clearClick,
$.telerik.filtering.implementation.filterClick,
$.telerik.filtering.implementation.createFilterMenu
));
// Override existing functions for Filtering
var MyCompanyFilteringImplementation = (function (baseRender, baseClear, baseClick) {
var _createTypeSpecificInput;
var _filterClick;
var _clearClick;
var _createFilterMenu;
var _filterExpr;
_createTypeSpecificInput = function (html, column, fieldId, value) {
var filter = eval('MyProject.filterVariables.' + column.member);
if (filter) {
html.cat('<div><ol id="' + filter.ColumnName + 'Filter"
class="multiselectfilter" member="' + column.member + '">');
$.each(filter.Values, function (index, value) {
if (index >= 0) {
html.cat('<li value="')
.cat(value.DisplayedValue)
.cat('">')
.cat(value.DisplayedValue)
.cat('</li>');
}
});
html.cat('</ol></div>');
} else {
this.baseCreateTypeSpecificInput(html, column, fieldId, value);
}
}
_filterClick = function (e) {
var self = this;
e.preventDefault();
var $element = $(e.target);
var column = $element.closest('.t-animation-container').data('column');
column.filters = [];
var hasErrors = false;
var filter = eval('MyProject.filterVariables.' + column.member);
if (filter) {
$('#' + filter.ColumnName + 'Filter .ui-selected')
.each($.proxy(function (index, input) {
var $input = $(input);
var value = $(input).attr('value');
for (var i = 0; i < filter.Values.length; i++) {
if (filter.Values[i].DisplayedValue == value) {
for (var j = 0; j < filter.Values[i].Values.length; j++) {
column.filters.push({
operator: filter.Values[i].Values[j].Operator,
value: filter.Values[i].Values[j].Value });
}
}
}
//column.filters.push({ operator: filter.Operator, value: value });
}, this));
if (!hasErrors) {
if (column.filters.length > 0) {
if (self.filterClickHandlers().length > 0) {
var that = this;
$.each(self.filterClickHandlers(), function (i, handler) {
handler(that.filterExpr());
});
} else {
this.filter(this.filterExpr());
}
}
this.hideFilter();
}
} else {
this.baseFilterClick(e);
}
}
_clearClick = function (e) {
var self = this;
e.preventDefault();
var $element = $(e.target);
var column = $element.closest('.t-animation-container').data('column');
column.filters = null;
var filter = eval('MyProject.filterVariables.' + column.member);
if (filter) {
$('#' + filter.ColumnName + 'Filter .ui-selected').removeClass('ui-selected');
var handlers = self.filterClickHandlers();
if (handlers.length > 0) {
var that = this;
$.each(handlers, function (i, handler) { handler(that.filterExpr()); });
this.hideFilter();
} else {
this.filter(this.filterExpr());
}
} else {
this.baseClearClick(e);
}
}
_createFilterMenu = function (column) {
var filter = eval('MyProject.filterVariables.' + column.member);
if (filter) {
var $t = $.telerik;
var filterMenuHtml = new $t.stringBuilder();
filterMenuHtml.cat('<div class="t-animation-container"><div class="t-filter-options t-group" style="display:none">')
.cat('<button class="t-button t-button-icontext t-clear-button"><span class="t-icon t-clear-filter"></span>')
.cat(this.localization.filterClear)
.cat('</button>');
var fieldIdPrefix = $(this.element).attr('id') + column.member;
this.createTypeSpecificInput(filterMenuHtml, column, fieldIdPrefix, true);
filterMenuHtml.cat('<button class="t-button t-button-icontext t-filter-button"><span class="t-icon t-filter"></span>')
.cat(this.localization.filter)
.cat('</button></div></div>');
var $filterMenu = $(filterMenuHtml.string());
var returnValue = $filterMenu
.appendTo(this.element);
// use jquery ui selectable for multiselect filter. Make every click act as a CTRL click on this control
$('.multiselectfilter').bind("mousedown", function (e) {
e.metaKey = true;
}).selectable();
var filteredColumns = $.grep(this.columns, function (column) {
return column.filters;
});
// reselect stored filter selection
if (filteredColumns) {
$.each(filteredColumns, function (index, column) {
if (column.filters) {
$.each(column.filters, function (index, filter) {
var value = filter.value;
if (filter.operator === 'isnull')
value = 'NULL';
if (filter.operator === 'isnotnull')
value = 'NOT NULL';
$('ol[member="' + column.member + '"] li[value="' + value + '"]').addClass("ui-selected");
});
}
});
}
return returnValue;
} else {
var result = this.baseCreateFilterMenu(column);
if (column.type == 'Date') {
var operators = $('#MyDateFieldfirst').closest('.t-filter-options').find('.t-filter-operator');
if (column.filters) {
if (column.filters[0]) {
$('#MyDateFieldfirst').val(column.filters[0].value);
// deselect all operators
$(operators[0]).find('option').removeAttr('selected');
// select stored operator
$(operators[0]).find('option[value="' + column.filters[0].operator + '"]')
.attr('selected', 'selected');
}
if (column.filters[1]) {
$('#MyDateFieldsecond').val(column.filters[1].value);
// deselect all operators
$(operators[1]).find('option').removeAttr('selected');
// select stored operator
$(operators[1]).find('option[value="' + column.filters[1].operator + '"]')
.attr('selected', 'selected');
}
};
}
return result;
}
}
_filterExpr = function() {
var result = [];
var $t = $.telerik;
var filtersPerColumn = [];
for (var columnIndex = 0; columnIndex < this.columns.length; columnIndex++) {
var column = this.columns[columnIndex];
var columnFilterStringComponents = [];
var filterName = 'MyProject.filterVariables.' + column.member;
var MyProjectFilter = eval(filterName);
if (column.filters)
if (MyProjectFilter && MyProjectFilter.Multiselect == true) { // multiselect column
for (var filterIndex = 0; filterIndex < column.filters.length; filterIndex++) {
var filter = column.filters[filterIndex];
var operator = filter.operator;
if (operator === 'isnull')
operator = "eq";
if (operator === 'isnotnull')
operator = "ne";
columnFilterStringComponents.push(new $t.stringBuilder()
.cat(column.member)
.cat('~')
.cat(operator)
.cat('~')
.cat(this.encodeFilterValue(column, filter.value)).string());
}
var columnFilterstr = columnFilterStringComponents[0];
for (var i = 1; i < columnFilterStringComponents.length; i++) {
columnFilterstr = '(' + columnFilterstr + '~or~' + columnFilterStringComponents[i] + ')';
}
result.push(columnFilterstr);
}
else { // not a multiselect column
for (var filterIndex = 0; filterIndex < column.filters.length; filterIndex++) {
var filter = column.filters[filterIndex];
var operator = filter.operator;
if (operator === 'isnull')
operator = "eq";
if (operator === 'isnotnull')
operator = "ne";
columnFilterStringComponents.push(new $t.stringBuilder()
.cat(column.member)
.cat('~')
.cat(operator)
.cat('~')
.cat(this.encodeFilterValue(column, filter.value)).string());
}
result.push(columnFilterStringComponents.join('~and~'));
}
}
return result.join('~and~');
}
return {
createTypeSpecificInput: _createTypeSpecificInput,
filterClick: _filterClick,
clearClick: _clearClick,
createFilterMenu: _createFilterMenu,
filterExpr: _filterExpr
};
} ($.telerik.filtering.implementation.createTypeSpecificInput,
$.telerik.filtering.implementation.clearClick,
$.telerik.filtering.implementation.filterClick,
$.telerik.filtering.implementation.createFilterMenu
));
var filteringExtensions = (function (
origCreateTypeSpecificInput,
origClearClick,
origFilterClick,
origCreateFilterMenu) {
var _filter = function (filterBy) {
this.currentPage = 1;
this.filterBy = filterBy;
// restore filters that were stored in cookie
var storedColumns = jQuery.parseJSON($.cookie('ColumnFilters'));
for (var index in storedColumns) {
var storedColumn = storedColumns[index];
var member = storedColumn.member;
var matchingColumn = $.grep(this.columns, function (column) {
return column.member == member;
});
if (matchingColumn && matchingColumn[0] && !matchingColumn[0].filters) {
matchingColumn[0].filters = storedColumn.filters;
}
};
if (this.isAjax()) {
this.$columns().each($.proxy(function (index, element) {
$('.t-grid-filter', element).toggleClass('t-active-filter', !!this.columns[index].filters);
}, this));
this.ajaxRequest();
} else {
this.serverRequest();
}
}
return {
filter: _filter
}
} (
));
jQuery.extend($.telerik.grid.prototype, MyCompanyFilteringBaseImplementation);
$.telerik.filtering.implementation.createTypeSpecificInput = MyCompanyFilteringImplementation.createTypeSpecificInput;
$.telerik.filtering.implementation.filterClick = MyCompanyFilteringImplementation.filterClick;
$.telerik.filtering.implementation.clearClick = MyCompanyFilteringImplementation.clearClick;
$.telerik.filtering.implementation.createFilterMenu = MyCompanyFilteringImplementation.createFilterMenu;
$.telerik.filtering.implementation.filterExpr = MyCompanyFilteringImplementation.filterExpr;
$.telerik.filtering.implementation.filter = filteringExtensions.filter;