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:

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

Answer 1

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.

Answer 2

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