Grid column headings

[David Price]

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

[Vignesh Natarajan]

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 

 

Sample: http://www.syncfusion.com/downloads/support/forum/136947/ze/SyncfusionASPNETApplication18-880482055  

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/aspnet/grid/style-and-appearance  

 

Regards, 

Vignesh Natarajan