Kendo TabStrip with KendoGrid inside using JavaScript for Events handling
asp.net-mvc, c#, javascript, kendo-grid, kendo-ui
Solution
Fixed the issue, I do not why, but when I put java script block at the beginning it starts to work.
So if someone meet such issue just put `<script/>` block before declaring `Kendo.Grid()`.
Problem
I have simple page with Kendo TabStrip inside ``` <div id="main-view" class="k-content"> @(Html.Kendo().TabStrip() .Name("main-view-tabstrip") .Items(tabstrip => { tabstrip.Add().Text("My Notices").LoadContentFrom("MyNotices", "Notice").Selected(true); })) </div> ``` It loads content for me on demand, querying the `NoticeController`. `NoticeController` has `MyNotices` action with return me `PartialView`. ``` public PartialViewResult MyNotices() { // put some values into ViewData return PartialView(); } ``` The PartialView itseld looks like this: ``` <div style="margin: 20px; height: 700px;"> @(Html.Kendo().Grid<NoticeViewModel>(Model) .HtmlAttributes(new { @class = "fullScreen" }) .Name("NoticesList") .Columns(columns => { columns.Bound(x => x.UniqueId).Title("UniqueId"); columns.Bound(x => x.FormName).Title("Form"); columns.Bound(x => x.Revision).Title("Revision"); columns.Bound(x => x.Language).Title("Language"); columns.Bound(x => x.Status).Title("Status"); } ) .Pageable() .Scrollable() .Sortable() .Selectable() .ToolBar( toolbar => toolbar.Create().Text("New") ) .Editable( ed => ed.Mode(GridEditMode.PopUp) .TemplateName("NoticeCreate") .Window(w => w.Title("Create Notice") .Name("createNoticeWindow1") .HtmlAttributes(new { id = "createNoticeWindow" }) .Modal(true) ) .DisplayDeleteConfirmation(true) ) .Resizable(resize => resize.Columns(true)) .DataSource(dataSource => dataSource.Ajax() .PageSize(25) .ServerOperation(true) .Read("List", "Notice") .Create("NoticeCreate", "Notice") .Events(events => events.Error("errorHandler")) .Model(model => model.Id(x => x.UniqueId)) )) </div> <script> function errorHandler(e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } } </script> ``` When I run the code I receive JS error, that `errorHandler` cannot be found. As you can see I have it inside my `PartialView`. ``` <script> function errorHandler(e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } } </script> ``` So the question is how to use javascript inside partial view, when you show it inside TabStrip? When I remove `.Events(events => events.Error("errorHandler"))` from the grid, everything work fine.