My gridview has 13 columns, all bound fields. When data is bound to the gridview, it causes the page to stretch and the layout becomes lackluster. The page where the gridview is located is inherited from a master page and the gridview is within a panel. We use percentages instead of pixels, which is causing this issue. Using pixels to set the width works fine, but not when using percentages. I have attempted the following solutions:
- Removing bound fields and using template fields with fixed itemstyle-width.
- Putting the gridview inside a table and applying styles for width, overflow, and other properties.
- Placing the gridview inside a div and applying styles for width, overflow, and other properties.
- Adding the gridview inside a panel and setting properties as mentioned above.
What works: Setting the "tableLayout" property of the gridview to "fixed" keeps it within the range, but the text overlaps, rendering it useless.
Please provide suggestions.
Sample Code:
<table>
<tr>
<td>
<asp:Panel ID="pnlSearchResult" runat="server" Visible="false" Width="97%">
<div style="overflow:scroll;width:100%;table-layout:fixed">
<asp:GridView ID="grdSearchResult" runat="server" SkinID="NewGridGS" EmptyDataText="No records found"
Width="99%">
<Columns>
<asp:BoundField DataField="ECode" HeaderText="Code"/>
<asp:BoundField DataField="EName" HeaderText="Name" />
<asp:BoundField DataField="Type" HeaderText="V Type" />
<asp:BoundField DataField="VName" HeaderText="V Name" />
<asp:BoundField DataField="PStartDate" HeaderText="P Start Date" />
<asp:BoundField DataField="PEndDate" HeaderText="P End Date" />
<asp:BoundField DataField="VStartDate" HeaderText="V Start Date" />
<asp:BoundField DataField="VEndDate" HeaderText="V End Date" />
<asp:BoundField DataField="OnSite" HeaderText="On Site" />
<asp:BoundField DataField="PCode" HeaderText="P Code" />
<asp:BoundField DataField="PSCode" HeaderText="PS Code" />
<asp:BoundField DataField="AmountUSD" HeaderText="Amount (USD)" />
<asp:BoundField DataField="AmountINR" HeaderText="Amount (INR)" />
</Columns>
</asp:GridView>
</div>
</asp:Panel>
</td>
</tr>
</table>