Using the Kendo UI Grid with oData on WCF Data Services

While working on a project, one of the requirements was to implement a table that includes filtering and sorting on a collection possibly containing thousands or tens of thousands of items. I started implementing the features myself, but I was reminded that we had an available license to use the Kendo UI Grid.

The control looks good – it’s implemented as a jQuery plugin and has all the features we need. The problem was, as is usually the case when working with third-party components, integrating with our existing system. The data we need for the grid already had an OData service endpoint using WCF Data Services, and the Kendo grid is already set up to use OData as a data source.

However, when we tried to implement the grid “out of the box” we kept receiving JavaScript errors, the most prevalent of which was:

Uncaught TypeError: Cannot read property '__count' of undefined

There is a good post on the Kendo UI blog about using Kendo UI with the ASP.NET Web API, but the code given in that post didn’t fix my problem. As I mentioned, we are using WCF Data Services, not the ASP.NET Web API, for our OData service. That may be the reason the solution wasn’t working. It looked like the response I received from my data source was different than they were expecting, and I kept getting the __count error.

Using the following was the solution that worked for us:


 $(elementId).kendoGrid({
                dataSource: {
                    filter: [{ field: "ParentId", operator: "eq", value: parentId }],
                    type: "odata",
                    transport: {
                        read: "/Address/To/Service",
                        dataType: "json"
                    },
                    schema: {
                        data: function(data) {
                            return data.value;
                        },
                        total: function(data) {
                            return data['odata.count'];

                        },
                        model: {
                            fields: {
                                FieldName: { type: "string" },
                                DateField: { type: "date" },
                                NumericField: { type: "number" }
                            }
                        }
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                scrollable: {
                    virtual: true
                },
                height: 250,
                filterable: true,
                sortable: true,
                pageable: true,
                groupable: true,
                selectable: "row",
                columns: [
                    { field: "FieldName", title: "Field Name" },
                    { field: "DateField", title: "Date Field", template: '#= kendo.toString(DateField, "MM/dd/yyyy") #' },
                    { field: "NumericField", template: '#= kendo.toString(NumericField, "c2") #' }
                ]
            });

Hopefully this will help someone else running into the same issue!

Posted Monday, January 7th, 2013 under JavaScript.

5 comments

  1. My Friend!
    You made my day!!
    Thank you. Exactly what I needed!!!!

  2. francisco says:

    This also worked great with me.. but when tryin to add a http://demos.kendoui.com/web/grid/toolbar-template.html
    dropdown on the grid template.. when you try to populate the dropdown the same _count error happens and the dropdown doesnt recofnize the schema

  3. Homeropata says:

    Thanks!

    Worked me too, but a little difference:
    dataType instead of “json”, it is “odata”.

  4. Thanks you saved me my friend.

Leave a Reply