网格按钮上的 Kendo UI 窗口单击不会第二次打开 [英] Kendo UI Window on grid button click does not open second time
问题描述
我正在处理 MVC Kendo UI 项目,但遇到以下问题:
我有一个带有自定义编辑按钮的可编辑剑道网格,该按钮可在剑道窗口上打开局部视图,其作用类似于编辑器模板".这似乎第一次工作正常,但如果我关闭窗口并尝试编辑另一个项目,甚至相同的项目都不起作用.我认为当我关闭窗口时,这会从 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.Commentario);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(假).模型(模型=>{模型.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"));如果($(#kendoWindowPopUp")==未定义)$("divUbicaciones").append("");var windowObject = $("#kendoWindowPopUp").kendoWindow({可调整大小:假,模态:真,刷新:函数() { this.center();},onClose: 函数 () {windowObject.destroy();alert('hi close');//这段代码没有运行}}).data(kendoWindow");windowObject.refresh({url: "/Home/EditorUbicacion?UbicacionId="+ dataItem.UbicacionId});windowObject.open();}
我收到以下 js 错误:
<块引用>未捕获的类型错误:对象 [object Object] 没有方法 'kendoWindow'
答案在评论中.在这里为像我这样通过谷歌打这个的人添加它:).当通过 AJAX 加载的页面包含对 jQuery 的脚本引用时,通常会导致此问题.重新初始化 jQuery 时,所有基于 jQuery 的数据属性都会被清除,包括保存 Kendo UI 小部件对象的 data(kendoWidget) 属性.
- 请确保窗口不会在页面上加载重复的 jQuery 实例.
使用iframe"
$("#dialog").kendoWindow({//加载完整页面...内容:/foo",//... 并在 iframe 中显示iframe: 真});
您可以在 Telerik 文档中找到更多信息此处
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'
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.
- Please make sure that the Window does not load a duplicate jQuery instance on the page.
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 窗口单击不会第二次打开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!