New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Conditional Formatting


  • Demo Configurator
Conditional formatting rules
  • Highlight clients that are:Duplicate
  • Highlight shipment type:express
  • Highlight discount range:
    GreaterThanOrEqualTo
     
  • Highlight prices that are in:
    Top
     

RadSpreadProcessing supports conditional visual formatting based on the underlying data of the worksheet. It allows you to create new rules or modify existing ones. The current example demonstrates how to add conditional formatting elements programmatically, while showcasing some of the rule options.

Note: The image above illustrates the appearance of the Excel spreadsheet before applying the conditional formatting.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.SpreadProcessing.GenerateDocuments.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <style>
        .demo-container .info-button {
            font-size: 1.4em;
            color: #0487c4;
            position: absolute;
            top: 20%;
            margin-left: 4px;
        }
    </style>
    <div class="demo-containers">
        <div class="demo-container">
            <div style="position: relative; vertical-align: middle">
                <telerik:RadButton runat="server" ID="RadButton1" Text="Export Document" AutoPostBack="true" OnClick="RadButton1_Click" Primary="true" />
                <span id="infoIcon" class="p-icon p-i-help info-button" title="Use the Demo Configurator to modify the predifined Conditional Formatting rules."></span>
                <telerik:RadToolTip runat="server" OffsetX="-100" RelativeTo="Element" TargetControlID="infoIcon" IsClientID="true" Width="300"></telerik:RadToolTip>
            </div>
            <br />
            <asp:Image ImageUrl="~/SpreadProcessing/SampleData/conditional-formatting.png" ID="Image1" runat="server" />
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <fieldset>
                    <legend>Conditional formatting rules</legend>

                    <qsf:ConfiguratorColumn runat="server" Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <qsf:DropDownList Size="Medium" runat="server" ID="ClientColDropDownList" Label="Highlight clients that are:">
                                    <Items>
                                        <telerik:DropDownListItem Value="duplicate" Text="Duplicate" Selected="true" />
                                        <telerik:DropDownListItem Value="unique" Text="Unique" />
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                            <li>
                                <qsf:DropDownList Size="Medium" runat="server" ID="ShippingColDropDownList" Label="Highlight shipment type:">
                                    <Items>
                                        <telerik:DropDownListItem Value="1 day" Text="1 day" />
                                        <telerik:DropDownListItem Value="2 days" Text="2 days" />
                                        <telerik:DropDownListItem Value="express" Text="express" Selected="true" />
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>

                    <qsf:ConfiguratorColumn runat="server" Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <span class="label">Highlight discount range:</span>

                                <qsf:DropDownList Size="Wide" runat="server" ID="DiscountColDropDownList">
                                    <Items>
                                        <telerik:DropDownListItem Value="GreaterThan" Text="GreaterThan" />
                                        <telerik:DropDownListItem Value="GreaterThanOrEqualTo" Text="GreaterThanOrEqualTo" Selected="true" />
                                        <telerik:DropDownListItem Value="LessThan" Text="LessThan" />
                                        <telerik:DropDownListItem Value="LessThanOrEqualTo" Text="LessThanOrEqualTo" />
                                    </Items>
                                </qsf:DropDownList>
                                &nbsp;
                            <qsf:NumericTextBox runat="server" ID="DiscountColTextBox" NumberFormat-DecimalDigits="2" ShowSpinButtons="false" Value="0.07" />

                            </li>
                            <li>
                                <span class="label">Highlight prices that are in:</span>
                                <qsf:DropDownList Size="Medium" runat="server" ID="TotalPriceColDropDownList">
                                    <Items>
                                        <telerik:DropDownListItem Value="top" Text="Top" Selected="true" />
                                        <telerik:DropDownListItem Value="bottom" Text="Bottom" />
                                    </Items>
                                </qsf:DropDownList>
                                &nbsp;
                            <qsf:NumericTextBox runat="server" ID="TotalPriceColTextBox" NumberFormat-DecimalDigits="0"
                                ShowSpinButtons="false" MinValue="0" Value="5" />
                            </li>
                           <li>
                                <qsf:Button Text="Export" ID="Button2" OnClick="RadButton1_Click" runat="server" Size="Narrow" Height="20" />
                           </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </fieldset>
            </qsf:View>
        </Views>

    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance