Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Manoj Kumar
155
Web Data Grid Column back Color Change
posted

Dear Sir, 

         I have totally 25 Columns in a WebDataGrid, here i need to change the back color of the Particular Columns 

for example,

Column 2 to Column 7  in Yellow Color Back Ground

Column 8 to Column 13 in blue Color background 

Column 14 to Column 19 in Grey Color BackGround

Column 20 to Column 25 in Alice Blue  backGround

I already note the EditingCore  in the Grid Controls but it was not reference in the parental Control of web.ui.gridcontrols.....

Kindly Help me....

  • 16310
    Verified Answer
    Offline posted

    Hello Kumar,

    I suggest that you do this on the client using the Initialize event of the grid. You can get all <td> elements that the column consists of using jQuery and apply them inline style as follows:

    Code Snippet
    1. <script type="text/javascript" id="igClientScript">
    2. function ApplyStyle(sender, eventArgs)
    3.     {
    4.         var i;
    5.         for (i = 2; i < 8; i++) {
    6.             $("tr>td:nth-child(" + i + ")").css("background-color", "yellow");
    7.         }
    8.         for (i = 8; i < 14; i++) {
    9.             $("tr>td:nth-child(" + i + ")").css("background-color", "lightblue");
    10.         }
    11.         for (i = 14; i < 20; i++) {
    12.             $("tr>td:nth-child(" + i + ")").css("background-color", "grey");
    13.         }
    14.         for (i = 20; i < 25; i++) {
    15.             $("tr>td:nth-child(" + i + ")").css("background-color", "lightblue");
    16.         }
    17.     }
    18. </script>
    19.  
    20. <ig:WebDataGrid ID="WebDataGrid1" runat="server" AutoGenerateColumns="true">
    21.     <ClientEvents Initialize="ApplyStyle" />
    22.     ...

    On the server you can get the columns you need and add css class like this:

    Code Snippet
    1. for (int i = 2; i < 8; i++)
    2. {
    3.     WebDataGrid1.Columns[i].CssClass = "yellow";
    4. }

    However the styles you add in this classes will be overwritten by the default ones and in order to work you will need to specify them as !important:

    .yellow {

    background-color: yellow !important;

    }

    , which is not a recommended approach.

    I prepared a sample demonstrating both scenarios (My grid has less columns). Please let me know if you have any further questions on the matter.

    WebDataGrid_ChangeBackground.zip