使用 Kendo 编辑器中的值更新 Kendo Grid 选定的单元格值

Question

我的项目中有一个剑道网格

@(Html.Kendo().Grid<TekstenViewModel.Tekst>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' class='checkbox' />").Width(10).Title("Verwijderen");
            columns.Bound(product => product.Naam).Width(100).ClientTemplate("#=Naam#" + "<a class=\"meerActies iconBtn\" onclick=\"openPopupDemo('#: Naam #')\"></a>");
            columns.Bound(product => product.Waarde).Width(100).ClientTemplate("#=Waarde#" + "<a class=\"meerActies iconBtn\" onclick=\"openPopupDemo('#: Waarde #')\"></a>");
            columns.Bound(product => product.Opmerking).Width(250).ClientTemplate("#=Opmerking#" + "<a class=\"meerActies iconBtn\" onclick=\"openPopupDemo('#: Opmerking #')\"></a>");
            columns.Template(@<text></text>).ClientTemplate("<a class=\"delete iconBtn\" onclick=\"onClickDeleteResourceItem(#: ID #, '#: Naam #')\"></a>").Title("").Width(50)
                .HeaderTemplate(
                "<a class=\"undo iconBtn\" onclick=\"cancelGridChanges()\"></a>"
                + "<a class=\"save iconBtn\" onclick=\"batchSaveResourceItemsSelection()\"></a>"
                + "<a class=\"toevoegen iconBtn\" onclick=\"addNewResourceItem()\"></a>"             
                + "<a class=\"delete iconBtn\" onclick=\"batchDeleteResourceItemsSelection()\"></a>" + 
                    Html.WebCore().LinkButton(type: ButtonType.Zoeken, href: Url.Action(MVC.BeheerTeksten.ResourceItems_Read()) + "/" + Model.ToepassingsCode + "?"
                    + MVC.BeheerTeksten.ResourceItems_ReadParams.setID + "=" + Model.SetID + "&" + "Grid-mode=insert").ToHtmlString());
        })
        .Pageable()
        .Sortable()
        .Filterable()
        .Groupable()
        .Navigatable()
        .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Cell))
        .DataSource(dataSource => dataSource
            .Ajax()
            //.AutoSync(true)
            .Batch(true)

            .Model(model =>
            {
                model.Id(product => product.ID);
                model.Field(product => product.RESOURCE_SET_ID).DefaultValue(Model.SetID);
                model.Field(product => product.Type).DefaultValue(Domain.Agromilieu2.Common.Objects.Entities.Resources.ResourceType.GLOBAL_RESOURCES);
                model.Field(product => product.Taal).DefaultValue(Domain.Agromilieu2.Common.Agromilieu2Constants.Resources.DEFAULT_TAAL_CODE);
            })
            .Create(create => create.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
            .Read(read => read.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Read, MVC.BeheerTeksten.Name, new { setID = Model.SetID }))
            .Update(update => update.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
            .Destroy(destroy => destroy.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Delete, MVC.BeheerTeksten.Name))
        )
        )

其中一列，例如 Naam 列，如下所示

columns.Bound(product => product.Naam).Width(100).ClientTemplate("#=Naam#" + "<a class=\"meerActies iconBtn\" onclick=\"openPopupDemo('#: Naam #')\"></a>");

它的作用是在弹出窗口中打开一个剑道编辑器，其值为 product.Naam

function openPopupDemo(gridCellContent) {
            var editor = $("#kEditor").data("kendoEditor")
            editor.value(gridCellContent)

            domain.WebCore.popup.show("popupDemo");
        };

弹出窗口有一个剑道编辑器、一个确定和一个取消按钮

@Html.WebCore().Popup.CustomButtons("popupDemo", "Waarde", Html.Kendo().Editor().Name("kEditor").HtmlAttributes(new { style = "width:740px;height:240px" }).Tools(tools => tools
        .Clear()
        .Bold().Italic().Underline().Strikethrough()
        .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
        .InsertUnorderedList().InsertOrderedList()
        .Outdent().Indent()
        .CreateLink().Unlink()
        .InsertImage()
        .SubScript()
        .SuperScript()
        .TableEditing()
        .ViewHtml()
        .Formatting()
        .FontName()
        .FontSize()
        .FontColor().BackColor()        
      ).ToHtmlString(), new[]{new PopupButton("popupDemoAnnuleren", "Cancel", false),new PopupButton("popupDemoOk", "OK")})

这是我的网格的图像。带有 3 个点的圆圈是打开剑道编辑器的按钮

这是我的剑道编辑器弹出窗口的图像，其中的文本已经编辑

到目前为止一切顺利。我在编辑器中获得了 Naam 值。

当我点击确定时，我调用了

 domain.WebCore.popup.configure("popupDemo")
        .click(function (b) {
            var grid = $("#Grid").data("kendoGrid");                
            var editor = $("#kEditor").data("kendoEditor")



        });

还没有完成；

这就是问题所在。我正在努力用编辑器上的值更新网格中 Naam 的值。

关于如何做到这一点的任何想法？

Answer 1

您需要将模型的 ID 传递给 openPopupDemo 事件，因为它有助于您在编辑器更新值时将更新的值存储回网格。 p>

您需要按如下方式更改网格列：

  columns.Bound(product => product.Naam).Width(100).ClientTemplate("#=Naam#" + "<a class=\"meerActies iconBtn\" onclick=\"openPopupDemo('#: Naam #', '#: ID #')\"></a>");

对 onClick 事件的更改：

   var selectedGridRowID = 0;
   function openPopupDemo(gridCellContent, gridIdentifier) {   
        var editor = $("#kEditor").data("kendoEditor")   
        editor.value(gridCellContent)

        domain.WebCore.popup.show("popupDemo");

        selectedGridRowID = gridIdentifier;
    };

Editor Pop-Up OK 点击逻辑：

domain.WebCore.popup.configure("popupDemo")
        .click(function (b) {
        var grid = $("#Grid").data("kendoGrid");                
        var editor = $("#kEditor").data("kendoEditor")

        var parentItem = grid.dataSource.get(selectedGridRowID); 
        // selectedGridRowID is transfered when the popup button is clicked.

        parentItem.set("Naam", editor.value()); 
        //'Value you have updated when the editor does its work'

        });

如果上面的代码有任何问题，请告诉我。