使用Kendo Editor中的值更新Kendo Grid选定的单元格值

Question

我的项目中有一个Kendo Grid

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

它的作用是在Popup中打开一个带有product.Naam

值的Kendo编辑器

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

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

弹出窗口有一个Kendo Editor，一个OK和一个Cancel按钮

@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个点的圆圈是打开Kendo Editor

的按钮

这是我的Kendo Editor弹出窗口的图像，文本已经编辑

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

当我点击OK时，我会打电话

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



        });

尚未完成;

这就是出错的地方。我正在努力用编辑器中的值来更新网格中Naam的值。

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

Answer 1

您需要将模型的ID传递给 openPopupDemo 事件，因为当编辑器更新值时，将更新的值存储回网格会很有帮助。

您需要更改网格列，如下所示：

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

编辑弹出确定单击逻辑：

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'

        });

如果上述代码中存在任何问题，请与我们联系。