This is a migrated thread and some comments may be shown as answers.
How to prevent editor from closing?
16 Answers 336 Views
This is a migrated thread and some comments may be shown as answers.
Grzegorz
Top achievements
Rank 1
Grzegorz asked on 02 Oct 2013, 10:07 AM
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.

16 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 02 Oct 2013, 01:02 PM
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!
0
Aaron
Top achievements
Rank 1
answered on 17 Jul 2014, 02:34 PM
Vladimir,

Can you tell me what version preventDefault can be called in?
0
Vladimir Iliev
Telerik team
answered on 18 Jul 2014, 06:13 AM
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.

 
0
Edward
Top achievements
Rank 1
answered on 28 Aug 2014, 02:48 PM
Is preventing the dialog from closing available in the latest release?  If so how do you accomplish it?
0
Vladimir Iliev
Telerik team
answered on 29 Aug 2014, 05:31 AM
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.

 
0
Yordan
Top achievements
Rank 1
answered on 23 Sep 2014, 08:50 AM
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:



0
Vladimir Iliev
Telerik team
answered on 23 Sep 2014, 11:21 AM
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.

 
0
Victor
Top achievements
Rank 1
answered on 30 Jun 2015, 04:21 PM

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();
     })                    
}

0
Vladimir Iliev
Telerik team
answered on 02 Jul 2015, 08:01 AM
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
0
K.Ramadan
Top achievements
Rank 2
answered on 22 Apr 2020, 02:12 PM

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.

0
Veselin Tsvetanov
Telerik team
answered on 24 Apr 2020, 07:14 AM

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.
0
Yerik
Top achievements
Rank 1
answered on 08 May 2020, 09:19 AM
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>
0
Veselin Tsvetanov
Telerik team
answered on 12 May 2020, 07:35 AM

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.
0
Simon Maystre
Top achievements
Rank 1
answered on 09 Jan 2021, 10:38 AM
I used the above code. The popup is not closing now if the error occurs. But then If I click on the save and cancel button then, it is doing anything
0
Anton
Top achievements
Rank 1
answered on 09 Jan 2021, 11:48 AM
Hi Simon! I changed some error handling logic used the functions edit_handler() and onWindowEditClose(). You can change(or remove) this functions for your logic.
0
Veselin Tsvetanov
Telerik team
answered on 12 Jan 2021, 02:03 PM

Hello Simon,

If you still face the same issue, I would like to ask you to prepare and send me a small isolated sample demonstrating that. That would allow me to review the case and provide you with the most appropriate assistance on that.

Regards,
Veselin Tsvetanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Asked by
Grzegorz
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Aaron
Top achievements
Rank 1
Edward
Top achievements
Rank 1
Yordan
Top achievements
Rank 1
Victor
Top achievements
Rank 1
K.Ramadan
Top achievements
Rank 2
Veselin Tsvetanov
Telerik team
Yerik
Top achievements
Rank 1
Simon Maystre
Top achievements
Rank 1
Anton
Top achievements
Rank 1
Share this question
or