how to prevent edit popUp dialog from closing

8 posts, 2 answers
  1. vernerm
    vernerm avatar
    5 posts
    Member since:
    Oct 2016

    Posted 24 Aug 2017 Link to this post

    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.

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2501 posts

    Posted 28 Aug 2017 Link to this post

    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.
  3. vernerm
    vernerm avatar
    5 posts
    Member since:
    Oct 2016

    Posted 05 Sep 2017 Link to this post

    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.

  4. Answer
    Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 07 Sep 2017 Link to this post

    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.
  5. vernerm
    vernerm avatar
    5 posts
    Member since:
    Oct 2016

    Posted 07 Sep 2017 in reply to Georgi Link to this post

    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.

     

  6. vernerm
    vernerm avatar
    5 posts
    Member since:
    Oct 2016

    Posted 08 Sep 2017 in reply to vernerm Link to this post

    Hi,

    I forgot to attach the link to the video.

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

     

       Tomas.

  7. vernerm
    vernerm avatar
    5 posts
    Member since:
    Oct 2016

    Posted 11 Sep 2017 in reply to vernerm Link to this post

    Hello,

    should I start a new thread for this question?

    Thank you,

       Tomas.

  8. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2501 posts

    Posted 12 Sep 2017 Link to this post

    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.
Back to Top