Grid says "No items to display", but the request and response look fine.

[Wayne]

I have the following view (following the guidance here: http://www.kendoui.com/blogs/teamblog/posts/12-10-25/using_kendo_ui_with_mvc4_webapi_odata_and_ef.aspx), and although I can see in Fiddler that the OData request is correct and sends back what looks to be perfectly good JSON, the grid remains empty with "No items to display". What am I missing?

    

<div id="grid"></div>

<script>
    $(function() {
        $("#grid").kendoGrid({
            dataSource: {
                serverFiltering: true,
                serverPaging: true,
                serverSorting: true,
                type: "odata",
                transport: {
                    read: {
                        url: "/api/LegalEntity",
                        dataType: "json"
                    },
                    parameterMap: function(options, type) {
                        var paramMap = kendo.data.transports.odata.parameterMap(options);
                        delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
                        delete paramMap.$format; // <-- remove format parameter.
                        return paramMap;
                    }
                },
                schema: {
                    model: {
                        fields: {
                            Name: { type: "string" }
                        }
                    },
                    data: function(data) {
                        return data; // <-- The result is just the data, it doesn't need to be unpacked.
                    },
                    total: function(data) {
                        return data.length; // <-- The total items count is the data length, there is no .Count to unpack.
                    }
                },
                pageSize: 10
            },
            height: 430,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{
                field: "Name",
                filterable: true
            }]
        });
    });
</script>

[Wayne]

Never mind - my JSON was in fact not properly formed.

Now I see the first page of data ("1 - 10 of 10"), but the paging in the grid seems to be disabled - is that because I don't see the inline count?

[Nikolay Rusev]

Hello Wayne,

When using serverPaging: true the response must contain details about total row count, otherwise the pager will not be properly formed.

Regards,
Nikolay Rusev
Telerik

[Wayne]

Nikolay,
What form does the count need to take in this case?
The grid shows the first page correctly (but not the count/page count) with a response shaped like this:

[ { property: value, property: value }, { property: value, property: value } ]

But if I send back something like this:

{ "Results": [ { property: value, property: value }, { property: value, property: value } ], "Count": N }

The grid displays nothing.

[Wayne]

Never mind - realized I hadn't updated my view to change the schema of the response data to point to the Results and the Count. I have it working now.

[jp2code]

Hi.

I have a Kendo Grid that uses the Endless Scrollable feature, so the paging data is likely not applicable. How do I clear that data?

I found the text "No items to display" in the file `kendo.all.min.js`. Here is where I attempted to clean it up to see what it is doing (line 4):

kendo.all.min.js:

01.messages:{
02.    allPages:"All",
03.    display:"{0} - {1} of {2} items",
04.    empty:"No items to display",
05.    page:"Page",
06.    of:"of {0}",
07.    itemsPerPage:"items per page",
08.    first:"Go to the first page",
09.    previous:"Go to the previous page",
10.    next:"Go to the next page",
11.    last:"Go to the last page",
12.    refresh:"Refresh",
13.    morePages:"More pages"
14.}

 

Here is where I tried to clear that line in my Razr code (line 16):

Index.cshtml

01.@(Html.Kendo().Grid<DataAnalysis.Domain.GapMeter>()
02..Name("grid")
03..Columns(c => {
04.    c.Bound(o => o.Parent).Title("Parent");
05.    c.Bound(o => o.Account).Title("Account");
06.    c.Bound(o => o.CustomerName).Title("Customer Name");
07.    c.Bound(o => o.Address).Title("Address");
08.    c.Bound(o => o.MeterNumber).Title("Meter Number");
09.    c.Bound(o => o.MeterType).Title("Meter Type");
10.    c.Bound(o => o.StartDate).Title("Start Date");
11.    c.Bound(o => o.EndDate).Title("End Date");
12.    c.Bound(o => o.Count).Title("Count");
13.})
14..Sortable(o => o.SortMode(GridSortMode.SingleColumn))
15..Pageable(p => p.Numeric(false).PreviousNext(false))
16..Messages(m => m.NoRecords(""))
17..Resizable(resizable => resizable.Columns(true))
18..Scrollable(s => s.Endless(true))
19..ToolBar(x => x.Custom().Text("Export").HtmlAttributes(new { href = "#", id = "export" }))
20..DataSource(dataSource => dataSource
21.    .Ajax()
22.    .Read(read => read.Action("ReadReport", "Report"))
23.    .PageSize(20)
24.    .Events(e1 => {
25.        e1.RequestStart("onDataBound");
26.        e1.Error("onError");
27.    })
28.    .ServerOperation(false) // Paging, sorting, filtering and grouping is done client side
29.)
30..AutoBind(false)
31..Events(e => e.DataBound("onDataBound"))
32..NoRecords(x => x.Template("<div><span class='empty-span' style='font-weight: bold; padding: 1em; line-height: 3em;'></span></div>")))

 

As you can see in the attached image, I was unsuccessful.

 

How do I clear out this message when I am not using the PAGING feature?

 

[Tsvetomir]

Hi,

When the pager component is not needed at all, you can directly disable it. As it would only be polluting the appearance without having any particular functions:

        .Pageable(pageable => pageable.Enabled(false))

 

Kind regards,
Tsvetomir
Progress Telerik

[jp2code]

It looks so simple after seeing the solution. Thank you.