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

1
votes

I'm 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 which opens a partial view on a kendo window which 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 element 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'

2
jquerykendo-uikendo-gridkendo-asp.net-mvc
For your edit: editItem() function is called before kendo js libraries get fetched. So maintain the order of referenced js with in a project, quick fixes may be to wrap your code within document.ready. – Bishnu Rawal
Thank you but still does not work wrapping my code within document.ready. – Jero Franzani
I found the solution based on what you said. I have added on my /Home/EditorUbicacion partial view another reference of jquery boundles, i just removed it and it works now. Thank you. – Jero Franzani

2 Answers

1
votes

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

0
votes

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