Hello,
I have a grid with a Detail Template that is set as responsive and has four columns, each with a different priority:
@(Html.EJ().Grid<ViewModel>("DetailTemplate")
.Datasource((IEnumerable<object>)Model.Data)
.IsResponsive(true)
.Locale(Culture)
.AllowTextWrap()
.AllowPaging().PageSettings(page => { page.PageSize(10); })
.AllowFiltering()
.FilterSettings(
filter => { filter.FilterType(FilterType.Excel); }
)
.Columns(col =>
{
col.Field(c => c.Col1).IsPrimaryKey(true).Width(75).Add();
col.Field(c => c.Col2).Width(100).Priority(3).Add();
col.Field(c => c.Col3).Width(120).Priority(1).Add();
col.Field(c => c.Col4).TextAlign(TextAlign.Right).Width(100).Priority(2).AllowFiltering(false).Add();
})
.DetailsTemplate("#tabGridContents")
.ClientSideEvents(eve => { eve.DetailsDataBound("detailGridData"); })
)
If I resize the browser when the details are not visible, the grid behaves as expected and the columns are removed according to their priority, with the content properly aligned beneath them.
However, when the details are visible, the rows become 'shorter' and the content is no longer aligned with the headers.
Is there any way to fix this?
Regards,
Fernanda
Attachment:
grid_a6c76807.zip
