How to get the total count out of JSON oData using the Kendo Grid Html Helper.

[Rob]

Hi,

I am having problems getting the total count field from JSON odata using the Html Helper for the Kendo Grid. Getting the odata.count value using JavaScript is fine though but our preference is to use the MVC html helper. The following is both examples:

 

Using MVC Html Helper produces the following JavaScript error: Uncaught TypeError: Cannot read property 'count' of undefined. See the Schema property for where we are trying to get the oData.count.

@(Html.Kendo().Grid<DataObject>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.Field1).Filterable(false);
        columns.Bound(e => e.Field2);
        columns.Bound(e => e.Field3);
    })
    .DataSource(dataSource => dataSource
        .Custom()
        .Type("odata")
        .Schema(schema =>
        {
            schema.Data("value")
                 .Total("odata.count");
        })
        .Transport(transport =>
        {
            transport.Read(read => read.Url("/odata/DataUrl).DataType("json"));
        }
        )
        .PageSize(5)
        .ServerPaging(true)
        .ServerSorting(true)
        .ServerFiltering(true)
    )
    .Pageable()
    .Sortable()
    .Filterable()
)

Using the following JavaScript works:

$(".grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: {
                        url: "/odata/DataUrl",
                        dataType: "json"
                    }
                },
                schema: {
                    data: function(data) {
return data['value'];
                    },
                    total: function(data) {
                        return data['odata.count'];
                    },
                    model: {
                        fields: {
                            Field1: { type: "date" },
                            Field2: { type: "string" },
                            Field3: { type: "string" },
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [
                {
                    field: "Field1",
                    filterable: false,
                    format: "{0:MMM dd, yyyy}"
                },
                {
                    field: "Field2",
                    filterable: false
                },
                {
                    field: "Field3",
                    filterable: false
                }
            ]
        });

JSON

{
  "odata.metadata":"http://localhost:15649/odata/$metadata#​DataUrl","odata.count":"100","value":[
    {
      "​Field1":"2015-07-21T11:45:38.927"
      ,"​Field2":"2015-07-21T11:33:41.067"
      ,"​Field3":"2015-07-21T11:45:35.993"
    }
    ...
  ]}

 

Looking in the documentation there are only examples of this using javascript, are there some examples using the html helpers as well somewhere? Any pointers in the right direction are welcome.

thanks,

Rob

[Alexander Popov]

Hi Rob,

The Custom DataSource builder allows a JavaScript function to be used for the schema.total through a method override. For example: 

.Total(@<text>function(data) { return data['odata.count']; }</text>))

Regards,
Alexander Popov
Telerik