web-dev-qa-db-fra.com

définir la largeur de la colonne d'un gridview dans asp.net

J'ai fait glisser un objet GridView de la boîte à outils vers la page Aspx.Le code de conception ressemble à ceci

<asp:GridView ID="gridview1" runat="server"   style="text-align:center;width: 1327px;" 
    CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" 
    EnableSortingAndPagingCallbacks="True" PageSize="50" AutoGenerateEditButton="True">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <EditRowStyle BackColor="#999999" />
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" 
        Height="12px" VerticalAlign="Bottom" Width="12px" Wrap="False" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#E9E7E2" />
    <SortedAscendingHeaderStyle BackColor="#506C8C" />
    <SortedDescendingCellStyle BackColor="#FFFDF8" />
    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>

J'ai une colonne par nom Adresse dans la base de données. La table est liée à cette vue de grille à l'aide du code VB.NET suivant

 Dim ds as Data.DataSet
 Dim da As New OleDbDataAdapter("select col1,col2,col3,col4,col5,col6,col7,col8,col9,col10,Address from table, con)
        da.Fill(ds)
        gridviewrealestate.DataSource = ds
        gridviewrealestate.DataBind()

À présent, lorsque la vue en grille est affichée, les colonnes sont très proches les unes des autres en raison des grandes informations présentes dans Address Column.Je veux définir la colonne Address à une largeur particulière . S'il vous plaît, aidez-moi à faire cela.

11
Vikas Kunte
<asp:GridView ID="GridView1" runat="server">
    <HeaderStyle Width="10%" />
    <RowStyle Width="10%" />
    <FooterStyle Width="10%" />
    <Columns>
        <asp:BoundField HeaderText="Name" DataField="LastName" 
            HeaderStyle-Width="10%" ItemStyle-Width="10%"
            FooterStyle-Width="10%" />
    </Columns>
</asp:GridView>
12
rahul

Je sais que cette question est ancienne, mais elle est apparue lorsque je cherchais une solution au même problème. J'ai donc pensé publier ce qui fonctionnait pour moi.

<asp:BoundField DataField="Description" HeaderText="Bond Event" ItemStyle-Width="300px" />

J'ai utilisé l'attribut ItemStyle-Width sur ma BoundField et cela a très bien fonctionné. Je n'ai encore rencontré aucun problème.

Je n'ai pas besoin d'ajouter quoi que ce soit au reste du code pour que cela fonctionne.

5
Malachi

Définir la largeur

HeaderStyle-width

par exemple HeaderStyle-width = "10%"

3
peekayyy

Ajouter HeaderStyle-Width et ItemStyle-width aux modèles

 <asp:GridView ID="grdCanceled" runat="server" AutoGenerateColumns="false" OnPageIndexChanging="grdCanceled_PageIndexChanging"  AllowPaging="true" PageSize="15"
         CssClass="table table-condensed table-striped table-bordered" GridLines="None">
             <HeaderStyle BackColor="#00BCD4"  ForeColor="White" />
             <PagerStyle CssClass="pagination-ys" />
               <Columns>
            <asp:TemplateField HeaderText="Mobile NO" HeaderStyle-Width="10%" ItemStyle-Width="10%">
                <ItemTemplate>
                  <%#Eval("mobile") %>
                </ItemTemplate>
               </asp:TemplateField>
           <asp:TemplateField HeaderText="Name" HeaderStyle-Width="10%" ItemStyle-Width="10%">
                <ItemTemplate>
                    <%#Eval("name") %>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="City" HeaderStyle-Width="10%" ItemStyle-Width="10%">
                <ItemTemplate>
                    <%#Eval("city") %>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Reason" HeaderStyle-Width="25%" ItemStyle-Width="25%">
                 <ItemTemplate>
                    <%#Eval("reson") %>
                 </ItemTemplate>
             </asp:TemplateField>
             <asp:TemplateField HeaderText="Agent" HeaderStyle-Width="10%" ItemStyle-Width="10%">
                 <ItemTemplate>
                     <%#Eval("Agent") %>
                 </ItemTemplate>
             </asp:TemplateField>
             <asp:TemplateField HeaderText="Date" HeaderStyle-Width="10%" ItemStyle-Width="10%">
                 <ItemTemplate>
                   <%#Eval("date","{0:dd-MMM-yy}") %>
                 </ItemTemplate>
              </asp:TemplateField>
              <asp:TemplateField HeaderText="DList" HeaderStyle-Width="10%" ItemStyle-Width="10%">
                  <ItemTemplate>
                      <%#Eval("service") %>
                  </ItemTemplate>
              </asp:TemplateField>
              <asp:TemplateField HeaderText="EndDate" HeaderStyle-Width="10%" ItemStyle-Width="10%">
                  <ItemTemplate>
                      <%#Eval("endDate","{0:dd-MMM-yy}") %>
                  </ItemTemplate>
              </asp:TemplateField>
              <asp:TemplateField HeaderStyle-Width="5%" ItemStyle-Width="5%">
                  <ItemTemplate>
                       <asp:CheckBox data-needed='<%#Eval("userId") %>' ID="chkChecked" runat="server" />
                   </ItemTemplate>
               </asp:TemplateField>
             </Columns>
          </asp:GridView>
0
PK-1825

C'est ce qui a fonctionné pour moi. set HeaderStyle-Width = "5%", dans le pied de page set textbox width Width = "15", définissez également la largeur de votre grille à 100%. Voici celui de la colonne de ma grille. 

    <asp:TemplateField   HeaderText = "sub" HeaderStyle-ForeColor="White" HeaderStyle-Width="5%">
<ItemTemplate>
    <asp:Label ID="sub" runat="server" Font-Size="small" Text='<%# Eval("sub")%>'></asp:Label>
</ItemTemplate> 
 <EditItemTemplate>
    <asp:TextBox ID="txt_sub" runat="server" Text='<%# Eval("sub")%>'></asp:TextBox>
</EditItemTemplate> 
<FooterTemplate>
    <asp:TextBox ID="txt_sub" runat="server" Width="15"></asp:TextBox>
</FooterTemplate>

0
firefly

Vous devez convertir la colonne en 'TemplateField'.

En mode Designer, cliquez sur la balise active du GridView, sélectionnez-> "Modifier les colonnes" ..__ Sélectionnez la colonne que vous souhaitez modifier et cliquez sur le lien hypertexte pour le convertir en modèle. Voir capture d'écran: Conversion d'une colonne en modèle .

Remarque: La modification de votre source de données peut régénérer les colonnes à nouveau, ce qui peut entraîner des modifications pour les colonnes de votre modèle. 

Réf.: https://msdn.Microsoft.com/en-us/library/bb288032.aspx

0
Jared Whitfield