Add multiple rows with inline editing on button click

2 posts, 0 answers
  1. Subin
    Subin  avatar
    6 posts
    Member since:
    Jan 2016

    Posted 15 Jan 2017 Link to this post


    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.


  2. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 17 Jan 2017 Link to this post

    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:

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top