Question

我正在尝试从KendoDropDownList获取所选项目的数据参数，该参数被用作我的网格的自定义过滤器编辑器。

我有：

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

从kendoui下拉列表中获取所选数据值

1 个答案: