Solved

Gridview columns width

Posted on 2011-03-03
6
547 Views
Last Modified: 2012-05-11
I am trying to increase the width size of the columns on my gridview, but  iam having troubles having it done, can you please review my code and see if I am doing anything wrong?
asp.net part

  <asp:gridview ID="Gridview1" runat="server" ShowFooter="True" 
            AutoGenerateColumns="False" onrowcreated="Gridview1_RowCreated" 
            EnableModelValidation="True" CssClass = "GridViewStyle" HeaderStyle-CssClass ="HeaderStyle" 
            RowStyle-CssClass ="RowStyle" AlternatingRowStyle-CssClass = "AltRowStyle"  >
            
            <Columns>
         
            <asp:BoundField DataField="RowNumber" HeaderText="Row Number" ControlStyle-CssClass="wide" />
            <asp:TemplateField ControlStyle-CssClass="wide" >
               <HeaderTemplate  >
               <asp:Label runat="server">NT-1</asp:Label>
            
            <asp:TextBox ID="txt_Census1" runat="server" Width="30px" ></asp:TextBox>
            </HeaderTemplate>


                <ItemTemplate>
                    Bed:
                    <asp:TextBox ID="txt_Bed1" runat="server" Width="30px"></asp:TextBox>
                    Status:
                    <asp:DropDownList ID="txt_Comment1" runat="server" AppendDataBoundItems="True" 
                    style="text-align: left" >
                    <asp:ListItem value="0" text="Select">  </asp:ListItem>
                    <asp:ListItem>Assigned</asp:ListItem>
                    <asp:ListItem>BR</asp:ListItem>
                    <asp:ListItem>Open NS</asp:ListItem>
                                      
                </asp:DropDownList>

                </ItemTemplate>
            </asp:TemplateField>





css


/**  * GRIDVIEW STYLES  **/

/* Css Class - Whole Table */ 

.GridViewStyle{font-family: Arial, Sans-Serif; 
font-size:small; 
table-layout: auto; 
border-collapse: collapse; 
border: #1d1d1d 1px solid; 
width: 300px;

} 

.HeaderStyle th{ 
Padding : 5px; 
Color : #C0C0C0;
width: 300px;
} 


/*Apply padding and color to header of <th> in table */
.HeaderStyle 
{ 
background-image: url(Images/HeaderChromeBlack.jpg); 
background-position:center; 
background-repeat:repeat-x; 
background-color:#1d1d1d; 
    width: 300px;

} 


.RowStyle td
{
    background-color: #c9c9c9;
    width: 300px;
} 

/*Alternate rows will be shaded */

.AltRowStyle td 
{ 
padding: 5px; 
border-right :solid 1px #1d1d1d; 
width: 300px;
} 


input.wide { width: 100px; }

Open in new window

0
Comment
Question by:TonyReba
  • 3
  • 2
6 Comments
 
LVL 9

Expert Comment

by:gdupadhyay
ID: 35028200

You need to update the CSS.

See this URL to set the GV columns width

http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_21767971.html

Or you can set the dynamic columns width

http://msdn.microsoft.com/en-us/library/ms178296.aspx
0
 
LVL 9

Expert Comment

by:gdupadhyay
ID: 35028211
In CSS, update below according to your requirement.:

.GridViewStyle{font-family: Arial, Sans-Serif;
font-size:small;
table-layout: auto;
border-collapse: collapse;
border: #1d1d1d 1px solid;
width: 300px;

}

0
 
LVL 9

Author Comment

by:TonyReba
ID: 35028308
I dont see any chnage on the css you provided?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 9

Author Comment

by:TonyReba
ID: 35028325
I just need to width for the entire column be increased,  no matter if is a static width
0
 
LVL 8

Expert Comment

by:Anurag Agarwal
ID: 35028467
pls try this


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField HeaderText="Name">
                    <ItemStyle Width="500px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="Description">
                    <ItemStyle Width="1000px" />
                </asp:BoundField>
            </Columns>
 </asp:GridView>

and refer to gridview column width
0
 
LVL 9

Accepted Solution

by:
gdupadhyay earned 500 total points
ID: 35028661
I just posted the CSS part need to update.
In your CSS, Please update
width: 300px; to width: 500px; or width: 600px; according to your requirement.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now