Click here to Skip to main content
15,860,859 members
Articles / Web Development / ASP.NET
Article

Multiple Column Dropdownlist for the ASP.NET DataGrid

Rate me:
Please Sign up or sign in to vote.
4.46/5 (43 votes)
1 Jun 20053 min read 422.9K   6.7K   140   52
An article on multiple column dropdownlists for the ASP.NET DataGrid.

Image 1

Image showing when a control is added to EditItemTemplate.

Introduction

Based on my previous control "Multiple Column DropDownList for ASP.NET", I received many emails asking for the same control to be used in the DataGrid for web applications. Here we go.. This control can be used as the regular MS DropDownList in the DataGrid and also as a regular dropdownlist. It has all the properties, like DataTextField, DataValueField, DataSource, SelectedIndex etc. The download file contains the samples both in VB.NET and C#. In this sample, I have used the Northwind database of SQL Server.

Building the Control

The following web server controls were used to build this control:

  1. TextBox
  2. Label
  3. Panel

Adding the Control to DataGrid

This control can be added either to the ItemTemplate or EditItemTemplate of the DataGrid through Property Builder.

  1. Drop a DataGrid onto your webform.
  2. Right click the DataGrid and select Property Builder and select Columns.
  3. A bound column may or may not be required, I have shown samples of both.
  4. Add two bound columns, set the header and the text field: SupplierID and CompanyName.
  5. Add one Template Column and set the header text to Products.
  6. Uncheck the checkbox "Create columns automatically at run time".
  7. Click OK.
  8. Now right click the DataGrid and select Edit Template, now either you could add this in ItemTemplate or EditItemTemplate.
  9. Set the properties of the control, like CssClass, GridRowcolor, DataTextfield etc.
  10. Close the template box.

Points to Note:

The DataValueField property is readonly, which means you cannot set the value, so make sure that in your query, the row value field is always the first column, which will not be displayed in the dropdown. The DataTextField returns an integer value, so while setting this property, type the column position from your "SELECT" statement, which needs to get displayed in the textbox. (For e.g., to display the second column "LastName" in the textbox, set DataValueField =2.) If your DataGrid is inside the "Table/Div/Span", then make sure the "Position" attribute in the "Style" property is set to absolute, and if not used in any of these tags, then set the DataGrid's Style property.

Make sure that the HorizontalAlign and VerticalAlign properties of the ItemStyle of your DataGrid is set as shown, else the control may not be positioned properly inside the DataGrid. E.g.:

HTML
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top"></ItemStyle>

See the code below. E.g., to populate the dropdown with FirstName and LastName:

SQL
SELECT Employeeid,Firstname,LastName
From Employees

Now if added in the EditItemTemplate (based on your requirement, bounded column may or may not be required), in my sample I used two <BoundColumn>s:

ASP.NET
<ASP:DATAGRID id="jskDataGrid" runat="server" 
    Font-Size="8pt" HeaderStyle-ForeColor="Tan" 
    AutoGenerateColumns="False" HeaderStyle-BackColor="Maroon" 
    HeaderStyle-Font-Bold="True" Font-Name="Verdana" ShowFooter="false" 
    BorderColor="Tan" DataKeyField="SupplierID" 
    OnUpdateCommand="MyDataGrid_Update" OnCancelCommand="MyDataGrid_Cancel" 
    OnEditCommand="MyDataGrid_Edit" CellSpacing="0" CellPadding="3" 
    Width="800" Style="Position:absolute;Top:0px;Left:0px">

  <HeaderStyle Font-Bold="True" ForeColor="Tan" BackColor="Maroon"></HeaderStyle>
  <Columns>
        <asp:EditCommandColumn ButtonType="LinkButton" 
             UpdateText="Update" CancelText="Cancel" EditText="Edit">
          <ItemStyle VerticalAlign="Top"></ItemStyle>
        </asp:EditCommandColumn>
        <asp:BoundColumn DataField="SupplierID" 
              ReadOnly="True" HeaderText="Supplier ID">
          <ItemStyle Wrap="False" VerticalAlign="Top"></ItemStyle>
        </asp:BoundColumn>
        <asp:BoundColumn DataField="CompanyName" 
              ReadOnly="True" HeaderText="Company Name">
          <ItemStyle Wrap="False" VerticalAlign="Top"></ItemStyle>
        </asp:BoundColumn>
        <asp:TemplateColumn HeaderText="Products">
    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top"></ItemStyle>
        <!-- Set these two properties as shown-->
        <%# DataBinder.Eval(Container.DataItem, "ProductName") %>
          </ItemTemplate>
          <EditItemTemplate>
            <TABLE cellSpacing="0" cellPadding="0" width="100%" border="0">
              <TR>
                <TD>
                  <jsk:mcDDList id="McDDList1" 
                    Width="200" 
                    SelectedIndex='<%# DataBinder.Eval(Container.DataItem, 
                                                          "ProductID") %>' 
                    cssClass="cStyle" Runat="server" 
                    DataSource="<%# PopulateDDList()%>"
                    DataTextField="2">
                  </jsk:mcDDList>
                </TD>
              </TR>
            </TABLE>
          </EditItemTemplate>
        </asp:TemplateColumn>
      </Columns>
</ASP:DATAGRID>

If you want to show the existing values then add the "SelectedIndex" property.

Properties

  • DataTextField - The field to be shown in the Ccontrol.
  • DataValueField - Read only property (value field to identify the row - default is first column {0}).
  • DataSource - DataSet to populate the dropdown.
  • DDTextboxReadonly - If false, can type your own text.
  • GridRowColor - OnMouseMove changes the row color.
  • GridTextColor - OnMouseMove changes the text color.
  • ListBoxHeight - Sets the height of the dropdown.
  • ReturnsValue - To get the text, set it to false. To get the value, set it to true, while updating.
  • SelectedIndex - If set, shows the existing value in the dropdown.

Populating the DataGrid

C#
private void Page_Load(object sender, System.EventArgs e)
{
    // Put user code to initialize the page here
    if (! IsPostBack)
    {
        BindDataGrid();
    }
}

protected void BindDataGrid()
{
    string sqlStr = "SELECT S.CompanyName, S.SupplierID," +
                    " P.ProductName, P.ProductID " +
                    "from Suppliers S inner join Products P " +
                    "on S.SupplierID = P.SupplierID ";
    sqlDa = new SqlDataAdapter(sqlStr, SqlCon);
    ds = new DataSet();
    sqlDa.Fill(ds, "Prod");
    jskDataGrid.DataSource = ds.Tables["Prod"];
    jskDataGrid.DataBind();
}

Populating the DropDownList

C#
public DataSet PopulateDDList()
{
    string sqlString = " select ProductID, ProductName, " +
                       "CategoryName as Name,UnitPrice as Price " +
                       "from Products p inner join Categories c " +
                       "on p.categoryid = c.categoryid ";
    SqlDataAdapter ad = new SqlDataAdapter(sqlString,SqlCon);
    DataSet ds = new DataSet();
    ad.Fill(ds,"Categories");
    return ds;
}

Codes to Edit/Update/Cancel

C#
protected void jskDataGrid_Edit(object sender, DataGridCommandEventArgs e)
{
    jskDataGrid.EditItemIndex = e.Item.ItemIndex;
    BindDataGrid();
}

protected void jskDataGrid_Cancel(object sender, DataGridCommandEventArgs e)
{
    jskDataGrid.EditItemIndex = -1;
    BindDataGrid();
}

protected void jskDataGrid_Update(object sender, DataGridCommandEventArgs e)
{
    try
    {
        string itemValue;
        string itemText;

        // To get the DataValueField of the DropDown
        ((ddList.mcDDList)e.Item.FindControl("McDDList1")).ReturnsValue = true;
        itemValue =
          ((ddList.mcDDList)e.Item.FindControl("McDDList1")).Text.ToString();

        // To get the DataTextField of the Dropdown
        ((ddList.mcDDList)e.Item.FindControl("McDDList1")).ReturnsValue = false;
        itemText =
          ((ddList.mcDDList)e.Item.FindControl("McDDList1")).Text.ToString();

        //write your update query
        //update table set col1 = itemtext where col2 = itemvalue
        //Execute the Query

        jskDataGrid.EditItemIndex = -1;
        BindDataGrid();
    }
    catch(Exception ex)
    {
        Response.Write(ex.Message);
    }
    finally
    {
        /*Close your Connection */
    }
}

Points of Interest

The control is built mostly using JavaScript. There is a property "DDTextboxReadonly", this property is used to enable/disable the textbox, means either you could select the text from the list or you could type.

Using the Intellisense

As in my previous article, I showed how to use the Intellisense. The zip file contains the .xsd, copy it to the following location:

  • C:\Program Files\Microsoft Visual Studio .NET 2003\Common7\Packages\schemas\xml

and in the <body> tag of your aspx page, add the following code:

HTML
<body MS_POSITIONING="GridLayout"
  xmlns:jsk="urn:http://schemas.ksjControls.com/DGDD/ASPNET">

Image 2

History

  • ver. (1.0) - Initial version (posted 12th May 2005)
  • ver. (1.1) - New property has been added, ListBoxHeight to adjust the height of the dropdown.
  • ver. (1.2) - Control does not expand the DataGrid rows.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
I'm a .Net Programmer/Web Developer, mostly working on ASP.Net C# and VB.Net,Oracle,SQL server 2000.

Comments and Discussions

 
BugMultiColDD_List_DDL is not defined and shows 6 and nothing in dropdownlist Pin Pin
Member 986148910-Jun-14 2:55
Member 986148910-Jun-14 2:55 
GeneralMy vote of 5 Pin
D-Kishore4-Sep-12 0:55
D-Kishore4-Sep-12 0:55 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey17-Feb-12 21:46
professionalManoj Kumar Choubey17-Feb-12 21:46 
GeneralMy vote of 1 Pin
dannnnnnnn2-Jul-09 5:22
dannnnnnnn2-Jul-09 5:22 
Questiondropdown list problem----urgently help me Pin
lavanyakv10-Aug-08 23:45
lavanyakv10-Aug-08 23:45 
Generalresizing Image in asp.net Pin
Unknown Ajanabi27-Jun-08 23:28
Unknown Ajanabi27-Jun-08 23:28 
GeneralIs the full source code with documentation for sale? [modified] Pin
Tony39911-May-08 7:24
Tony39911-May-08 7:24 
GeneralIs Filtering allowed for this DropDown List. Pin
Bruce Pataki20-Sep-07 19:03
Bruce Pataki20-Sep-07 19:03 
GeneralASP.NET 2.0 Version Pin
Scott Starker9-May-07 13:44
Scott Starker9-May-07 13:44 
GeneralJavascript Error Pin
Member 38892935-Mar-07 3:01
Member 38892935-Mar-07 3:01 
Questionplaceholders Pin
sddsf28-Dec-06 23:28
sddsf28-Dec-06 23:28 
GeneralAbout the Response time Pin
cyeung5-Nov-06 21:38
cyeung5-Nov-06 21:38 
QuestionArticle title ? Pin
jaffka2-Nov-06 23:49
jaffka2-Nov-06 23:49 
QuestionArticle title ? Pin
jaffka2-Nov-06 23:48
jaffka2-Nov-06 23:48 
QuestionWhy not share the code? Pin
Neem1227-Jul-06 6:17
Neem1227-Jul-06 6:17 
GeneralNo code Pin
cogili25-Jun-06 15:54
cogili25-Jun-06 15:54 
GeneralFormating Results Pin
bazn8r7-Jun-06 17:19
bazn8r7-Jun-06 17:19 
GeneralRe: Formating Results Pin
bazn8r7-Jun-06 17:54
bazn8r7-Jun-06 17:54 
GeneralDataGird CheckBox in Asp.net Pin
Eniran23-Feb-06 16:13
Eniran23-Feb-06 16:13 
GeneralRe: DataGird CheckBox in Asp.net Pin
skannapiran19-May-07 4:29
skannapiran19-May-07 4:29 
Generalfetching windows username Pin
balajinarayanan20-Jan-06 22:58
balajinarayanan20-Jan-06 22:58 
GeneralDoesn't work on firefox Pin
john586730-Dec-05 5:18
john586730-Dec-05 5:18 
GeneralASP.NET 2.0 Version Pin
Gary Dryden22-Dec-05 11:14
Gary Dryden22-Dec-05 11:14 
GeneralRe: ASP.NET 2.0 Version Pin
Jay Kulaindevelu23-Dec-05 3:38
Jay Kulaindevelu23-Dec-05 3:38 
GeneralRe: ASP.NET 2.0 Version Pin
Lozze6-Mar-06 23:34
Lozze6-Mar-06 23:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.