Width of columns with percentage not displaying inside tab

[Gary Whiteside]

I have a tabbed form (2 tabs) and have placed a grid on each of the tabs. Both grids display data as expected however the grid on the second tab (that isnt active on page load) doesnt display with the set column widths of 70%, 10%, 10%, 10%, instead they seem to be split evenly, ie 4 columns at 25%.

Is this a common problem? Here's my code below.....

• 
  
  Details
  
  



• 
  
  Summary
  
  

@{Html.EJ().Grid<object>("DetailedGrid")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource2)
.Adaptor(AdaptorType.JsonAdaptor))
.AllowPaging()
.PageSettings(page => { page.PageSize(80); page.EnableQueryString(true); })
.AllowFiltering()
.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
.AllowGrouping(true)
.GroupSettings(group => { group.GroupedColumns(col => { col.Add("Member"); }); group.ShowDropArea(false); })
.IsResponsive(true)
.EnableResponsiveRow(true)
.AllowTextWrap()
.AllowResizeToFit()
.AllowSelection(false)

.Columns(col =>
{
col.Field("Field1").HeaderText("Field1").Width("20%").Add();
col.Field("Field2").HeaderText("Field2").Width("30%").Add();
col.Field("Field3").HeaderText("Field3").Width("20%").Add();
col.Field("Field4").HeaderText("Field4").Format("{0:dd/MM/yyyy}").Width("10%").Add();
col.Field("Field5").HeaderText("Field5").Format("{0:dd/MM/yyyy}").Width("10%").Add();
col.Field("Field6").HeaderText("Field6").Format("{0:dd/MM/yyyy}").Width("10%").Add();
}).Render();
}

@{Html.EJ().Grid<object>("SummaryGrid")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource1)
.Adaptor(AdaptorType.JsonAdaptor))
.AllowPaging(false)
.AllowFiltering(false)
.IsResponsive(true)
.EnableResponsiveRow(true)
.AllowTextWrap()
.AllowResizeToFit()
.AllowSelection(false)
.ShowSummary()
.SummaryRow(row =>
{
row.Title("").SummaryColumns(col => { col.SummaryType(SummaryType.Sum).DisplayColumn("Field2").DataMember("Field2").Add(); }).SummaryColumns(col => { col.SummaryType(SummaryType.Sum).DisplayColumn("Field3").DataMember("Field3").Add(); }).SummaryColumns(col => { col.SummaryType(SummaryType.Sum).DisplayColumn("Field4").DataMember("Field4").Add(); }).Add();
})

.Columns(col =>
{
col.Field("Field1").HeaderText("Field1").Width("70%").Add();
col.Field("Field2").HeaderText("Field2").Width("10%").Add();
col.Field("Field3").HeaderText("Field3").Width("10%").Add();
col.Field("Field4").HeaderText("Field4").Width("10%").Add();

}).Render();
}

[Gary Whiteside]

The html code for the tabbed form in my post seems to have been rendered

[Seeni Sakthi Kumar Seeni Raj]

Hi Gary,  

 

We are able to reproduce the problem at our end.  

 

The cause of the issue is Grid element placed in the hidden tab. Usually, the percentage values will be converted to the pixel values based on the Element Width. But in the hidden tab, width of the Grid will be zero which is the cause of the problem. To track this issue, we have created a new support incident which can be view from the following Support link. 

 

https://www.syncfusion.com/support/directtrac 

 

Regards,  

Seeni Sakthi Kumar S.