Kendo Grid:Append new rows with kendo widgets inside kendo grid always in editable mode for batch saving

Question

I am developing one application on tab key press it has to append new row with kendo widgets.After that we have to enter values in that widgets.After entering value in the last td widget in the tr,then pressing tab key it has to append another row.then we have to enter the values.The whole grid must be always in editable mode.then after exceeding 5 rows we have to batch save the datas in database.My code is

@(Html.Kendo().Grid<POC_Grid.TblProductDetails>()
    .Name("Grid")
    .Columns(column =>
    {
        column.Template(p => { }).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(Html.Kendo().AutoComplete()
                    .Name("Item")
                    .DataTextField("Item")
                    .Filter("startswith")
                    .MinLength(1)
                    .HtmlAttributes(new { style = "width:250px", tabindex = "1" })
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("getFilteredData", "Grid")
                            .Data("filterDataByText"); 
                        })
                        .ServerFiltering(true);
                    })

                    .ToClientTemplate().ToHtmlString());

        column.Template(p => { }).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(Html.Kendo().NumericTextBox<decimal>()
                    .Name("Units")
                    .Format("c")
                    .Min(0)
                    .Max(100)
                    .ToClientTemplate().ToHtmlString());
        column.Template(p => { }).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(Html.Kendo().NumericTextBox<decimal>()
                    .Name("SingleUnitPrice")
                    .Format("c")
                    .Min(0)
                    .Max(100)
                    .ToClientTemplate().ToHtmlString());
        column.Template(p => { }).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(Html.Kendo().NumericTextBox<decimal>()
                    .Name("Total")
                    .Min(0)
                    .Max(100)
                    .HtmlAttributes(new { @readonly = "readonly" })
                    .ToClientTemplate().ToHtmlString());
    })
            .Events(ev => ev.DataBound("templateScript"))

        .ToolBar(toolbar =>
        {
            toolbar.Create().Text("+").HtmlAttributes(new { @tabindex = "0" });
            toolbar.Save();
        })
        .Editable(m => m.Mode(GridEditMode.InCell))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Selectable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .Model(model =>
            {
                model.Id(p => p.Id);
            })
            .PageSize(20)
            .Create(create => create.Action("EditingPopup_Create", "Grid"))
            .Update(update => update.Action("EditingPopup_Update", "Grid"))
)

)

Here every cell of my grid i have the kendo widgets like kendo Autocomplete,kendo numeric textbox etc...I tried appending new row inside grid.

function templateScript(e) {
    $(".templateCell").each(function () {
        eval($(this).children("script").html());
    });
}
function filterDataByText() {
    return {
        search: $("#Item").val()
    };
}
$(document).keyup(function (e) {
    if (e.which == 9) {
        var grid = $("#Grid").data("kendoGrid");
        grid.addRow();
    }
})

It will just appending new rows with normal textboxes.Am thinking it is due to widgets id is not unique.Or some problems with my databound event in kendo grid.Only the last added row only showing kendo widgets other are showing normal textboxes.Orelse any other help would be appreciated.

Answer 1

I found the solution finally,for every row with every widget give different ID.That is for first row if we append kendo numeric textbox it has one ID.If we try to append second row with kendo numeric textbox,we need to give different ID dynamically.