Question

我使用Html.Kendo（）创建了一个Kendo MVC网格。网格助手。当PopUp编辑器窗口打开时，我想要捕获该事件并运行一些javascript。当我使用.Events配置一个普通的kendo窗口时，事件正常启动并且我的函数运行。但是，当我在网格的.Editable.Window上编码.Events属性时，事件不会触发。

@(Html.Kendo().Grid<FooRecord>()
.Name("cFooGrid")
        .Columns(c =>
        {
            c.Bound(f => f.Foo);
            c.Bound(f => f.Bar);
            c.Bound(f => f.Bas);
            c.Command(a => a.Edit());
        })
        .Editable(e => e
            .Mode(GridEditMode.PopUp)
            .Window(w => w.Events(v => v.Open("OnEditStart").Activate(@<text>function () {console.log("EditWindow.Activate")}</text>)))
        )
        .ToolBar(t =>
        {
            t.Create();
        })
        .DataSource(ds => ds
            .Ajax()
                .Create(r => r.Action("UpdateIndex", "Home"))
                .Read(r => r.Action("IndexList", "Home"))
                .Update(u => u.Action("UpdateIndex", "Home"))
            .Model( m => {
                m.Id(f => f.Foo);
            })
        )

）

当我在Chrome的开发者工具中查看生成的代码时，生成的窗口没有激活或打开功能：

    jQuery(function(){jQuery("#cFooGrid").kendoGrid({"columns":[{"title":"Foo Key","field":"Foo","encoded":true,"editor":null},{"title":"Bar Field","field":"Bar","encoded":true,"editor":null},{"title":"Bas Value","field":"Bas","encoded":true,"editor":null},{"command":[{"name":"edit","buttonType":"ImageAndText","text":"Edit"}]}],"scrollable":false,"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"popup","template":"\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Foo\"\u003eFoo Key\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" id=\"Foo\" name=\"Foo\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Foo\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Bar\"\u003eBar Field\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-maxlength=\"The field Bar Field must be a string or array type with a maximum length of \u0026\\#39;20\u0026\\#39;.\" data-val-maxlength-max=\"20\" id=\"Bar\" name=\"Bar\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Bar\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Bas\"\u003eBas Value\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"The Bas Value field is required.\" id=\"Bas\" name=\"Bas\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Bas\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e","window":{"title":"Edit","modal":true,"draggable":true,"resizable":false},"create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add new record"}]},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Home/IndexList"},"prefix":"","update":{"url":"/Home/UpdateIndex"},"create":{"url":"/Home/UpdateIndex"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"Foo","fields":{"Foo":{"type":"string"},"Bar":{"type":"string"},"Bas":{"type":"string"}}}}}});});

或者，更具体地说：

"window":{"title":"Edit","modal":true,"draggable":true,"resizable":false}

我希望窗口将使用Activate：和Open：参数生成，但它们不会显示。任何人都可以给我一个指针，指出这是不支持还是我做错了什么？

编辑：因此，为了捕获上述事件，有两个步骤：将其添加到网格定义（删除Window .Events）

        .Events(e => e.Edit("OnEditStart"))

然后在页面中添加这样的javascript函数。

function OnEditStart(pEvent) {
var editWindow = pEvent.container.data('kendoWindow');
editWindow.bind('activate', function () {
    console.log('Edit start event fired');
});

}

注意：似乎没有任何方法可以捕获打开事件，因为在网格上的编辑事件之前在窗口上触发了此事件。

Answer 1

剑道网格弹出窗口的“事件”没有被尊重/序列化（至少不是我在2014年最后一次测试时），所以你应该使用网格的Edit事件来控制“弹出窗口”窗口事件< / p>

所以在你的网格中加上这个：

.Events(event => event.Edit("onEdit"))
.//other grid settings here.

然后添加如下的javascript函数：

function onEdit(e) {

    //get window object
    var kendoWindow = e.container.data("kendoWindow");

        kendoWindow.setOptions({
            title: "I have a custom Title"

            //do stuff in here 

        });


}

然后你可以通过javascript将你想要的功能应用到窗口。

我做了类似的事情来调整弹出编辑器的大小，使其占用屏幕尺寸的80％，而不管显示器/设备如何。

如果您有更具体的内容，那么我会相应地更新我的答案。

编辑：如果您需要，可以参考Telerik自己的论坛中的这篇文章，这是我在2014年中期第一次遇到此问题时使用的。

Kendo Pop Up Editor not firing off applied events

处理来自Kendo MVC Grid的PopUp编辑器窗口的事件

1 个答案: