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

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

7 Answers 1661 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Wayne
Top achievements
Rank 1
Wayne asked on 07 Jun 2013, 08:49 PM
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>

7 Answers, 1 is accepted

Sort by
0
Wayne
Top achievements
Rank 1
answered on 07 Jun 2013, 09:31 PM
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?
0
Nikolay Rusev
Telerik team
answered on 10 Jun 2013, 05:57 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Wayne
Top achievements
Rank 1
answered on 10 Jun 2013, 04:53 PM
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.
0
Wayne
Top achievements
Rank 1
answered on 10 Jun 2013, 04:58 PM
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.
0
jp2code
Top achievements
Rank 1
Veteran
answered on 22 Jan 2021, 05:49 PM

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?

 

0
Tsvetomir
Telerik team
answered on 26 Jan 2021, 02:44 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
jp2code
Top achievements
Rank 1
Veteran
answered on 26 Jan 2021, 04:14 PM
It looks so simple after seeing the solution. Thank you.
Tags
Grid
Asked by
Wayne
Top achievements
Rank 1
Answers by
Wayne
Top achievements
Rank 1
Nikolay Rusev
Telerik team
jp2code
Top achievements
Rank 1
Veteran
Tsvetomir
Telerik team
Share this question
or