Grid Footer "No items to display" and page number 0

2 posts, 0 answers
  1. önder
    önder avatar
    1 posts
    Member since:
    Jul 2018

    Posted 08 Jul Link to this post

    http://dojo.telerik.com/izOFU

     

    I'm trying to be a kendo right now. I found it very successful. In the above example I get the error "There are no items to view" when I turn the code below. Also, the page number is 0.

     

     

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Untitled</title>

        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script></head>
      <body>
        <div id="grid"></div>
        <script>
          $("#grid").kendoGrid({
            dataSource: {
              data: {
                "items" :[
                  {
                    "employee": "John Doe",
                    "team": "INFRASTRUCTURE"
                  },
                  {
                    "employee": "Jane Doe",
                    "team": "INFRASTRUCTURE"
                  }
                ]
              },
              schema: {
                data: "items"
              }
            },
            height: 540,
            sortable: true,
            reorderable: true,
            groupable: {
                messages: {
                    empty: "Gruplandırılacak Kolonları Buraya Sürükleyin."
                }
            },
            resizable: true,
            filterable: true,
            columnMenu: true,
            pageable: {
                info: true,
                previousNext: true,
                numeric: true,
                pageSize: 2,

                messages: {
                    display: "Showing {0}-{1} from {2} data items",
                    itemsPerPage: "Kayıt Sayısı"
                }
            },
            noRecords: {
                template: "No data available on current page. Current page is: #=this.dataSource.page()#"
            },
            scrollable: {
                endless: true
            },
            columns: [
              {
                field: "employee",
                title: "Employee"
              },
              {   field: "team",
               title: "Team",
              }
            ]
          })
        </script>
      </body>
    </html>

  2. Tsvetina
    Admin
    Tsvetina avatar
    2329 posts

    Posted 10 Jul Link to this post

    Hello önder,

    The Grid needs to know the total number of items in order to calculate the number of pages to display in the pager. If the data is assigned directly as an array, the DataSource uses its length, but since the sample code uses an object with an items array, the schema.total should be set manually:
    dataSource: {
      data: {
        "items" :[
          {
            "employee": "John Doe",
            "team": "INFRASTRUCTURE"
          },
          {
            "employee": "Jane Doe",
            "team": "INFRASTRUCTURE"
          }
        ]
      },
      schema: {
        data: "items",
        total: function(data){ return data.items.length; }
      }
    }

    Here is the full working example:
    http://dojo.telerik.com/@tsveti/oYUqOJIr

    Let me know if you have additional questions about the Grid binding configuration.

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top