how to prevent edit popUp dialog from closing

[vernerm]

Hello,

I encountered following problem: I am using custom delete dialog with 3 buttons.

1) When I click "Odregistrovat" the edit dialog appears, I edit the entry, save, everything OK.

2) When I repeat the step 1) after click on "Odregistrovat" the edit dialog appears for only a while and disappears again and again until I refresh the page. Then it works once and for the second and next tries it does not work again.

 

Do you know how to prevent this behaviour please?

 

PS: Video with the behaviour (first attempt works, second not) is available under following link: https://ulozto.cz/!bTCTMfnQ3cbD/editpopup-problem-rar

I would like to deliver runable project, but it is quite complex and big. Is it enough to deliver only below attached .cshtml?

 

With Kind Regards,

Martin.

[Viktor Tachev]

Hi Martin,

Based on the provided information and the video the behavior can be caused by a JavaScript error. Would you open the browser console by pressing F12 and see if there are any errors listed? If there are they can point us in the right direction. 

Also, it would be great if you can assemble a small dojo sample where the issue is replicated. This will enable us to examine the behavior locally and look for its cause.


Regards,
Viktor Tachev
Progress Telerik

[vernerm]

Hello,

there are no errors in browser console (printscreen in the link). I attach the solution for you to reproduce the error. I hope it helps.

https://ulozto.cz/!GAXgNV89Prj5/popupclosing-rar

Regards,

   Martin.

[Georgi]

Hi Tomas,

Thank you for the provided sample. I have investigated it and noticed that in the click event handler function of the custom command x Smazat  buttons click event is bound to handlers. In other words, every time the custom command is clicked an event handler is added to each button inside the Kendo Window, which means that when one of those buttons is clicked each handler will execute its logic.

e.g.

function deleteInseminacniTechnik(e) { //every time this function executes the below handlers are attached
           var kendoDestroyWindow = $("#kendoDestroyWindow").data("kendoWindow");
           var tr = $(e.target).closest("tr"); // ziskani aktualniho radku
           var rowIndex = tr[0].rowIndex; // index aktualniho radku
           var data = this.dataItem(tr);

           kendoDestroyWindow.center().open();

           $('#deleteButton').on('click', function (e) {
               var grid = $('#grid').data('kendoGrid');
               grid.dataSource.remove(data);
               grid.dataSource.sync();
               kendoDestroyWindow.close();
           });

           $('#deRegisterButton').on('click', function (e) {
               e.stopPropagation();

               var grid = $('#grid').data('kendoGrid');
               //data.RegistraceDo = new Date(); // nefunguje, pri ulozeni se neprovede propis do db
               grid.editRow("#grid tr:eq(" + rowIndex.toString() + ")");
               //alert("mazu");
               //grid.dataSource.sync();
               kendoDestroyWindow.close();
           });

           $('#closeButton').on('click', function (e) {
               var grid = $('#grid').data('kendoGrid');
               grid.cancelChanges();
               kendoDestroyWindow.close();
           });
       }

Possible solution is to add a bool flag whether the event handler have already been added

e.g.

var handlersAdded = false;

       function deleteInseminacniTechnik(e) {
           var kendoDestroyWindow = $("#kendoDestroyWindow").data("kendoWindow");
           var tr = $(e.target).closest("tr"); // ziskani aktualniho radku
           var rowIndex = tr[0].rowIndex; // index aktualniho radku
           var data = this.dataItem(tr);

           kendoDestroyWindow.center().open();

           if (!handlersAdded) {
               handlersAdded = true;

           $('#deleteButton').on('click', function (e) {
               var grid = $('#grid').data('kendoGrid');
               grid.dataSource.remove(data);
               grid.dataSource.sync();
               kendoDestroyWindow.close();
           });

           $('#deRegisterButton').on('click', function (e) {

               var grid = $('#grid').data('kendoGrid');
               //data.RegistraceDo = new Date(); // nefunguje, pri ulozeni se neprovede propis do db
               grid.editRow("#grid tr:eq(" + rowIndex.toString() + ")");
               //alert("mazu");
               //grid.dataSource.sync();
               kendoDestroyWindow.close();
           });

           $('#closeButton').on('click', function (e) {
               var grid = $('#grid').data('kendoGrid');
               grid.cancelChanges();
               kendoDestroyWindow.close();
           });

           }
       }

I have modified the provided sample to apply the aforementioned solution.


Regards,
Georgi
Progress Telerik

[vernerm]

Hi,

thank you very much, that solved the problem! I would have one more question.

When creating a new entry I would like to do before-save validation on the server of the entered data and display back a dialog to the user about the result. The dialog should appear in front of the "create new" window.

    - If the validation pass the user clicks ok and the data are saved.

    - If the validation will not pass, the validation dialog will disappear and the "create new" window will not be closed to prevent entering the already filled values again.

Do you have any suggestions how to solve this problem? Do I have to create window template and do some custom command on create or is it possible to somehow tweak current pre-defined create dialog?

The above attached solution contains pre-defined create method.

Thank you for your help,

   Tomas.

 

[vernerm]

Hi,

I forgot to attach the link to the video.

https://ulozto.cz/!LJEeiDsjQXRS/createpopupclosing-mp4

 

   Tomas.

[vernerm]

Hello,

should I start a new thread for this question?

Thank you,

   Tomas.

[Viktor Tachev]

Hello Tomas,

It is recommended to open a new thread for each unrelated query you may have. This way the information in a thread will be consistent and easier to find and use as reference in the future. 

With that said, for the described functionality you can use the Remote Validation feature in the Grid component. Please check out the resources below that illustrate the functionality in more detail.

• http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/using-remote-validation-in-grid
• http://demos.telerik.com/aspnet-mvc/grid/editing-remote-validation

Regards,
Viktor Tachev
Progress Telerik