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

8 posts, 0 answers
  1. Wayne
    Wayne avatar
    24 posts
    Member since:
    Feb 2011

    Posted 07 Jun 2013 Link to this post

    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>

  2. Wayne
    Wayne avatar
    24 posts
    Member since:
    Feb 2011

    Posted 07 Jun 2013 Link to this post

    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?
  3. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 10 Jun 2013 Link to this post

    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!
  4. Wayne
    Wayne avatar
    24 posts
    Member since:
    Feb 2011

    Posted 10 Jun 2013 Link to this post

    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.
  5. Wayne
    Wayne avatar
    24 posts
    Member since:
    Feb 2011

    Posted 10 Jun 2013 Link to this post

    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.
  6. jp2code
    jp2code avatar
    5 posts
    Member since:
    Jan 2021

    Posted 22 Jan Link to this post

    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?

     

  7. Tsvetomir
    Admin
    Tsvetomir avatar
    837 posts

    Posted 26 Jan Link to this post

    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/.

  8. jp2code
    jp2code avatar
    5 posts
    Member since:
    Jan 2021

    Posted 26 Jan in reply to Tsvetomir Link to this post

    It looks so simple after seeing the solution. Thank you.
Back to Top