Question

如何更改gridview项目的宽度？我尝试添加itemstyle-width但它没有改变任何东西。是因为我的网格视图太拥挤而且不适合我的屏幕或我的代码有问题吗？

<asp:GridView ID="gvModal" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" EmptyDataText="No Records" AllowPaging="true" CellPadding="4" HeaderStyle-BackColor="CornflowerBlue" BorderWidth="2" BorderColor="CornflowerBlue" Width="100%" CssClass="table table-hover" >
        <Columns>                
            <asp:TemplateField HeaderText ="ID" HeaderStyle-ForeColor="White">
                <ItemTemplate>
                    <asp:Label ID="lblID" runat="server" Text='<%#Bind ("ID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText ="Type" HeaderStyle-Width="230px" HeaderStyle-ForeColor="White" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri" >
                <ItemTemplate>
                    <asp:Label ID="lbltype" runat="server" Text='<%#Bind ("ItemType") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText ="Model" HeaderStyle-Width="240px" ItemStyle-Width="300px" HeaderStyle-ForeColor="White" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblModel" runat="server" Text='<%# Bind("ItemModel") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText ="Requested Quantity" HeaderStyle-ForeColor="White" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblQuan" runat="server" Text='<%#Bind ("ItemQuantity") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText ="AMS Balance" HeaderStyle-ForeColor="White" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblAMS" runat="server"></asp:Label>  
                </ItemTemplate>     
            </asp:TemplateField>
            <asp:TemplateField HeaderText ="Incoming Stock" HeaderStyle-ForeColor="White" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblIncoming" runat="server"></asp:Label>  
                </ItemTemplate>     
            </asp:TemplateField>
            <asp:TemplateField HeaderText ="Unit" HeaderStyle-ForeColor="White" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblUnit" runat="server" Text='<%#Bind ("ItemUnit") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText ="Date Needed" HeaderStyle-Width="180px" ItemStyle-Width="150px" HeaderStyle-ForeColor="White" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblDate" runat="server"  Text='<%#Bind ("ItemDate" , "{0:yyyy-MM-dd}") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText ="Description" HeaderStyle-ForeColor="White" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblDesc" runat="server" Text='<%#Bind ("ItemDesc") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText ="Status" ItemStyle-Width="120px" HeaderStyle-ForeColor="White" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblStatus" runat="server" Text='<%#Bind ("ItemStatus") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
             <asp:TemplateField HeaderText ="PO Number" HeaderStyle-ForeColor="White" ItemStyle-Width="120px" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblPONumber2" runat="server" Text='<%#Bind ("PO_Num") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>     
            <asp:TemplateField HeaderText ="PO Date" HeaderStyle-ForeColor="White" ItemStyle-Width="150px" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblPODate2" runat="server" Text='<%#Bind ("PO_Date", "{0:yyyy-MM-dd}") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>   
            <asp:TemplateField HeaderText ="Delivery Date" HeaderStyle-ForeColor="White" ItemStyle-Width="150px" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblDelDate2" runat="server" Text='<%#Bind ("Delivery_Date", "{0:yyyy-MM-dd}") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>        
            <asp:TemplateField HeaderText ="Issuance Date" HeaderStyle-ForeColor="White" ItemStyle-Width="180px" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblIssDate2" runat="server" Text='<%#Bind ("IssuanceDate", "{0:yyyy-MM-dd}") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>   
            <asp:TemplateField HeaderText ="Issuance Number" HeaderStyle-ForeColor="White" ItemStyle-Width="110px" ItemStyle-Font-Names="Calibri" HeaderStyle-Font-Names="Calibri">
                <ItemTemplate>
                    <asp:Label ID="lblIssNum2" runat="server" Text='<%#Bind ("IssuanceNumber") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>                    
            <asp:TemplateField HeaderText="Last Issuance" ItemStyle-Font-Names="Calibri" HeaderStyle-ForeColor="White" HeaderStyle-BackColor="#336699" ItemStyle-Width="170px">
                <ItemTemplate>
                    <asp:Label ID ="lblIssued" runat="server"></asp:Label>
                </ItemTemplate>                  
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity" HeaderStyle-ForeColor="White" HeaderStyle-BackColor="#336699" ItemStyle-Font-Names="Calibri" ItemStyle-Width="80px">
                <ItemTemplate>
                    <asp:Label ID ="lblQuantity" runat="server"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>    
            <asp:TemplateField HeaderText="Unit" HeaderStyle-ForeColor="White" HeaderStyle-BackColor="#336699" ItemStyle-Font-Names="Calibri" ItemStyle-Width="80px">
                <ItemTemplate>
                    <asp:Label ID ="lblUnits" runat="server"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>                        
        </Columns>
    </asp:GridView>

Answer 1

考虑网格视图的总宽度为100%，然后您可以为每列分配比例百分比（请注意，TemplateField的百分比总和不会超过100）。另一件必须注意的是，您必须在设置列的宽度时同时设置HeaderStyle-Width和ItemStyle-Width。例如：

<asp:TemplateField HeaderText ="ID" HeaderStyle-ForeColor="White" HeaderStyle-Width="10%" ItemStyle-Width="10%">
    <ItemTemplate>
        <asp:Label ID="lblID" runat="server" Text=" ID" ></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

通过这样做，您将ID列的宽度设置为网格实际宽度的10%

Answer 2

BoundField显示表格单元格中的所有内容，因此单元格将根据需要展开。 TemplateField也将呈现为单元格，但它包含一个限制任何内容宽度的div。

Example with code

Answer 3

宽度在列的gridview位中指定为100％，您使用px表示宽度，将宽度更改为实际宽度（以像素为单位），然后确保所有模板字段的总和和绑定字段相等，或将模板字段宽度更改为百分比，并确保它总计为100.

如何调整gridview项的宽度

3 个答案: