Hello,
We have a Kendo MVC grid in a Partial View. The grid may have several thousand records (with 30 columns) so we went with using Ajax and server processing. The DataSource calls a js function to return parameters. It looks like this (abbreviated version):
@(Html.Kendo().Grid<GroundWater.Models.GroundWaterSearchResult>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.well_id).Title("Well ID").Width(75).Hidden(true).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Well_Name).Title("Well Name").Width(105).Locked(true);
columns.Bound(p => p.Permit).Title("PermitNo").Width(90);
columns.Bound(p => p.Well_Depth).Title("Well Depth").Width(64).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Measurement_By).Title("Measurement By").Width(111);
columns.Bound(p => p.POR_Start).Title("POR Start").Width(81).Format("{0:M/d/yyyy}").HtmlAttributes(new { style = "text-align: center;" });
columns.Bound(p => p.POR_End).Title("POR End").Width(77).Format("{0:M/d/yyyy}").HtmlAttributes(new { style = "text-align: center;" });
columns.Bound(p => p.POR_count).Title("POR Count").Width(66).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.publication_name).Title("Publication Name").Width(93);
columns.Bound(p => p.Receipt).Title("Receipt").Width(71);
columns.Bound(p => p.wdid).Title("WDID").Width(65);
columns.Bound(p => p.County).Title("County").Width(69);
columns.Bound(p => p.basin).Title("Designated Basin").Width(91).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Management_District).Title("Management District").Width(91);
columns.Bound(p => p.Modified).Title("Modified").Width(79).Format("{0:M/d/yyyy}").HtmlAttributes(new { style = "text-align: center;" });
})
.Pageable(pager => pager
.PageSizes(true)
.PageSizes(new int[] { 10, 20, 50, 100 }))
.Sortable(sorting => sorting.AllowUnsort(false))
.Scrollable(scroll => scroll.Height(500))
.Filterable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorderable => reorderable.Columns(true))
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Wells_Read", "GroundWaterSearch").Data("filterData"))
.ServerOperation(true)
.PageSize(50)
)
)
<script>
function filterData() {
return {
Publication: document.getElementById('publicationArea').value
//WellName: document.getElementById('wellname').value,
//StartDate: document.getElementById('startdate').value,
//EndDate: document.getElementById('enddate').value,
//ContrArea: document.getElementById('contributingarea').value,
//WaterDistrict: document.getElementById('waterdistrict').value
//........ up to 10 additional fields
};
}
</script>
And the Controller
public ActionResult Wells_Read([DataSourceRequest]DataSourceRequest request, string Publication)
{
List<List<string>> criteria = new List<List<string>>();
GetPublicationArea(Publication, criteria);
var tempCalls = CallMgrData.GetGroundWaterLevelsResult(criteria, 20000);
List<GroundWaterSearchResult> values = tempCalls.ResultSet.Select(x => ModelMapper.Map<CdssServiceReferences.GroundWater, GroundWaterSearchResult>(x)).ToList();
DataSourceResult result = values.ToDataSourceResult(request);
return Json(result);
}