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?
