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

Conditional Formatting

LocationIDNamePopulationAreaParentID
1
Page size:
1Asia3,879,000,00043,820,000 km2 
2Africa922,011,00030,370,000 km2 
3North America528,720,58824,490,000 km2 
4South America382,000,00017,840,000 km2 
 5Antarctica1,00013,720,000 km2 
6Europe731,000,00010,180,000 km2 
7Australia22,000,0009,008,500 km2 
Population (in millions) Population

The above demo shows how one can apply a custom style to RadTreeList rows and cells conditionally. Note that the UniqueName of the corresponding column should be declared explicitly in order to be able to access the relevant cell by column name.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" Inherits="Telerik.TreeListExamplesCSharp.Appearance.ConditionalFormatting.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-custom">
        <div>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="LocationID" ParentDataKeyNames="ParentLocationID" AllowPaging="true" OnItemDataBound="RadTreeList1_ItemDataBound" PageSize="8" AutoGenerateColumns="false">
                    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                    <Columns>
                        <telerik:TreeListBoundColumn DataField="LocationID" UniqueName="LocationID" HeaderText="LocationID" HeaderStyle-Width="80px"></telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="LocationName" UniqueName="LocationName" HeaderText="Name" ItemStyle-HorizontalAlign="Center"></telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="Population" DataFormatString="{0:#,#0}" UniqueName="Population" HeaderText="Population" ItemStyle-HorizontalAlign="Right"></telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="Area" DataFormatString="{0:#,# km<sup>2</sup>}" UniqueName="Area" HeaderText="Area" ItemStyle-HorizontalAlign="Right"></telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="ParentLocationID" UniqueName="ParentLocationID" HeaderText="ParentID" HeaderStyle-Width="80px"></telerik:TreeListBoundColumn>
                    </Columns>
                </telerik:RadTreeList>
            </telerik:RadAjaxPanel>
        </div>
        <div class="legendContainer">
            <div class="legend">
                <span class="label">Population (in millions) </span>
                <img src="./images/legend_population.png" alt="Population" />
            </div>
        </div>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>" SelectCommand="SELECT [LocationID], [LocationName], [Population], [Area], [ParentLocationID] FROM [WorldLocations]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance