[Solved] Window configurator clientside events not working

[Remco Dekkers]

I try to act on clientside event onclose window when the popup editor from the grid closes. The event never seems to fire. It seems the configuration is not even send to the browser.

This is the configuration

@(Html.Telerik().Grid<ProjectTracking.LogEntry>()
                .Name("Grid")
                .ToolBar(commands => commands.Insert())
                .DataKeys(keys => keys.Add(c => c.LogEntryId))
                .Columns(columns =>
                {
                    columns.Bound(o => o.CreatedOn).Width(130);
                    columns.Bound(o => o.Employee).Width(150);
                    columns.Bound(o => o.Description).Encoded(false);
                    columns.Bound(o => o.Deadline).Width(130);
                    columns.Command(commands =>
                    {
                        commands.Edit();
                        commands.Delete();
                    }).Width(90).Title("Commands");
                    columns.Bound(o => o.LogEntryId).Hidden().HtmlAttributes(new { style = "display:none" });
                    columns.Bound(o => o.IsRead ).Hidden().HtmlAttributes(new { style = "display:none" });
                    columns.Bound(o => o.CreatedBy).Hidden().HtmlAttributes(new { style = "display:none" });
                })
                .DataBinding(dataBinding => dataBinding.Ajax()
                    .Select("_LogEntries", "Iteration", new { IterationId = Model.IterationId })
                    .Insert("_InsertEntry", "Iteration", new { IterationId = Model.IterationId })
                    .Update("_SaveEntry", "Iteration", new { IterationId = Model.IterationId })
                    .Delete("_DeleteEntry", "Iteration", new { IterationId = Model.IterationId }))
                .Editable(editing => editing.Mode(GridEditMode.PopUp).Window(config => config.Resizable().ClientEvents(ce => ce.OnMove("onEditWindowClose").OnClose("onEditWindowClose"))))
                .ClientEvents(events => events.OnEdit("onEdit").OnRowDataBound("onRowDataBound").OnRowSelected("onRowSelected").OnError("onError").OnSave("onSave"))
                .Scrollable(scrolling => scrolling.Height(400))
                .Sortable(sorting => sorting.OrderBy(sortOrder => sortOrder.Add(o => o.CreatedOn).Descending()))
                .Pageable(paging => paging.PageSize(100))
                .Selectable()
                .Filterable()
                .Groupable()
                .Footer(true)
                )

This is what's send to the browser. Notice that in this part nothing is put about the events ","popup":{"modal":true,"draggable":true,"resizable":true}},

jQuery('#Grid').tGrid({columns:[{"title":"Employee","member":"Employee","type":"String","editor":null},{"title":"Description","member":"Description","type":"String","encoded":false,"editor":null},{"title":"Deadline","member":"Deadline","type":"Date","format":"{0:d}","editor":null},{"title":"Commands","commands":[{"name":"edit","buttonType":"Text"},{"name":"delete","buttonType":"Text"}]},{"attr":" style=\"display:none\"","title":"Is Read","member":"IsRead","type":"Boolean","editor":null}], plugins:["grouping","editing","filtering"], editing:{"mode":"PopUp","editor":"\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Employee\"\u003eEmployee\u003c/label\u003e\u003c/div\u003e\r\n\u003cdiv class=\"editor-field\"\u003e\u003cselect data-val=\"true\" data-val-required=\"The Employee field is required.\" id=\"Employee\" name=\"Employee\"\u003e\u003coption\u003e... (unknown)\u003c/option\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Employee\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\r\n\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Deadline\"\u003eDeadline\u003c/label\u003e\u003c/div\u003e\r\n\u003cdiv class=\"editor-field\"\u003e\u003cdiv class=\"t-widget t-datepicker\" id=\"Deadline\"\u003e\u003cdiv class=\"t-picker-wrap\"\u003e\u003cinput class=\"t-input\" id=\"Deadline-input\" name=\"Deadline\" /\u003e\u003cspan class=\"t-select\"\u003e\u003cspan class=\"t-icon t-icon-calendar\" title=\"Open the calendar\"\u003e\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003e\r\n\tjQuery(\u0027#Deadline\u0027).tDatePicker({format:\u0027d-M-yyyy\u0027, minDate:new jQuery.telerik.datetime(1899,11,31), maxDate:new jQuery.telerik.datetime(2100,00,01)});\r\n\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Deadline\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\r\n\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Description\"\u003eDescription\u003c/label\u003e\u003c/div\u003e\r\n\u003cdiv class=\"editor-field\"\u003e\u003ctable cellpadding=\"0\" cellspacing=\"4\" class=\"t-widget t-editor t-header\" id=\"Description\" style=\"width:800px\"\u003e\u003ctr\u003e\u003ctd class=\"t-editor-toolbar-wrap\"\u003e\u003cul class=\"t-editor-toolbar\"\u003e\u003cli class=\"t-editor-button\"\u003e\u003ca class=\"t-tool-icon t-bold\" href=\"#\"\u003ebold\u003c/a\u003e\u003c/li\u003e\u003cli class=\"t-separator\"\u003e\u003c/li\u003e\u003cli class=\"t-editor-button\"\u003e\u003ca class=\"t-tool-icon t-insertUnorderedList\" href=\"#\"\u003einsertUnorderedList\u003c/a\u003e\u003c/li\u003e\u003cli class=\"t-editor-button\"\u003e\u003ca class=\"t-tool-icon t-insertOrderedList\" href=\"#\"\u003einsertOrderedList\u003c/a\u003e\u003c/li\u003e\u003cli class=\"t-separator\"\u003e\u003c/li\u003e\u003cli class=\"t-custom\"\u003e\u003ca class=\u0027htmleditor-removehtmlcode\u0027 href=\u0027#\u0027\u003eRemove Html\u003c/a\u003e\u003c/li\u003e\u003cli class=\"t-separator\"\u003e\u003c/li\u003e\u003cli class=\"t-custom\"\u003e\u003ca class=\u0027htmleditor-cleanhtmlcode\u0027 href=\u0027#\u0027\u003eClean Html\u003c/a\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"t-editable-area\"\u003e\u003ctextarea class=\"t-content t-raw-content\" cols=\"20\" id=\"Description-value\" name=\"Description\" rows=\"5\"\u003e\u003c/textarea\u003e\u003cscript type=\"text/javascript\"\u003edocument.getElementById(\u0027Description-value\u0027).style.display=\u0027none\u0027\u003c/script\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cscript type=\"text/javascript\"\u003e\r\n\tjQuery(\u0027#Description\u0027).tEditor();\r\n\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Description\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\r\n\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"IsRead\"\u003eIsRead\u003c/label\u003e\u003c/div\u003e\r\n\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"check-box\" data-val=\"true\" data-val-required=\"The IsRead field is required.\" id=\"IsRead\" name=\"IsRead\" type=\"checkbox\" value=\"true\" /\u003e\u003cinput name=\"IsRead\" type=\"hidden\" value=\"false\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"IsRead\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\r\n","popup":{"modal":true,"draggable":true,"resizable":true}}, dataKeys:{"LogEntryId":"id"}, pageSize:100, total:0, currentPage:1, sortMode:'single', orderBy:'CreatedOn-desc', selectable:true, ajax:{"selectUrl":"/Iteration/_LogEntries/4336?IterationId=4336","insertUrl":"/Iteration/_InsertEntry/4336?IterationId=4336","updateUrl":"/Iteration/_SaveEntry/4336?IterationId=4336","deleteUrl":"/Iteration/_DeleteEntry/4336?IterationId=4336"}, onEdit:onEdit, onError:onError, onRowDataBound:onRowDataBound, onRowSelect:onRowSelected, onSave:onSave, noRecordsTemplate:'No records to display.'});

[Rene]

I'm notificing a similar problem - and the js files are properly loaded.

I have the following:

a) grid - popup edit window
b) edit a row - window pops up - works fine - my onedit function (in my js file) is seen Ok - all good so far.
c) in the window that opens up - I have tabs - where some tabs contain a grid - using loadcontentfrom.(grids are in partial views)
d) when I click on the edit on one of the child grids in C, the onedit does seem to see my js function (in same js file as b above) or the onEdit is simply not firing - not sure..

What's weird - the client event .OnLoad() finds the js function - in the same js file ok and that works fine.

Something about the OnEdit( ) function....

[Thiago]

Just to add here that i'm with the same problem.
And one other thing, the values of the fields are only loaded when i click something or drag the window. Don't know why is that