This is a migrated thread and some comments may be shown as answers.
how to prevent edit popUp dialog from closing
7 Answers 106 Views
This is a migrated thread and some comments may be shown as answers.
vernerm
Top achievements
Rank 1
vernerm asked on 24 Aug 2017, 01:45 PM

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.

7 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 28 Aug 2017, 11:34 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
vernerm
Top achievements
Rank 1
answered on 05 Sep 2017, 07:22 AM

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.

0
Accepted
Georgi
Telerik team
answered on 07 Sep 2017, 06:18 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
vernerm
Top achievements
Rank 1
answered on 07 Sep 2017, 12:46 PM

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.

 

0
vernerm
Top achievements
Rank 1
answered on 08 Sep 2017, 09:15 AM

Hi,

I forgot to attach the link to the video.

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

 

   Tomas.

0
vernerm
Top achievements
Rank 1
answered on 11 Sep 2017, 04:14 PM

Hello,

should I start a new thread for this question?

Thank you,

   Tomas.

0
Accepted
Viktor Tachev
Telerik team
answered on 12 Sep 2017, 10:06 AM
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.



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
vernerm
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
vernerm
Top achievements
Rank 1
Georgi
Telerik team
Share this question
or