This is a migrated thread and some comments may be shown as answers.

Populate Kendo grid with Ajax result and set Page Size

1 Answer 116 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 09 Jul 2017, 03:04 PM

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();}}});});

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 11 Jul 2017, 02:22 PM
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.

Regards,
Georgi
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.
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or