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

Configure the Kendo UI DataSource, so it would issue requests only for specific (displayed) fields?

2 Answers 220 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Ronalds
Top achievements
Rank 1
Ronalds asked on 01 Jun 2012, 01:41 PM
In my instance, a Kendo UI grid is bound to a OData service. The service exposes a table with many (200+) fields. The app allows users to configure displayed field set of the Grid, set initial filters and sort parameters. The app configures the Grid, which then goes off and queries OData service. 

The grid kendo.Data.DataSource is defined as:

var gridDataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: {
            url: "@Url.Content(dynDataSource.Url)",
            contentType: "application/json; charset=utf-8",
            type: "GET",
            dataType: "json"
        }
        },
    pageSize: @Model.MaxPageSize,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    filter: ...
}

Here's a sample request issued by the Grid (captured by Firebug):
http://localhost:22411/Data/Comp?%24inlinecount=allpages&%24top=1000&%24filter=DistrictCode+eq+%27460800%27

This returns all the fields of the table, which is a problem. The fields need to be limited by selecting only the required fields, the request for which would look like:
http://localhost:22411/Data/Comp?%24inlinecount=allpages&%24top=1000&%24filter=DistrictCode+eq+%27460800%27&%24select=DistrictCode,DistrictName,DistrictNumber

Again, how to configure the grid for this to happen?

2 Answers, 1 is accepted

Sort by
0
Ronalds
Top achievements
Rank 1
answered on 01 Jun 2012, 02:13 PM

I think I've got a workable solution for this myself. I used an idea from this blog post: 

http://community.dynamics.com/product/crm/crmtechnical/b/zhongchenzhoustipstricksandportaldevelopment/archive/2012/05/20/how-to-use-kendo-ui-datasource-kendo-ui-grid-with-dynamics-crm-2011-rest-endpoint.aspx

I attach an event handler the ajaxSend event, watch for my OData Service URL, and once such a request is detected, append the select column list to the URL. Here's the code:

$(document).ajaxSend(function (e, jqxhr, settings) {
      if (settings.url.toLowerCase().indexOf("@Url.Content(dynDataSource.Url)".toLowerCase()) >= 0) {
          settings.url += "&%24select=@requestColumnList";
      }
});

Hope this helps. Still, if someone has got a better solution, I'd like to hear it.

0
Dincer
Top achievements
Rank 1
answered on 13 Jul 2012, 05:30 PM
If you are using WCF Data Services there is an easier solution. Using transport property of datasource and adding a small code on JSONPSupportInspector. Here is the code:

on datasource definition:
transport: {
                   dataType: "odata",
                   read: { url: "productlister.svc/Product", data: { select: function () { return "ProductId,ProductPrice,ProductMetal"; } } }
               }

on AfterReceiveRequest method of JSONPSupportInspector
match.QueryParameters.Remove("$format");
var fields=match.QueryParameters.Get("select");
match.QueryParameters.Remove("select");
match.QueryParameters.Add("$select",par);

With this way you don't have to check each ajax request.

Tags
Data Source
Asked by
Ronalds
Top achievements
Rank 1
Answers by
Ronalds
Top achievements
Rank 1
Dincer
Top achievements
Rank 1
Share this question
or