We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Width of columns with percentage not displaying inside tab

Thread ID:

Created:

Updated:

Platform:

Replies:

129112 Feb 28,2017 03:52 AM Mar 2,2017 04:46 AM ASP.NET Core 2
loading
Tags: Grid
Gary Whiteside
Asked On February 28, 2017 03:52 AM

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.....










@{Html.EJ().Grid("DetailedGrid")
.Datasource(ds => ds.Json((IEnumerable)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("SummaryGrid")
.Datasource(ds => ds.Json((IEnumerable)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
Replied On February 28, 2017 03:55 AM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On March 2, 2017 04:46 AM

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. 
 
 
Regards,  
Seeni Sakthi Kumar S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;