The WebDropDown™ control’s template feature provides you with great flexibility of using different controls inside the drop-down container so that your end-users can select items from the control of your choice. WebDropDown displays one column from your data model by default. However, you can show multi-columns in the drop-down container by using the template feature along with HTML Table placed within the template.
In this walkthrough, we take advantage of both HeaderTemplate and ItemTemplate exposed by the WebDropDown™. HTML Table will be used for each of these. This approach will help to structure a rendered columns heading separately from the column items. It will help to style the header differently from the data items and achieve a more grid like look. As you select a row in the multi-column WebDropDown™, the contact name of the selected row is displayed in the WebDropDown control’s value display.
You will learn how to show a grid like structure in the drop-down container of a WebDropDown control.
From the Visual Studio™ Toolbox, drag and drop a ScriptManager component and a WebDropDown control onto the form. Set the WebDropDown control’s CurrentValue property to “Select Owner”. This will be the text initially displayed in the WebDropDown™ input prior to making a selection from the list.
Set the textfield property to “Name”. It lets you choose the column name you want to show in the value display. Link the WebDropDown™ DataSource to the GetGridData() method supplied at step 10.
Set the following WebDropDown properties. EnableAnimations ="false". DropDownContainerHeight ="135px". DropDownContainerWidth ="480px".
Click Edit Templates from the smart tag of the WebDropDown. This will show the WebDropDown in the Template Editing Mode.
From the Template Editing Mode smart tag, select Item Templates from the drop-down list.
Paste the following HTML Table:
<table style="width: 100%" cellspacing="0" cellpadding="4">
<tr>
<td style="width: 140px;">
<%# DataBinder.Eval(Container.DataItem, "Name")%>
</td>
<td style="width: 220px;">
<%# DataBinder.Eval(Container.DataItem, "Company")%>
</td>
<td style="width: 100px;">
<%# DataBinder.Eval(Container.DataItem, "PostalCode")%>
</td>
</tr>
</table>
From the Template Editing Mode smart tag, select HeaderTemplate.
Paste the following HTML Table for the header:
<table id="TemplateContainer">
<tr class="custom_Header">
<td class="igg_HeaderCaption" style="width: 140px;">Owner</td>
<td class="igg_HeaderCaption" style="width: 220px;">Company</td>
<td class="igg_HeaderCaption" style="width: 100px;">PostalCode</td>
</tr>
</table>
Add some css styling.
<style type="text/css">
.igg_HeaderCaption {
font-size: 12px;
padding: 5px 0px 5px 8px;
overflow: hidden;
text-align: left;
height: 25px;
font-family: Verdana;
font-weight: normal;
border-top: 1px solid #777777;
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
border-left: 1px solid #888888;
color: #FFFFFF;
background-color: #888888;
}
.igdd_ListItem {
border-style: solid;
border-color: #FFFFFF #CCCCCC #CCCCCC #CCCCCC;
border-width: 1px;
}
.igdd_ListItem:nth-child(odd) {
background-color: #F6F6F6;
}
.igdd_ListItemHover {
background-color: #CCCCCC !important;
}
.igdd_ListItemActive {
background-color: #9ECBD6 !important;
border: solid 1px #CCCCCC;
}
</style>
Add the required server side data and bind the WebDropDown list items to it. For this walkthrough, a simple table is used. You can refer to the following link: following online sample, in case you want to see the same example but illustrating how to attach to an existing database instead.
//generate a table to be used as data source
private DataTable GetGridData()
{
DataTable DS = new DataTable("TestData");
DataColumn col = DS.Columns.Add("ID", typeof(int));
DS.Columns.Add("Name", typeof(string));
DS.Columns.Add("Company", typeof(string));
DS.Columns.Add("PostalCode", typeof(string));
DS.PrimaryKey = new DataColumn[] { col };
DS.Rows.Add(new Object[] { 1, "Maria Anders", "Alfreds Futterkiste", "12209" });
DS.Rows.Add(new Object[] { 2, "Antonio Moreno", "Antonio Moreno Taqueria", "05023" });
DS.Rows.Add(new Object[] { 3, "Thomas Hardy", "Around the Horn", "WA1 1DP" });
DS.Rows.Add(new Object[] { 4, "Hanna Moos", "Blauer See Deilikatessen", "68306" });
return DS;
}
The above steps can be performed through the following code:
Markup:
<ig:WebDropDown ID="webDropDown1" runat="server" Width="200px">
<HeaderTemplate>
<table id="TemplateContainer">
<tr class="custom_Header">
<td class="igg_HeaderCaption" style="width: 140px;">Owner</td>
<td class="igg_HeaderCaption" style="width: 220px;">Company</td>
<td class="igg_HeaderCaption" style="width: 100px;">PostalCode</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table style="width: 100%" cellspacing="0" cellpadding="4">
<tr>
<td style="width: 140px;">
<%# DataBinder.Eval(Container.DataItem, "Name")%>
</td>
<td style="width: 220px;">
<%# DataBinder.Eval(Container.DataItem, "Company")%>
</td>
<td style="width: 100px;">
<%# DataBinder.Eval(Container.DataItem, "PostalCode")%>
</td>
</tr>
</table>
</ItemTemplate>
</ig:WebDropDown>In C#:
protected void Page_Load(object sender, EventArgs e)
{
//set a data source to bind to
this.webDropDown1.DataSource = this.GetGridData();
//Set which column to display in the input upon selection
this.webDropDown1.TextField = "Name";
//Set the current value
this.webDropDown1.CurrentValue = "Select a Contact";
this.webDropDown1.EnableAnimations = false;
this.webDropDown1.DropDownContainerHeight = 135;
this.webDropDown1.DropDownContainerWidth = 480;
}
//generate a table to be used as data source
private DataTable GetGridData()
{
DataTable DS = new DataTable("TestData");
DataColumn col = DS.Columns.Add("ID", typeof(int));
DS.Columns.Add("Name", typeof(string));
DS.Columns.Add("Company", typeof(string));
DS.Columns.Add("PostalCode", typeof(string));
DS.PrimaryKey = new DataColumn[] { col };
DS.Rows.Add(new Object[] { 1, "Maria Anders", "Alfreds Futterkiste", "12209" });
DS.Rows.Add(new Object[] { 2, "Antonio Moreno", "Antonio Moreno Taqueria", "05023" });
DS.Rows.Add(new Object[] { 3, "Thomas Hardy", "Around the Horn", "WA1 1DP" });
DS.Rows.Add(new Object[] { 4, "Hanna Moos", "Blauer See Deilikatessen", "68306" });
return DS;
}In Visual Basic:
Protected Sub Page_Load(sender As Object, e As EventArgs)
'set a data source to bind to
Me.WebDropDown1.DataSource = Me.GetGridData()
'Set which column to display in the input upon selection
Me.WebDropDown1.TextField = "Name"
'Set the current value
Me.WebDropDown1.CurrentValue = "Select a Contact"
Me.WebDropDown1.EnableAnimations = False
Me.WebDropDown1.DropDownContainerHeight = 135
Me.WebDropDown1.DropDownContainerWidth = 480
Me.WebDropDown1.DataBind()
End Sub
'generate a table to be used as data source
Private Function GetGridData() As DataTable
Dim DS As New DataTable("TestData")
Dim col As DataColumn = DS.Columns.Add("ID", GetType(Integer))
DS.Columns.Add("Name", GetType(String))
DS.Columns.Add("Company", GetType(String))
DS.Columns.Add("PostalCode", GetType(String))
DS.PrimaryKey = New DataColumn() {col}
DS.Rows.Add(New [Object]() {1, "Maria Anders", "Alfreds Futterkiste", "12209"})
DS.Rows.Add(New [Object]() {2, "Antonio Moreno", "Antonio Moreno Taqueria", "05023"})
DS.Rows.Add(New [Object]() {3, "Thomas Hardy", "Around the Horn", "WA1 1DP"})
DS.Rows.Add(New [Object]() {4, "Hanna Moos", "Blauer See Deilikatessen", "68306"})
Return DS
End FunctionSave and run your application.You will observe that as you click a row in the drop-down container, the text in the value display is changed to the owner name from the row.
Alternative: Instead of using the above approach and specifying all of the templates via the Markup, it is possible to set the HTML tables and the corresponding styling in code behind as well. It will require to implement ITemplate for both HeaderTemplate and ItemTemplate though. The following sample code assumes there is a plain WebDropDown with ID of WebDropDown1 already defined in Markup.
In C#:
//ensure these objects are created prior Page_Load event fires
protected override void OnInit(EventArgs e)
{
this.WebDropDown1.HeaderTemplate = new HeaderTemplate();
this.WebDropDown1.ItemTemplate = new ItemTemplate();
}
//helper variable
private static string[] ColumnsArr = new string[] { "Name", "Company", "PostalCode" };
//add a content and styling for the HeaderTemplate
private class HeaderTemplate : ITemplate
{
public void InstantiateIn(Control container)
{
HtmlTable table = new HtmlTable();
table.Style.Add(HtmlTextWriterStyle.Height, "25px");
table.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#888888");
table.Style.Add(HtmlTextWriterStyle.Color, "#FFFFFF");
table.Style.Add(HtmlTextWriterStyle.FontSize, "12px");
table.Style.Add(HtmlTextWriterStyle.FontWeight, "normal");
table.CellSpacing = 0;
table.CellPadding = 4;
HtmlTableRow row = new HtmlTableRow();
table.Controls.Add(row);
for (int i = 0; i < 3; i++)
{
HtmlTableCell cell = new HtmlTableCell();
cell.Attributes.Add("class", "igg_HeaderCaption");
cell.InnerText = ColumnsArr[i].ToString();
if (cell.InnerText == "Name")
{
cell.Style.Add(HtmlTextWriterStyle.Width, "140px");
}
if (cell.InnerText == "Company")
{
cell.Style.Add(HtmlTextWriterStyle.Width, "220px");
}
if (cell.InnerText == "PostalCode")
{
cell.Style.Add(HtmlTextWriterStyle.Width, "100px");
}
row.Cells.Add(cell);
}
container.Controls.Add(table);
}
}
//add a content and styling for the ItemTemplate
private class ItemTemplate : ITemplate
{
public void InstantiateIn(Control container)
{
HtmlTable table = new HtmlTable();
table.CellSpacing = 0;
table.CellPadding = 4;
HtmlTableRow row = new HtmlTableRow();
table.Controls.Add(row);
for (int i = 0; i < 3; i++)
{
HtmlTableCell cell = new HtmlTableCell();
TemplateContainer templateContainer = container as TemplateContainer;
DataRowView dataRow = templateContainer.DataItem as DataRowView;
cell.InnerText = ColumnsArr[i].ToString();
if (cell.InnerText == "Name")
{
cell.InnerText = dataRow["Name"].ToString();
cell.Style.Add(HtmlTextWriterStyle.Width, "140px");
}
if (cell.InnerText == "Company")
{
cell.InnerText = dataRow["Company"].ToString();
cell.Style.Add(HtmlTextWriterStyle.Width, "220px");
}
if (cell.InnerText == "PostalCode")
{
cell.InnerText = dataRow["PostalCode"].ToString();
cell.Style.Add(HtmlTextWriterStyle.Width, "100px");
}
row.Cells.Add(cell);
}
container.Controls.Add(table);
}
}
**Add the same Page_Load and GetGridData method from above for a complete runable sample.In Visual Basic:
Protected Overrides Sub OnInit(e As EventArgs)
Me.WebDropDown1.HeaderTemplate = New HeaderTemplate()
Me.WebDropDown1.ItemTemplate = New ItemTemplate()
End Sub
Private Shared ColumnsArr As String() = New String() {"Name", "Company", "PostalCode"}
Private Class HeaderTemplate
Implements ITemplate
Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn
Dim table As New HtmlTable()
table.Style.Add(HtmlTextWriterStyle.Height, "25px")
table.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#888888")
table.Style.Add(HtmlTextWriterStyle.Color, "#FFFFFF")
table.Style.Add(HtmlTextWriterStyle.FontSize, "12px")
table.Style.Add(HtmlTextWriterStyle.FontWeight, "normal")
table.CellSpacing = 0
table.CellPadding = 4
Dim row As New HtmlTableRow()
table.Controls.Add(row)
For i As Integer = 0 To 2
Dim cell As New HtmlTableCell()
cell.Attributes.Add("class", "igg_HeaderCaption")
cell.InnerText = ColumnsArr(i).ToString()
If cell.InnerText = "Name" Then
cell.Style.Add(HtmlTextWriterStyle.Width, "140px")
End If
If cell.InnerText = "Company" Then
cell.Style.Add(HtmlTextWriterStyle.Width, "220px")
End If
If cell.InnerText = "PostalCode" Then
cell.Style.Add(HtmlTextWriterStyle.Width, "100px")
End If
row.Cells.Add(cell)
Next
container.Controls.Add(table)
End Sub
End Class
Private Class ItemTemplate
Implements ITemplate
Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn
Dim table As New HtmlTable()
table.CellSpacing = 0
table.CellPadding = 4
Dim row As New HtmlTableRow()
table.Controls.Add(row)
For i As Integer = 0 To 2
Dim cell As New HtmlTableCell()
Dim templateContainer As TemplateContainer = TryCast(container, TemplateContainer)
Dim dataRow As DataRowView = TryCast(templateContainer.DataItem, DataRowView)
cell.InnerText = ColumnsArr(i).ToString()
If cell.InnerText = "Name" Then
cell.InnerText = dataRow("Name").ToString()
cell.Style.Add(HtmlTextWriterStyle.Width, "140px")
End If
If cell.InnerText = "Company" Then
cell.InnerText = dataRow("Company").ToString()
cell.Style.Add(HtmlTextWriterStyle.Width, "220px")
End If
If cell.InnerText = "PostalCode" Then
cell.InnerText = dataRow("PostalCode").ToString()
cell.Style.Add(HtmlTextWriterStyle.Width, "100px")
End If
row.Cells.Add(cell)
Next
container.Controls.Add(table)
End Sub
End Class
**Add the same Page_Load and GetGridData method from above (step 10) for a complete runable sample.