MVC Kendo Grid with Server Side Pagination and Grouping

[Dhaval]

I have a Kendo MVC Grid. In which I have Pagination which is Server Event and a Filter Option which Calls the Read of the Grid. But when I Include a Grouping It say's a error in the Browser Console " Cannot readproperty 'length' ". I have tried the solutions given on the other forum threads.
1)Giving .ServerOperation(false) which makes Pagination and Filtration nonfunctional. But  I need .ServerOperation(true) to make my Pagination and Filtration to work.
The code is below :

#######################Kendo Grid#############################

 @(Html.Kendo().Grid(Model.UpcomingMilestone)
                                                          .Name("grd_UpcomingMilestone")
                                                          
                                                          .Columns(columns =>
                                                          {
                                                              columns.Bound(c => c.ProjectName).Title("Project Name").Groupable(false);
                                                              columns.Bound(c => c.NextMilestone).Title("Next Milestone Name").Groupable(false);
                                                              columns.Bound(c => c.NextMilestoneDate).Title("Next Milestone Date").ClientTemplate("#= kendo.toString(NextMilestoneDate, \"MM/dd/yyyy\") #").Groupable(false);
                                                              columns.Bound(c => c.ProjectManagerName).Title("Project Manager Name").Groupable(false);
                                                              columns.Bound(c => c.TeamLeadName).Title("Team Lead Name").Groupable(false);
                                                              columns.Bound(c => c.WeekStartDate).ClientTemplate("#= kendo.toString(WeekStartDate, \"MM/dd/yyyy\") #");
                                                          })
                                                                  .Pageable(pageable => pageable
                                                                    .Refresh(true)                                                                   
                                                                    .ButtonCount(5)) // Enable paging
                                                                    //.Groupable()
                                                                  .HtmlAttributes(new { @class = "grd_UpcomingMilestone" })
                                                                  .DataSource(dataSource => dataSource // Configure the grid data source
                                                                      .Ajax() // Specify that ajax binding is used
                                                                      .Read(read => read.Data("filterGridParams").Action("FilteredUpcomingMilestone", "UpcomingMilestone"))// Set the action method which will return the data in JSON format                                                                        
                                                                      .PageSize(10)
                                                                                              //.Group(group => group.Add(c => c.WeekStartDate))
                                                                                              //.ServerOperation(false)
                                                                   )

                                                        )
###############################Filter Expression###############################################
function filterGridParams() {

                return {
                    TeamLeadPersonId: $("#ddlTeamLead").data("kendoDropDownList").value(),
                    ProjectManagerPersonId: $("#ddlProjectManager").data("kendoDropDownList").value()
                };
            }
#################################Button Click For Filteration##########################################
<input id="GoButton" onclick="fun_FilteredUpcomingMilestone()" type="button" class="GoButton" value="Go" />
function fun_FilteredUpcomingMilestone() {

       
        UpdateHiddenFieldValues();      
        //call the read method of the Grid, with Parameters and set the page Index to one
        var grd_UpcomingMilestone = $("#grd_UpcomingMilestone").data("kendoGrid");
        grd_UpcomingMilestone.dataSource.page(1);
       
    }
###############################Action #################################
public ActionResult FilteredUpcomingMilestone([DataSourceRequest] DataSourceRequest request, string TeamLeadPersonId, string ProjectManagerPersonId)
        {

              var UpcomingMilestoneModel = new UpcomingMilestoneModel();
             var upcomingMilestoneModel = new PagedDataResult<UpcomingMilestoneData>();

            if (UpcomingMilestoneModel.FirstTimeLoad)
            {
                //First time call, do not load the data
                UpcomingMilestoneModel.UpcomingMilestone = new List<UpcomingMilestoneData>();
              
            }
            else
            {
                //Load the data, for other events
                upcomingMilestoneModel = UpcomingDAL.GetUpcomingMilestoneData (request.ToPageDataInfo<UpcomingMilestoneData>(), TeamLeadPersonId, ProjectManagerPersonId);

                UpcomingMilestoneModel.UpcomingMilestone = upcomingMilestoneModel.ResultList;

               
            }           

           
            UpcomingMilestoneModel.FirstTimeLoad = false;

            return Json(new DataSourceResult
            {
                Data = UpcomingMilestoneModel.UpcomingMilestone, // Process data (paging and sorting applied)
                Total = upcomingMilestoneModel.TotalRecords // Total number of records
               
            });


           

         





        }

[Nikolay Rusev]

Hello Dhaval,

The controller implementation that you've listed doesn't seem to respect the applied groups expressions.
 Data = UpcomingMilestoneModel.UpcomingMilestone - Doesn't seem to have processed groups which will be evaluated on client. 

This is what ToDataSourceResult extension method does. You can find more details on the following articles:
 - How do I implement paging, sorting, filtering and grouping?
 - Grid Ajax Binding

Regards,
Nikolay Rusev
Telerik

 

 

[Dhaval]

After changing the code as suggesed, only the first page data loads but If I click on page 2,3,4... The data does not loads. Please correctIf i am wrong somewhere.

Changes done on code :
1)Grid uncommnted .Group(group => group.Add(c => c.WeekStartDate))
2)In the action of controller
var result = UpcomingMilestoneModel.UpcomingMilestone.ToDataSourceResult(request);
result.Total = upcomingMilestoneModel.TotalRecords;
return Json(result, JsonRequestBehavior.AllowGet); 

[Dhaval]

Note : The Total number of records is greater than the Number of rows that is brought or fetch from database.

[Dhaval]

In addition to above details, I wanted to say that.

There is Updated data in UpcomingMilestoneModel.UpcomingMilestone when Page changes but it does not assigns to the request Object in the code UpcomingMilestoneModel.UpcomingMilestone.ToDataSourceResult(request);
So, the result.Data Object comes out to be empty and second page of the Kendo Grid does not show the data.

[Nikolay Rusev]

Hello Dhval,

With current setup of the Grid and its DataSource all operations (such as paging/sorting etc.) should be handled server side. Thus the result object returned to client (usually directly by the call to ToDataSourceResult extension method) will contain only page size items in the Data property and the Total property the total count of items.

The only reason to have empty Data for second page is that `UpcomingMilestoneModel.UpcomingMilestone` doesn't have enough items for the requested page. Thus when processed `comingMilestoneModel.UpcomingMilestone.ToDataSourceResult(request);` it will be empty.

Regards,
Nikolay Rusev
Telerik

 

 

[Dhaval]

Yes, Nikolay you are correct.

There are about 1000 records in the database , but I am bringing only 10 records(Current Page record) from the DataBase. That is why only 10 records is there in the object comingMilestoneModel.UpcomingMilestone.


Thanks and Best Regards,
Chetan

[Nikolay Rusev]

Hello Chetan,

You will need to supply all items to the ToDataSourceResult in order to perform data transformations (such as paging) on correct amount of data.

Regards,
Nikolay Rusev
Telerik

 

 

[Dhaval]

Hi Nikolay Rusev,

I cannot bring the 1000 records at once, this will make the screen bulky and slow.I wanted to bring only 10 records at once and when pages changes then bring next 10 records.

Can we do the following :

 $(document).ready(function () {
$("#StudentGrid").data("kendoGrid").dataSource.Group(GroupColumn);
$("#StudentGrid").data("kendoGrid").refresh();
}
or using some other javascript apply Grouping to the Kendo Grid.

[Dhaval]

The issue is fixed.as the grid needs the data for the pages before the current page, so I am adding dummy rows in the list<class> so that the current data which is fetched from the database is available in the current page in the kendo grid.
The code for the same is below:

 public ActionResult FilteredUpcomingMilestone([DataSourceRequest] DataSourceRequest request, string TeamLeadPersonId, string ProjectManagerPersonId)
        {


            if (request.PageSize <= 0)
                request.PageSize = 10;

            //get the number of dummy records to be added, so that grouping will work with pagination.
            int intNumberOfDummyRecords = (request.Page - 1) * request.PageSize;

            var UpcomingMilestoneModel = new UpcomingMilestoneModel();
            var upcomingMilestoneModel = new PagedDataResult<UpcomingMilestoneData>();

            //add the dummy records to the List.
            var dummyrRecords = new List<UpcomingMilestoneData>(new UpcomingMilestoneData[intNumberOfDummyRecords]);
            //add the dummy records in the strating of the list.
            UpcomingMilestoneModel.UpcomingMilestone = dummyrRecords;

            if (UpcomingMilestoneModel.FirstTimeLoad) {
                //First time call, do not load the data
                UpcomingMilestoneModel.UpcomingMilestone = new List<UpcomingMilestoneData>();
            }
            else{
                //Load the data, for other events
                upcomingMilestoneModel = UpcomingDAL.GetUpcomingMilestoneData(request.ToPageDataInfo<UpcomingMilestoneData>(), TeamLeadPersonId, ProjectManagerPersonId);
                //Add the original Records for the database to the list.
                UpcomingMilestoneModel.UpcomingMilestone.AddRange(upcomingMilestoneModel.ResultList);
            }

            //Make The Global Variable to flase, after first time laod.
            UpcomingMilestoneModel.FirstTimeLoad = false;
            //convert the list to querable, to get the functionality of the ToDataSourceResult.
            IQueryable<UpcomingMilestoneData> products = UpcomingMilestoneModel.UpcomingMilestone.AsQueryable();
            DataSourceResult result = products.ToDataSourceResult(request);
            //Assign the total number of records, so that the page numbers will display in the kenod grid.
            result.Total = upcomingMilestoneModel.TotalRecords;

            return Json(result);

        }