Custom edit command only launches dialog one time.

[Jordan]

To start I am super new to kendo and I have really enjoyed it.

I have written a custom edit method which launches a kendoDialog when the edit command button on the grid is clicked containing that specific grid row's data (to be edited) the issue I'm having is that it only works one time. After that, when I click edit the dialog appends to the DOM but with a display of none. So if I wanted to edit another record I would have to refresh the screen which obviously isn't ideal. I have a feeling I am just missing something and thought someone might be able to see something I'm missing/need to add. Here is the code:

 

Here is the command in my grid:

{ command: {text:"Edit", click:GetMessageToUpdate}, title: " ", width: "90px" }

 

This is the GetMessageToUpdate function:

    function GetMessageToUpdate(e) {
        e.preventDefault();
        var grid = $("#messagesGrid").data("kendoGrid")

        var obj = { messageID: grid.dataItem(e.toElement.closest("tr")).messageID };

        $.ajax({
            url: "URL_FOR_UPDATE_METHOD",
            type: "POST",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function (response) {
                $("#errorRemove").show();
            },
            success: function (response) {
                console.log(response.Data)
                let msgObj = response.Data
                renderUpdateModal(msgObj)
                $('#updateErrorMessage').hide()
                $('#updateSuccessMessage').hide()
                cache: false
            }
        })
    }

This is the code for the renderUpdateModal:

 function renderUpdateModal(obj) {
        console.log(obj)
        $("#editContainer").kendoDialog({
            width: "450px",
            title: "Edit Message",
            closable: true,
            modal: true,
            content: `Here is where the dialog code lives I didn't think it was important but if you need it I can supply it!`
          });

any help or suggestions are super appreciated. 

 

Thanks,

Jordan

[Georgi]

Hello Jordan,

We are happy to hear that you are enjoying Kendo UI.

The issue occurs since the Kendo Dialog is intialized more than once which causes same elements being rendered few times, same event handlers are being attach etc.

Instead of creating a dialog within the renderUpdateModal handler, you will have to create the dialog once and then within the handler simply open it.

e.g.

$(function(){
          $("#editContainer").kendoDialog({
            width: "450px",
            title: "Edit Message",
            closable: true,
            modal: true,
            content: `Here is where the dialog code lives I didn't think it was important but if you need it I can supply it!`
          });
})

 function renderUpdateModal(obj) {
        console.log(obj)
    $("#editContainer").data('kendoDialog').open();
}

Nevertheless, the grid actually provides Popup editing out of the box. Is there a reason to choose implementing the same yourself?

Regards,
Georgi
Progress Telerik

[Jordan]

Thanks Georgi!

The editContainer dialog needs the data in the obj being passed to the renderUpdateModal method. How might I pass those values to dialog function?

[Georgi]

Hi Jordan,

If you need the object for the content of the dialog, you could create the content within the renderUpdateModal handler and update the dialog using the content method, the open it.

Is that an option for you?

Regards,
Georgi
Progress Telerik