all groups > asp.net webcontrols > march 2007 >
You're in the

asp.net webcontrols

group:

ItemStyle.Width doens't adjust the size of a column?


ItemStyle.Width doens't adjust the size of a column? Greg P.
3/27/2007 5:52:27 PM
asp.net webcontrols:
I've been looking at this for a while trying to figure out how to change the
column size of a GridView. From my understanding I should be able to set
this property in design time by editing the columns and setting the
itemStyle.width property. When I do this I do not see any changes? The only
way I've been able to work around this is to covert the column into a
templateColumn and edit the width of the label that is generated, which seems
like a hack.

Any ideas why the itemStyle property deosn't seem to be asserting itself?
(look at the "notes" column in the code below)

<asp:Panel ID="Panel1" runat="server" Height="159px" ScrollBars="Auto"
Width="642px">
<asp:GridView ID="vwEmployee" runat="server" AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="dsEmployee" OnRowCreated="vwEmployee_RowCreated">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Button4" runat="server"
CommandName="Select" Text="Select" Width="61px" /><br />
<asp:Button ID="Button2" runat="server"
CommandName="Update" Text="Update" /><br />
<asp:Button ID="Button3" runat="server"
CommandName="Delete" Text="Delete" Width="60px" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EmployeeID"
SortExpression="EmployeeID" Visible="False">
<EditItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#
Eval("EmployeeID") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label14" runat="server" Text='<%#
Bind("EmployeeID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName"
SortExpression="Last Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%#
Bind("LastName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%#
Bind("LastName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName"
SortExpression="First Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%#
Bind("FirstName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%#
Bind("FirstName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Position"
SortExpression="Title">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%#
Bind("Title") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%#
Bind("Title") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Title">
<EditItemTemplate>
<asp:TextBox ID="TextBox5" runat="server" Text='<%#
Bind("TitleOfCourtesy") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label5" runat="server" Text='<%#
Bind("TitleOfCourtesy") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address"
SortExpression="Address">
<EditItemTemplate>
<asp:TextBox ID="TextBox6" runat="server" Text='<%#
Bind("Address") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label6" runat="server" Text='<%#
Bind("Address") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City" SortExpression="City">
<EditItemTemplate>
<asp:TextBox ID="TextBox7" runat="server" Text='<%#
Bind("City") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label7" runat="server" Text='<%#
Bind("City") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Region"
SortExpression="Region">
<EditItemTemplate>
<asp:TextBox ID="TextBox8" runat="server" Text='<%#
Bind("Region") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label8" runat="server" Text='<%#
Bind("Region") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Zip"
SortExpression="PostalCode">
<EditItemTemplate>
<asp:TextBox ID="TextBox9" runat="server" Text='<%#
Bind("PostalCode") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label9" runat="server" Text='<%#
Bind("PostalCode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country"
SortExpression="Country">
<EditItemTemplate>
<asp:TextBox ID="TextBox10" runat="server" Text='<%#
Bind("Country") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label10" runat="server" Text='<%#
Bind("Country") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Phone"
SortExpression="HomePhone">
<EditItemTemplate>
<asp:TextBox ID="TextBox11" runat="server" Text='<%#
Bind("HomePhone") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label11" runat="server" Text='<%#
Bind("HomePhone") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
RE: ItemStyle.Width doens't adjust the size of a column? Greg P.
3/27/2007 6:08:24 PM
Here is another simple attempt to no avail.

<asp:BoundField DataField="CompanyName" HeaderText="CompanyName"
SortExpression="CompanyName">
<ItemStyle Width="250px" />

</asp:BoundField>

Thanks again

[quoted text, click to view]
Re: ItemStyle.Width doens't adjust the size of a column? John Cantley
3/29/2007 11:18:29 AM
I am getting the same crap. I set every width I can find.
<asp:BoundField DataField="Score" HeaderText="Score" ReadOnly="True" >
<ItemStyle Width="300px" />
<ControlStyle Width="300px" />
<HeaderStyle Width="300px" />
</asp:BoundField>

It never changes anything.

Thanks,
John Cantley



[quoted text, click to view]
Re: ItemStyle.Width doens't adjust the size of a column? Greg P.
3/29/2007 12:34:01 PM
Yeah i hear ya John, I'm hoping to hear something back from MS on this. This
is a managed news group and I still haven't heard anything. I think it is a
bug but I'll wait to hear from MS before assuming that.

[quoted text, click to view]
Re: ItemStyle.Width doens't adjust the size of a column? Kevin Fernandes
3/30/2007 8:39:06 AM
Hi,
I'll take a stab at this (so I apologize in advance if this isn't right :)

I would take a look at the asp:panel that the grid view is in. It has a
width set at 642px and, in my testing, it seems that with the width set
on a panel control, anything within the panel will try to fit that
width. Given that one of your columns is 300px (half the width of the
panel almost) and the number of other columns listed (sizes of which are
variable) I would guess that the grid view is squeezing itself to fit
the panel width.

Try, removing the width setting on the panel control, this will allow it
to size dynamically, and see if your column widths work then.

Good luck
Kevin F.

[quoted text, click to view]
Re: ItemStyle.Width doens't adjust the size of a column? Greg P.
3/30/2007 9:02:01 AM
Kevin,

Thanks for the response, unfortunatly this happens when the gridView is not
in a panel also. If I can figure out how I eill attach a copy of my website
with the northwind database included. I was attempting to change the width
of the notes field from the employee table. Let me know what you think.

FYI - ignore the ajax stuff. This was a site I put together to run ajax
with out installing it.

Thanks,
Greg

[quoted text, click to view]
Re: ItemStyle.Width doens't adjust the size of a column? Kevin Fernandes
3/30/2007 2:12:21 PM
Hi Greg,
The attachment didn't get through (that I can tell), not sure if its my
end or the news group not supporting it.

Sorry my previous suggestion didn't work.

I use a lot of GridViews in my work and I even tried a couple of new
examples when I saw your message but everything seems to work fine for
me. I was only able to repeat the problem you described when I included
the GridView in a panel and the panel had its width set.

There must be something different, possibly our environments that may be
causing this. Here are a couple of more things to look into, just in
case: Is the GridView in some other container object, like a div or
form that has a width set? How about a master page, I have noticed
problems with certain formatting when an item is in a master page. Have
you looked at the generated HTML source to see if the formatting is what
you expect to be generated? Could it be a browser issue? (I am still
using IE 6 and it works fine there). Are you using Skins or other CSS
styles that maybe overriding the width?

I can post a simple example, if you like, that I just tested and know it
works to see if you can get it to work as well. Let me know.

I do agree, that it wold be nice to hear from a Microsoft (or moderator)
person this as well.

Good luck,
Kevin F.
:)


[quoted text, click to view]
Re: ItemStyle.Width doens't adjust the size of a column? Greg P.
4/2/2007 7:14:07 AM
Kevin,

no luck so far. I created a new website, added the northwind database and a
gridview. I configured the source to show the employee table and still see
the same problem. Here is the HTML; you can see that the td for the "notes"
column (search the text for width) is set to 150. This doesn't change any
thing? I'm curious if you run this page if you see the same thing? I am
using IE7 so that is a possibility, but I've even run it on another co
workers box and saw the same thing in IE6... I have no idea at this point.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
Re: ItemStyle.Width doens't adjust the size of a column? Greg P.
4/2/2007 7:42:02 AM
Kevin,

Found some interesting behavior, the notes column is not close tot he
beginning of the table so i set the visible property for the preceding
columns to false and saw the correct behavior out of the item style.width
property. If you then make the other columns visible again the table get
scrunched.

This makes me think that the minimumn width for a column would be the header
or the longest single word in a column. This seems to be the case, but then
I thought that if it was put into a panel there should not be a problems if
there werer scroll bar options. This is not true, there seems to be a max
width on a window or? Any ideas?

FYI: I did also see the behavior you were speaking of where if you put the
grid in a panel and the width is set the table will be scrunched into the
panel. When I didn't set the width and had the columns visible the table was
still scrunched.

Thanks,
Greg

[quoted text, click to view]
Re: ItemStyle.Width doens't adjust the size of a column? Greg P.
4/2/2007 2:12:01 PM
Cool, just to confirm, you can reproduce the problem now?

[quoted text, click to view]
Re: ItemStyle.Width doens't adjust the size of a column? Kevin Fernandes
4/2/2007 3:35:11 PM
Hi Greg,
I have not had a chance to delve too deeply into this yet but it looks
like some kind of HTML limitation not an ASP.NET limit.

I created a new page and standard table with all the columns you have in
your listing and can repeat the problem in all browsers and editors so far.

I will try some more tonight and let you know what else I might have found.

Thanks,
Kevin F.

[quoted text, click to view]
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
Re: ItemStyle.Width doens't adjust the size of a column? Greg P.
4/3/2007 7:12:05 AM
Kevin,

I completely agree and have come to the same sort of conclustion. Your idea
to set the table size to 300% was the eye opener that really helped
illustrate the limitations of an html table. My original assumption was that
if you put the table in a panel and activated the scroll bars that there
should not be a limitation on the width. Thanks for all of your time and
thought into this and I know I learned something, hopefully you did also.

Ciao,
Greg P

[quoted text, click to view]
Re: ItemStyle.Width doens't adjust the size of a column? Kevin Fernandes
4/3/2007 7:31:40 AM
Yes I am able to repeat the problem, but I am not sure its the answer
your hoping for.

The problem is with the HTML table itself. I am not sure I can explain
this part properly, maybe someone else with better knowledge can do it,
but I think its something like this.

By not specifying a width for the table its taking an internal (browser)
default value which could be one of two things; fit the columns to the
data (and its specified width if any), column headers dictate minimum
width as long as the width of all columns is < 100% of the container; or
table width is 100%, which ever is smaller. As I said, I probably do
not have the correct explanation for this, so hopefully someone else can
explain it better.

In your case, at least, the case you sent as plain HTML, there are more
columns in the table than can possibly fit the width of the browser
window (or the containing HTML object i.e. DIV) so its defaulting the
table width to 100%, ignoring specified column widths, and sizing the
columns to their smallest possible fit (typically the header size). I
removed most of the columns from your example and was able to get the
column sizing to work correctly. As soon as I added enough columns to
make the table larger than the browser window, the specified column
sizes were ignored.

So you have a few options (there are probably more);
1. Eliminate columns from the GridView that you don't need, to reduce
the overall table width (an identity column for instance or employee ID
if its not needed).
2. Specify a large width for the GridView, I used 300% on your table,
which worked to get your specified column sizes but may not give you the
overall result you want.
3. Re-design this view differently, such as a master-detail type view.
You would specify the minimum number of columns in the GridView then
selecting an item in the GridView would display a DetailsView either on
the same or new page, showing all of the detailed information.

I typically use master-detail view, showing 3 or 4 columns of
information with a select button which brings up a detail view of the
information.

Sorry for the long-winded response but I hope this helps you out,
Kevin F.

[quoted text, click to view]
1w+/
RE: ItemStyle.Width doens't adjust the size of a column? Brett
1/11/2008 7:26:03 AM
Hey Folks:

I would like to bump this. Did anyone ever figure the means to get
ControlStyle-Width to work properly. I've tried all sorts of combinations
and my gridview seems to want to do its own thing, regardless.

Thanks

[quoted text, click to view]