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

Grid Headers width problem

Thread ID:

Created:

Updated:

Platform:

Replies:

124348 Jun 2,2016 10:30 AM UTC Jun 8,2016 04:14 AM UTC ASP.NET Web Forms 5
loading
Tags: Grid
Semper
Asked On June 2, 2016 10:30 AM UTC

Hi,

i have a problem with the header part sizing.
I am not using resizetofit and columnlayout is fixed because i want to set the width for each column
The problem is that the in the table body all the columns are exactly the width i set them to be but the headers has a size of it's own.

Attached is a pic. I am using a northwind for this example.

This is the html:
 <ej:Grid ID="Grid1" runat='server' AllowPaging="True" DataSourceID="SqlDataSourceGrawe" AllowSorting="True" EnableHeaderHover="True" DataSourceCachingMode="None" ColumnLayout="Fixed">      
        <Columns>
            <ej:Column DataType="number" Field="ProductID" IsPrimaryKey="True">
            </ej:Column>
            <ej:Column DataType="string" Field="ProductName" Width="100">
            </ej:Column>
            <ej:Column DataType="number" Field="SupplierID" Width="200">
            </ej:Column>
            <ej:Column DataType="number" Field="CategoryID">
            </ej:Column>
            <ej:Column DataType="string" Field="QuantityPerUnit">
            </ej:Column>
            <ej:Column DataType="number" Field="UnitPrice">
            </ej:Column>
            <ej:Column DataType="number" Field="UnitsInStock">
            </ej:Column>
            <ej:Column DataType="number" Field="UnitsOnOrder">
            </ej:Column>
            <ej:Column DataType="number" Field="ReorderLevel">
            </ej:Column>
            <ej:Column DataType="string" Field="Discontinued">
            </ej:Column>
            <ej:Column DataType="string" Field="CategoryName">
            </ej:Column>
        </Columns>
        
<PageSettings Template=""></PageSettings>
<RowDropSettings DropTargetID="" DropMapper=""></RowDropSettings>
<ScrollSettings EnableTouchScroll="False"></ScrollSettings>
        
    </ej:Grid>

Notice how the column SupplierID has the width of 200 but the headers are off.

I have tried all possible combinations.. nothing works.

Any help appreciated.

Attachment: grid_33679820.zip

Venkatesh Ayothi Raman [Syncfusion]
Replied On June 3, 2016 11:46 AM UTC

Hi Semper, 

Thank you for contacting Syncfusion support. 

We were unable to reproduce the reported issue at our end and created a sample for your convenience.  



Could you please share the following details? 
1)      Essential Studio version and browser details. 
2)      Whether you are using custom CSS for Grid headers? If so, Provide full code snippets. 
3)      Scenario for replication procedure. 
4)       A sample if possible or modify the given sample as issue reproducible. 

It would be helpful for us to find the issue and provide the appropriate solution as earliest. 

Regards, 
Venkatesh Ayothiraman. 


Semper
Replied On June 3, 2016 12:55 PM UTC

Thank you for your answer

The Essential Studio version is 14.1460.0.46 and browser is Google Chrome Version 50.0.2661.87 m (64-bit)

Our project is ASP.Net (not Syncfusion) with syncfusion controls just added.
No theme but only this for the e-grid css (we tried with the theme but same results)

.e-grid {
  font-family: Arial;
  color: #333333;
  cursor:pointer !important; 
}
.e-table {
border-collapse:collapse;
border:1px solid #FF0000;
}
.e-table td {
    border:1px solid #FF0000;
    padding-left: 7px;
    padding-right: 7px;     
}

.e-gridheader {      
  white-space:normal;
  width: auto;
  border-bottom:solid;
  border-bottom-width:2px;
  border-bottom-color: #98bed4;
  background-color: whitesmoke;

}
.e-columnChooser {
  border: 1px solid #c8c8c8;
  font-size: 12px;
  color: #333333;
}

.e-grid .e-alt_row {
  background-color: #e9f2e6;
}
.e-grid tr.e-hover {
  color: #333333;
}
.e-grid tr.e-hover {
  background: #fde3c2;
  background: -moz-linear-gradient(top, #fde3c2, #fcce91);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fde3c2), color-stop(100%, #fcce91));
  background: -webkit-linear-gradient(top, #fde3c2, #fcce91);
  background: -o-linear-gradient(top, #fde3c2, #fcce91);
  background: -ms-linear-gradient(top, #fde3c2, #fcce91);
  background: linear-gradient(to bottom, #fde3c2, #fcce91);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fde3c2', endColorstr='#fcce91', GradientType=0);
}

It's probably something with css, i'm not sure but i hope this information will help you better understand the problem
In the mean time i tried several other things, but the header just won't sync with the data below.
Like it has a width of it's own.

Thank you.




Venkatesh Ayothi Raman [Syncfusion]
Replied On June 6, 2016 10:52 AM UTC

Hi Semper, 

Thank you for the update. 

We analyzed your code example and achieved your requirement by modifying the CSS styles. Please refer to the code example and screenshot. 

Code example: 

<CSS> 
. . . 
.e-table { 
border-collapse:collapse ; 
border:1px solid #FF0000 !important; 
 
width:100%; 
table-layout: fixed; // Modified CSS styles 
margin-top: 0px; 
} 
 
.e-hide { 
 
             display:none; //Remove the unwanted row 
         } 
 
. . . 
.e-gridheader {       
  white-space:normal !important; 
  /*border-bottom:1px solid ; 
  border-bottom-width:1px !important;*/ 
  border-bottom-color: #98bed4 !important; 
  background-color: whitesmoke !important; 
 
} 
. . . 

Screenshot:  
We have created a sample too for your convenience that can be download from below location. 



Regards, 
Venkatesh Ayothiraman. 


Semper
Replied On June 7, 2016 06:48 AM UTC

That worked perfect.

Thank you.

Venkatesh Ayothi Raman [Syncfusion]
Replied On June 8, 2016 04:14 AM UTC

Hi Semper, 

Thank you for your feedback. 

We are happy to hear that your requirement is achieved. 

Thanks, 
Venkatesh Ayothiraman. 


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

;