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
Oliver Hoebel
320
Changing cell back color based on value
posted

Hi,

I have a WebDataGrid with two columns. What I want to do is, that if the value in a cell of the first columns is lower then the cell in the 2nd column I want to have this cells back color as green, otherwise as red.

In the classic WInGrid that was not a problem but I am really lost here.

Any help is appreciated.

Thanks & Regards,

Oliver

 

Parents
No Data
Reply
  • 5513
    Suggested Answer
    Offline posted

    Hello Oliver,

     

    You can accomplish this by using some client-side code.

    First handle the Initialize client-side event fired by the WebDataGrid control.

    <ig:WebDataGrid ID="WebDataGrid1" runat="server">

            <ClientEvents Initialize="initialize" />

    </ig:WebDataGrid>

    The handler will look like this:

    function initialize(sender, eventArgs) {

            //gets all rows
            var rows = sender.get_rows();
            //iterates through the rows
            for (var i = 0; i < rows.get_length(); i++) {
                //gets the current row
                var row = rows.get_row(i);
                //gets the first and the second cell of the current row
                var cell1 = row.get_cell(0);
                var cell2 = row.get_cell(1);

                //compares their values
                if (cell1.get_value() > cell2.get_value())
                    //adds a class with custom properties for the cell
                    cell1.get_element().classList.add('red');
                else
                    cell1.get_element().classList.add('green');
            }

    }

    This example expects two classes to be added to the stylesheet.

    .red
    {
        background-color: Red ! important;
    }
    .green
    {
        background-color: Green ! important;
    }

    Hope this helps. Please let me know if you need further assistance.

     

    Best regards,

    Stamen Stoychev

     

Children