This is a migrated thread and some comments may be shown as answers.

Custom edit command only launches dialog one time.

3 Answers 28 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jordan
Top achievements
Rank 1
Jordan asked on 16 Apr 2020, 03:40 PM

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

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 20 Apr 2020, 09:32 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Jordan
Top achievements
Rank 1
answered on 20 Apr 2020, 01:36 PM

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?

0
Georgi
Telerik team
answered on 22 Apr 2020, 08:55 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Jordan
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Jordan
Top achievements
Rank 1
Share this question
or