How to add Text Box To GridView in ASP.NET

Viewed 51

I want to make a GridView such that it's first column is sourced from a C# collection and it's second column is a TextField. I followed this link: https://stackoverflow.com/questions/28828150/add-textbox-in-datatable-aspx-net#:~:text=Textbox%20is%20a%20control%20and,will%20have%20the%20relevant%20textbox.

The answer provided me with:My1stOutput Is there a way to interchange the columns?

protected DataTable rGrdV(List<string> slist) {
           DataTable dt = new DataTable();
           dt.Columns.Add("col1",typeof(String));
          
           foreach (string s in slist)
           {
               
               dt.Rows.Add(s);
           }
           
               return dt;
          
       }

Desginer:

<asp:GridView ID="GridView1" runat="server" >
   <asp:TemplateField> 
       <ItemTemplate >
           <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
       </ItemTemplate>
   </asp:TemplateField>                      
   </Columns>
</asp:GridView

Edit___________________________________

I tried changing designer to

<asp:GridView ID="GridView1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
           <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
           <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
           <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
           <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
           <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
           <SortedAscendingCellStyle BackColor="#FFF1D4" />
           <SortedAscendingHeaderStyle BackColor="#B95C30" />
           <SortedDescendingCellStyle BackColor="#F1E5CE" />
           <SortedDescendingHeaderStyle BackColor="#93451F" />
           <Columns>

                 <asp:BoundField DataField="Col1" HeaderText="MyColumn" />
              
   <asp:TemplateField> <%-- you have not opened it in your markup --%>
      
       <ItemTemplate >
           <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
       </ItemTemplate>
   </asp:TemplateField>                      
   </Columns>
       </asp:GridView>

Now I'm getting My2ndOutput

1 Answers

Ok, the general way to deal this kind of issue?

Don't let the GV auto generate the columns. Take control over this issue, and then all the rest comes into pay quite nice.

So, say we want 2 colums

So, our gv can be this:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
    CssClass="table table-hover" Width="40%">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="HotelName" HeaderText="Hotel Name" />
        <asp:TemplateField HeaderText="Description">
            <ItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="100%" Rows="2"
                    Text='<%# Eval("Description") %>' ></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

So, use a "template" for the text box, and to fill it out, use the binding expression like above.

Result:

enter image description here

Code to load was this:

  void LoadGrid()
    {
        List<Hotels> HotelList = MyHotels();

        DataTable dt = new DataTable();
        dt.Columns.Add("ID",typeof(string));
        dt.Columns.Add("HotelName",typeof(string));
        dt.Columns.Add("Description",typeof(string));

        foreach (Hotels OneHotel in HotelList)
        {
            DataRow OneRow = dt.NewRow();
            OneRow["ID"] = OneHotel.ID;
            OneRow["HotelName"] = OneHotel.HotelName;
            OneRow["Description"] = OneHotel.Descripiton;
            dt.Rows.Add(OneRow);
        }
        GridView1.DataSource = dt;
        GridView1.DataBind();

    }
Related