How to resize grid-view column width?

2
votes

I am trying to re-size columns width in my gridview that I created using this tutorial, but I am unable to do so. I have been through tens of ways by googling but non of them worked.

Code that is creating problem

<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" HtmlEncode="False" />
<asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="False" />
<asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="False" />
<asp:TemplateField> // I don't want to show it in my gridview as it is just being
                    // for showing nested gridview
<ItemTemplate>
</td></tr>

I tried to change column visiblity but then show/hide button doesn't work anymore.

This is how my gridview looks like,

enter image description here

I want to hide last empty column or minimize it's width so it should be hidden and increase description column width, decrease ID number column width and also first column's width,

I even tried CSS way but then it says width 0px however no change in width and ControlStyle-Width="10%" but it didn't worked.

2
cssgridviewwebforms
can you please show code in details for gridview?? - SanketS
Can you read the post properly please ? Link is there with all code you need :) - Mathematics
set HeaderStyle-HorizontalAlign, ItemStyle-HorizontalAlign property of each gridview bound field. - Rahul
why each ? can't I just add it to one I need to change size of ? thanks - Mathematics
I am not sure if changing Align will be any good ? - Mathematics

2 Answers

5
votes

dear friend use the following code 

    <asp:GridView runat="server" id="testGrid">
    <Columns>
        <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" HtmlEncode="False" ItemStyle-Width="100px" />
        <asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="False" ItemStyle-Width="100px" />
        <asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="False" ItemStyle-Width="100px" />
    </Columns>
</asp:GridView>

or if you understand the css then use the following code in which you have to assign the css class to ControlStyle-CssClass property 

    <asp:GridView runat="server">
    <Columns>
        <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" HtmlEncode="False" ControlStyle-CssClass="cssclass1" />
        <asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="False" ControlStyle-CssClass="cssclass2"  />
        <asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="False" ControlStyle-CssClass="cssclass3" />
    </Columns>
</asp:GridView>
1
votes

You can resize columns specifying ItemStyle-Width property for gridview columns.

 <asp:BoundField DataField="ProductID" HeaderText="ProductID" ItemStyle-Width="200px" 
 InsertVisible="False" ReadOnly="True" SortExpression="ProductID" >
 </asp:BoundField>

The template field column will be visible for blank values. However, you can work around this by either disabling column borders through css or letting the column render as a new table row like this in your aspx code

<asp:TemplateField>
            <ItemTemplate>
    <tr>
       <td colspan="100%">
            <!-- your nested control goes here-->
        </td>
    </tr>
   </ItemTemplate>
</asp:TemplateField>