How can I limit the number of rows that a KendoUI Grid can have?

Question

I have a simple kendo UI grid which is supposed to have a maximum of only 5 rows. Is there any configuration property that I can use to limit the rows, or should I write some simple custom logic to examine my data source and prevent adding more than 5 rows?

Answer 1

Given the following kendoGrid definition:

var grid = $("#grid").kendoGrid({
    dataSource:stocksDataSource,
    columns   :[
        { field:"col1", title:"Column 1" },
        { field:"col2", title:"Column 2" },
        { field:"col3", title:"Column 3" }
    ],
    toolbar   :[
        { name      :"create", className :"k-grid-add2" }
    ],
    editable  :true
}).data("kendoGrid");

Where I added a create button in the toolbar but redefined its className to k-grid-add2. Then I add trap the click event on this button as follow:

$(".k-grid-add2", grid.element).bind("click", function (ev) {
    console.log("adding!");
    if (grid.dataSource.data().length < 5) {
        grid.addRow();
    } else {
        alert("Too many, sorry!")
    }
});

Where I check the number of rows and if there is less than 5 then I invoke grid.addRow() otherwise I alert user that there are too many rows.

Answer 2

If you mean that the page size should be limited to 5 rows, then you can set the pageSize option on the datasource:

$("#grid").kendoGrid({
   dataSource: {
       pageSize: 5
   }
});

http://docs.kendoui.com/api/web/grid#pageablepagesize-number