How to add multiple rows in a gird

[Tarek]

HI

This demo shows that you can only insert one row at a time

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-template-forms/

My case is diffrent.

I have a component that displys a grid for the currencies.

above the girid is "add" button. this is the senario :

1- the user should press add button to create new row in the grid

2- the user enter the name of the currency and all other attributes

3- then the user press add button once again to insert new row , and the repeat step 2 ,and repeat step 1 again

at the end, the user press "Save" button only one time to save all the records that he insered in the grid

IS this possible in kendo grid component

if yes, do you have any demo for this

 

thank you

[Martin Bechev]

Hello Tarek,

I noticed that the same case was already discussed in a private support thread (1560241). But since this is a public forum thread and I will paste the answer here as well, to help others which looking for the same functionality.

`The demonstrated example calls the Grid addRow() method when clicking the "Add new" button. By design, the method creates a new single row that is going to be added to the Grid. If it is called a second time then a new row will be created and the old one will be removed. 

What could be done about the specified use case is to create a new custom "Add new" button. Then clicking that button should add new rows to the Grid data and put these new rows in edit mode.

Then the default behavior of the "Cancel" button can be adjusted to actually remove these new rows if clicked and the "Update" button click action can be updated to save the current record. Here is an example demonstrating such an approach:

https://stackblitz.com/edit/angular-srqbjs

Indeed, the example demonstrates a custom implementation that isn't a built-in feature of the Grid. Its purpose is to point in the right direction of achieving the requirement. Thus, overtaking such an approach is at the developer's own discretion as it isn't based on a functionality that is provided out-of-the-box.

The following Knowledge base article might be found helpful in saving multiple rows at a time:

https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base/edit-all-grid-rows/

Regards,
Martin
Progress Telerik