Question

I want to filter the table by last name, but cant work, here is my code

in controller

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


    }

in view

  <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>

and also

the following snippet is for display table and filtering the last name

<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>

so the problem is the drop down list is not show up as well as the value/ data, any idea guys?

Answer 1

In your code you did not share what is behind the grid variable? Also you can find the LastName html element directly by id.

i.e.

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

Rest of your code looks okey, here it is:

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