Add multiple rows with inline editing on button click

[Subin]

Hi,

I have a requirement where for first time, kendo grid should be opened in in-line editing mode with 5 columns containing dropdowns. When i click on button specifying number of rows, for example 5 then 5  new rows should be created with inline editing.

Can you please help me how can i achieve this scenario.

 

Below is how grid looks like. 

 

----------------------------------------------------------------------------------

# |  Product type| Product Name | Product Range | Quantity |   ==> this header

----------------------------------------------------------------------------------

1     dropdown |      dropdown     |    dropdown       |  dropdown - 1st row   

----------------------------------------------------------------------------------

2     dropdown |      dropdown     |    dropdown       |  dropdown - 2 nd row

 

   Button => to specify number of rows.

 

[Konstantin Dikov]

Hi Subin,

Kendo UI Grid for ASP.NET MVC does not support editors in the ClientTemplate out of the box, but you can bind them in a similar manner:

columns.Bound(p => p.UnitPrice).Width(120).ClientTemplate("<input data-role='numerictextbox' data-bind='value: UnitPrice' data-min='-99' style='width: 80px;'/>"); ;

And within the DataBound event of the grid you will have to bind the model to the template:

function dataBound(e) {
    var grid = this;
    grid.element.find("[role='row']").each(function () {
        var tr = $(this).closest('tr');
        var item = grid.dataItem(tr);
        kendo.bind($(this), item);
    });
}

As for adding multiple items, you can use the add method of the DataSource of the grid:

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-add

Best Regards,
Konstantin Dikov
Telerik by Progress