從kendoui下拉列表中提取選定的數據值

Question

我試圖從KendoDropDownList中獲取所選項目的數據參數，該KendDropDownList被用作我的網格的自定義過濾器編輯器。

我：

function gradeSelector(element) 
{ 
    element.kendoDropDownList({ 
    dataSource: { 
     transport: { 
     read: { 
      type: "POST", 
      url: ROOT+'record/fetchGrade', 
      dataType: 'json', 
      data: { 
      mode: 'obj' 
      } 
     } 
     } 
    }, 
    optionLabel: "Select grade", 
    dataTextField: "text", 
    dataValueField: "id", 
    template: '#="<span class=\'filterTrigger\' data-value=\'"+id+"\'>"+text+"</span>" #', 
    select: function(e) 
    {// Dirty, is there a better way? 
     html = e.item[0].outerHTML; 
     html = html.substring(html.indexOf('data-value="')+12);  
     gradeId = html.substring(0, html.indexOf('"')); 

     clearSingleFilter('grade'); 
     activeFilter.push({ 
     field: 'grade', 
     operator: 'eq', 
     value: gradeId 
     }) 
     $('.k-animation-container').hide(); 
     filtersState = 1 ; 
     $('#customerGrid').data('kendoGrid').dataSource.filter(activeFilter); 
    } 
    }); 
} 

的方式，我得到gradeId看起來非常雜亂。什麼是檢索這個值的正確方法？

Answer 1

考慮使用close事件，而不是select，然後你可以簡單地做：

close   : function (e) { 
    // Easily get gradeId 
    var gradeId = this.select(); 

    clearSingleFilter('grade'); 
    activeFilter.push({ 
     field : 'grade', 
     operator: 'eq', 
     value : gradeId 
    }) 
    $('.k-animation-container').hide(); 
    filtersState = 1; 
    $('#customerGrid').data('kendoGrid').dataSource.filter(activeFilter); 
} 

「問題」與select的是，它被觸發觸發元素之前，所以你不能（容易）獲得的價值但在實際選擇值後觸發close。

編輯：如果id列表未被排序並且連續，則以前的實施將失敗。作爲一個通用的解決方案，你應該使用：

close   : function (e) { 
    // Get index in the list 
    var idx = this.select(); 
    // Get the item corresponding to that index 
    var item = this.dataItem(idx); 
    // Now, we can get the id from the item 
    var gradeId = item.id; 
    console.log("gradeId", gradeId); 

    clearSingleFilter('grade'); 
    activeFilter.push({ 
     field : 'grade', 
     operator: 'eq', 
     value : gradeId 
    }) 
    $('.k-animation-container').hide(); 
    filtersState = 1; 
    $('#customerGrid').data('kendoGrid').dataSource.filter(activeFilter); 
}