title: Handling events from a Kendo MVC Grid's PopUp editor window
body: <p>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.</p>
  
  <pre><code>@(Html.Kendo().Grid&lt;FooRecord&gt;()
  .Name("cFooGrid")
          .Columns(c =&gt;
          {
              c.Bound(f =&gt; f.Foo);
              c.Bound(f =&gt; f.Bar);
              c.Bound(f =&gt; f.Bas);
              c.Command(a =&gt; a.Edit());
          })
          .Editable(e =&gt; e
              .Mode(GridEditMode.PopUp)
              .Window(w =&gt; w.Events(v =&gt; v.Open("OnEditStart").Activate(@&lt;text&gt;function () {console.log("EditWindow.Activate")}&lt;/text&gt;)))
          )
          .ToolBar(t =&gt;
          {
              t.Create();
          })
          .DataSource(ds =&gt; ds
              .Ajax()
                  .Create(r =&gt; r.Action("UpdateIndex", "Home"))
                  .Read(r =&gt; r.Action("IndexList", "Home"))
                  .Update(u =&gt; u.Action("UpdateIndex", "Home"))
              .Model( m =&gt; {
                  m.Id(f =&gt; f.Foo);
              })
          )
  </code></pre>
  
  <p>)</p>
  
  <p>When I review the generated code in Chrome's developer tools, the window is generated without the Activate or Open features:</p>
  
  <pre><code>    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"}}}}}});});
  </code></pre>
  
  <p>Or, more specifically:</p>
  
  <pre><code>"window":{"title":"Edit","modal":true,"draggable":true,"resizable":false}
  </code></pre>
  
  <p>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?</p>
  
  <p>Edit:
  So in order to capture the events as above, there are two steps:
  Add this to the grid definition (remove the Window .Events)</p>
  
  <pre><code>        .Events(e =&gt; e.Edit("OnEditStart"))
  </code></pre>
  
  <p>Then add a javascript function like this to the page.</p>
  
  <pre><code>function OnEditStart(pEvent) {
  var editWindow = pEvent.container.data('kendoWindow');
  editWindow.bind('activate', function () {
      console.log('Edit start event fired');
  });
  </code></pre>
  
  <p>}</p>
  
  <p>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.</p>