How to: conditional formatting WebDataGrid using CSOM (including summaries)

5368

How to: conditional formatting WebDataGrid using CSOM (including summaries)

Rob Hudson posted over 12 years ago

I could not find a good document on how to do this, so I hope this helps someone else.

The end result is that selected fields values are color-coded based on their value:

negative values are red,
0 values are black,
and positive values are green.

Because you are actually manipulating the HTML for the cell, you can also use this same logic to insert images, links, etc, right into the cell. This is terrific for creating drill-down functionality.

If someone from IG would like to jump in and show us a better way to conditionally format summaries, that would be super, because the way I came up with uses unsupported functions.

TestPage.aspx
<%@ Page Language="VB" CodeFile="TestPage.aspx.vb" Inherits="TestPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        .amountpositive, li.amountpositive a span

        {

            color: Green;

            text-align: right;

        }

        .amountnegative, li.amountnegative a span

        {

            color: Red;

            text-align: right;

        }

        .amount0

        {

            color: Black;

            text-align: right;

        }

    </style>

    <script type="text/javascript" id="igClientScript">

<!--

        function WebDataGrid1_Grid_Initialize(sender, eventArgs) {

            ///<param name="sender" type="Infragistics.Web.UI.ControlMain"></param>

            ///<param name="eventArgs" type="Infragistics.Web.UI.EventArgs"></param>

            // loop through all rows, and format each cell based on value

            var rows = sender.get_rows();

            var rowlength = rows.get_length();

            var rowindex = 0;

            var currentrow;

            for (rowindex = 0; rowindex <= rowlength - 1; rowindex++) {

                currentrow = rows.get_row(rowindex);

                format_wdgcell(currentrow.get_cellByColumnKey("amountfield1"));

                format_wdgcell(currentrow.get_cellByColumnKey("amountfield2"));

                format_wdgcell(currentrow.get_cellByColumnKey("amountfield3"));

            }

        }

        function format_wdgcell(wdgcell) {

            var currentvalue = parseFloat(wdgcell.get_value());

            if (currentvalue == 0) {

                wdgcell.set_text("-");

                wdgcell.get_element().className = "amount0";

                wdgcell.get_element().style.textAlign = "right";

                wdgcell.get_element().style.paddingRight = "25px";

            }

            if (currentvalue > 0) {

                wdgcell.get_element().className = "amountpositive";

                wdgcell.get_element().style.textAlign = "right";

                wdgcell.get_element().style.paddingRight = "12px";

            }

            if (currentvalue < 0) {

                wdgcell.get_element().style.textAlign = "right";

                wdgcell.get_element().className = "amountnegative";

                wdgcell.get_element().style.paddingRight = "8px";

            }

        }

        function WebDataGrid1_SummaryRow_SummaryCalculated(sender, eventArgs) {

            ///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>

            ///<param name="eventArgs" type="Infragistics.Web.UI.SummaryCalculatedArgs"></param>

            //loop through all summaries

            var summaryCount = eventArgs.get_columnSummaryInfo().get_summaryCount();

            for (var i = 0; i < summaryCount; i++) {

                var colsum = eventArgs.get_columnSummaryInfo().get_summary(i);

                //check to see if the summary has a value

                //prevents error if grid is not visible or not yet bound

                if (colsum.get_value()) {

                    var colkey = eventArgs.get_columnSummaryInfo().get_columnKey();

                    switch (colkey) {

                        case "amountfield1":

                        case "amountfield2":

                        case "amountfield3":

                            var currentvalue = parseFloat(colsum.get_value());

                            if (currentvalue == 0) {

                                colsum.set_value("-");

                                colsum._get_cellElement().className = "amount0";

                                colsum._get_cellElement().style.textAlign = "right";

                                colsum._get_cellElement().style.paddingRight = "25px";

                            }

                            if (currentvalue > 0) {

                                colsum._get_cellElement().className = "amountpositive";

                                colsum._get_cellElement().style.textAlign = "right";

                                colsum._get_cellElement().style.paddingRight = "12px";

                            }

                            if (currentvalue < 0) {

                                colsum._get_cellElement().className = "amountnegative";

                                colsum._get_cellElement().style.textAlign = "right";

                                colsum._get_cellElement().style.paddingRight = "8px";

                            }

                            break;

                        default:

                    }

                };

            }

        }

// -->

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <ig:WebScriptManager ID="WebScriptManager1" runat="server">

    </ig:WebScriptManager>

    <ig:WebDataGrid ID="WebDataGrid1" runat="server" StyleSetName="IG" 

        AutoGenerateColumns="false" DefaultColumnWidth="125px">

        <Columns>

            <ig:BoundDataField DataFieldName="period" Key="period">

                <Header Text="Period" />

            </ig:BoundDataField>

            <ig:BoundDataField DataFieldName="amountfield1" Key="amountfield1" DataType="System.Double"

                DataFormatString="{0:c}">

                <Header Text="amountfield1" />

            </ig:BoundDataField>

            <ig:BoundDataField DataFieldName="amountfield2" Key="amountfield2" DataType="System.Double"

                DataFormatString="{0:c}">

                <Header Text="amountfield2" />

            </ig:BoundDataField>

            <ig:BoundDataField DataFieldName="amountfield3" Key="amountfield3" DataType="System.Double"

                DataFormatString="{0:c}">

                <Header Text="amountfield3" />

            </ig:BoundDataField>

        </Columns>

        <ClientEvents Initialize="WebDataGrid1_Grid_Initialize" />

        <Behaviors>

            <ig:SummaryRow>

                <SummaryRowClientEvents SummaryCalculated="WebDataGrid1_SummaryRow_SummaryCalculated" />

                <ColumnSummaries>

                    <ig:ColumnSummaryInfo ColumnKey="period">

                        <Summaries>

                            <ig:Summary SummaryType="Count" />

                        </Summaries>

                    </ig:ColumnSummaryInfo>

                    <ig:ColumnSummaryInfo ColumnKey="amountfield1">

                        <Summaries>

                            <ig:Summary SummaryType="Sum" />

                            <ig:Summary SummaryType="Min" />

                            <ig:Summary SummaryType="Max" />

                            <ig:Summary SummaryType="Average" />

                        </Summaries>

                    </ig:ColumnSummaryInfo>

                    <ig:ColumnSummaryInfo ColumnKey="amountfield2">

                        <Summaries>

                            <ig:Summary SummaryType="Sum" />

                            <ig:Summary SummaryType="Min" />

                            <ig:Summary SummaryType="Max" />

                            <ig:Summary SummaryType="Average" />

                        </Summaries>

                    </ig:ColumnSummaryInfo>

                    <ig:ColumnSummaryInfo ColumnKey="amountfield3">

                        <Summaries>

                            <ig:Summary SummaryType="Sum" />

                            <ig:Summary SummaryType="Min" />

                            <ig:Summary SummaryType="Max" />

                            <ig:Summary SummaryType="Average" />

                        </Summaries>

                    </ig:ColumnSummaryInfo>

                </ColumnSummaries>

            </ig:SummaryRow>

        </Behaviors>

    </ig:WebDataGrid>

    </form>

</body>

</html>

TestPage.aspx.vb
Partial Class TestPage

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim tbl As New DataTable

        tbl.Columns.Add("period")

        tbl.Columns.Add("amountfield1", GetType(System.Double))

        tbl.Columns.Add("amountfield2", GetType(System.Double))

        tbl.Columns.Add("amountfield3", GetType(System.Double))

        Dim rnd As New Random()

        For iMonth = 1 To 8

            Dim rw As DataRow = tbl.NewRow

            rw("period") = MonthName(iMonth)

            rw("amountfield1") = rnd.Next(-100000, 100000) / 100

            rw("amountfield2") = rnd.Next(-100000, 100000) / 100

            rw("amountfield3") = rnd.Next(-100000, 100000) / 100

            tbl.Rows.Add(rw)

        Next

        Me.WebDataGrid1.DataSource = tbl

    End Sub

End Class