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

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

6 Answers 273 Views
Grid
This is a migrated thread and some comments may be shown as answers.
poet_byron
Top achievements
Rank 1
poet_byron asked on 18 Sep 2012, 02:01 PM
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!

6 Answers, 1 is accepted

Sort by
0
poet_byron
Top achievements
Rank 1
answered on 18 Sep 2012, 02:25 PM
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>
0
poet_byron
Top achievements
Rank 1
answered on 18 Sep 2012, 02:33 PM
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
0
poet_byron
Top achievements
Rank 1
answered on 18 Sep 2012, 03:22 PM
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?
0
poet_byron
Top achievements
Rank 1
answered on 18 Sep 2012, 05:12 PM
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!
0
poet_byron
Top achievements
Rank 1
answered on 18 Sep 2012, 08:14 PM
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"
         }
        }
0
poet_byron
Top achievements
Rank 1
answered on 19 Sep 2012, 07:04 PM
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.
Tags
Grid
Asked by
poet_byron
Top achievements
Rank 1
Answers by
poet_byron
Top achievements
Rank 1
Share this question
or