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

鲁·马丁斯(Rui Martins)

我的项目上有剑道网格

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

它的作用是在弹出窗口中打开具有产品值的Kendo编辑器。

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

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

弹出窗口具有Kendo编辑器,“确定”和“取消”按钮

@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编辑器的按钮

在此处输入图片说明

这是我的Kendo编辑器弹出窗口的图像,其中的文本已经编辑

在此处输入图片说明

到目前为止,一切都很好。我在编辑器中获得Naam值。

当我单击确定时,我打电话

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



        });

还没有完成;

这是哪里出了问题。我正在努力用编辑器上的值更新网格中Naam的值。

关于如何执行此操作的任何想法?

D_学习

您将需要将模型的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'

        });

请让我知道以上代码中是否有任何问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Jquery设置Kendo Grid POPUP编辑器值

使用表中的选定选项计算单元格值

从HTML表格中的单元格中检索选定的值

ComboBox 中的选定值未正确插入单元格

从 DataGrid Cell 中获取选定的单元格值

在JTable中获取选定的单元格值

在选定的单元格中查找并替换多个值

从选定的(单击的)单元格中读取表标题值

Kendo Grid更新单元格中的所有行

使用VBA查找/替换选定范围内具有零值的单元格(公式单元格)

如何使用目标c在不同数组中的uitableview中获取选定的单元格值和未选定的单元格值

在使用JComboBox作为单元格编辑器的JTable单元格中编辑焦点

Kendo mvc 刷新单元格值

Kendo Grid-根据“列”单元格数据值呈现自定义HTML

如何使用数组在选定的单元格中查找/替换多个值?

如何在Angular的ag-grid中的单元格中与其他单元格值建立链接?

Angular UI-Grid:在单元格模板中,如何从其他字段/单元格访问值

Matlab:在单元格中查找选定行中特定值的范围

如何将函数应用于选定单元格中的所有值?

在Office.js Excel中获取选定单元格的值和地址

详细子窗体中的选定索引和单元格值

如何在C#中的网格视图中获取选定单元格的值

在不使用索引的情况下替换pandas DataFrame中选定单元格的值

使用pandas和pandastable将值插入选定的单元格

数据表:使用 JQuery 更改选定单元格的值

Kendo Grid:如何使用列模板以使编辑器始终可用?

Ag-grid-使用自定义单元格编辑器时是否会忽略值解析器?

Kendo Grid-动态更改每行的单元格使其可编辑/不可编辑

Kendo Grid-悬停获取单元格索引