Populate Kendo grid with Ajax result and set Page Size

2 posts, 0 answers
  1. Richard
    Richard avatar
    9 posts
    Member since:
    Jun 2016

    Posted 09 Jul Link to this post

    0down votefavorite I'm having trouble with the paging (pageSize) with the Kendo MVC Grid after a jquery AJAX call. Basically when the View first loads everything works fine. Lets say it loads 40 records with the page size set to 10. Then above the grid i have a few buttons where i make a jquery AJAX requests to the Controller to filter the data (by different Status). The data comes back fine (say the filter brings back 12 records), but if the resultset is more than 10 records, for some reason it reloads the whole 40 records. I'll post the code below. Any help.?


        @(Html.Kendo().Grid<AViewModel>().Name("ARequests").Columns(columns =>{ columns.Bound(c => c.AID).Hidden(true); columns.Bound(c => c.RequestSubType).Title("Request Subtype").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))); columns.Bound(c => c.Category).Title("Category").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))); columns.Bound(c => c.Status).Title("Status").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))); columns.Bound(c => c.Technician).Title("Technician Assigned").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));}).Sortable().Filterable(ftb => ftb.Mode(GridFilterMode.Row)).Pageable(pageable => pageable .Refresh(true).PageSizes(true).ButtonCount(5)).DataSource(dataSource => dataSource .Ajax().ServerOperation(true).PageSize(10).Model(model => model.Id(x => x.AID)).Read(read => read.Action("WhenPageFirstLoads", "TheController"))))


    $(".status").on("click", function (event) {var r = MyButtonfilterswitch (r) {case "OPen": status = "Open";break;case "Cancel.png": status = "Cancel";break;case "Closed.png": status = "Closed";break;}}var datatopass = { atsstatus: status }; $.ajax({ type: "post", url: "@Url.Action("ActionToFilterByStatus", "Controller")", data: datatopass, dataType: "json", cache: false,async: true, success: function (returnedData) {if (returnedData !== "" && returnedData.length !== 0) { $("#ARequests").show(); $("#ARequests").data("kendoGrid").dataSource.data(returnedData);//if (returnedData.length > 10) {// $("#ARequests").data("kendoGrid").dataSource.pageSize(10);// $("#ARequests").data("kendoGrid").refresh();//}// THIS ABOVE DOESNT SEEM TO WORK} else { $("#ARequests").hide();}}});});

  2. Georgi
    Georgi avatar
    160 posts

    Posted 11 Jul Link to this post

    Hello Richard,

    It is recommended to use the built in filter functionality when you are filtering the data, because when you have specified source of the data and you replace it manually on run time might lead to unexpected behavior.

    I have assembled a sample (external-filter.zip) with similar to your requirements. I filter the grid with buttons based on the status using the filter method of the Kendo dataSource. Please check it out and let me know if it works for you.

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top