Окно пользовательского интерфейса Kendo при нажатии кнопки сетки не открывается во второй раз

Я работаю над проектом пользовательского интерфейса MVC Kendo, и у меня возникла следующая проблема:

У меня есть редактируемая сетка кендо с пользовательской кнопкой редактирования, которая открывает частичное представление в окне кендо, которое действует как шаблон редактора. Кажется, это работает нормально в первый раз, но если я закрою окно и попытаюсь отредактировать другой элемент или даже то же самое, это просто не сработает. Я думаю, что когда я закрываю окно, это удаляет элемент из DOM, но не могу понять, как это исправить. Вот код:

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

}

Я получаю следующую ошибку js:

Uncaught TypeError: Объект [object Object] не имеет метода 'kendoWindow'


jquery kendo-grid kendo-ui kendo-asp.net-mvc
person Jero Franzani    schedule 07.11.2013    source источник
comment
Для вашего редактирования: функция editItem() вызывается до того, как библиотеки kendo js будут извлечены. Поэтому сохраняйте порядок ссылок на js в проекте, быстрые исправления могут состоять в том, чтобы обернуть ваш код в document.ready.   -  person Bishnu Rawal    schedule 07.11.2013
comment
Спасибо, но по-прежнему не работает обертывание моего кода в document.ready.   -  person Jero Franzani    schedule 07.11.2013
comment
Я нашел решение, основанное на том, что вы сказали. Я добавил в свое частичное представление /Home/EditorUbicacion еще одну ссылку на jquery boundles, я просто удалил ее, и теперь она работает. Спасибо.   -  person Jero Franzani    schedule 07.11.2013

Ответы (2)


arrow_upward
1
arrow_downward

Ответ в комментариях. Добавляю сюда для тех, кто, как и я, нажимает на это через Google :). Эта проблема обычно возникает, когда страница, загруженная через AJAX, содержит ссылку скрипта на jQuery. При повторной инициализации jQuery все атрибуты данных на основе jQuery очищаются, включая атрибут data(kendoWidget), который содержит объект виджета Kendo UI.

  1. Пожалуйста, убедитесь, что Window не загружает дубликат экземпляра jQuery на страницу.

  2. Используйте «iframe»

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

    Дополнительную информацию можно найти в документации Telerik здесь

person Dobin    schedule 21.08.2017

arrow_upward
0
arrow_downward

Ваша проблема заключается в вашем editItem(), onClose по умолчанию не удаляет элемент из DOM, вы делаете это намеренно. Чтобы обновить содержимое окна, выполните следующие проверки:

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();
    }
person Bishnu Rawal    schedule 07.11.2013
comment
Спасибо за помощь, я попробовал ваш код, и в первый раз он открывается отлично, но при втором открытии все еще возникает та же ошибка: Uncaught TypeError: Object [object Object] не имеет метода «kendoWindow». - person Jero Franzani; 07.11.2013