Grid column headings

Hello,

I am using colours for the column heading backgrounds but as you can see the boxes are not filled out end to end which is what I want to achieve.



I'm achieving this using for example

<script id="Head1" type="text/x-jsrender">
             <span style="background: #0b5ed7;color: #fff;border-right: 1px solid #ddd;text-align: center;font-weight: normal;
             font-size: 13px;display:  block; padding: 11px 0;">Head1</span>
</script>
.....

To fix my issue I need to do this

table_content-div .e-grid.e-wrap .e-columnheader .e-headercelldiv {
     margin-bottom: 0; 
 }
 .table_content-div .e-grid .e-headertemplate>.e-headercelldiv {
    padding: 0;
}
.table_content-div .e-grid .e-gridheader .e-headercell, .e-grid .e-rowcell{padding:0;}

But when I apply this css on the page, I am unable to resize the columns with the mouse.

David



1 Reply

VN Vignesh Natarajan Syncfusion Team April 11, 2018 02:56 PM UTC

Hi David, 
 
Thanks for using Syncfusion products. 
 
We have analyzed your query and we suspect that you want to change the background color of the Headercell without affecting the resizing behavior. We have achieved your using CssClass property of the Grid. 
Refer the below code snippet 
 
<Columns> 
                <ej:Column Field="OrderID" CssClass="red" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> 
                <ej:Column Field="CustomerID" CssClass="blue" HeaderText="Customer ID" Width="90" /> 
                <ej:Column Field="ShipCity" CssClass="yellow" HeaderText="Ship City" Width="90" /> 
                <ej:Column Field="OrderDate" CssClass="green" HeaderText="Order Date" HeaderTemplateID="#dateTemplate" 
                    TextAlign="Right" Width="100" Format="{0:MM/dd/yyyy}" /> 
                <ej:Column Field="ShipCountry" CssClass="purple" HeaderText="Ship Country" Width="110" /> 
                <ej:Column Field="EmployeeID" CssClass="orange" HeaderText="Emp ID" HeaderTemplateID="#employeeTemplate" TextAlign="Right" Width="90" /> 
            </Columns> 
 
          .           .           .  
 
<style type="text/css"> 
        .e-grid .red.e-headercell{ 
            background-color:red; 
            color:white 
        } 
         .e-grid .blue.e-headercell{ 
            background-color:blue; 
            color:white 
         } 
          .e-grid .yellow.e-headercell{ 
            background-color:yellow; 
            color:white 
        } 
           .e-grid .green.e-headercell{ 
            background-color:green; 
            color:white                
        } 
           .e-grid .orange.e-headercell{ 
            background-color:orange; 
            color:white 
        } 
        .e-grid .purple.e-headercell{ 
            background-color:purple; 
            color:white       
        } 
    </style>   
  
Refer the below screenshot for the output 
 
 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
Refer our help documentation for your reference 
 
 
Regards, 
Vignesh Natarajan 
 


Loader.
Up arrow icon