Kendo grid Insert new record on the last page, last row position

Question

I'm using kendo grid in inline GridEditMode and GridInsertRowPosition set to bottom. Ajax is used for the data binding. Sorting is enabled and sorted by DateTime field. Page size is set to 10.

To problem occur when there are multiple pages (more that 10 records). I have a javascript function that jumps to the last page and show new row at the bottom. But on some point sort event is triggered, and grid moves to read only mode.

Is there a possibility to prevent Grid sorting only for the case when new row is added?

Any help is welcome. Thank you!

Solution 1

You should define a custom command in your toolbar as:

toolbar   : [
    {
        name : "my-create",
        text : "Add new record"
    }
],

Then, add an event listener to it, using as selector k-grid- plus the name of the command.

$(".k-grid-my-create", grid.element).on("click", function (e) {
}

Finally we will use the ability of Kendo UI datasource for inserting in a specific point:

var dataSource = grid.dataSource;
var total = dataSource.data().length;
dataSource.insert(total, {});
dataSource.page(dataSource.totalPages());
grid.editRow(grid.tbody.children().last());

Please, realize that we should move to the last page after inserting the row. This should be ok with having columns sorted by date.

Please, check the code here: http://jsfiddle.net/OnaBai/sAVGk/

Solution 2

Check out new kendo setting: createAt

just set it to the 'bottom':

...
createAt: 'bottom',
...

Comments

[mez]

inserting a new row at bottom of the last page is working. But row do not stay in the edit mode. Immediately after new row is shown in the edit row, databound event is called which causing exiting edit mode and rebinding the grid. Am I missing something?

[OnaBai]

What do you do in dataBound handler? I cannot reproduce it. Try removing the code (leave just some alert or console.log) and try it again.

[Kind Contributor]

The OP has an MVC tag. They should use the built-in extension methods to do so. And then you can use .ToolBar(t => { t.Create().Text("Create"); })

[GP24]

This is the right answer. And if using Razor syntax: .Editable(editable => editable.CreateAt(GridInsertRowPosition.Bottom))

[Christian Droulers]

Works out of the box for me too!

[Marton Rusko]

Your example not working correctly. Just click on the coulmn header First Name once, and click Add new record button.