A custom grid command with a hierarchy calls the javascript function twice.

Question

I am using a kendo grid having a hierarchical grid (parent grid and subnets) with custom.command; When the Child browse button (in case the parent grid is working fine), it should call a java-script function that shows the details for this line, but what happens is that it calls javascript twice, the first time it has the correct the identifier of the row (i.e., the same row), and then the second time with the wrong identifier (i.e., the first identifier of the parent grid).

The code is as follows.

Parent Net

@(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditListView>() .Name("GridAudit") .Columns(column => { column.Bound(model => model.LogId).Visible(true); column.Bound(model => model.Date); column.Bound(model => model.Time); column.Bound(model => model.User).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("User")); column.Bound(model => model.Module).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Module")).Width(150); column.Bound(model => model.Activity); column.Bound(model => model.Description).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Description")).Width(200); column.Command(command => { command.Custom("View").Text(" ").Click("onParentAuditHirarchy"); }).Width("6em").Title("Actions"); }) .Reorderable(reorder => reorder.Columns(true)) .Selectable(select => select.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)) .ClientDetailTemplateId("template1") .Sortable() .Scrollable(scroll => scroll.Enabled(false)) .Filterable() .Pageable(page => page.ButtonCount(5)) .HtmlAttributes(new { style = "height:400px" }) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("Audit_Load", "AuditLog").Data("getSearchData") ) .PageSize(11) ) ) 

Baby Grid

 <script id="template1" type="text/kendo-tmpl"> @(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditListView>() .Name("GridDetails" + "#=LogId#") .AutoBind(true) .Resizable(resize => resize.Columns(true)) .Reorderable(reorder => reorder.Columns(true)) .Columns(column => { column.Bound(model => model.LogId).Visible(true); column.Bound(model => model.Date); column.Bound(model => model.Time); column.Bound(model => model.User).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("User")); column.Bound(model => model.Module).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Module")).Width(150); column.Bound(model => model.Activity); column.Bound(model => model.Description).Width(200);//.ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Description")).Width(200); column.Command(command => { command.Custom("View").Text(" ").Click("onGridAuditHirarchy"); }).Width("6em").Title("Actions"); }) .Selectable() .ClientDetailTemplateId("template2") .Sortable() .HtmlAttributes(new { style = "height:300px;" }) .Scrollable(scroll => scroll.Enabled(false)) .Filterable() .Pageable(page => page.ButtonCount(5)) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("LoadHirarchy", "AuditLog", new { auditId = "#=LogId#" })) .PageSize(3) ) .ToClientTemplate() ) </script> 

Javascript

 <script type="text/javascript"> function GetAuditId() { return { auditId: $(hdnTempGridId).val() } } onParentAuditHirarchy = function (e) { e.preventDefault(); var dataItem = this.dataItem($(e.currentTarget).closest("tr")); var id = dataItem.LogId; $(hdnTempGridId).val(id); var win = $("#window").data("kendoWindow"); var grid = $("#GridDetails").data("kendoGrid"); grid.dataSource.read(); win.setOptions({ width: 900, height: 400 }); win.open(); win.center(); } onGridAuditHirarchy = function (e) { e.preventDefault(); var dataItem = this.dataItem($(e.currentTarget).closest("tr")); var id = dataItem.LogId; if (e.delegateTarget.id != 'GridAudit') { $(hdnTempGridId).val(id); var win = $("#window").data("kendoWindow"); var grid = $("#GridDetails").data("kendoGrid"); grid.dataSource.read(); win.setOptions({ width: 900, height: 400 }); win.open(); win.center(); } } $(document).ready(function () { var win = $("#window").data("kendoWindow"); win.close(); }); </script> 

And then, through a java-script, a Kendo window opens.

 @(Html.Kendo().Window() .Name("window") //The name of the window is mandatory. It specifies the "id" attribute of the widget. .Title("Audit Log Detail(s)") //set the title of the window .Content(@<text> @(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditDetailListModel>() .Name("GridDetails") .AutoBind(false) .Resizable(resize => resize.Columns(true)) .Reorderable(reorder => reorder.Columns(true)) .Selectable() .Sortable() .HtmlAttributes(new { style = "height:300px;" }) .Scrollable(scroll => scroll.Enabled(false)) .Filterable() .Pageable(page => page.ButtonCount(5)) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("LoadDetails", "AuditLog").Data("GetAuditId")) .PageSize(10) ) ) </text>) .Visible(false) .Modal(true) ) 

Answer 1

You can get around this by checking if the item shown by the first command event is displayed:

 function showDetailsLevel(e) { e.preventDefault(); originatingId = this.dataItem($(e.currentTarget).closest("tr")).Id var wnd = $("#Details").data("kendoWindow"); if (!$("#Details").is(":visible")) { wnd.center(); wnd.open(); var grid = $("#DetailGrid").data("kendoGrid"); grid.dataSource.read(); } } 

Answer 2

I finally understood (at least for my problem)

the name of the custom action cannot be the same on the parent and child networks

 command.Custom("View")//parent command.Custom("View")//child 

so do it

 command.Custom("View1")//parent command.Custom("View2")//child 

I hope this saves someone else’s time.