CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
Lars335
Lars335

Reputation: 1880

Kendo UI Grid, scrollable without pager

I have a small grid that only has vertical space to display 10 records. A vertical scroll bar should be able to be used to navigate beyond the first 10 records. I do not want a pager in the grid.

I am having trouble getting it to work (the grid is not scrollable):

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
      },
       schema: {
          model: {
              fields: {
                  OrderID: { type: "number" },
                  Freight: { type: "number" },
                  ShipName: { type: "string" },
                  OrderDate: { type: "date" },
                  ShipCity: { type: "string" }
              }
          }
      },
      pageSize: 10,
    },
    pageable: false,
    scrollable: true, 
    columns: [{
            field:"OrderID",
            filterable: false
        },
        "Freight",
        {
            field: "OrderDate",
            title: "Order Date",
            width: 120,
            format: "{0:MM/dd/yyyy}"
        }, {
            field: "ShipName",
            title: "Ship Name",
            width: 260
        }, {
            field: "ShipCity",
            title: "Ship City",
            width: 150
        }
    ]
  });
});

As you can see, I am setting pageable to false and scrollable to true, but again, there is no way to scroll the grid.

Here is a plunker: http://plnkr.co/edit/JlMsPa4tey4NBsQbsNp5?p=preview

Upvotes: 1

Views: 1613

Answers (1)

Lars335
Lars335

Reputation: 1880

I got this working. I had to set the height as well:

pageable: false,
scrollable: true, 
height: 300,

http://plnkr.co/edit/JlMsPa4tey4NBsQbsNp5?p=preview

Upvotes: 4

Related Questions