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

Grid cell dynamic background color

Thread ID:

Created:

Updated:

Platform:

Replies:

132771 Sep 20,2017 06:17 AM UTC Sep 22,2017 05:14 AM UTC ASP.NET Core 3
loading
Tags: Grid
George Rossopoulos
Asked On September 20, 2017 06:17 AM UTC

Hi

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

George

Saravanan Arunachalam [Syncfusion]
Replied On 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-columns> 
           . . . 
        <e-column field="RGB" header-text="RGB" text-align="Left" width="75"></e-column> 
    </e-columns> 
</ej-grid> 
 <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; 
     } 
 </script> 
  
And also we have created a sample that can be download from the below link. 
Regards, 
Saravanan A. 


George Rossopoulos
Replied On September 21, 2017 01:11 PM UTC

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


Thank you

George


Saravanan Arunachalam [Syncfusion]
Replied On September 22, 2017 05:14 AM UTC

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


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

;