使用DropdownlistFor搜索/过滤KendoUI Grid中的所有列

时间:2015-04-29 07:46:06

标签: asp.net-mvc kendo-ui

我正在尝试使用我的自定义Dropdownlist过滤/搜索kendoUI网格。我已经能够得到单个列过滤的结果,但如果我尝试添加新的下拉列表来过滤网格,我无法获得所需的结果。 我的问题是逻辑运算符,它的值不同。 这是正确的方法吗?或任何其他建议?

我在这里添加图片以获取更多描述,并希望您能帮助我。感谢

HTML下拉列表:

<html>
    <div class="form-group col-md-2" style="margin-bottom:0px;">
                @Html.Label("Media", htmlAttributes: (new { @class = "col-sm-4 control-label" }))
                <div class="col-sm-8" style="float:none;">
                      @Html.DropDownListFor(model => model.MediaTypeID, (ViewData["media"] as SelectList), "select media", new { @class = "form-control btnregister chosen-select", onchange = "changes_dropdown(this.id)", data_placeholder = "select media", style = "border-bottom:none;border-radius:0px;" })
             @*   @Html.ValidationMessageFor(model => model.MediaTypeID, "", new { @class = "text-danger" })*@
        </div>
    </div>

    <div class="form-group col-md-2" style="margin-bottom:0px;">
        @Html.Label("Outlet", htmlAttributes: (new { @class = "col-sm-4 control-label" }))
        <div class="col-sm-8" style="float:none;">

            @Html.DropDownListFor(model => model.channel, (ViewData["company"] as SelectList), "select channel", new { @class = "form-control btnregister chosen-select", onchange = "changes_dropdown(this.id)", data_placeholder = "select channel", style = "border-bottom:none;border-radius:0px;" })
            @Html.ValidationMessageFor(model => model.channel, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group col-md-2" style="margin-bottom:0px;">
        @Html.Label("Start Date", htmlAttributes: (new { @class = "col-sm-6 control-label" }))
        <div class="col-sm-6" style="float:none;">
            @Html.DropDownListFor(model => model.EntryDate, (ViewData["entryDate"] as SelectList), "select date", new { @class = "form-control btnregister chosen-select", onchange = "changes_dropdown(this.id)", data_placeholder = "select date", style = "border-bottom:none;border-radius:0px;", id = "startDate" })
            @Html.ValidationMessageFor(model => model.EntryDate, "", new { @class = "text-danger" })
        </div>
    </div>
</html>

Javascript功能和填充:

<script type="text/javascript">
    function changes_dropdown(fieldID)
    {
        var fieldValue = document.getElementById(fieldID).value;


            $("#grid").data("kendoGrid").dataSource.filter({

                logic: "and",

                filters: [
                    {
                        field: fieldID,
                        operator: "contains",
                        value: fieldValue
                    }
                ]
            });
    }
</script>

1 个答案:

答案 0 :(得分:1)

首先,您不需要将当前字段的ID传递给changes_dropdown函数。相反,您可以使用onchange = "changes_dropdown()并在此函数中使用var fieldValue = this.value

此外,当您定义单个过滤器时,您不需要在谓词之间指定逻辑(http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-filter):

$("#grid").data("kendoGrid").dataSource.filter({
  filters: [
    {
      field: fieldID,
      operator: "contains",
      value: fieldValue
    }
  ]
});