Add a drop down list to a GridView cell

Question

I want to make a column in the GridView a drop down list so the user can select an option from this list.

GridView code:

<asp:GridView  style="float:left"  
      ID="gvBookings" 
      ShowHeaderWhenEmpty="true"
      CssClass="tblResults" 
      runat="server" 
      OnRowDataBound="gvBooking_RowDataBound"                             
      DataKeyField="ID" 
      AutoGenerateColumns="false"
      allowpaging="false" />
        <Columns>       
             <asp:BoundField DataField="FinishTime" HeaderText="Finish Time"></asp:BoundField>
             <asp:BoundField DataField="TimeSpentName" HeaderText="Time Spent By"></asp:BoundField>
         </Columns>
     </asp:GridView>

Code Behind:

protected void gvBooking_RowDataBound(object sender, GridViewRowEventArgs e)
 {
      BHTaskClass.BookingTask booking = (BHTaskClass.BookingTask)e.Row.DataItem;
      if (e.Row.RowType == DataControlRowType.DataRow)
      {
            int count = 1;
            foreach (TableCell c in e.Row.Cells)
            {
               if (count == 1)
               {
                    string FinishTime = booking.FinishTime.HasValue ? booking.FinishTime.Value.ToString("hh':'mm") : "";
                    c.Text = "<input type=\"text\" id=\"txtFinishTime" + booking.ID + "\" style=\"width:70px\" type=\"text\" onblur=\"UpdateFinishTime(" + booking.ID + ",this.value)\"   value=\"" + FinishTime + "\" >";
               }
                count++;
            }
      }
 }

In the code behind I changed the cell for FinishTime to a textbox. And when the user enters a value in here it calls a function that updates the database. How do I change the cell to become a drop down menu? Can I do it did in the code behind like I created the textbox or would it be better to change the Boundfield in the GridView

Answer 1

I think you have to start using TemplateField instead of BoundField . Then you can put a TextBox and/or DropDownList directly in the GridView. You can then save the changes with the OnRowCommand event.

<asp:GridView ID="gvBookings"
          runat="server"
          OnRowDataBound="gvBookings_RowDataBound"
          OnRowCommand="gvBookings_RowCommand">
  <Columns>
      <asp:TemplateField>
        <ItemTemplate>
          <asp:TextBox ID="TextBox1"
                 runat="server"
                 Text='<%# Eval("FinishTime") %>'></asp:TextBox>
       <asp:LinkButton ID="LinkButton1"
                      runat="server"
                      CommandName="saveTextBox"
                      CommandArgument='<%# Container.DataItemIndex %>'>Save</asp:LinkButton>
           </ItemTemplate>
         </asp:TemplateField>
        <asp:TemplateField>
      <ItemTemplate>
    <asp:DropDownList ID="DropDownList1"
                      runat="server"></asp:DropDownList>
     </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

Code behind

protected void gvBookings_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //find the dropdownlist in the current row with findcontrol and cast back to one
        DropDownList dropDownList = e.Row.FindControl("DropDownList1") as DropDownList;

        //add some listitems
        dropDownList.Items.Insert(0, new ListItem("Text A", "A"));
        dropDownList.Items.Insert(1, new ListItem("Text B", "B"));
        dropDownList.Items.Insert(2, new ListItem("Text C", "C"));

        //select a value in the dropdown
        dropDownList.SelectedValue = "B";
    }
}

protected void gvBookings_RowCommand(object sender, GridViewCommandEventArgs e)
{
    //check the commandname
    if (e.CommandName == "saveTextBox")
    {
        //convert the commandargument to a row number
        int rowNumber = Convert.ToInt32(e.CommandArgument);

        //find the textbox in the current row with findcontrol and cast back to one
        TextBox textBox = gvBookings.Rows[rowNumber].FindControl("TextBox1") as TextBox;

        //do stuff with the textbox value
        Label1.Text = textBox.Text;
    }
}