Kendo UI Window on grid button click does not open second time

问题:

im working on an MVC Kendo Ui project and i'm having the following problem:

I have an editable kendo grid with a custom edit button wich opens a partial view on a kendo window wich acts like an "editor template". This seems to work fine first time but if i close the window and try to edit another item or even the same just does not work. I think that when i close the window this eliminate the elemment from the DOM but can't figure it out how to fix it. Here is some code:

@(Html.Kendo().Grid(Model)       .Name("gridUbicaciones")       .Columns(col =>           {               col.Bound(x => x.UbicacionId);               col.Bound(x => x.Nombre);               col.Bound(x => x.Latitud);               col.Bound(x => x.Longitud);               col.Bound(x => x.Altitud);               col.Bound(x => x.Comentario);               col.Command(cmd =>                   {                       cmd.Custom("Editar").Click("editItem");                                            cmd.Destroy().Text("Borrar");                   }).Width(210).HtmlAttributes(new {style = "text-align:center;"});           })       .ToolBar(toolbar => toolbar.Create().Text("Agregar") )       .Pageable()       .Sortable()       .Filterable()       .DataSource(dsource => dsource                                  .Ajax()                                  .PageSize(8)                                  .ServerOperation(false)                                  .Model(model =>                                       {                                          model.Id(x => x.UbicacionId);                                          model.Field(x => x.UbicacionId).Editable(false);                                      })                                  .Read(read => read.Action("Ubicaciones_Read", "Home").Type(HttpVerbs.Post))                                  .Destroy(destroy => destroy.Action("Ubicaciones_Destroy", "Home"))                                  .Update(update => update.Action("Ubicaciones_Update", "Home"))                                  .Create(create => create.Action("Ubicaciones_Create", "Home"))       )) <div id="kendoWindowPopUp"></div> 

JAVASCRIPT :

function editItem(e) {     e.preventDefault();     var dataItem = this.dataItem($(e.currentTarget).closest("tr"));     if ($("#kendoWindowPopUp") == undefined)         $("divUbicaciones").append("<div id=\"kendoWindowPopUp\"></div>");     var windowObject = $("#kendoWindowPopUp").kendoWindow({         resizable: false,         modal: true,         refresh: function () { this.center();},         onClose: function () {              windowObject.destroy();             alert('hi close');// THIS CODE DOES NOT RUN         }      })     .data("kendoWindow");        windowObject.refresh({         url: "/Home/EditorUbicacion?UbicacionId=" + dataItem.UbicacionId      });         windowObject.open();  } 

I get the following js error:

Uncaught TypeError: Object [object Object] has no method 'kendoWindow'

Thanks in Advance!

回答1:

Your problem lies in your editItem(), onClose does not eliminate the element from DOM by default, you are doing it deliberately. To refresh the window content, make some checks as:

function editItem(e) {         e.preventDefault();         var dataItem = this.dataItem($(e.currentTarget).closest("tr"));          // Window variable         var wnd = $("#kendoWindowPopUp");         if (!wnd.data("kendoWindow")) {             // initialized on first call and successive calls will reuse this object             wnd.kendoWindow({                 width: "600px",                 title: "title",                 actions: [                     "refresh",                     "Minimize",                     "Maximize",                     "Close"                 ],                 resizable: false,                 modal: true,                 visible: false                 // Leave all events with their default behavior                             });         }          var windowObject = wnd.data("kendoWindow");         windowObject.refresh({             url: "/Home/EditorUbicacion?UbicacionId=" + dataItem.UbicacionId         });         windowObject.open().center();     } 

回答2:

The answer is in the comments. Adding it here for those like me hitting this through google :). This issue is usually caused when the page loaded via AJAX contains a script reference to jQuery. When jQuery is reinitialized, all jQuery-based data attributes are cleared, including the data(kendoWidget) attribute that holds the Kendo UI widget object.

1. Please make sure that the Window does not load a duplicate jQuery instance on the page.

2. Use 'iframe'

   $("#dialog").kendoWindow({    // load complete page...    content: "/foo",    // ... and show it in an iframe    iframe: true }); 

   You can find more at Telerik docs here

文章来源: Kendo UI Window on grid button click does not open second time