javascript - 我正在寻找一种同时使用 "In-Cell"和 "Popup"编辑剑道网格的方法

Question

我希望在添加新记录时进行“Popup”编辑，而“InCell”用于所有其他编辑。我在这里看到了使用“Popup”和“InLine”完成此操作的方法示例，但还没有看到有关如何实现我正在尝试做的事情的任何解决方案。我的 Kendo Grid 位于 Kendo 弹出窗口内，我可以打开“弹出”编辑器，但在调用父弹出窗口之前只打开一秒钟。我读到这被调用是因为子弹出窗口正在更新父弹出窗口。我的想法是调用 Kendo read() 作为子窗口的 onClose 事件来更新父窗口。我将不胜感激任何帮助，或者如果有人能指出我正确的方向。这是我在父弹出窗口上的网格。

        @(Html.Kendo().Grid<DAX.Models.CsvSubmittal>()
            .Name("CsvGrid")
            .HtmlAttributes(new { style = "height:800px; margin-top:-90px" })
            .Columns(column =>
            {
                column.Bound(p => p.CsvSubmittalID).Hidden();
                column.Bound(p => p.SpecSection).Title("Spec Section").Width(100).Format("{0:000000}");
                column.Bound(p => p.SpecTitle).Title("Spec Title").Width(150);
                column.Bound(p => p.SubmittalDescription).Title("Submittal Description").Width(200);
                column.Bound(p => p.Subcontractor).Title("Subcontractor").Width(150);

                column.Bound(p => p.SubmissionDueDate).Title("Due Date").Width(100)
                    .ClientTemplate("#= SubmissionDueDateTemplate(SubmissionDueDate) #");

                column.Bound(p => p.ReviewCompleteDate).Title("Complete Date").Width(100)
                    .ClientTemplate("#= ReviewDateTemplate(ReviewCompleteDate) #").Format("{0:MM/dd/yyyy}");

                column
                    .Template(@<text></text>).Width(90)

                    .ClientTemplate("<div style='text-align:center; cursor:pointer '><a class=ActionbuttonDelete onclick=\"MyDeleteTemplate('#=CsvSubmittalID#')\">[Delete]</a></div>");  
            })

                .Reorderable(reorder => reorder.Columns(false))
                .Resizable(resize => resize.Columns(true))
                .Scrollable(scrolling => scrolling.Enabled(true))   
                .Navigatable()
                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                    .ToolBar(toolbar =>
                    {
                        toolbar.Custom().Text("Add New Record").Name("popup").HtmlAttributes(new { style = "font-size: 0.95em", id="popup" })/*.Url(Url.Action("CreateRow", "Project", new { projID = Model.ProjectID }))*/;
                        toolbar.Save();
                    })

            .DataSource(datasource => datasource
                                .Ajax()
                                .ServerOperation(false)

                                //.Create(create => create.Action("CreateCsvRow", "Project", new { id = @Model.ProjectID }))

                                .Read(read => read.Action("GetCsvFileData", "Project", new { projectID = @Model.ProjectID }).Type(HttpVerbs.Get))
                                .Update(update => update.Action("UpdateCsvFileData", "Project", new { csvSubmittalID = @Model.CsvSubmittalID }))
                                //.Destroy(destroy => destroy.Action("DeleteCsvRow", "Project", new { csvSubmittalID = @Model.CsvSubmittalID }))
                                .Model(model => model.Id(p => p.CsvSubmittalID))

                                )
)   

这是我的 javascript 函数:

   var myGrid = $('#CsvGrid').data('kendoGrid').dataSource;

$("#popup").on("click", function () {

    var grid = $("#CsvGrid").data("kendoGrid");

    $(".k-grid-popup", grid.element).on("click", function () {
        debugger;
        grid.options.editable = "popup";
        grid.addRow();
        grid.options.editable = "incell";
    });
});


function onClose(e)
{
    myGrid.read();
}

我已经看到使用“Popup”和“InLine”完成此操作。不确定为什么这种替代组合会遇到所有困难。如果有任何方法可以禁用父 Popup 上的所有监听器，那么也许我可以成功地允许用户填写新记录，然后调用 read() ....

Answer 1

我终于向 Telerik 提交了支持票，得到的回复是......

“网格只能使用其内置编辑模式之一，并且不支持动态切换它们，除非您使用 setOptions()，在这种情况下这不是一个真正的选项，因为它将重新创建网格在不合适的时间。”

实现我所尝试的唯一方法是......

“破解网格以同时使用两种编辑模式。我将向您展示如何操作，但请记住，我们并不声称这将适用于所有场景或 future 的 Kendo UI 版本，并且您您可以自行承担使用此方法的风险。”

然后我得到了以下算法...

• 将可编辑模式设置为“内联”
• 为“添加新记录”命令使用自定义工具栏按钮 - 您已经有了。
• 自定义按钮将打开一个通用的 Kendo UI 窗口，其中包含自定义编辑表单。
• 提交表单时，使用 Grid dataSource API 添加/插入新的数据项
• 执行 Grid 的 saveChanges 方法

我尝试过类似的事情，但由于 future 的更新与我的解决方案冲突，我选择不在我的情况下实现此功能。希望这对可能发现自己处于相同情况的人有所帮助。