网格视图拉伸页面宽度

本文关键字：视图 网格 | 更新日期: 2023-09-27 18:35:46

我有一个有 13 列的网格视图。所有列都是绑定字段。当数据绑定到 gridview 时，网格视图会拉伸页面，页面的布局会变得沉闷。我添加 girdview 的页面继承自主页面，网格视图位于面板内。我们处理百分比而不是像素，所以我面临这个问题。如果我使用像素来固定网格视图的宽度，它的工作会更好，但在 % 的情况下不会。我已经尝试了以下所有方法 -

  1. 删除绑定字段和使用的模板字段，并固定项目样式宽度。
  2. 将 girdview 放在表中，并应用样式来设置宽度、溢出和其他必需属性。
  3. 将网格视图放在div 中，并应用样式来设置宽度、溢出和其他必需属性。
  4. 在面板内添加网格视图，然后按上述方式设置面板的属性。

什么有效： -当我将网格视图的"tableLayout"属性修复为"固定"时，它显示在范围内，但所有文本都相互重叠，因此所有内容都变得无用。

请建议我。

示例代码： - 

<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>

网格视图拉伸页面宽度

以像素而不是百分比表示给出包含网格的div 的宽度

<td>
<div id="divGrid" style='position:absolute; width:800px; overflow:auto'>
<!-- your grid here -->
</div>
</td>

您可以以像素为单位获取屏幕宽度并以百分比计算像素。 假设屏幕宽度为 1000 像素由 screen.width 返回，那么您的 90% 将是 900px。

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

你可以根据需要使用100%的百分比，而无需Javascript

<td>
    <div id="gridDiv" style='width:100%; overflow:auto;'>
        <!-- your grid here -->
    </div>
</td>
相关文章：