how to adjust width of gridview items

Question

how can i change the width of the gridview items? i tried adding itemstyle-width but it doesnt change anything. is it because my gridview is too crowded and does not fit into my screen or something is wrong with my codes?

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

is gridview wrapped in
having some width set ?
– Sami Jul 20 '16 at 01:48 — Sami, Jul 20 '16 at 01:48

score 1 · Answer 1 · answered Jul 20 '16 at 01:29

Consider that total width of your Grid view is 100% then you can assign proportional percentages to each columns(Please note, Sum of percentages of the TemplateField will not exceed 100). Another thing have to be noticed is, you have to set both HeaderStyle-Width and ItemStyle-Width while setting the width of the column. For example:

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

By doing like this you are setting the width of the ID column to 10% of the actual width of the Grid

score 1 · Answer 2 · edited May 23 '17 at 10:27

1

The BoundField displays all content in a table cell and therefore the cell will expand as needed. The TemplateField will also be rendered as a cell BUT it contains a div which limits the width of any contents.

Example with code

edited May 23 '17 at 10:27

Community

1
1

answered Jul 20 '16 at 02:22

Sami

3,686
4
17
28

score 1 · Accepted Answer · answered Jul 20 '16 at 02:53

The width is specified as 100% in the gridview bit in the columns , you are using px to denote the widths, Either change the width to the actual width(in pixels),and then ensure the sum of all the template fields and bound fields are equal, or change the template field widths to percentages and ensure it totals to 100.

how to adjust width of gridview items

3 Answers3