How to prevent editor from closing?

14 posts, 0 answers
  1. Grzegorz
    Grzegorz avatar
    3 posts
    Member since:
    Mar 2011

    Posted 02 Oct 2013 Link to this post

    I'm using kendo scheduler and I want to use server validation. When server returns validation error (via ModelState - ToDataSourceResult extension) then I want to show them in popup. Now I have problem how to prevent editor window to be closed?

    I have following code (it works for grid popup editor and server validation errors):
    onError: function (args) {
      if (args.errors) {
        var scheduler = $("#scheduler").data("kendoScheduler");
     
        scheduler.one("dataBinding", function (e) {
          e.preventDefault(); // cancel grid rebind if error occurs - this prevents window to closing 
     
          /* some error handling */
        });
      } else {
        alertify.error("Unknown error occurred");
      }
    }
    I found following code which looks like a bug. This is "refresh" method od scheduler. I think that it should check result of trigger("dataBinding") and call _destroyEditable when event wasn't prevented:
    this.trigger("dataBinding");
     
    if (!(e && e.action === "resize" && this.editable)) {
      this._destroyEditable();
    }
    Here's code from grid which works good:
    if (that.trigger("dataBinding", { action: e.action || "rebind", index: e.index, items: e.items })) {
      return;
    }
    I'm using kendo version 2013.2.918.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2204 posts

    Posted 02 Oct 2013 Link to this post

    Hi Grzegorz,

    Currently the DataBinding event cannot be prevented, however this feature will be available in next KendoUI Internal releases to the end of next week.  

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Aaron
    Aaron avatar
    3 posts
    Member since:
    Nov 2013

    Posted 17 Jul 2014 in reply to Vladimir Iliev Link to this post

    Vladimir,

    Can you tell me what version preventDefault can be called in?
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2204 posts

    Posted 18 Jul 2014 Link to this post

    Hi Aaron,

    The DataBiding event can be prevented from Q3 2013 release, however I would strongly suggest to upgrade to the latest official release of Telerik UI for ASP.NET MVC (formerly Kendo UI for ASP.NET MVC) as it contains several fixes and performance improvements.

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Edward
    Edward avatar
    33 posts
    Member since:
    Aug 2014

    Posted 28 Aug 2014 in reply to Vladimir Iliev Link to this post

    Is preventing the dialog from closing available in the latest release?  If so how do you accomplish it?
  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2204 posts

    Posted 29 Aug 2014 Link to this post

    Hi Matt,

    You can check the first post in this thread as it actually contains example code that works as expected (to prevent the closing) using the latest official release of Telerik UI for ASP.NET MVC (Q2 2014). Also you can check this example in our CodeLibrary as the same approach can be used for the Scheduler.

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Yordan
    Yordan avatar
    14 posts
    Member since:
    Jan 2013

    Posted 23 Sep 2014 in reply to Vladimir Iliev Link to this post

    Hi Vlado,
    sorry but I didn't see you answer the people above. I have the same issue now. I have a Kendo Scheduler and I want to NOT CLOSE the editor dialog in case a server side error (server validation occurs). You answered that we should follow the first posting in this post, which is basically nothing. (some code snippets from somebody that just wrote something, unknown for where to put/handle/etc...)
    But., you guys, at Telerik, have a very nice feeling about how to play with Q1, Q2, Q3 etc... People have asked you a question, you start talking about Qs.
    Q:Can you tell me how to NOT close the Editor, when I click button SAVE and there is a server validation error? 
    (a simple question for a human, a complex answer expected from the humanity...)
    A:



  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2204 posts

    Posted 23 Sep 2014 Link to this post

    Hi Pavel,

    I'm little confused to the last answer - did you check the previous conversation carefully as it already contains solution for your scenario? The function ("onError") from the first reply is handler for the "error" event of the scheduler dataSource:

    For convenience I also created small example using the code from the first post:
     - http://dojo.telerik.com/ivex/3

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Victor
    Victor avatar
    24 posts
    Member since:
    Feb 2015

    Posted 30 Jun 2015 Link to this post

    The form is not closing but the problem is when I want to close it manually it give me the following error. "JavaScript runtime error: Unable to get property 'uid' of undefined or null reference".

     Any ideas why? 

     

    @(Html.Kendo().Grid<CirculationDatabase.DAL.proc_getSubscriber>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.SubscriberFirstName).Title("First Name").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                    columns.Bound(p => p.SubscriberLastName).Title("Last Name").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                    columns.Bound(p => p.SubscriberEmail).Title("Email").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                    columns.Bound(p => p.Abbreviation).Title("Publication").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                    columns.Bound(p => p.SubscriptionStatusName).Title("Status").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                    columns.Bound(p => p.SubscriptionTypeName).Title("Type").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                    columns.Bound(p => p.SubscriptionStartDate).Format("{0:dd-MMM-yyyy}").Title("Start Date").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                    columns.Bound(p => p.SubscriptionEndDate).Format("{0:dd-MMM-yyyy}").Title("Expire Date").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                    columns.Bound(p => p.AgencyName).Title("Agency").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                    columns.Command(command => { command.Destroy().Text(" ").HtmlAttributes(new { style = "min-width: 12px; width: 40px;" }); }).Width(60);
                })
                .ToolBar(toolbar =>
                {
                    toolbar.Template(@<text>
                        <div class="toolbar">
                            <a href="@Url.Action("Index", "NewSubscriber")" class="k-button k-button-icontext">New Record</a>                        
                        </div>
                    </text>);
                               
                })
                .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("proc_getSubscriber").Window(w => w.Title("Subscription Details").Name("editWindow").HtmlAttributes(new { id = "editWindow" })))            
                .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Single)
                )
                .Pageable()
                .Sortable()
                .Scrollable()
                .HtmlAttributes(new { style = "height:730px;" })
                .Events
                (
                    events => events.Edit("changeBtntext").Save("DoNotClosePopUp")                        
                )       
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(30)
                    .Events(events =>
                    {
                        events.RequestEnd("onRequestEnd");               
                    })
                    .Model(
                        model => model.Id(p => p.Subscriber_ID)
                    )
                    .Create(update => update.Action("CreateNewSubscriber", "Welcome"))
                    .Read(read => read.Action("ReturnSubscriberInfo", "Welcome").Data("searchText"))
                    .Update(update => update.Action("EditSubscriber", "Welcome"))
                    .Destroy(update => update.Action("DeleteSubscriber", "Welcome"))
                )
                .Resizable(resize => resize.Columns(true))     
            )    

     function DoNotClosePopUp() {
          var grid = $("#grid").data("kendoGrid");
                grid.bind("dataBinding", function (e) {
                e.preventDefault();
         })                    
    }

  10. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2204 posts

    Posted 02 Jul 2015 Link to this post

    Hi Victor,

    From the provided information it's not clear for us what exactly you are trying to achieve as the "Error" event is not handled - could you please open a new support ticket / forum post and elaborate more on the matter? This would help us advice you better how to proceed. 

    Regards,
    Vladimir Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. K.Ramadan
    K.Ramadan avatar
    78 posts
    Member since:
    Feb 2020

    Posted 22 Apr Link to this post

    any update on how to prevent the editor from closing after saving like if something then prevent closing else save and close ..

    it's Like the functionality of Required Attribute tweaked.

  12. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1221 posts

    Posted 24 Apr Link to this post

    Hello Karam,

    I am afraid the Scheduler edit pop-up will always be closed when the save action has been triggered.

    Regards,
    Veselin Tsvetanov
    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.
  13. Yerik
    Yerik avatar
    1 posts
    Member since:
    Apr 2020

    Posted 08 May in reply to K.Ramadan Link to this post

    I think, you can use global field preventCloseOnSave like flag and bind edit event. When call edit popup you unbind default close event, next you bind close event via your custom function and again bind close event via default close event function, which saved in field defaultCloseEvent. I hope this helps you.

    @(Html.Kendo().Grid<CompanyViewModel>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Bound(c => c.Title);
              columns.Bound(c => c.IsAccess).Width(200);
              columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
          })
          .Pageable()
          .Sortable()
          .Scrollable()
          .Filterable()
          .ToolBar(t => t.Search())
          .ToolBar(t => t.Create())
          .Search(s => { s.Field(c => c.Title); })
          .HtmlAttributes(new { style = "height:430px;" })
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(20)
              .Model(model => model.Id(p => p.Id))
              .Read(read => read.Action("Read", "Companies"))
              .Create(create => create.Action("Create", "Companies"))
              .Update(update => update.Action("Update", "Companies"))
              .Destroy(destroy => destroy.Action("Delete", "Companies"))
              .Events(events => events.Error("error_handler"))
          )
          .Editable(editable => editable.Mode(GridEditMode.PopUp))
          .Events(e =>
          {
              // call when click edit button
              e.Edit("edit_handler");
          })
    )

    <script>
        var preventCloseOnSave = false;


        function error_handler(e) {
            if (e.errors) {
                preventCloseOnSave = true;
                var message = "Ошибки:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            } else if (e.xhr) {
                alert(e.xhr.responseText);
            }
            $("#grid").data("kendoGrid").cancelChanges();
        }

        $(".k-grid-cancel").on("mousedown", function (e) {
            preventCloseOnSave = false;
        });

        function edit_handler(e) {
            var editWindow = this.editable.element.data("kendoWindow");
            var defaultCloseEvent = editWindow._events.close[0];
            editWindow.unbind("close");
            editWindow.bind("close", onWindowEditClose);
            editWindow.bind("close", defaultCloseEvent);
        }

        function onWindowEditClose(e) {
            if (preventCloseOnSave) {
                e.preventDefault();
                preventCloseOnSave = false;
            }
        }
    </script>
  14. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1221 posts

    Posted 12 May Link to this post

    Hi Yerik,

    Thank you for your input. I Believe it will be useful to other developers too.

    Regards,
    Veselin Tsvetanov
    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.
Back to Top