Kendoui Grid自定义过滤器UI从数据源检索值

时间:2014-02-20 10:23:27

标签: javascript jquery kendo-ui kendo-grid kendo-dropdown

我正在尝试为kendo网格中的一个列创建一个过滤器UI,这是一个下拉选择。

到目前为止,我有:

function stateFilter(element)
{
  element.kendoDropDownList({
    dataSource: [
      {
        "state": "New",
        "stateId": 1
      },
      {
        "state": "Current",
        "stateId": 2
      },
      {
        "state": "Non-finalised",
        "stateId": 7
      }
    ],
    optionLabel: 'Select state',
    dataTextField: 'state',
    dataValueField: 'stateId',
    template: '#="<span class=\'filterTrigger\' data-value=\'"+stateId+"\'>"+state+"</span>" #',
    select: function(e)
    {
      console.log(e)
      var val = e.item[0].innerHTML
      val = val.substring(41, 40);
      html = e.item[0].innerText;
      activeFilter = activeFilter.filter(function( obj ) {
        return obj.field !== 'state';
      })
      activeFilter.push({
        field: 'state',
        operator: 'eq',
        value: val
      })
      $('.k-animation-container').hide();
      filtersState = 1 ;
      grid.dataSource.filter(activeFilter);
    }
  })
}

是否有更好的方法从数据源中获取stateId而不是将其作为数据参数传递并将其与substring()一起删除并将其作为值传递?

2 个答案:

答案 0 :(得分:0)

我不完全确定你在做什么。如果您只是想在网格中的列上添加下拉列表作为过滤器,那么您正在做的事情要容易得多。

以下是一个快速示例... http://jsbin.com/coreh/1/edit

如果这不是您的意思,请发布网格代码,以便更好地确定您要完成的工作。

答案 1 :(得分:0)

这是一个Kendo Grid,它在网格中有一个下拉列表,用于更改值及其剃刀语法。为了它的价值,我会发布代码。它被截断了一点,所有的开/关磅都应该排成一行。

 columns.Bound(m => m.IncludeInForecast).HtmlAttributes(new { Align="center"}).Title("Include In Forecast?").ClientTemplate(

"\\# if (IncludeInForecast == true) { \\#" +

                                  "<select id='\\#= OrderDetailId \\#' onchange=SaveIncludeInForecast('\\#= OrderDetailId \\#','\\#= ProposalId \\#'); style='Width: 80px; color: 'navy' > " +
                                    "<option id='yes' selected value='1'>Yes</option>" +
                                    "<option id='no' value='0'>No</option>" +

                                    "</select>" +
                             "\\# } else { \\#" +
                                  "<select id='\\#= OrderDetailId \\#' onchange=SaveIncludeInForecast('\\#= OrderDetailId \\#','\\#= ProposalId \\#'); style='Width: 80px; color: 'navy' > " +
                                    "<option id='yes'  value='1'>Yes</option>" +
                                    "<option id='no' selected value='0'>No</option>" +
                                 "\\# } \\#" +
                        "\\# }
);

您会注意到我正在执行此操作的地方'\\#= ProposalId \\#'。这就是你如何从模型中获取价值。

然后是结果函数

function SaveIncludeInForecast(orderDetailId, proposalId)
{      

}

希望这不是完全无用的。