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

Server Side Filtering and Paging

9 Answers 1517 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 05 Dec 2011, 04:18 PM
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

9 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 08 Dec 2011, 09:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
AP
Top achievements
Rank 1
Veteran
answered on 08 Dec 2011, 11:20 AM
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
0
Accepted
Atanas Korchev
Telerik team
answered on 08 Dec 2011, 11:34 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
AP
Top achievements
Rank 1
Veteran
answered on 08 Dec 2011, 11:41 AM
Thanks, it's working now.
0
Anirban
Top achievements
Rank 1
answered on 19 Dec 2011, 07:20 PM
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

0
Mangesh
Top achievements
Rank 1
answered on 23 Dec 2011, 11:09 AM
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
0
Jorge
Top achievements
Rank 1
answered on 08 Jan 2012, 03:55 PM
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...
0
Long
Top achievements
Rank 1
answered on 28 Feb 2012, 10:48 PM
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/
0
Long
Top achievements
Rank 1
answered on 14 Apr 2012, 10:32 AM
Tags
Data Source
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Atanas Korchev
Telerik team
AP
Top achievements
Rank 1
Veteran
Anirban
Top achievements
Rank 1
Mangesh
Top achievements
Rank 1
Jorge
Top achievements
Rank 1
Long
Top achievements
Rank 1
Share this question
or