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