Handling events from a Kendo MVC Grid's PopUp editor window

Question

I have a Kendo MVC grid that I am creating with the Html.Kendo().Grid helper. When the PopUp editor window opens, I want to catch the event and run a bit of javascript. When I configure a normal kendo window with .Events, the events fire properly and my function runs. However, when I code the .Events property on the .Editable.Window of the grid, the events do not fire.

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

)

When I review the generated code in Chrome's developer tools, the window is generated without the Activate or Open features:

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

Or, more specifically:

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

I would expect that the window would be generated with Activate: and Open: parameters, but they don't show up. Can anyone give me a pointer as to whether this just isn't supported or I am doing something wrong?

Edit: So in order to capture the events as above, there are two steps: Add this to the grid definition (remove the Window .Events)

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

Then add a javascript function like this to the page.

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

}

NOTE: There does not appear to be any way to capture the open event since this event is fired on the window before the edit event on the grid.

David Shorthose David Shorthose · Accepted Answer · 2015-05-07T17:09:32

The "events" of the kendo grid popup are not honoured/serialized (at least not the last time I tested this back in 2014) and so you should use the grid's Edit event to control the "Pop Up" window events

So within your grid add this:

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

Then add a javascript function like this:

function onEdit(e) {

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

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

            //do stuff in here 

        });


}

Then you can apply what ever functions you want to the window via javascript.

I do something similar to this to resize the pop up editor so it takes up 80% of the screen size regardless of the display/device.

If you have something more specific you are after then I will update my answer accordingly.

edit: If you want you can refer to this post from Telerik's own forums which is what I used when I first encountered this issue back in mid 2014.

Kendo Pop Up Editor not firing off applied events

Handling events from a Kendo MVC Grid's PopUp editor window

1 Answers