I am trying to create a grid that has 5 static parent categories that when expanded will use AJAX to show the data within those categories. Since the categories are static I just create a model, with a Name and Type property, in the controller action and bind them directly to the grid
@(Html.Kendo().Grid(Model.Categories)
.Name(
"CategoryGrid"
)
.Columns(c =>
{
c.Bound(b => b.Name);
c.Bound(b => b.Type);
})
.ClientDetailTemplateId(
"result-template"
)
)
<script id=
"result-template"
type=
"text/kendo-tmpl"
>
@(Html.Kendo().Grid<ChildClass>()
.Name(
"#=Name#_child"
)
.Columns(c =>
{
c.Bound(b => b.ID);
c.Bound(b => b.Description);
})
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.Read(r => r.Action(
"ChildSearch"
,
"Search"
,
new
{ Type =
"#=Type#"
}))
)
.Pageable()
.Selectable()
.ToClientTemplateId()
)
</script>
I unfortunately can't share a screen shot as my dev box doesn't have an internet connection today, but the result is all the columns of the parent grid are offset to the left by 1.
The values for the Name column and an empty header appears in the first column.
The values for Type and the header "Name" appears in the second column.
A blank view, meaning the row styles cut off at the right end of the 2nd column, and the header "Type" appear in the third column.
So my question would be: Why is this happening?
Thanks