Grid custom Command having hierarchy is calling javascript function twice.

Question

I am using kendo grid having hierarchical grid(parent grid and sub grid) with custom.command; When view button of Child(in Case of parent grid it runs fine) is clicked it should calls java-script function which shows detail for that row but what is happening is that it call javascript twice, first time having correct row id(i.e. of the same row) and then second time with wrong id(i.e. first id of the parent grid).

Code is as below.

Parent-Grid

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

Child-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 java-script Kendo window is opened.

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

I have this issue too. and I don't think it's calling the function twice instead it's call the the function and the parent function too, in my case I have 4-level hierarchy grids on the forth level it's called 4 times! — Alaa Jabre

callisto callisto · Accepted Answer · 2014-12-11T13:31:53

You can get around this by checking if the element shown by the first command event is visible:

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

Grid custom Command having hierarchy is calling javascript function twice.

2 Answers