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