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.

Access column header style directly

Thread ID:

Created:

Updated:

Platform:

Replies:

131286 Jul 3,2017 05:14 AM Jul 5,2017 10:27 AM Angular 3
loading
Tags: ejGrid
Rykunov Alex
Asked On July 3, 2017 05:14 AM

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?

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 4, 2017 12:43 PM

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. 


Rykunov Alex
Replied On July 4, 2017 12:46 PM

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.


Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 5, 2017 10:27 AM

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. 


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.

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.

;