Welcome to AspAdvice Sign in | Join | Help

AzamSharp

Some day I will know everything I hope that day never comes

Syndication

Tags

Navigation

ASP.NET AJAX Tabs Control

The Tabs control allows you to create the Tabs very quickly. The tabs can be changed without causing a postback. I recently created tabs based on the data from the Categories and Products table in the Northwind database.

Check out the code below which creates the TabPanel dynamically and then add to the TabsContainer control.

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

List<Category> categories = Category.GetCategories();

foreach (Category category in categories)

{

GridView gv = new GridView();

gv.DataSource = category.Products;

gv.DataBind();

AjaxControlToolkit.TabPanel tab = new AjaxControlToolkit.TabPanel();

tab.Controls.Add(gv);

tab.HeaderText = category.CategoryName;

TabContainer1.Tabs.Add(tab);

}

}

AtlasTabsControlImage

Sponsor

Published Thursday, February 15, 2007 12:55 AM by azamsharp

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

# re: ASP.NET AJAX Tabs Control @ Thursday, February 22, 2007 5:44 PM

Hi Azam, I am a regular visitor to your website. I was using Telerik Tab controls and was wondering a similar example in Atlas. Thanks for your tutorial

Ganesh

# re: ASP.NET AJAX Tabs Control @ Friday, February 23, 2007 6:25 PM

Hello, I'm trying out your sample here... I have a question regarding the List code. Where is this derived from? I don't think I've ever seen this implemented. Any additional information about this would help out greatly! Thanks, 2e

2e

# re: ASP.NET AJAX Tabs Control @ Saturday, February 24, 2007 12:24 PM

Hello, I'm trying out your sample here... I have a question regarding the List code. Where is "List categories=" from? I don't think I've ever seen this implemented. Would you have any additional samples of the inherited class or any more information about this tab control sample would help out greatly! Thanks again.

craig2e

# re: ASP.NET AJAX Tabs Control @ Saturday, February 24, 2007 1:12 PM

Here is the List Code:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Collections.Generic;

using System.Data.SqlClient;

public class Category

{

   private int categoryID;

   private string categoryName;

   private List<Product> products;

   public int CategoryID

   {

       get { return this.categoryID; }

       set { this.categoryID = value; }

   }

   public string CategoryName

   {

       get { return this.categoryName; }

       set { this.categoryName = value; }

   }

   public List<Product> Products

   {

       get { return this.products; }

       set { this.products = value; }

   }

   public static  List<Category> GetCategories()

   {

       List<Category> categories = new List<Category>();

       string connectionString = @"Server=localhost;Database=Northwind;Trusted_Connection=true";

       SqlConnection myConnection = new SqlConnection(connectionString);

       SqlCommand myCommand = new SqlCommand("SELECT CategoryID, CategoryName FROM Categories", myConnection);

       myConnection.Open();

       SqlDataReader reader = myCommand.ExecuteReader();

       while (reader.Read())

       {

           Category category = new Category();

           category.CategoryID = (int)reader["CategoryID"];

           category.CategoryName = (string)reader["CategoryName"];

           categories.Add(category);

       }

       myConnection.Close();

       reader.Close();

       // get the products

       foreach (Category category in categories)

       {

           category.Products = GetProducts(category.CategoryID);  

       }

       return categories;

   }

   public static List<Product> GetProducts(int categoryID)

   {

       List<Product> products = new List<Product>();

       string connectionString = @"Server=localhost;Database=Northwind;Trusted_Connection=true";

       SqlConnection myConnection = new SqlConnection(connectionString);

       SqlCommand myCommand = new SqlCommand("SELECT ProductID, ProductName FROM Products WHERE CategoryID = " + categoryID,myConnection);

       myConnection.Open();

       SqlDataReader reader = myCommand.ExecuteReader();

       while (reader.Read())

       {

           Product product = new Product();

           product.ProductID = (int)reader["ProductID"];

           product.ProductName = (string)reader["ProductName"];

           products.Add(product);

       }

       myConnection.Close();

       reader.Close();

       return products;

   }

public Category()

{

}

}

ANd Product.cs:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public class Product

{

   private int productID;

   private string productName;

   public int ProductID

   {

       get { return this.productID; }

       set { this.productID = value; }

   }

   public string ProductName

   {

       get { return this.productName; }

       set { this.productName = value; }

   }

public Product()

{

}

}

azamsharp

# re: ASP.NET AJAX Tabs Control @ Saturday, February 24, 2007 2:53 PM

azamsharp, Thanks soooo much! I'm learning alot more about connecting data within classes as another way of doing things smarter, and I appreciate your quick response! Craig

craig2e

# re: ASP.NET AJAX Tabs Control @ Wednesday, March 14, 2007 6:03 PM

is there any way to use paging for a gridview inside of a tabcontrol? thanks

Lenny Spohrer

# re: ASP.NET AJAX Tabs Control @ Wednesday, May 02, 2007 5:17 AM

Nice!

Martin COok

# re: ASP.NET AJAX Tabs Control @ Thursday, May 10, 2007 7:54 PM

Is there anyway to populate the Content Area of a tab without using a gridview. What if I wanted to pull actual values from a database based on what the name of the tab was. How would I go about doing that? jmhall@vbgov.com Thank you

jmhall

# re: ASP.NET AJAX Tabs Control @ Wednesday, May 23, 2007 6:29 PM

Looks nice. However I get a error when I try to use select buttons on the gridview. When the form is submited after clicking the Select button, this error comes: Specified argument was out of the range of valid values. Parameter name: index Is this a error in the AjaxControlToolkit? Code inserted: ButtonField selectButtonField = new ButtonField(); selectButtonField.ButtonType = ButtonType.Button; selectButtonField.CommandName = "Select"; selectButtonField.HeaderText = "Select Product"; selectButtonField.Text = "Select"; gv.Columns.Add(selectButtonField); Ludvig

Ludvig

# re: ASP.NET AJAX Tabs Control @ Saturday, May 26, 2007 10:27 AM

got the same error as Ludvig

AJ

# re: ASP.NET AJAX Tabs Control @ Saturday, June 02, 2007 4:11 AM

Ludvig, I have the solution: put the DataList in an UpdatePanel And call to update this panel after every selected changed on the DataList UpdatePanel uppnl = (UpdatePanel)this.FindControl("updatePnl"); uppnl.Update(); In order to catch the SelectedChanged you need to add this to the code: item.Attributes.Add("onclick", this.Page.ClientScript.GetPostBackEventReference(item.FindControl("SelectButton"), string.Empty)); on every item and this to the aspx:

# re: ASP.NET AJAX Tabs Control @ Thursday, June 07, 2007 8:35 AM

hi can i add a tab pane when a button click event occurs , i tried but failed pls give me a solution thanx shash

shash

# re: ASP.NET AJAX Tabs Control @ Wednesday, August 22, 2007 2:22 AM

got the same error as Ludvig. button who do's a postback is present in the area outside the tabPanels. Code: --------------------------------------- --------------------------------- Plz tell me solution. tnx in advance. -Amol

Amol R

# re: ASP.NET AJAX Tabs Control @ Thursday, August 23, 2007 2:04 AM

This code helps me lot Thanks

Ajay

# re: ASP.NET AJAX Tabs Control @ Wednesday, September 12, 2007 7:51 AM

This is a very good example of AJAX and it will really help us. Anand

Anand

Leave a Comment

(required) 
required 
(required) 
Enter the code you see below