1. Home
  2. Forum
  3. Angular
  4. Access column header style directly

Access column header style directly

Greetings.

I have the following problem:

In my business logic I need to change the background color of the grid header. My grid has the stacked headers, so, I need to change the color of both the stacked header, and the normal one.

The only way to access header cell background color that I've found was column cssClass property. However, it seems that the grid doesnt update it's css without grid refresh, so, the changes are not displayed for the user. I've tried to use grid._refreshHeader() method, however it breaks the stackedHeaders.

Is there any other way to access column header background color directly?

5 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team July 4, 2017 04:43 PM UTC

Hi Rykunov, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to change the header cell background colour of ejGrid control. 

Refer the below code example. 


<style type="text/css"> 
     
    .e-grid .e-columnheader .e-headercell { // to apply css for normal header cell 
       background-color: blue; 
    } 
    .e-grid .e-stackedHeaderRow .e-stackedHeaderCell{ //to apply css for stacked header cell 
       background-color: red; 
    } 
     
    </style> 



We have prepared a simple JsPlayground sample in the following link. 


Refer the help documentation. 


If we misunderstood your query then please get back to us. 

Regards, 
Thavasianand S. 


RA Rykunov Alex July 4, 2017 04:46 PM UTC

Thank you for your help. However, I must notice, that the header background color must change dynamically, which is impossible with static styles. Unless we can change classes attached to the header at any point.


TS Thavasianand Sankaranarayanan Syncfusion Team July 5, 2017 02:27 PM UTC

Hi Rykunov, 

We have analyzed your query and we suspect that you want change the css color for the header cell, stacked header cell dynamically. By using the css attribute, we can change the background color for the header cell in Grid. 

In the given example, we have change the color of header cell by clicking the external button.  

Refer the below code example. 


<body ng-controller="PhoneListCtrl"> 
 
    <a rel='nofollow' href="#" ng-click="green()" title="Change to first color"> 
        <button>green</button> 
    </a> 
    <a rel='nofollow' href="#" ng-click="brown()" title="change to second color"> 
        <button>brown</button> 
    </a> 
     
    ---------------- 
 
    <script> 
         
 
        angular.module('listCtrl', ['ejangular']) 
        .controller('PhoneListCtrl', function ($scope, $timeout) { 
            $scope.data = obj; 
             
            ------------- 
 
              $scope.green = function () { 
 
                  $('.gradient-green .e-columnheader .e-headercell').css("background-color", "green"); // while clicking the green button header cell color changed 
 
                  $('.gradient-green .e-stackedHeaderRow .e-stackedHeaderCell').css("background-color", "yellow"); // while clicking the green button stacked header cell color changed 
 
              } 
 
            $scope.brown = function () { 
 
                $('.gradient-green .e-columnheader .e-headercell').css("background-color", "brown"); // while clicking the brown button header cell color changed 
 
                $('.gradient-green .e-stackedHeaderRow .e-stackedHeaderCell').css("background-color", "orange"); // while clicking the brown button stacked header cell color changed 
 
            } 
 
        }); 
    </script> 
    <style type="text/css"> 
        .gradient-green .e-columnheader .e-headercell { 
            background-color: blue; // at initially set the color for header cell 
        } 
 
        .gradient-green .e-stackedHeaderRow .e-stackedHeaderCell { 
            background-color: red; // at initially set the color for stacked header cell 
        } 
    </style> 
</body> 


We have prepared a JsPalyground sample in the following link. 


Regards, 
Thavasianand S. 


AL Alvaro February 1, 2021 01:35 PM UTC

Good afternoon.
And is it possible to access the styles of the toolbar directly from .css?

PS Pon Selva Jeganathan Syncfusion Team February 2, 2021 04:19 PM UTC

Hi Alvaro,   
  
Thanks for contacting syncfusion forum 
     
Query: is it possible to access the styles of the toolbar directly from .css? 
  
Yes, you can access the styles of the toolbar directly.  In below sample, we change the toolbar background colour using CSS. Please refer to the below code snippet, 
<style type="text/css"> 
    
    .e-grid .e-toolbar{ 
              background-color: red; 
    } 
     
  </style> 
  
Please refer to the below sample: 
http://jsplayground.syncfusion.com/5ayxtorw 
  
Kindly get back to us for further assistance.   
  
Regards,  
Pon selva   


Loader.
Up arrow icon