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. Image for the cookie policy date

How can we change the background column depending on column value in syncfusion angular js grid?

Hi guys,
I am trying to change background color of of column termplate depending on the column value? Angular events ,ng-style and ng-class doesn't work!! Something like this exists in JQuery/JS pârt but not in Angular JS way? look at the attached image to see an example. 

Attachment: sync_c3b5e064.zip

1 Reply

MS Mani Sankar Durai Syncfusion Team December 13, 2016 11:10 AM UTC

Hi Test, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we have prepared a sample based on your requirement that can be available from the below link. 
From the above code example we have used ng-style for the columnTemplate and changed the background color as red. Also we can use queryCellInfo event in grid to change the background color for the column based on the corresponding value. So that we can customize each cell based on our needs. 

Please refer the below code example. 
<body ng-controller="PhoneListCtrl"> 
    <div id="grid" ej-grid e-datasource="data" 
         e-columns="col" e-allowpaging="true" e-querycellinfo="querycellinfo"></div> 
    <script type="text/javascript"> 
        angular.module('listCtrl', ['ejangular']) 
          .controller('PhoneListCtrl', function ($scope) { 
              $scope.querycellinfo = function (args) { 
                  if (args.text == "10007") { 
                      $(args.cell).css("background-color", "#336c12") 
              //Columns for Parent Grid 
              $scope.col = [ 
                             { "headerText": "Ng click", "template":"#actionTemplate", "textAlign": "right", "width": 90 }] 
    <script type="text/ng-template" id="actionTemplate"> 
        <div id='exportIntegratorTemplate' ng-style="{'background-color':data.Color, 'cursor': 'pointer'}">{{data.Color}}</div> 

Please refer the documentation link. 

If you still face the issue please get back to us with the following details. 
1.       Share the full grid code that you have rendered. 
2.       Share the screenshot or video of the issue that you have faced. 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Please let us know if you need further assistance. 

Manisankar Durai 

Live Chat Icon For mobile
Up arrow icon