Kendo UI无法过滤网格表

时间:2012-10-10 21:34:40

标签: javascript asp.net-mvc-3 jquery-ui filtering kendo-ui

我想按姓氏过滤表,但无法工作,这是我的代码

控制器中的

  public JsonResult Filtering()
    {
        HealthContext rc = new HealthContext();
        var last = rc.Profiles.Select(lastt => new SelectListItem { Text = lastt.LastName, Value = lastt.Id.ToString() }).ToList();
        return Json(last.ToList(), JsonRequestBehavior.AllowGet);


    }

在视图中

  <script type="text/x-kendo-template" id="template">
            <div class="toolbar">
                <label class="category-label" for="Last name"> by last name:</label>
                <input type="search" id="LastName" style="width: 230px"></input>
            </div>
        </script>

以及

以下代码段用于显示表并过滤姓氏

<script>
                  $(document).ready(function() {
                      $("#grid").kendoGrid({
                          dataSource: {

                              transport: {
                                  read: {
                                      url: "/Profiles/GetJsonData",
                                      dataType: "json"
                                  }
                              },

                              pageSize: 10,

                          },
                        toolbar: kendo.template($("#template").html()),
                          height: 250,
                          filterable: true,
                          sortable: true,
                          pageable: true,
                          defaultSorting: 'LastName ASC',
                          columns: [{
                                  field: "Id",
                                  filterable: false
                              },

                              {
                                  field: "FirstName",
                                  title: "First Name",

                                  width: 100,

                              }, {
                                  field: "LastName",
                                  title: "Last Name",

                                  width: 200
                              }, {
                                  field: "Gender",
                                  title: "Gender"
                              }
                          ]
                      });


                      var dropDown = grid.find("#LastName").kendoDropDownList({
                                            dataTextField: "LastName",
                                            dataValueField: "Id",
                                            autoBind: false,
                                            optionLabel: "All",
                                            dataSource: {

                            severFiltering: true,
                             transport: {
                                  read: {
                                      url: "/Profiles/Filtering",
                                      dataType: "json"
                                  }
                              },
                        },
                        change: function() {
                            var value = this.value();
                            if (value) {
                                grid.data("kendoGrid").dataSource.filter({ field: "Id", operator: "eq", value: parseInt(value) });
                            } else {
                                grid.data("kendoGrid").dataSource.filter({});
                            }
                        }

                });
                });
              </script>

所以问题是下拉列表没有显示以及值/数据,任何想法的人?

1 个答案:

答案 0 :(得分:1)

在您的代码中,您没有分享 grid 变量背后的内容?您也可以直接通过id找到LastName html元素。

 var dropDown = $("#LastName").kendoDropDownList({ ...

你的其余代码看起来很好,这里是:

http://jsfiddle.net/knWcJ/70/