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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Width of columns with percentage not displaying inside tab

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 08:55 AM UTC

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 09:46 AM UTC

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.

Warning Icon 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.Close Icon

;