Does anyone know how to render a hierarchical grids within a View using the same model? In my example, the model i'm using "System.Data.DataTable" the main grid should display a list of 'projects' and the sub grid should display correlating 'designs' as a child grid. I'm using DataTable because each customer could have different columns for their 'projects' and 'designs' in data.. Therefore, I cannot go with the fixed column solution, it MUST be dynamic columns. When I'm using DataTable the parent grid and the child grid both are displaying the same columns because it's referencing the same model. Here's the code in my view:
@(Html.Kendo()
.Grid<System.Data.DataTable>()
.Name("ProjectGrid")
.ClientDetailTemplateId("template")
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
string strFormat = "", strTitle = column.Caption;
if (column.DataType == typeof(System.DateTime))
strFormat = "{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}";
columns
.Bound(column.ColumnName)
.Groupable(column.ColumnName != "Id" && column.ColumnName != "AsyncErrorMessage")
.Title(strTitle)
.Hidden(column.ColumnName == "Id" || column.ColumnName == "AsyncErrorMessage")
.Format(strFormat)
.Width(200);
}
})
.Pageable(paging=>paging.PageSizes(new int[]{10, 20 , 30, 50} ))
.Sortable()
.Navigatable()
.Filterable()
.Groupable()
.Selectable(selectable => selectable
.Type(GridSelectionType.Row))
.ColumnMenu()
.Resizable(resize => resize
.Columns(true))
.DataSource(dataSource =>
dataSource
.Ajax()
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
})
.Read(read => read.Action("GetProjects", "Designer"))
.PageSize(20)
)
.HtmlAttributes(new { style = "height:100%" })
.Scrollable()
)
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo()
.Grid<System.Data.DataTable>()
.Name("DesignerDesignGrid_#=Id#")
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
string strFormat = "", strTitle = column.Caption;
if (column.DataType == typeof(System.DateTime))
strFormat = "{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}";
columns
.Bound(column.ColumnName)
.Groupable(column.ColumnName != "Id" && column.ColumnName != "AsyncErrorMessage")
.Title(strTitle)
.Hidden(column.ColumnName == "Id" || column.ColumnName == "AsyncErrorMessage")
.Format(strFormat)
.Width(200);
}
})
//.Events(events => events.Change("getSelectedRowId"))
.DataSource(datasource => datasource
.Ajax()
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
})
.PageSize(5)
.Read(read => read
.Action("GetDesigns", "Designer", new { projectId = "#=Id#" })))
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
var selected;
function dataBound() {
this.expand(this.tbody.find("tr.k-master-row").first());
}
</script>
@(Html.Kendo()
.Grid<System.Data.DataTable>()
.Name("ProjectGrid")
.ClientDetailTemplateId("template")
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
string strFormat = "", strTitle = column.Caption;
if (column.DataType == typeof(System.DateTime))
strFormat = "{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}";
columns
.Bound(column.ColumnName)
.Groupable(column.ColumnName != "Id" && column.ColumnName != "AsyncErrorMessage")
.Title(strTitle)
.Hidden(column.ColumnName == "Id" || column.ColumnName == "AsyncErrorMessage")
.Format(strFormat)
.Width(200);
}
})
.Pageable(paging=>paging.PageSizes(new int[]{10, 20 , 30, 50} ))
.Sortable()
.Navigatable()
.Filterable()
.Groupable()
.Selectable(selectable => selectable
.Type(GridSelectionType.Row))
.ColumnMenu()
.Resizable(resize => resize
.Columns(true))
.DataSource(dataSource =>
dataSource
.Ajax()
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
})
.Read(read => read.Action("GetProjects", "Designer"))
.PageSize(20)
)
.HtmlAttributes(new { style = "height:100%" })
.Scrollable()
)
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo()
.Grid<System.Data.DataTable>()
.Name("DesignerDesignGrid_#=Id#")
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
string strFormat = "", strTitle = column.Caption;
if (column.DataType == typeof(System.DateTime))
strFormat = "{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}";
columns
.Bound(column.ColumnName)
.Groupable(column.ColumnName != "Id" && column.ColumnName != "AsyncErrorMessage")
.Title(strTitle)
.Hidden(column.ColumnName == "Id" || column.ColumnName == "AsyncErrorMessage")
.Format(strFormat)
.Width(200);
}
})
//.Events(events => events.Change("getSelectedRowId"))
.DataSource(datasource => datasource
.Ajax()
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
})
.PageSize(5)
.Read(read => read
.Action("GetDesigns", "Designer", new { projectId = "#=Id#" })))
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
var selected;
function dataBound() {
this.expand(this.tbody.find("tr.k-master-row").first());
}
</script>