Show Footer row as a first row in gridview

Question

I have a footer template in my gridview which allows users to add new items to the grid. Since they don't want to go below the page each time to add and they want to bring that footer row as the first row of the gridview.

ASPX:

 <asp:GridView ID="gvApplication" runat="server" AutoGenerateColumns="False" HorizontalAlign="center"
            ShowFooter="True" CellPadding="3" GridLines="Both" CssClass="contentfont" ShowHeaderWhenEmpty="True"
            EmptyDataText="No Records Found"  OnRowDataBound="gvApplication_RowDataBound"
            OnRowDeleting="gvApplication_RowDeleting" OnRowCommand="gvApplication_RowCommand"
            DataKeyNames="ID,Group,App_Name" Width="100%">
            <Columns>
                <asp:TemplateField HeaderText="ID"
                        <asp:Label ID="lblID" runat="server" Text='<%# Bind("[ID]") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:DropDownList ID="ddlID" runat="server" Width="150px" AutoPostBack="True"
                            OnSelectedIndexChanged="ddlID_SelectedIndexChanged" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Application Group">
                    <ItemTemplate>
                        <asp:Label ID="lblAppGrp" runat="server" Text='<%# Bind("[Group]") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:DropDownList ID="ddlGroup" runat="server" Width="150px" AutoPostBack="True"
                            OnSelectedIndexChanged="ddlGroup_SelectedIndexChanged" />
                    </FooterTemplate>
                </asp:TemplateField> 
                <asp:TemplateField HeaderText="Application Name">
                    <ItemTemplate>
                        <asp:Label ID="lblAppName" runat="server" Text='<%# Bind ("[App_Name]") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:DropDownList ID="ddlApp" runat="server" Width="150px" AutoPostBack="True"
                            OnSelectedIndexChanged="ddlApp_SelectedIndexChanged" />
                    </FooterTemplate>
                </asp:TemplateField>                    
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:ImageButton ID="btnDelete" runat="server" CommandName="Delete" ImageUrl="~/Images/delete.gif"
                            ToolTip="Delete" OnClientClick="return confirm('Are you sure want to Delete');" />
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:LinkButton ID="lnkAdd" Width="65px" runat="server" CausesValidation="False"
                            CommandName="AddNew" Text="Link Code" ForeColor="#3f6da2" Font-Bold="true">
                        </asp:LinkButton>
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
            <RowStyle Wrap="False" />
            <HeaderStyle Wrap="False" BackColor="#5B95CF" ForeColor="White" Height="25px" BorderStyle="Ridge" />
            <FooterStyle BackColor="#D1DDF1" ForeColor="White" Font-Bold="True" />
        </asp:GridView>

CS:

public void gvApplication_RowDataBound(object sender, GridViewRowEventArgs e)
{
    DataRowView drview = e.Row.DataItem as DataRowView;
    if (e.Row.RowType == DataControlRowType.Footer)
    {
        DropDownList ddlID = (DropDownList)e.Row.FindControl("ddlID");

        ddlID .DataSource = AppDataRepository.GetID();
        ddlID .DataValueField = "ID";
        ddlID .DataTextField = "ID";
        ddlID .DataBind();
        ddlID .Items.Insert(0, new ListItem("--Select ID--", "0"));
        ddlID .SelectedIndex = 0;

        DropDownList ddlGroup = (DropDownList)e.Row.FindControl("ddlGroup");
        ddlGroup.DataSource = AppDataRepository.GetGroup();
        ddlGroup.DataValueField = "Group";
        ddlGroup.DataTextField = "Group";
        ddlGroup.DataBind();
        ddlGroup.Items.Insert(0, new ListItem("--Select Group--", "0"));
        ddlGroup.SelectedIndex = 0;

        DropDownList ddlApp = (DropDownList)e.Row.FindControl("ddlApp");
        ddlApp.DataSource = AppDataRepository.GetApp();
        ddlApp.DataValueField = "App_Name";
        ddlApp.DataTextField = "App_Name";
        ddlApp.DataBind();
        ddlApp.Items.Insert(0, new ListItem("--Select App--", "0"));
        ddlApp.SelectedIndex = 0;
    }
}

Try with HeaderTemplate

<asp:TemplateField HeaderText="ID"
                    <asp:Label ID="lblID" runat="server" Text='<%# Bind("[ID]") %>'></asp:Label>
                </ItemTemplate>
                <HeaderTemplate>
                    <asp:DropDownList ID="ddlID" runat="server" Width="150px" AutoPostBack="True"
                        OnSelectedIndexChanged="ddlID_SelectedIndexChanged" />
                </HeaderTemplate>
            </asp:TemplateField>

Answer 1

Since Internet explorer dropped support for css top:expression - I have had to separate gridview headers into a separate table.

I have a table. In the first row / first cell I put another table containing the table headers. In the next row / first cell I have a div set to be 20px wider than the table above (to allow for scroll bar on div). The div contains the gridview with no header. In the pre_render of the gridview I set the widths of the columns in both tables.

I spend a bit of time checking the size of the user screen etc and setting widths for the the tables / div (and a height for the div). The result is a table with static headers which are exactly the same width as the gridview below. You could easily do this and add an extra row in the header table to contain the controls that are currently in the footer row of the gridview.

Answer 2

add FooterStyle-HorizontalAlign="Right" to the parent column of the template