如何在 kendo.ui.grid 中创建自定义 kendo.ui.Window 以进行编辑

Posted

技术标签:

【中文标题】如何在 kendo.ui.grid 中创建自定义 kendo.ui.Window 以进行编辑【英文标题】:how to create custom kendo.ui.Window for edit in kendo.ui.grid 【发布时间】:2013-08-11 12:09:11 【问题描述】:

我是 kendo.Ui 的初学者,我编写此代码用于创建网格

@(html.Kendo().Grid<BrandViewModel>(Model)
    .Name("Grid")
    .Columns(columns =>
    
        columns.Bound(p => p.BrandName);
        columns.Bound(p => p.BrandAbbr);
        columns.Bound(p => p.SrcImage);

        columns.Command(command => command.Custom("Edit").Click("editItem"));

    )

    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("CustomCommand_Read", "Brand"))
         .Model(model => model.Id(p => p.Id))

               )
)

我想当用户点击 Edit 按钮时在剑道窗口中打开 Edit view 我写这段代码

@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)

    .Width(300)
)



<script type="text/x-kendo-template" id="template">
    <div id="details-container"> <!-- this will be the content of the popup -->
        BrandName: <input type='text' value='#= BrandName #' />

    </div>
</script>

和java脚本代码:

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());

    function editItem(e) 
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        $("#Details").data("kendoWindow").refresh(
            url: "/Brand/Edit/" + dataItem.Id
        );
        $("#Details").data("kendoWindow").open();



    
</script>

这段代码工作正常我第一次点击一个按钮,但是当我第二次点击时,我遇到了以下错误

0x800a138f - JavaScript runtime error: Unable to get property 'refresh' of undefined or null reference

请帮帮我,谢谢大家

【问题讨论】:

从你的问题中学到了一些与你的问题无关的新东西:) 【参考方案1】:

我记得我在使用此控件时遇到过类似的问题。现在它适用于我的以下 Javascript 代码:

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());
    var windowObject;

    $(document).ready(function () 
        windowObject = $("#Details").data("kendoWindow");
    );

    function editItem(e) 
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        windowObject.refresh(
            url: "/Brand/Edit/" + dataItem.Id
        );
        windowObject.open();
    
</script>

希望对你有帮助!

【讨论】:

@Joffrey Kern - 这也帮助我解决了将 kendow Window 绑定到模板的问题。谢谢。【参考方案2】:

问题在于,默认情况下,窗口将在关闭时被销毁(从 DOM 中删除)。我建议删除我在下面的示例中添加的“未定义”条件,而不是首先创建“详细信息”div。

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());

    function editItem(e) 
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        if($("#Details") == undefined)
            $("body").append("<div id=\"Details\"></div>

        $("#Details").data("kendoWindow").refresh(
            url: "/Brand/Edit/" + dataItem.Id
        );
        $("#Details").data("kendoWindow").open();



    
</script>

【讨论】:

以上是关于如何在 kendo.ui.grid 中创建自定义 kendo.ui.Window 以进行编辑的主要内容,如果未能解决你的问题,请参考以下文章

如何在Kendo UI Grid中合并单元格

如何提高kendo ui grid在页面的渲染速度

MVC Kendo UI Grid = 自定义按钮无法返回选定的行 ID

Kendo UI Grid Angular (12)

Kendo UI Grid 使用总结

Kendo UI Grid:自定义下拉提供程序在视图模式下不显示文本