Question

I have a gridview which has 13 columns. All the columns are bound field.
When data is binded to the gridview, what happens the gridview stretches the page and the layout of the page becomes dull.
The the page on which i have added the girdview is inherited from a mater page and the gridview is inside a panel. We work on percentage and not on pixel so i am facing this problem. If i use pixel to fix the width of the gridview it’s working finr, but not in case of %.
I have tried all the below –

1. Remove the bound field and used template field and by fixing the itemstyle-width.
2. Putting the girdview inside a table and applying the styles to set width, overflow and other required properties.
3. Putting the gridview inside a div and applying the styles to set width, overflow and other required properties.
4. Adding the gridview inside the panel and then setting the properties of the panel as above.

What works: –
When i fix the “tableLayout” properties of gridview to “fixed” it displays inside the range but all the text overlapped each other and hence all the things becomes useless.

Please suggest me.

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>

Answer 1

Give width of div containing grid in pixels instead of percentage

<td>
<div id="divGrid" style='position:absolute; width:800px; overflow:auto'>

<!-- your grid here -->

</div>

</td>

You can take width of screen in pixel and calculate the pixel in percentage. suppose width of screen is 1000 pixel is return by screen.width then you 90% will be 900px.

<script language="javascript" type="text/javascript">
   document.getElementById('divGrid').style.width = screen.width + "px";
</script>