KendoUI Grid对下拉选项选择应用过滤器(KendoUI Grid apply filter on dropdown option select)

KendoUI Grid对下拉选项选择应用过滤器(KendoUI Grid apply filter on dropdown option select)

我有一个可过滤的列，它使用下拉列表作为模板，用户可以在其中选择要过滤的选项。

如何在选择选项时过滤，而不是用户必须在选择后单击过滤按钮？

我的以下代码不起作用。 选择完成后，网格将刷新而不应用过滤器，并重置下拉选择。

对于我的下拉列表，我有：

function salesPersonFilter(element) { element.kendoDropDownList({ dataSource: [{Id: 0, Name: 'Jimbo Jones'}, {Id: 1, Name: 'Jimmy'}], dataTextField: 'Name', dataValueField: 'Name', optionLabel: 'Select salesperson', template: '#="<span class=\'filterTrigger\'>"+Name+"</span>" #' }) }

我已将click事件绑定到filterTrigger类：

$('.k-list .filterTrigger').click(function() { applyFilters(); })

我包含applyFilters（）函数作为参考：

function applyFilters() // Custom filters... { var dupes = {}; var finalFilters = []; $.each(filterBus, function(i, el) { if(!dupes[el.field]) { dupes[el.field] = true; finalFilters.push(el); } }); filterBus = finalFilters ; grid.dataSource.filter(finalFilters) ; }

I have a filterable column that uses a dropdown as a template where the user can select an option to filter by.

How can I make it filter the moment the option is selected rather than the user having to have to click the filter button once the selection is made?

My following code doesn't work. The moment a selection is made the grid refreshes without the filter applied and the dropdown selection is reset.

For my dropdown I have:

function salesPersonFilter(element) { element.kendoDropDownList({ dataSource: [{Id: 0, Name: 'Jimbo Jones'}, {Id: 1, Name: 'Jimmy'}], dataTextField: 'Name', dataValueField: 'Name', optionLabel: 'Select salesperson', template: '#="<span class=\'filterTrigger\'>"+Name+"</span>" #' }) }

I have bound a click event to filterTrigger classes:

$('.k-list .filterTrigger').click(function() { applyFilters(); })

I include the applyFilters() function as reference:

function applyFilters() // Custom filters... { var dupes = {}; var finalFilters = []; $.each(filterBus, function(i, el) { if(!dupes[el.field]) { dupes[el.field] = true; finalFilters.push(el); } }); filterBus = finalFilters ; grid.dataSource.filter(finalFilters) ; }

最满意答案

我设法这样做了，但肯定有更好的方法吗？：

function salesPersonFilter(element) { element.kendoDropDownList({ dataSource: [{Id: 60, Name: 'Sam'}, {Id: 5, Name: 'Jimmy'}], dataTextField: 'Name', dataValueField: 'Id', optionLabel: 'Select salesperson', template: '#="<span class=\'filterTrigger\' data-value=\'"+Id+"\'>"+Name+"</span>" #', select: function(e) {// Dirty, is there a better way? html = e.item[0].outerHTML; html = html.substring(html.indexOf('data-value="')+12); traderId = html.substring(0, html.indexOf('"')); filterBus.push({ field: 'traderId', operator: 'eq', value: traderId }) $('.k-animation-container').hide(); grid.dataSource.filter(filterBus); } }) }

I managed to do it this way, but surely there must be a better way?:

function salesPersonFilter(element) { element.kendoDropDownList({ dataSource: [{Id: 60, Name: 'Sam'}, {Id: 5, Name: 'Jimmy'}], dataTextField: 'Name', dataValueField: 'Id', optionLabel: 'Select salesperson', template: '#="<span class=\'filterTrigger\' data-value=\'"+Id+"\'>"+Name+"</span>" #', select: function(e) {// Dirty, is there a better way? html = e.item[0].outerHTML; html = html.substring(html.indexOf('data-value="')+12); traderId = html.substring(0, html.indexOf('"')); filterBus.push({ field: 'traderId', operator: 'eq', value: traderId }) $('.k-animation-container').hide(); grid.dataSource.filter(filterBus); } }) }