Binding Kendo UI Grid to JSON RIA Service with Paging and Sorting

[poet_byron]

Team,
     I'm looking for a way to override the parameter names passed to the service when calling read or even just overriding the read to be able to modify the url to change it to my liking.  I would like to override the parameter so that instead of passing things like take=20 for page size, it would pass $take=20...  Thanks!

[poet_byron]

Alright, so I'm trying to do it using parameterMap, but I'm getting a javascript error on return:

<div id="grid" ></div>
<script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json", //jsonp for remote
                            transport: {
                                read: "http://mylocalservice/Services/ServiceDLLName.svc/JSON/GetMyData", 
                                parameterMap: function(options) { 
                                  return { 
                                      $take: options.pageSize
                                  } 
                                }
                            },
                            schema: {
        data: "GetMyDataResult.RootResults",
                                model: {
                                    fields: {
                                        BillCode: { type: "string" },
                                        CashDrawerCode: { type: "string" },
                                        Description: { type: "string" },
                                        StoreCode: { type: "string" },
                                        StoreName: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 400,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{field : "BillCode", Title : "Bill Code"},
       "CashDrawerCode",
       "Description",
       "StoreCode",
       "StoreName"]
                    });
                });
            </script>

[poet_byron]

What I posted actually works.  However, I'm having trouble with the following:

parameterMap: function(options) {
         return { 
          $take: options.pageSize,
          $orderby: convertSort(options.sort), // <-- This line is causing an error.
          $includeTotalCount: "True"
         }
        }

from the configuration of transport in:

http://www.kendoui.com/documentation/framework/datasource/configuration.aspx

[poet_byron]

Got sorting working...  Need to get paging working...  Here is the function I created to convert orderby (currently only works for single):

    function getOrderBy(sort) {
     if (sort != null) {  
      if(sort[0] != null) {
       return sort[0].field + '+' + sort[0].dir;
      }
     }       
     return null;   
    }

...

parameterMap: function(options) {
         return { 
          $skip: (options.page - 1) * options.pageSize, 
          $take: options.pageSize,
          $orderby: getOrderBy(options.sort),
          $includeTotalCount: "True"
         }
        }

I think to get paging working, I just need to set the total count on the grid after the callback.  Any help?

[poet_byron]

For those interested, under schema, add total:

schema: {
        data: "GetLocationsResult.RootResults",
        total: "GetLocationsResult.TotalCount",
...

Also note if you are using POCOs (not LinqToEntitiesDomainService), the total count returned (to handle paging) will only be the page count unless you add an output parameter and set it in the service:

        public IQueryable<SomeEntity> GetSomeEntity(out int count)
        {
            List<SomeEntity> tempList = domainService.GetSomeEntity;
            count = tempList.Count;
            return tempList.AsQueryable().OrderBy(t => t.SomeColumn);
        }

Great job on the kendo ui tools, guys.  Hope this has helped anyone else with their troubles connecting the Kendo UI Grid to a RIA Service JSON endpoint.  There are still some additional things that could be handled, including filtering and multiple sorting...  I will post back if / when I get that figured out.  Thanks!

[poet_byron]

I have updated the getOrderBy to handle multiple sorts:

    function getOrderBy(sort) {
     if (sort != null) {  
      if(sort.length > 0) {
       var vSortBy = "";
       for (var i = 0; i < sort.length; i++) {
        vSortBy = vSortBy + sort[i].field + '+' + sort[i].dir + ',';
       }
       
       // Remove Last ','
       vSortBy = vSortBy.substring(0, vSortBy.length - 1);
       return vSortBy;
      }
     }        
     // Replace name with the default column field to sort by.
     return "name";   
    }

Also, orderBy must occur before paging, so change parameterMap to the following:

parameterMap: function(options) {
         return {
          $orderby: getOrderBy(options.sort),
          $skip: (options.page - 1) * options.pageSize,
          $take: options.pageSize,
          $includeTotalCount: "True"
         }
        }

[poet_byron]

Here's how it looks with multi-sort and paging (for the full picture):
----------------------------------------------------------------------------

<div id="grid" ></div>
<script>
    function getOrderBy(sort) {
     if (sort != null) {  
      if(sort.length > 0) {
       var vSortBy = "";
       for (var i = 0; i < sort.length; i++) {
        vSortBy = vSortBy + sort[i].field + '+' + sort[i].dir + ',';
       }
       
       // Remove Last ','
       vSortBy = vSortBy.substring(0, vSortBy.length - 1);
       return vSortBy;
      }
     }   
     
     // Replace name with the default column field to sort by.
     return "name";   
    }
    
$(document).ready(function() {
       $("#grid").kendoGrid({
             dataSource: {
                   type: "json",
                   transport: {
                                read: "http://mylocalservice/Services/ServiceDLLName.svc/JSON/GetMyData",
                                parameterMap: function(options) {
                                      return {
                                           $orderby: getOrderBy(options.sort),
                                           $skip: (options.page - 1) * options.pageSize,
                                           $take: options.pageSize,
                                           $includeTotalCount: "True"
                                     }
                                }
                            },
                    schema: {
                                data: "GetMyDataResult.RootResults",
                                total: "GetMyDataResult.TotalCount",
                                model: {
                                    fields: {
                                        BillCode: { type: "string" },
                                        CashDrawerCode: { type: "string" },
                                        Description: { type: "string" },
                                        StoreCode: { type: "string" },
                                        StoreName: { type: "string" }
                                    }
                                }        
                            },
                            pageSize: 10,
                            serverPaging: true,
                            //serverFiltering: true,
                            serverSorting: true
                        },
                        height: 400,
                        //filterable: true,
                        sortable: {
                                mode: "multiple",
                                allowUnsort: true
                        },
                        pageable: true,
                        columns: [{field : "BillCode", title : "Bill Code"},
                                        "CashDrawerCode",
                                        "Description",
                                        "StoreCode",
                                        "StoreName"]
                    });
                });
            </script>
--------------------------------------------------------------------
Still working out filtering, which is a little more complex.