How to add more than one row at once.

[Egoitz]

Hello,

I need that every time the users clicks the the "add record" button in the child grid. a new row will be added no matter if the previous row is saved. I have a parent and a child grid, and the "save all" action happens with a button in the parent grid, also for the child grid. If i call the addRow() method, it works only for the first click on the button, but not for more. It looks like the row has to be saved first.

[Egoitz]

Sorry, i forgot the question. How can i get that behaviour? to add a new row every time the user clicks the "add record" button?

[Tsvetomir]

Hi Egoitz,

The Kendo UI Grid implements a custom editable object. In the context of the Inline and PopUp edit modes, the editable is rendered every time the user clicks on the Edit/Create button. However, it is not allowed to have multiple editable objects at once. 

What I can recommend given the information above, is the following:

1. Change the edit mode to InCell. This mode allows for having multiple rows added at once without any additional modifications.

2. Handle the mousedown/click event of the Add new record button and check if there is an actively edited row. If yes, close the row. This could be done either by calling the saveRow() method.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/saverow

I hope you find this helpful.

 

Best regards,
Tsvetomir
Progress Telerik

[Egoitz]

Hello,

 

Thanks for your answer. Still i have an issue. When closing the edit mode and saving the row of the grid, still nothing happens. No new rows are added, neither the current is closed.

Since i have the save all button in the parent row.(will save also child rows)... in order for something to happen in the child row when i call the save row method... Do i have to set this datasource update or create method and return the same object even without saving it yet? So i can see it in the grid this object and be able to add a new row?

 

Thank you.

function addNewRecord() {

        var childGrid = $('#grid5_0').data("kendoGrid");
        if ($('#grid5_0').find('.k-grid-edit-row').length) {
            console.log("Not in edit mode");
            childGrid.addRow();
        } else {
            console.log("edit mode");
            childGrid.saveRow();
            childGrid.addRow();
        }

    }

[Tsvetomir]

Hi Egoitz,

I have investigated the provided code snippets and I suspect that the if-else clause is reversed. Is it possible for you to try out the following approach?

if($("#grid5_0").getKendoGrid().editable){
        childGrid.saveRow();
        childGrid.addRow();

} else {
     childGrid.addRow(); 
}

It is important to point out that the Update/Create operations have to be implemented for both grids, otherwise, a JavaScript error might be thrown when the saveRow() method is called. Speaking of errors, can you examine the developer's tools of the browser for any exceptions?

Also, can you ensure that the ID of the grid is the correct one and targets the correct child grid? In case the issue persists, is it possible for you to provide a sample project in which the defect could be observed?

Thank you for your cooperation in advance.

 

Regards,
Tsvetomir
Progress Telerik