Telerik ASP.NET RadTabStrip Example markup

The Telerik RadTabStrip looks simple on the surface, but the markup behind it is a little different from most other Telerik controls. Instead of nesting content directly inside the tab strip, you pair it with a RadMultiPage, and each tab maps to a RadPageView. Once you understand that relationship, the control becomes predictable and easy to work with. This article shows the exact markup required to build a working tab strip with two tabs, each backed by a RadGrid. If you’ve struggled to get the tabs and page views wired up correctly, this example removes all the guesswork.

Related Articles

... and you 'll find more on the Telerik ASPNET Menu

The RadTabStrip is a standalone control, and its only job is to render the tabs and manage selection. The actual content for each tab lives inside a RadMultiPage, which contains one RadPageView per tab. The key connection is the MultiPageID property on the tab strip—once that’s set, Telerik handles the rest.

The example markup below shows a clean, minimal setup: two tabs, two page views, and a RadGrid inside each one. This pattern scales well, and you can drop in any server-side control you need. If your tabs aren’t switching or your content isn’t updating, compare your markup to this structure; most issues come down to a missing ID or mismatched page view.

 

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" AutoPostBack="false" MultiPageID="RadMultiPage1">
    <Tabs>
        <telerik:RadTab Text="Comments" Value="Comments" Selected="true"></telerik:RadTab>
        <telerik:RadTab Text="Activities" Value="Activities"></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip> 
 
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
    <telerik:RadPageView ID="RadPageView1" runat="server">
        <telerik:RadGrid ID="grdComments" runat="server" AutoGenerateColumns="false" MasterTableView-CommandItemSettings-ShowAddNewRecordButton="false"
            MasterTableView-EditFormSettings-EditColumn-AutoPostBackOnFilter="true"
            AllowSorting="true" AllowFilteringByColumn="true" >
            <GroupingSettings CaseSensitive="false" />
            <MasterTableView DataKeyNames="TRACKINGno,RowID"  >
                <Columns>
                    <telerik:GridDateTimeColumn AllowFiltering="false" DataField="CommentDate" HeaderText="Date" DataFormatString="{0:MM/dd/yyyy}" ></telerik:GridDateTimeColumn>
                    <telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="ContactTypeID" HeaderText="Type"  ></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="ContactName" HeaderText="Contact Name"  ></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="UserID" HeaderText="User ID"  ></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="Comment" HeaderText="Comment"  ></telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
 
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server">
        <telerik:RadGrid ID="grdActivity" runat="server" AutoGenerateColumns="false" MasterTableView-CommandItemSettings-ShowAddNewRecordButton="false"
            MasterTableView-EditFormSettings-EditColumn-AutoPostBackOnFilter="true"
            AllowSorting="true" AllowFilteringByColumn="true" >
            <GroupingSettings CaseSensitive="false" />
            <MasterTableView DataKeyNames="TRACKINGno,RowID" >
                <Columns>
                    <telerik:GridButtonColumn ConfirmText="Delete this activity?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" ConfirmDialogHeight="100px"
                        ConfirmDialogWidth="220px"  />
                    <telerik:GridDateTimeColumn AllowFiltering="false" DataField="Activity" HeaderText="Activity Date" DataFormatString="{0:MM/dd/yyyy}" ></telerik:GridDateTimeColumn>
                    <telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="CreatedBy" HeaderText="Created By"  ></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AutoPostBackOnFilter="true" DataField="Comment" HeaderText="Activity Text"  ></telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </telerik:RadPageView>
</telerik:RadMultiPage>

 

 

RealWorldCode gives developers practical, real‑world solutions with clean, working code — no fluff, no theory, just answers.
Links
Home
Knowledge Areas
Sitemap
Contact
Et cetera
Privacy Policy
Terms and Conditions
Cookie Preferences