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

Custom Attributes

  • Bulgaria
  • Spain
  • United Kingdom
  • Germany
PageView1Image
Country:
Bulgaria
Capital:
Sofia
Area:
110,994 km²
Population:
7 364 570
PageView2Image
Country:
Capital:
Area:
Population:
PageView3Image
Country:
Capital:
Area:
Population:
PageView4Image
Country:
Capital:
Area:
Population:

The demo demonstrates how to use the Attributes collection to expand the information stored with the tabs. There could be stored any number of attributes as name/value pairs and used regarding a specific scenario.

You could set the custom attribute declaratively in the following manner: 

        <telerik:RadTab runat="server" Text="Bulgaria" Area="110,994 km" Population="7 364 570" Capital="Sofia"...
А desirable attribute could be accessed from the Attributes collection like : 
        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            lblArea.Text = e.Tab.Attributes["Area"];
            lblPopulation.Text = e.Tab.Attributes["Population"];
            lblCapital.Text = e.Tab.Attributes["Capital"];
        }
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.ApplicationScenarios.CustomAttributes.DefaultCS"Language="c#"  %>

<%@ 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" type="text/css" />
</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 no-bg">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server"  Align="Justify" AutoPostBack="true" MultiPageID="RadMultiPage1"
                 OnTabClick="RadTabStrip1_TabClick" SelectedIndex="0" Skin="Silk">
                <Tabs>
                    <telerik:RadTab runat="server" Text="Bulgaria" Area="110,994 km" Population="7 364 570" Capital="Sofia" Country="Bulgaria"
                        CountryImage="~/TabStrip/Examples/Application-Scenarios/Custom-Attributes/images/Bulgaria.png">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Spain" Area="505,992 km" Population="47,265,321" Capital="Madrid" Country="Spain"
                        CountryImage="~/TabStrip/Examples/Application-Scenarios/Custom-Attributes/images/Spain.png">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="United Kingdom" Area="243,610 km" Population="63,181,775" Capital="London" Country="United Kingdom"
                        CountryImage="~/TabStrip/Examples/Application-Scenarios/Custom-Attributes/images/UK.png">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Germany" Area="357,021 km" Population="81,799,600" Capital="Berlin" Country="Germany"
                        CountryImage="~/TabStrip/Examples/Application-Scenarios/Custom-Attributes/images/Germany.png">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage runat="server" ID="RadMultiPage1" CssClass="RadMultiPage" SelectedIndex="0" Height="250px">
                <telerik:RadPageView runat="server" ID="RadPageView1">
                    <div class="image-container">
                        <img runat="server" id="PageView1Image"  alt="PageView1Image" />
                    </div>
                    <div class="country-summary">
                        <dl>
                            <dt>Country:</dt>
                            <dd>
                                <asp:Label ID="lblPV1Country" runat="server"></asp:Label></dd>
                            <dt>Capital:</dt>
                            <dd>
                                <asp:Literal ID="lblPV1Capital" runat="server" /></dd>
                            <dt>Area:</dt>
                            <dd>
                                <asp:Literal ID="lblPV1Area" runat="server" /></dd>
                            <dt>Population:</dt>
                            <dd>
                                <asp:Literal ID="lblPV1Population" runat="server" /></dd>
                        </dl>
                    </div>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView2">
                    <div class="image-container">
                        <img runat="server" id="PageView2Image"  alt="PageView2Image" />
                    </div>
                    <div class="country-summary">
                        <dl>
                            <dt>Country:</dt>
                            <dd>
                                <asp:Label ID="lblPV2Country" runat="server"></asp:Label></dd>
                            <dt>Capital:</dt>
                            <dd>
                                <asp:Literal ID="lblPV2Capital" runat="server" /></dd>
                            <dt>Area:</dt>
                            <dd>
                                <asp:Literal ID="lblPV2Area" runat="server" /></dd>
                            <dt>Population:</dt>
                            <dd>
                                <asp:Literal ID="lblPV2Population" runat="server" /></dd>
                        </dl>
                    </div>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView3">
                    <div class="image-container">
                        <img runat="server" id="PageView3Image" alt="PageView3Image" />
                    </div>
                    <div class="country-summary">
                        <dl>
                            <dt>Country:</dt>
                            <dd>
                                <asp:Label ID="lblPV3Country" runat="server"></asp:Label></dd>
                            <dt>Capital:</dt>
                            <dd>
                                <asp:Literal ID="lblPV3Capital" runat="server" /></dd>
                            <dt>Area:</dt>
                            <dd>
                                <asp:Literal ID="lblPV3Area" runat="server" /></dd>
                            <dt>Population:</dt>
                            <dd>
                                <asp:Literal ID="lblPV3Population" runat="server" /></dd>
                        </dl>
                    </div>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView4">
                    <div class="image-container">
                        <img runat="server" id="PageView4Image" alt="PageView4Image" />
                    </div>
                    <div class="country-summary">
                        <dl>
                            <dt>Country:</dt>
                            <dd>
                                <asp:Label ID="lblPV4Country" runat="server"></asp:Label></dd>
                            <dt>Capital:</dt>
                            <dd>
                                <asp:Literal ID="lblPV4Capital" runat="server" /></dd>
                            <dt>Area:</dt>
                            <dd>
                                <asp:Literal ID="lblPV4Area" runat="server" /></dd>
                            <dt>Population:</dt>
                            <dd>
                                <asp:Literal ID="lblPV4Population" runat="server" /></dd>
                        </dl>
                    </div>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance