Skip to main content

How To Create MultiColum Dropdownlist using DropDownExtender Control


<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="MultiColumnDDL.aspx.cs"
 Inherits="MultiColumnDDL" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>
 <style>
     .invisibleColumn
     {
         display: none;
         width: 0px;
     }
     body
     {
         font-family: Arial;
         font-size: 12px;
     }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 <div>
     <asp:UpdatePanel ID="Update1" runat="server">
         <ContentTemplate>
             <cc1:DropDownExtender ID="DropDownExtender1" DropDownControlID="FriendGridView" TargetControlID="txtFriend"
                 runat="server">
             </cc1:DropDownExtender>
             <asp:TextBox ID="txtFriend" runat="server" Width="200px"></asp:TextBox>
             <asp:GridView ID="FriendGridView" runat="server" Width="200px" AutoGenerateColumns="false"
                 OnRowDataBound="FriendGridView_RowDataBound" OnSelectedIndexChanged="FriendGridView_SelectedIndexChanged">
                 <RowStyle BackColor="#DDDDDD" />
                 <Columns>
                     <asp:BoundField DataField="ID" HeaderStyle-CssClass="invisibleColumn" ItemStyle-CssClass="invisibleColumn" />
                     <asp:BoundField DataField="Name" HeaderText="Name" />
                     <asp:BoundField DataField="Description" HeaderText="Description" />
                 </Columns>
                 <HeaderStyle BackColor="Blue" ForeColor="White" />
                 <AlternatingRowStyle BackColor="#EEEEEE" />
                 <SelectedRowStyle BackColor="#999999" />
             </asp:GridView>
         </ContentTemplate>
     </asp:UpdatePanel>
 </div>
 </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class MultiColumnDDL : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
     if (!IsPostBack)
     {
         FriendGridView.DataSource = GetFriends();
         FriendGridView.DataBind();
     }

 }
 protected void FriendGridView_RowDataBound(object sender, GridViewRowEventArgs e)
 {
     if (e.Row.RowType != DataControlRowType.DataRow)
         return;

     e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';"
     + "this.originalBackgroundColor=this.style.backgroundColor;"
     + "this.style.backgroundColor='#bbbbbb';";

     e.Row.Attributes["onmouseout"] =
     "this.style.backgroundColor=this.originalBackgroundColor;";

     e.Row.Attributes["onclick"] =
     ClientScript.GetPostBackClientHyperlink(this.FriendGridView,
      "Select$" + e.Row.RowIndex);
 }
 public List<Friend> GetFriends()
 {

     List<Friend> users = new List<Friend>();
     users.Add(new Friend("Xyz", "Coder"));
     users.Add(new Friend("Abc", "Writer"));
     users.Add(new Friend("Charles", "Poet"));
     return users;


 }
 protected void FriendGridView_SelectedIndexChanged(object sender, EventArgs e)
 {
     // assign firstname
     if (FriendGridView.SelectedRow != null)
         txtFriend.Text = Server.HtmlDecode(
           FriendGridView.SelectedRow.Cells[1].Text);
     else
         txtFriend.Text = "";

 }
}
public class Friend
{

 public Friend(string name, string description)
 {

     _name = name;

     _description = description;

     _id = Guid.NewGuid().ToString();

 }



 private string _id;
 public string Id
 {

     get { return _id; }

     set { _id = value; }

 }

 private string _name;
 public string Name
 {

     get { return _name; }

     set { _name = value; }

 }
 private string _description;
 public string Description
 {

     get { return _description; }

     set { _description = value; }

 }
}

Comments

Post a Comment

Popular posts from this blog