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

Grid cell dynamic background color


I have a field that contains an RGB value in Numeric (int) field which is the background color.
How can I change the field's background color to this value.
I can also change the field to string containing a color value like "#ffffff"

Thank you in advance for the help


3 Replies

SA Saravanan Arunachalam Syncfusion Team September 21, 2017 05:43 AM UTC

Hi George, 
Thanks for contacting Syncfusion’s support. 
We have analyzed your requirement and achieved it by using query-cell-info event of Grid control. In that event, we have used an algorithm which change the rgb color code to hex color code and based on the hex color code we have changed the background color of the cell. Please refer to the below code example and api reference link. 
<ej-grid id="FlatGrid" datasource="ViewBag.datasource" allow-paging="true" query-cell-info="onQuerycellInfo"> 
           . . . 
        <e-column field="RGB" header-text="RGB" text-align="Left" width="75"></e-column> 
 <script type="text/javascript"> 
     function onQuerycellInfo(args) { 
         if (args.column.field == "RGB") { 
             var val = args.text.split(","); 
             var str = "#" + componentToHex(parseInt(val[0])) + componentToHex(parseInt(val[1])) + componentToHex(parseInt(val[2])); 
             args.cell.bgColor = str; //change the background color based on hex code 
             $(args.cell).css("color", "white"); 
     function componentToHex(c) { 
         //Algorithm to convert rgb value to hex code. 
         var hex = c.toString(16); 
         return hex.length == 1 ? "0" + hex : hex; 
And also we have created a sample that can be download from the below link. 
Saravanan A. 

GR George Rossopoulos September 21, 2017 01:11 PM UTC

Thank you for the prompt reply. As usual superb support!!!!

Thank you


SA Saravanan Arunachalam Syncfusion Team September 22, 2017 05:14 AM UTC

Hi George,  
Thanks for your update.            
We are happy that the provided information helped you. 
Saravanan A. 

Live Chat Icon For mobile
Up arrow icon