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.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

127834 Dec 12,2016 04:12 PM UTC Dec 13,2016 11:10 AM UTC JavaScript 1
loading
Tags: ejGrid
test
Asked On December 12, 2016 04:12 PM UTC

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

Mani Sankar Durai [Syncfusion]
Replied On 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> 
    <script type="text/ng-template" id="actionTemplate"> 
        <div id='exportIntegratorTemplate' ng-style="{'background-color':data.Color, 'cursor': 'pointer'}">{{data.Color}}</div> 
    </script> 
 </body> 
</html> 


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. 

Regards, 
Manisankar Durai 


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.

Warning Icon 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.Close Icon

;