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. Image for the cookie policy date

Grid Headers width problem

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

5 Replies

VA Venkatesh Ayothi Raman Syncfusion Team 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. 



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





VA Venkatesh Ayothi Raman Syncfusion Team 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. 



SE Semper June 7, 2016 06:48 AM UTC

That worked perfect.

Thank you.


VA Venkatesh Ayothi Raman Syncfusion Team 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. 


Loader.
Up arrow icon