Фильтр применения сетки KendoUI на выпадающем меню выберите

Question

У меня есть фильтруемый столбец, который использует выпадающий список в качестве шаблона, где пользователь может выбрать параметр для фильтрации.

Как я могу заставить фильтр отфильтровать момент, когда выбрана опция, а не пользователь, который должен нажать кнопку фильтра после выбора?

Мой следующий код не работает. Когда будет сделан выбор, сетка обновится без применения фильтра, и выбор выпадающего меню будет сброшен.

Для моего выпадающего списка у меня есть:

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>" #' 
    }) 
} 

Я вразумлял событие клика по классам filterTrigger:

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

I включают 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) ; 
} 

Answer 1

Мне удалось сделать это таким образом, но, безусловно, должен быть лучший способ:

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); 
     } 
    }) 
    }