ASP.NET GridView Display TextBox if Row is Empty

Question

My GridView is DataBound to a SQL data connection which should almost always return data. So using an EmptyDataTemplate does not help me because the GridView should never be empty. But I want the first few rows to be editable so the user can add new information to the GridView. So I've crafted my Select statement to always come back with 3 empty rows. I want those rows to contain TextBoxes instead of Labels. But this:

<asp:GridView ID="GridView1" runat="server" 
        AutoGenerateColumns="False" DataSourceID="SqlDataSource1" 
        BorderColor="White" BorderStyle="Solid" 
        onselectedindexchanged="GridView1_SelectedIndexChanged" ShowFooter="False" 
        ViewStateMode="Disabled">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <input type="checkbox" id ="CheckBox1" class="checkbox" />
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Center" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Serial" SortExpression="Serial">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("Serial") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Center" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Model" SortExpression="Model">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("Model") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Center" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="From Store">
                <ItemTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server" CssClass="dropdownlist" 
                        DataSourceID="SqlDataSource2" DataTextField="Store" 
                        SelectedValue='<%# Bind("Store") %>'>
                    </asp:DropDownList>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Center" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="To Store">
                <ItemTemplate>
                    <asp:DropDownList ID="DropDownList2" runat="server" CssClass="dropdownlist" 
                        DataSourceID="SqlDataSource2" DataTextField="Store">
                    </asp:DropDownList>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Center" />
            </asp:TemplateField>
        </Columns>
        <FooterStyle HorizontalAlign="Center" ForeColor="White" BorderColor="White" BorderStyle="Solid" />
        <HeaderStyle ForeColor="White" BorderColor="White" BorderStyle="Solid" />
        <RowStyle BorderColor="White" BorderStyle="Solid" ForeColor="White" />            
    </asp:GridView>

Produces this: enter image description here

Where the first 3 rows have uneditable Labels rather than TextBoxes. Is what I want to do possible?

if you force those three rows in Edit-mode all the time, Grid should show textboxes for labels in respective columns. Check GridView1.EditIndex property — rt2800
– rt2800, Commented May 11, 2012 at 16:11
Thanks. Do you have any examples or links as I really am not sure what you mean? — jmease
– jmease, Commented May 11, 2012 at 16:53

peroija · Accepted Answer · 2012-05-11 16:09:49Z

1

In your template fields add <FooterTemplate></FooterTemplate> This makes the footer row of your gridview a place where you can add new rows. Of course you will need to put items inside the <FooterTemplate>, but the work the same as your <ItemTemplates

answered May 11, 2012 at 16:09

peroija

1,9724 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jmease Over a year ago

This will only add one editable row though correct? I need multiple.

peroija Over a year ago

it will only create one editable row, correct. however your method of having three rows at the top is confusing from a user perspective as you are: 1. mixing existent data (the bottom data) and nonexistent data (the three empty rows) 2. nonexistent data has a check box, which will probably cause problems when they try to perform an action on those selected nonexistent items, etc. Plus, having one row means you only need to control one row of validators instead of three (if you are using validators). just my two cents.

jmease Over a year ago

I'm with you and considered using the footer in this manner at first. But my user may need to add multiple items. So if there is a way for me to take the the FooterRow and essentially turn it into a DataRow once filled in so that a new blank and editable FooterRow becomes available, that would be ideal. But since the information the user enters will not immediately be inserted or updated in the SqlDataSource, I can't re-Bind the GridView to accomplish this.

jmease · Accepted Answer · 2012-05-14 13:23:29Z

0

So to serve my specific purpose, I decided just to create a table separate from this with an empty row with textboxes. Then a button that used JQuery to take the values from that table to append them into the uneditable row in the DataGrid. Removed the header row from the DataGrid so it all looked like the same table.

answered May 14, 2012 at 13:23

jmease

2,5355 gold badges49 silver badges89 bronze badges

Collectives™ on Stack Overflow

ASP.NET GridView Display TextBox if Row is Empty

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related