Gridview design: how do I split the grid so it doesn't fill the full width of the page?
I have a gridview control in my C # program that currently has 12 columns and 2 rows (1 row is the header). Is it possible to split 12 columns so that I have 6 columns and 2 rows and then below the other 6 columns and rows so that it doesn't take up the full width of the page? Thank.
My grid:
<asp:GridView ID="GridView1" HorizontalAlign="center" Visible="false" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
DataSourceID="SqlDataSource" EmptyDataText="No data could be found for the email address" CellSpacing="3" CellPadding="4"
GridLines="None" ForeColor="#333333">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
SortExpression="ID">
<ItemStyle Font-Names="Verdana" Font-Size="9pt" Width="50px" />
<HeaderStyle Font-Names="Verdana" Font-Size="10pt" Width="50px" />
</asp:BoundField>
<asp:BoundField DataField="name" HeaderText="Name" SortExpression="name">
<ItemStyle Font-Names="Verdana" Font-Size="9pt" />
<HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
</asp:BoundField>
<asp:BoundField DataField="EmailAddress" HeaderText="Email Address" SortExpression="EmailAddress">
<ItemStyle Font-Names="Verdana" Font-Size="9pt" />
<HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
</asp:BoundField>
<asp:BoundField DataField="Address1" HeaderText="Address1" SortExpression="Address1">
<ItemStyle Font-Names="Verdana" Font-Size="9pt" />
<HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
</asp:BoundField>
<asp:BoundField DataField="Address2" HeaderText="Address2" SortExpression="Address2">
<ItemStyle Font-Names="Verdana" Font-Size="9pt" />
<HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
</asp:BoundField>
<asp:BoundField DataField="city" HeaderText="City" SortExpression="city">
<ItemStyle Font-Names="Verdana" Font-Size="9pt" />
<HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
</asp:BoundField>
<asp:BoundField DataField="PostCode" HeaderText="Post Code" SortExpression="PostCode">
<ItemStyle Font-Names="Verdana" Font-Size="9pt" />
<HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<EmptyDataRowStyle cssclass="mycentertext" />
</asp:GridView>
Mike, if you implement what you want, I think you end up with a confusing interface, IMHO.
Anytime I come across a grid view with a lot of columns, I reorganize the UI so that the grid shows fewer, more important or identifying columns, and then when the user clicks on a row, I show the rest of the row data is separate. " Details "are displayed below the grid.
In your case, I would leave the id, name and email columns and move the rest to the details section.
It should also be possible on the client side if you use JavaScript enough.