KendoUI 그리드 적용 필터 드롭 다운 옵션 선택

Question

필터링 할 옵션을 선택할 수있는 템플릿으로 드롭 다운을 사용하는 필터링 가능한 열이 있습니다.

선택이 완료되면 필터 버튼을 클릭해야 할 필요없이 옵션을 선택한 순간 필터를 어떻게 만들 수 있습니까?

다음 코드는 작동하지 않습니다. 선택이 이루어진 순간 필터가 적용되지 않고 그리드가 새로 고쳐지고 드롭 다운 선택이 재설정됩니다. 내 드롭 다운에 대한

내가 가진 : 나는 filterTrigger 클래스에 클릭 이벤트를 바인딩 한

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

:

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

:

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

내가 참조로 applyFilters() 함수를 포함

나는 이렇게 할 수 있었지만 확실하게 더 좋은 방법이 있어야만합니까? :

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