Group Title

RadTileList offers group titles (Figure 1) as of Q1 2016. To set the title of a group, use its Title property (Example 1). You can also set it on the client side via the set_groupTitle method (Example 2).

When data binding a TileList control, you can set the group titles declaratively when you define the groups structure. Alternatively, you can use the OnTileDataBound event to access the associated data item and set a group's title according to your business logic. You can see this in action in the Declarative DataSource Live Demo.

Figure 1: Group Titles in RadTileList

Example 1: Set group title via server property. This code results in Figure 1.

<pre><code class="language-">&lt;telerik:RadTileList RenderMode=&quot;Lightweight&quot; runat=&quot;server&quot; ID=&quot;RadTileList1&quot;&gt;
&lt;Groups&gt;
&lt;telerik:TileGroup Title=&quot;First Group&quot;&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile1&quot; Text=&quot;tile 1, group 1&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile2&quot; Text=&quot;tile 2, group 1&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile3&quot; Text=&quot;tile 3, group 1&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;/telerik:TileGroup&gt;
&lt;telerik:TileGroup Title=&quot;Second Group&quot;&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile4&quot; Text=&quot;tile 1, group 2&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile5&quot; Text=&quot;tile 2, group 2&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile6&quot; Text=&quot;tile 3, group 2&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;/telerik:TileGroup&gt;
&lt;/Groups&gt;
&lt;/telerik:RadTileList&gt;</code></pre>

Example 2: Set group title on the client side.

<asp:Button ID="Button1" Text="set group titles" OnClientClick="setGroupTitles(); return false;" runat="server" />
<script type="text/javascript">
    function setGroupTitles() {
        var tileList = $find("<%=RadTileList1.ClientID%>");
        var groups = tileList.get_groups();
        groups.forEach(function (group, index) {
            var tileCount = group.get_tiles().get_count();
            var title = "Tiles number: " + tileCount;
            tileList.set_groupTitle(group, title);
        });
    }
</script>
<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1">
    <Groups>
        <telerik:TileGroup>
            <telerik:RadTextTile runat="server" ID="RadTextTile1" Text="tile 1, group 1"></telerik:RadTextTile>
            <telerik:RadTextTile runat="server" ID="RadTextTile2" Text="tile 2, group 1"></telerik:RadTextTile>
            <telerik:RadTextTile runat="server" ID="RadTextTile3" Text="tile 3, group 1"></telerik:RadTextTile>
        </telerik:TileGroup>
        <telerik:TileGroup>
            <telerik:RadTextTile runat="server" ID="RadTextTile4" Text="tile 1, group 2"></telerik:RadTextTile>
            <telerik:RadTextTile runat="server" ID="RadTextTile5" Text="tile 2, group 2"></telerik:RadTextTile>
            <telerik:RadTextTile runat="server" ID="RadTextTile6" Text="tile 3, group 2"></telerik:RadTextTile>
        </telerik:TileGroup>
    </Groups>
</telerik:RadTileList>

Example 3: Clearing group titles on the client.

<pre><code class="language-">&lt;asp:Button ID=&quot;Button1&quot; Text=&quot;clear group titles&quot; OnClientClick=&quot;clearGroupTitles(); return false;&quot; runat=&quot;server&quot; /&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function clearGroupTitles() {
var tileList = $find(&quot;&lt;%=RadTileList1.ClientID%&gt;&quot;);
tileList.clearGroupTitles();
}
&lt;/script&gt;
&lt;telerik:RadTileList RenderMode=&quot;Lightweight&quot; runat=&quot;server&quot; ID=&quot;RadTileList1&quot;&gt;
&lt;Groups&gt;
&lt;telerik:TileGroup Title=&quot;First Group&quot;&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile1&quot; Text=&quot;tile 1, group 1&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile2&quot; Text=&quot;tile 2, group 1&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile3&quot; Text=&quot;tile 3, group 1&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;/telerik:TileGroup&gt;
&lt;telerik:TileGroup Title=&quot;Second Group&quot;&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile4&quot; Text=&quot;tile 1, group 2&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile5&quot; Text=&quot;tile 2, group 2&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;telerik:RadTextTile runat=&quot;server&quot; ID=&quot;RadTextTile6&quot; Text=&quot;tile 3, group 2&quot;&gt;&lt;/telerik:RadTextTile&gt;
&lt;/telerik:TileGroup&gt;
&lt;/Groups&gt;
&lt;/telerik:RadTileList&gt;</code></pre>

See Also

In this article
Not finding the help you need? Improve this article