asked on

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

ASKER CERTIFIED SOLUTION

jitendra patil

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

felicia tan

ASKER

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!