Paging/filtering in query string and other parameters in body?

4 posts, 0 answers
  1. Brian Vallelunga
    Brian Vallelunga avatar
    88 posts
    Member since:
    May 2008

    Posted 03 Oct 2012 Link to this post

    I have a fairly complex report I am creating that requires posting a bunch of JSON to a server. I have this up and running just fine with a data source. What I'm trying to do is to add server-side paging, into this process and am unsure how to proceed.

    I thought it might make sense to put the paging in the query string of the URL that I'm posting the JSON to, but I can't figure out how to get the data source to accomplish this. I have turned on the server paging and set the page size properly. Does Kendo see that my read endpoint is a "POST" endpoint and just ignore adding anything to the query string? Is there a way to force it to add the current page size and page to the read URL?
  2. William
    William avatar
    23 posts
    Member since:
    Jan 2012

    Posted 03 Oct 2012 Link to this post

    Brian,

    First, I would suggest getting Fiddler, so you can see what is sent when the datasource sends a request to the server.  Second, when you add the serverPaging = true, the datasource will send four parameters to the server by default (take, skip, page, pageSize).  Now, for the paging to work correctly, you will need to return the result count from the server with your results.  Below is an example of how I do this:

            $(document).ready(function () {
     
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/handlers/itemsearch.ashx",
                            dataType: "json",
                            data: {
                                sku: function () { return $("#sku").val() },
                                category: "all",
                                jewelrytype: "all",
                                lowprice: 0,
                                highprice: 10,
                                showOutOfStock: function () { return $("#showOutOfStock").val(); }
                            }
                        }                  
                    },
                    schema: {
                        data: "Results",
                        total: "Count"
                    },
                    pageSize: 100,
                    serverPaging: true,
                    serverSorting: true
                });
     
    });


    Wade
  3. Kendo UI is VS 2017 Ready
  4. Brian Vallelunga
    Brian Vallelunga avatar
    88 posts
    Member since:
    May 2008

    Posted 04 Oct 2012 Link to this post

    I have code very similar to yours, but there are a few key differences. First, I have the the read type set to "post." This causes everything to be put into the body of the request. Second, I have contentType set to "application/json; charset=utf-8" so that it serializes the body has JSON. Finally, I'm using a parameterMap function to set the data instead of the "data" option.

    I think I might just want to add all of the sorting and paging into the JSON body, as that seems easier at this point. I'd still like to know a couple of things though.

    1. Using my above setup, is it possible to have the DataSource automatically append paging and sorting to the query string?
    2. Is there a way to get the take/skip values from the DataSource manually, so I could append them to the URL by setting the "url" value to a function?
  5. William
    William avatar
    23 posts
    Member since:
    Jan 2012

    Posted 04 Oct 2012 Link to this post

    Using the code as I showed it to you, it appends the parameters to the querystring.  So there is no need to modify the url.  If you watch the request in Fiddler you get this - GET /handlers/itemsearch.ashx?sku=&category=all&jewelrytype=all&lowprice=0&highprice=10&showOutOfStock=0&take=100&skip=0&page=1&pageSize=100 HTTP/1.1  Now, if you do a post, it will send the request in the form, not the querystring.  Hope that helps.
    Wade
Back to Top
Kendo UI is VS 2017 Ready