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>
source to share
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.
source to share