Kendo Grid:Append 带有 kendo 小部件的新行 kendo 网格始终处于可编辑模式以进行批量保存

Question

我正在开发一个按 Tab 键的应用程序，它必须在新行中附加 kendo widgets.After 我们必须在最后一个 td 中输入值 widgets.After tr 中的小部件，然后按 Tab 键它必须附加另一个 row.then 我们必须输入 values.The 整个网格必须始终处于可编辑状态 mode.then 超过 5 行后我们必须批量保存database.My 代码中的数据是

@(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"))
)

)

我网格的每个单元格都有 kendo 小部件，例如 kendo 自动完成、kendo 数字文本框等...我尝试在网格中添加新行。

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();
    }
})

它只会添加带有正常 textboxes.Am 的新行，认为这是由于小部件 ID 不是 unique.Or 我在 kendo grid.Only 中的数据绑定事件的一些问题最后添加的行仅显示 kendo 其他显示正常的小部件 textboxes.Orelse 任何其他帮助将不胜感激。

Answer 1

我终于找到了解决方案，对于每个小部件的每一行都给出不同的 ID.That 是第一行，如果我们附加 kendo 数字文本框它有一个 ID.If 我们尝试附加第二行有kendo数字文本框，我们需要动态给不同的ID。

Kendo Grid:Append 带有 kendo 小部件的新行 kendo 网格始终处于可编辑模式以进行批量保存

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

jquery

jquery-selectors

asp.net-mvc-4

kendo-ui

kendo-grid