FormView Layout

Question

This has driven me crazy a few times in the past but I've always fudged it and moved on. Today I want to try and fix it!

I quite frequently create a GridView to display data and a FormView directly beneath in Insert mode with controls in the InsertItemTemplate corresponding to the columns in the GridView, so that it looks like the FormView is just an empty row of the GridView awaiting new data entry. This works great.

The problem is that I can never get the widths of the 'columns' (really just textboxes) in the FormView to correspond to the widths of the columns in the GridView above.

In the example below, as you can see, both the GridView and FormView have a width of 100% and, sure enough, when the page is rendered they're both exactly the same width (I gave the FormView a border briefly to check). However, even though the widths of the textboxes in the FormView are identical to the widths of the columns in the GridView, they don't display that way. The textboxes are slightly wider, and by the time you get to the right-most column the cumulative effect means that the alignment is way out.

I'm guessing the problem is something to do with border widths or some other hidden element which is being rendered, but I can't figure it out. I have to say, the amount by which the alignment is out seems more than the couple of pixels a border would affect things.

<asp:GridView ID="gvTPR" runat="server" DataSourceID="SQLTPR" AutoGenerateColumns="false" DataMember="DefaultView" DataKeyNames="TPRID" Width="100%" >
<RowStyle HorizontalAlign="Center" />
<EditRowStyle BackColor="#ccffff" />
<HeaderStyle BackColor="#013b82" ForeColor="White" />
<Columns>
<asp:BoundField DataField="TPREnteredAt" HeaderText="Entered At" ReadOnly="True" SortExpression="TPREnteredAt" ItemStyle-Width="24%" ControlStyle-Width="90%" />
<asp:BoundField DataField="TPRTemp" HeaderText="Temp" ReadOnly="True" SortExpression="TPRTemp" ItemStyle-Width="12%" ControlStyle-Width="90%"/>
<asp:BoundField DataField="TPRPulse" HeaderText="Pulse" ReadOnly="True" SortExpression="TPRPulse" ItemStyle-Width="12%" ControlStyle-Width="90%"/>
<asp:BoundField DataField="TPRRespiration" HeaderText="Respiration" ReadOnly="True" SortExpression="TPRRespiration" ItemStyle-Width="12%" ControlStyle-Width="90%"/>
<asp:BoundField DataField="TPRPCV" HeaderText="PCV" ItemStyle-Width="12%" ControlStyle-Width="90%"/>
<asp:BoundField DataField="TPRTP" HeaderText="TP" ItemStyle-Width="12%" ControlStyle-Width="90%" />
<asp:CommandField ButtonType="Button" InsertVisible="False" ShowEditButton="True" ItemStyle-Width="16%" UpdateText="Save" ControlStyle-Width="60px" />
</Columns>
<EmptyDataTemplate>
No TPR records exist
</EmptyDataTemplate>
</asp:GridView>
<asp:FormView ID="fvTPR" runat="server" DataSourceID="SQLTPR" DefaultMode="Insert" Width="100%" >
<InsertItemTemplate>
<asp:textbox ID="lblEnteredAt" runat="server" Text="Will be added automatically" Width="24%" />
<asp:TextBox ID="txtTemp" runat="server" Text='<%# Bind("TPRTemp")%>' Width="12%" />
<asp:TextBox ID="txtPulse" runat="server" Text='<%# Bind("TPRPulse")%>' Width="12%" />
<asp:TextBox ID="txtRespiration" runat="server" Text='<%# Bind("TPRRespiration")%>' Width="12%" />
<asp:TextBox ID="txtPCV" runat="server" Text='<%# Bind("TPRPCV")%>' Width="12%" />
<asp:TextBox ID="txtTP" runat="server" Text='<%# Bind("TPRTP")%>' Width="12%" />                
<asp:Button ID="btnAddTPR" runat="server" Text="Save" Width="5%" />
</InsertItemTemplate>
</asp:FormView>

This renders like this:

Answer 1

How about using GridView footer for add funcionality? This way you will have all columns in same table and you'l get around your positioning problems.

Here is an example of how your gridview should look like:

<asp:GridView ID="gvTPR" runat="server" DataSourceID="SQLTPR" AutoGenerateColumns="False" ShowFooter="True" DataKeyNames="TPRID" Width="100%" EnableModelValidation="True">
<RowStyle HorizontalAlign="Center" />
<EditRowStyle BackColor="#ccffff" />
<HeaderStyle BackColor="#013b82" ForeColor="White" />
<Columns>
    <asp:TemplateField HeaderText="Entered At" SortExpression="TPREnteredAt">
        <EditItemTemplate>
            <asp:TextBox ID="lblEnteredAt" runat="server" Text='<%# Eval("TPREnteredAt") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label1" runat="server" Text='<%# Bind("TPREnteredAt") %>'></asp:Label>
        </ItemTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="24%" />
        <FooterTemplate>
            <asp:TextBox ID="lblEnteredAt" runat="server" Text="Will be added automatically" Width="24%" />
        </FooterTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Temp" SortExpression="TPRTemp">
        <EditItemTemplate>
            <asp:TextBox ID="txtTemp" runat="server" Text='<%# Eval("TPRTemp") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label2" runat="server" Text='<%# Bind("TPRTemp") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtTemp" runat="server" Text='<%# Bind("TPRTemp")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Pulse" SortExpression="TPRPulse">
        <EditItemTemplate>
            <asp:TextBox ID="txtPulse" runat="server" Text='<%# Eval("TPRPulse") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label3" runat="server" Text='<%# Bind("TPRPulse") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtPulse" runat="server" Text='<%# Bind("TPRPulse")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Respiration" SortExpression="TPRRespiration">
        <EditItemTemplate>
            <asp:TextBox ID="txtRespiration" runat="server" Text='<%# Eval("TPRRespiration") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label4" runat="server" Text='<%# Bind("TPRRespiration") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtRespiration" runat="server" Text='<%# Bind("TPRRespiration")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="PCV">
        <EditItemTemplate>
            <asp:TextBox ID="txtPCV" runat="server" Text='<%# Bind("TPRPCV") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label5" runat="server" Text='<%# Bind("TPRPCV") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtPCV" runat="server" Text='<%# Bind("TPRPCV")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="TP">
        <EditItemTemplate>
            <asp:TextBox ID="txtTP" runat="server" Text='<%# Bind("TPRTP") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label6" runat="server" Text='<%# Bind("TPRTP") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtTP" runat="server" Text='<%# Bind("TPRTP")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:Button ID="lnkbtnEdit" runat="Server" Text="Edit" CommandName="Edit"
                CausesValidation="false"></asp:Button>

        </ItemTemplate>
        <EditItemTemplate>
            <asp:Button ID="lnkbtnUpdate" runat="Server" Text="Save" CommandName="Update"
                CausesValidation="true"></asp:Button><br />
            <asp:LinkButton ID="lnkbtnCancel" runat="Server" Text="Cancel" CommandName="Cancel"
                CausesValidation="false"></asp:LinkButton>
        </EditItemTemplate>
        <FooterTemplate>
            <asp:LinkButton ID="lnkbtnInsert" runat="Server" Text="Save" CommandName="Insert"
                CausesValidation="true"></asp:LinkButton>
        </FooterTemplate>
    </asp:TemplateField>
</Columns>
<EmptyDataTemplate>
    No TPR records exist
</EmptyDataTemplate>
</asp:GridView>

Hope this helps!

Regards, Uros