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)
)
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();
}
}
I figured it out finally (for my problem at least)
the name of the custom action can't be the same in parent and child grid
command.Custom("View")//parent
command.Custom("View")//child
so make it
command.Custom("View1")//parent
command.Custom("View2")//child
I hope this save someone else's time.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With