Server Side Filtering and Paging

[AP]

I have a working asmx web service, which returns JSON data, feeding a grid via a datasource:-

var dataSource = new kendo.data.DataSource({

       transport: {

           read: {

               type: "GET",

               url: "http://localhost:51465/WidgetService.asmx/GetPatients",

               contentType: 'application/json',

               datatype: "json"

           }

 

       },

        

       serverPaging:false,

        

       schema: {

 

           data: "d"

 

       }

       , pageSize: 10

   });

This works fine.  However , when I try to pass a parameter to the asmx service (to enable server side filtering), like this:-

var dataSource = new kendo.data.DataSource({

       transport: {

           read: {

               type: "GET",

               url: "http://localhost:51465/WidgetService.asmx/GetPatientsFiltered",

               contentType: 'application/json',

               datatype: "json",

 

               data: { srchFilter: "blue" }

           }

       },

     

       serverPaging:false,

        

       schema: {

           data: "d"

       }

       , pageSize: 10

   });

I get an Invalid JSON primitive error.  Using fiddler, I can see that the call to the web service is http://localhost:51465/WidgetService.asmx/GetPatientsFiltered?srchFilter=blue&take=10&skip=0&page=1&pageSize=10
, but as it's a JSON call, it isn't encoded correctly. How can I correctly format the call?
Also, even though server side paging is set to false, it's passing the paging parameters - the only way to stop this is to remove the pageSize setting, which then removes client-side paging on the grid.  How can I fix this.

It would be really helpful to have a lot fuller documentation on the datasource, including all the options and parameters that can be used, and the sort of services it is expecting (i.e. parameter names / formatting etc..). Currently I feel as if I'm stumbling around in the dark (and most examples on the web either relate specifically to jquery, or asp.net AJAX).

Thanks

[Atanas Korchev]

Hello Ap,

 ASMX web services need their parameters encoded as JSON. By default $.ajax (which the datasource uses under the hood) does not do that. You need to create a parameterMap for your transport and encode the data:

transport: {
      read: {
          url: "http://localhost:62639/WebService1.asmx/Products",
          contentType: 'application/json; charset=utf-8',
          type: "POST",
          dataType: "json",
          data: { filter: "blue" }
      },
      parameterMap: function (options) {
          return JSON.stringify(options);
      }
  }

Find attached a running sample.

Best wishes,
Atanas Korchev
the Telerik team

[AP]

Thanks for this, I've successfully passed the parameter to the service, but I had to change to a POST request, it wasn't working with a GET.

However although the grid is populated, the paging numbers at the bottom of the grid don't show until the grid is sorted or grouped.

Is this a bug, or do I need to do something else?

Thanks

[Atanas Korchev]

Hi Ap,

There is currently an issue which manifests in this way. To mitigate it you need to define total in your datasource's schema as shown in the sample project.

Regards,
Atanas Korchev
the Telerik team

[AP]

Thanks, it's working now.

[Anirban]

Hi,

I have figured it how the dynamic values will be posted.

Javascript Side:
*********************************************************************

that.element.empty();
                    that.element.kendoGrid({
                        dataSource: {
                            type: "json",
                            transport:  { read: { url:"UserAdmin/ListUsersJSONData", dataType: "json" } },
                            pageSize: 5,
                            serverPaging: true,
                            serverSorting: true
                        },
                        pageable: true,
                        sortable:true,
                        columns: [{ field: "FirstName", title: "First Name" }, { field: "LastName", title: "Last Name"}]
                    });

********************************************************************
Server Side:
 public ActionResult ListUsersJSONData(string page)
        {           
            return Json(GetUsers(), JsonRequestBehavior.AllowGet);           
        }


Now, the problem I am facing is that the URL that is passed to the server side is : 
http://localhost:57319/UserAdmin/ListUsersJSONData?take=5&skip=0&page=1&pageSize=5&sort%5B0%5D%5Bfield%5D=LastName&sort%5B0%5D%5Bdir%5D=asc&group=

From this URL I am unable to take out the sort details.

Could you please let me know how to proceed further .

Thanks
Anirban

[Mangesh]

Hi,

transport: {
      read: {
          url: "http://localhost:62639/WebService1.asmx/Products",
          contentType: 'application/json; charset=utf-8',
          type: "POST",
          dataType: "json",
          data: { filter: "blue" }
      },
      parameterMap: function (options) {
          return JSON.stringify(options);
      }
  }

in above example, I wanna pass value from querystring in data field. How should I pass it? in this case, I wanna pass Request.QueryString["somevalue"] instead of "blue". ?

Kind Regards,
Mangesh

[Jorge]

hi Atanas Korchev, i've been download the example (WebApplication2.zip) but send to me many errors but watching the entire project, the webservice didn't has had defined a constructor, when i put it on it, all data in webservice was showed on the grid. Look the image attachted & thanks for share that example, help me a lot to train myself on Kendo's Grid...

[Long]

Complete with server side code for MVC3 actions returning JSON results to bind Kendo UI Grid master and detail grid.

http://blog.longle.net/2012/02/28/kendo-ui-grid-detail-template-tabstrip-with-mvc3-and-json/

[Long]

fully documented on how to do this with MVC and EF4 and Dynamic LINQ:

http://blog.longle.net/2012/04/13/teleriks-html5-kendo-ui-grid-with-server-side-paging-sorting-filtering-with-mvc3-ef4-dynamic-linq/#comments