RadTabStrip for ASP.NET
Contents
Present dynamic data with Telerik RadTabStrip and RadMultiPage Send comments on this topic.
See Also
Example scenarios > Present dynamic data with Telerik RadTabStrip and RadMultiPage

Glossary Item Box

Goal: Learn how to present dynamic data with Telerik RadTabStrip and RadMultiPage

Sample website presenting dynamic data

Telerik RadTabStrip can be used in conjunction with Telerik RadMultiPage to present dynamic data.

To achieve the goal, this tutorial will walk you through the following steps:

  1. Create a tabstrip and link it to a multipage
  2. Set up a database and data bind the tabstrip
  3. Set the page to show content upon initializing

 

This tutorial assumes that you:

  • are using Visual Studio 2005
  • have set up a project called ExampleCS
  • have added the RadControls folder to the ExampleCS root
  • have removed from the Visual Studio Toolbox previous versions (if any) of Telerik RadTabStrip and Telerik RadMultiPage
  • have added Telerik RadTabStrip to the Visual Studio Toolbox
A similar example can be found in the live examples at www.telerik.com.

The example below demonstrates tabstrip databinding along with creating a dynamic page view. Notice the use of the PageViewItemCreated event to persist the dynamically created controls inside a PageView.

Create a tabstrip and a multipage  

  1. Add a new web form to the ExampleCS project and call it DynamicMultipage.aspx.
  2. In design time, drag Telerik RadTabStrip from the Toolbox to the DynamicMultipage.aspx web form.
  3. Likewise, drag Telerik RadMultiPage to the web form.
  4. In the Properties grid for the multipage, check the value of the ID property. (Should be RadMultiPage1 - this name will be referred to below.)
    In the Properties grid for the tabstrip, set the MultiPageID property of the tabstrip to the ID of the multipage.
  5. We don't need to build the tabstrip or the multipage. This example shows how the tabs and pageviews can be dynamically generated, adding page content on the go.

Set up a database and bind it to the tabstrip

  1. For the purposes of this example, we shall use the data.mdb database file provided with the Telerik RadTabStrip live examples. Copy the file and its containing folder (called Data) from ~\Telerik\Telerik RadTabStrip3.0\NET1\TabStrip and then paste it into the root of the ExampleCS project.
  2. Next, you need to generate the data adapter, create the connection to the database, and generate sample data.
    Paste the following code in the code behind:
    C# Copy Code
    public DataTable SampleData
    {
       get
       {
           DataTable sampleData = (DataTable)Cache[    "SampleDataCS"];
                if (sampleData == null)
           {
               OleDbDataAdapter adapter =     new OleDbDataAdapter("SELECT * FROM Buildings",
                        "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="
                       + Server.MapPath("~/Data/data.mdb"));
               sampleData =     new DataTable();
               adapter.Fill(sampleData);
               Cache[     "SampleDataCS"] = sampleData;
           }
                return sampleData;
       }
    }
  3. Next, you need to bind the multipage, pageview content, and the tabstrip.
  4. To bind... Paste this code snippet in the code behind:
    the multipage,
    C# Copy Code
    private void BindMultiPage()
    {
            for (int i = 0; i < SampleData.Rows.Count; i++)
       {
           PageView pv =     new PageView();
           BuildPageViewContents(pv, i);
           RadMultiPage1.PageViews.Add(pv);
       }
    }
    the pageviews,
    C# Copy Code
    private void BuildPageViewContents(PageView pageView, int index)
    {
       DataRow source = SampleData.Rows[index];
       LiteralControl description =     new LiteralControl((string) source["Description"]);
       pageView.Controls.Add(description);
    }
    the tabstrip,
    C# Copy Code
    private void BindTabStrip()
    {
       RadTabStrip1.AppendDataBoundItems = true;
       RadTabStrip1.DataSource = SampleData;
       RadTabStrip1.DataTextField =     "Name";
       RadTabStrip1.DataBind();
    }
  5. To initialize the page, paste the following code below the Page_Load() method:

    C# Copy Code
    {
       if (!IsPostBack)
       {
           BindTabStrip();
           BindMultiPage();
       }
    }

  6. Next, you have to recreate the dynamic pageviews contents, on each postback. This happens inside the PageViewItemCreated event handler. First, you have to hook up to the event (inside the InitializeComponent method):
    C# Copy Code
    this.RadMultiPage1.PageViewItemCreated += new PageViewItemCreatedDelegate(RadMultiPage1_PageViewItemCreated);

    The event handler looks like this:  

C# Copy Code
private void RadMultiPage1_PageViewItemCreated(PageView view, int viewIndex)
{
   BuildPageViewContents(view, viewIndex);
}

 

Milestone

If you build your web application and look at the results, you will notice the following:

  • On the plus side, you have a tabstrip with four tabs. The Text property of each tab reads from the database. So does each pageview.
  • On the minus side, the page initializes without content. The content appears when you click a tab.

Set the page to show content upon initializing

In the design-time view of DynamicMultipage.aspx, set the SelectedIndex property of both the tabstrip and the multipage to 0.
(The default value is -1. This means that initially the page appears without a selected index.)

See Also