Update Kendo Grid selected cell value with the value in a Kendo Editor

Question

I have a Kendo Grid on my project

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

One of the columns, for example, the Naam column, looks like this

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

What it does is open an Kendo Editor in a Popup with the value of product.Naam

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

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

The popup window has a Kendo Editor, a OK and a Cancel button

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

Here is an image of my grid. The circle with the 3 dots is the button that opens the Kendo Editor

And here is a image of my Kendo Editor popup with the text already edit

So far so good. I get the Naam value in my editor.

When I click on OK, I call

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



        });

which is not finished yet;

And here is where it goes wrong. I'm struggling to update the value of Naam in the grid with the value that is on the editor.

Any ideas on how to do this??

Answer 1

You will need to pass the ID of the model to the openPopupDemo event as it will be helpful to your to store the updated value back to the grid when the Editor has updated the value.

You will need to change the Grid Column as below:

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

Changes to your onClick event:

   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 Click Logic:

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'

        });

Do let me know if there is any issue in above code.