Create Tabs Dynamically Based on Values Selected in Listbox in ASP.Net

Hi, does anyone know how can I create tabs dynamically based on what is selected from a Listbox?
This is what I have:

Listbox:
<asp:ListBox ID="SelectionListBox" runat="server" AppendDataBoundItems="True" SelectionMode="Multiple" Height="130px" Width="350px">
    <asp:ListItem Text="Apple" Value ="1"  />
    <asp:ListItem Text="Watermelon" Value ="2"  />
    <asp:ListItem Text="Kiwi" Value ="3"  />
    <asp:ListItem Text="Plum" Value ="4"  />
    <asp:ListItem Text="Pineapple" Value ="5"  />
</asp:ListBox>

RetrieveButton:
<asp:Button ID="RetrieveButton" runat="server" Text="Button" />


Based on what the user has selected from the Listbox, when the user pressed on the Retrieve button, number of tabs will be created based on the number of values user has selected from Listbox.

For example:
Let's say user has selected 3 items from the Listbox and click on the button, 3 tabs should be created at the bottom of the page on the same page with the tab names as the Listbox items texts.

Please refer to file attached for sample output illustration.
Any help is greatly appreciated. Thanks!
OutputTab.png
felicia tanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jitendra PatilSr.Software EngineerCommented:
Hi felicia tan,
please refer the sample code below.
.aspx code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestWebApplication.WebForm1" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
    <div>
    <asp:ListBox ID="SelectionListBox" runat="server" AppendDataBoundItems="True" SelectionMode="Multiple" Height="130px" Width="350px">
    <asp:ListItem Text="Apple" Value ="1"  />
    <asp:ListItem Text="Watermelon" Value ="2"/>
    <asp:ListItem Text="Kiwi" Value ="3"  />
    <asp:ListItem Text="Plum" Value ="4"  />
    <asp:ListItem Text="Pineapple" Value ="5"  />
    </asp:ListBox>
<asp:Button ID="RetrieveButton" runat="server" Text="Button" 
            onclick="RetrieveButton_Click" />
    </div>
   <asp:Panel ID="panel1" runat="server" Width="100%"></asp:Panel>
    
    </form>
</body>
</html>

Open in new window

.cs code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

namespace TestWebApplication
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        TabContainer TabContainer1= new TabContainer(); 
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void RetrieveButton_Click(object sender, EventArgs e)
        {
            var query = from ListItem item in SelectionListBox.Items where item.Selected select item;

            var query1 = query.ToList();
            var count = query1.Count();

            string[] arr = new string[count];

            int i=0;
            foreach (ListItem item in query)
                {
                    arr[i] = item.Text;
                    i++;
                }

            for( int j =0; j <arr.Length;j++)
            {
                //Response.Write(s + "<br/>");
                
                TabPanel panel = new TabPanel();
                panel.HeaderText = arr[j].ToString();
                panel.ID = arr[j].ToString() + j;
                TabContainer1.Tabs.Add(panel);
            }
            panel1.Controls.Add(TabContainer1);
        }
    }
}

Open in new window

please note i've used AjaxcontrolToolKit tabcontainer to get work done.
hope this helps.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
felicia tanAuthor Commented:
Hi Jitendra Patil, thanks for your help and great work! I applied your codes and it works well! Actually I would like to access the tab panel header text to check if there is any matching value between any tab panel header text and the values from a particular column in the grid view.
Let's say if there is 5 columns in the grid view and I just want to look into the values from the 'Product' column, I want to check whether there is matching values between the values from the 'Product' column and all tab panels' header text. All tab panels' header text is distinct from each other. If there is matching values, then the row from the grid view that has matching value will be added to the tab panel that has the same value as its header text.

This is my code:
.aspx code:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  

<asp:ListBox ID="SelectionListBox" runat="server" AppendDataBoundItems="True" SelectionMode="Multiple" Height="130px" Width="350px">
<asp:ListItem Text="Apple" Value ="1"  />
<asp:ListItem Text="Watermelon" Value ="2"  />
<asp:ListItem Text="Kiwi" Value ="3"  />
<asp:ListItem Text="Plum" Value ="4"  />
<asp:ListItem Text="Pineapple" Value ="5"  />

<asp:Button ID="RetrieveButton" runat="server" Height="40px" Text="Retrieve" Width="130px" OnClick="RETRIEVE_BUTTON_Click" style="font-weight:bold" BackColor="#333333" BorderColor="White" BorderStyle="Groove" ForeColor="White" ViewStateMode="Inherit" />

    <asp:GridView ID="SelectionGridView" runat="server" AllowSorting="True" AutoGenerateColumns="False" Width="100%" CellPadding="6" ForeColor="#333333" GridLines="Horizontal" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px" EmptyDataText="Record Not Found" OnRowDataBound ="SelectionGridView_OnRowDataBound">
        <AlternatingRowStyle BackColor="White" />
        <columns>
            <asp:boundfield DataField="Date" HeaderText="Date"></asp:boundfield>
            <asp:boundfield DataField="Customer_ID" HeaderText="Customer ID"></asp:boundfield>
            <asp:boundfield DataField="Customer_Name" HeaderText="Customer Name"></asp:boundfield>
            <asp:boundfield DataField="Age" HeaderText="Age"></asp:boundfield>
            <asp:boundfield DataField="Product" HeaderText="Product"></asp:boundfield>        
        </columns>
        <EditRowStyle BackColor="#2461BF" />
        <FooterStyle BackColor="#507CD1" Font-Bold="False" ForeColor="Black" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="False" ForeColor="Black" BorderStyle="Solid" BorderWidth="2px" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#EFF3FB" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="False" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F5F7FB" />
        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
        <SortedDescendingCellStyle BackColor="#E9EBEF" />
        <SortedDescendingHeaderStyle BackColor="#4870BE" />
    </asp:GridView>

<asp:Panel ID="panel1" runat="server" Width="100%"></asp:Panel>

.cs code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

namespace TestWebApplication
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        TabContainer TabContainer1= new TabContainer();
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void RetrieveButton_Click(object sender, EventArgs e)
        {
            var query = from ListItem item in SelectionListBox.Items where item.Selected select item;

            var query1 = query.ToList();
            var count = query1.Count();

            string[] arr = new string[count];

            int i=0;
            foreach (ListItem item in query)
                {
                    arr[i] = item.Text;
                    i++;
                }

            for( int j =0; j <arr.Length;j++)
            {
                //Response.Write(s + "<br/>");
               
                TabPanel panel = new TabPanel();
                panel.HeaderText = arr[j].ToString();
                panel.ID = arr[j].ToString() + j;
                TabContainer1.Tabs.Add(panel);
            }
            panel1.Controls.Add(TabContainer1);
        }
    }
}

Would appreciate if you could help me on this, thank you very much!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.