kendo ui filtering the grid table, need some idea

Posted by cool_spirit on Stack Overflow See other posts from Stack Overflow or by cool_spirit
Published on 2012-10-10T21:34:40Z Indexed on 2012/10/10 21:36 UTC
Read the original article Hit count: 664

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about asp.net-mvc-3