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.
|
<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>
|
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.
|
<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>
|
|
<style type="text/css">
.e-grid .e-toolbar{
background-color: red;
}
</style> |
