how to set datagrid column width ?

S

Sam

why this doesn't work ?

Dim c1 As New System.Web.UI.WebControls.BoundColumn
c1.HeaderText = "ID"

c1.DataField = "customerid"

c1.ItemStyle.Width = System.Web.UI.WebControls.Unit.Pixel(300)

thanks,
 
J

Jeffrey Tan[MSFT]

Hi Sam,

Based on my understanding, you want to control certain column's width
through code behind.

I think your code should work for you. Where do you call this code? Can you
paste some more integrity code snippet for this issue?

For more information, please refer to another post:

http://groups.google.com/groups?hl=zh-CN&lr=&ie=UTF-8&oe=UTF-8&threadm=iUe6t
Uw3DHA.3648%40cpmsftngxa07.phx.gbl&rnum=1&prev=/groups%3Fq%3D%2522Jeffrey%2B
Tan%2522%2Bcolumn%2Bwidth%2Bdatagrid%26hl%3Dzh-CN%26lr%3D%26ie%3DUTF-8%26oe%
3DUTF-8%26selm%3DiUe6tUw3DH

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
S

Sam

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load

'Put user code to initialize the page here

Dim cn As New SqlConnection(strcn)

cn.Open()

Dim da As New SqlDataAdapter("select * from customers order by customerid",
cn)

Dim ds As New DataSet("ds1")

da.Fill(ds, "customers")

DataGrid1.DataSource = ds.Tables("customers")

kolomnadiset()

DataGrid1.DataBind()

DataGrid1.Visible = True

cn.Close()

cn.Dispose()

End Sub

Private Sub kolomnadiset()

Dim c1 As New System.Web.UI.WebControls.BoundColumn

c1.HeaderText = "ID"

c1.HeaderStyle.Width = Web.UI.WebControls.Unit.Pixel(300)

c1.DataField = "customerid"

DataGrid1.Columns.Add(c1)

......................



"Jeffrey Tan[MSFT]" said:
Hi Sam,

Based on my understanding, you want to control certain column's width
through code behind.

I think your code should work for you. Where do you call this code? Can you
paste some more integrity code snippet for this issue?

For more information, please refer to another post:

http://groups.google.com/groups?hl=...lumn+width+datagrid&hl=zh-CN&lr=&ie=UTF-8&oe%
3DUTF-8%26selm%3DiUe6tUw3DH

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
S

Sam

the problem is mine, i used impersonate in web.config.
btw, i have questions, hope you have answers:

1. what is the difference both of statement below? because they have same
result:
c1.ItemStyle.Width = Web.UI.WebControls.Unit.Pixel(70)

c1.HeaderStyle.Width = Web.UI.WebControls.Unit.Pixel(70)



2. what is the purpose of mehod datagrid1.width? , such as :

DataGrid1.Width = Web.UI.WebControls.Unit.Pixel(3000)

when it is needed ?



3. why it doesn't work like this:

datagrid1.width = col1 width + col2 width + col3 width + ......

thanks,



----- Original Message -----
From: ""Jeffrey Tan[MSFT]"" <[email protected]>
Newsgroups: microsoft.public.dotnet.framework.aspnet.datagridcontrol
Sent: Wednesday, April 21, 2004 1:39 AM
Subject: Re: how to set datagrid column width ?

Hi Sam,

Thanks for your feedback.

I have tried your code, it works well on my side.

I have attached my project in this reply, please test it at your side to
see if it works.

Note: You should use Outlook Express to get the attached project

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
"Jeffrey Tan[MSFT]" said:
Hi Sam,

Thanks for your feedback.

I have tried your code, it works well on my side.

I have attached my project in this reply, please test it at your side to
see if it works.

Note: You should use Outlook Express to get the attached project

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
J

Jeffrey Tan[MSFT]

Hi Sam,

Thanks very much for your feedback.

I am glad you find your problem. For your further problems, I will explain
it one-by-one to you:

1. For DataGrid control, it will render as <table> html element at client
side.
If you set ItemStyle.Width property, you specify all the items' width to
certain value. While, for datagrid, each item is just a row, that is <td>
element at client side.
So it will render a "width" attribute for each td(Except the first row,
because the first row is the datagrid's header) as:
<tr>
<td style="width:300px;">1</td><td>1</td><td>New Hire - Job not
specified</td><td>10</td><td>0</td>
</tr>

While the first row will have no "width" attribute, like:
<tr>
<td>ID</td><td>job_id</td><td>job_desc</td><td>max_lvl</td><td>enum</td>
</tr>

For client html behavior, the "unspecified" value <td> will adjust it width
as other <td>s, so the entire column will have the same 300px width.

While if you specify HeaderStyle's Width to 300px, the render result is
complete reverse. The first row(Header row) will have "width" attribute
with "300px", other rows have no "width" attribute.

In this situation, the other rows will follow the first row(Header row)'s
width, so the entire column will behave have the same 300px width.

2 and 3. If you see in MSDN, you will see that DataGrid.Width property is
inherited from WebControl(Base class). It will add a "width" attribute in
the "Style" attribute for <table> element at client.

If you specify DataGrid.Width, it will specify the whole width of the
entire datagrid(That is <table> element at client side). So if you use:
DataGrid1.Width = Web.UI.WebControls.Unit.Pixel(3000)

It will render as(I have omit all the other attibutes):
<table id="DataGrid1" style="width:3000px;">

So the entire <table>'s width will be 3000px.

But for:
datagrid1.width = col1 width + col2 width + col3 width + ......

I think what you want to do is adding all the columns' width and specify to
the datagrid. Actually, default, there will be no Width property value for
each column. That is DataGridColumn.ItemStyle.Width property will be 0.
Your code will specify 0 for the datagrid, so it will not work correctly.

===========================================
Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
S

Sam

i used sample database northwind to display table customers.display all
columns and set their column width setting, and it should not fit in a page
(horizontally), but why the browser force to display all column in a page
horizontally ( i mean i don't see horizontal scrollbar).
then i try to set datagrid.width a value and finally i can see horizontal
scrollbar.
my questins are :
1. why ?
2. how to determined datagrid.width value ?

thanks,

"Jeffrey Tan[MSFT]" said:
Hi Sam,

Thanks very much for your feedback.

I am glad you find your problem. For your further problems, I will explain
it one-by-one to you:

1. For DataGrid control, it will render as <table> html element at client
side.
If you set ItemStyle.Width property, you specify all the items' width to
certain value. While, for datagrid, each item is just a row, that is <td>
element at client side.
So it will render a "width" attribute for each td(Except the first row,
because the first row is the datagrid's header) as:
<tr>
<td style="width:300px;">1</td><td>1</td><td>New Hire - Job not
specified</td><td>10</td><td>0</td>
</tr>

While the first row will have no "width" attribute, like:
<tr>
<td>ID</td><td>job_id</td><td>job_desc</td><td>max_lvl</td><td>enum</td>
</tr>

For client html behavior, the "unspecified" value <td> will adjust it width
as other <td>s, so the entire column will have the same 300px width.

While if you specify HeaderStyle's Width to 300px, the render result is
complete reverse. The first row(Header row) will have "width" attribute
with "300px", other rows have no "width" attribute.

In this situation, the other rows will follow the first row(Header row)'s
width, so the entire column will behave have the same 300px width.

2 and 3. If you see in MSDN, you will see that DataGrid.Width property is
inherited from WebControl(Base class). It will add a "width" attribute in
the "Style" attribute for <table> element at client.

If you specify DataGrid.Width, it will specify the whole width of the
entire datagrid(That is <table> element at client side). So if you use:
DataGrid1.Width = Web.UI.WebControls.Unit.Pixel(3000)

It will render as(I have omit all the other attibutes):
<table id="DataGrid1" style="width:3000px;">

So the entire <table>'s width will be 3000px.

But for:
datagrid1.width = col1 width + col2 width + col3 width + ......

I think what you want to do is adding all the columns' width and specify to
the datagrid. Actually, default, there will be no Width property value for
each column. That is DataGridColumn.ItemStyle.Width property will be 0.
Your code will specify 0 for the datagrid, so it will not work correctly.

===========================================
Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
J

Jeffrey Tan[MSFT]

Hi Sam,

Thanks for your feedback.

For your "horizontal scrollbar", do you mean Internet Explorer's scrollbar?

Actually, I am not fully understand your statement. If you use the auto
generated columns for datagrid and you did not specify width for its
columns, the entire datagrid width will determine by the design-time
DataGrid.Width Property(You specify in Property Browser, or you can control
it Width property through scale at design-time webform).

As I original stated, the Width property will render as the attribute of
<table> element. But after render to client side, if the cells' length in
one row is greater than the Width property you specified, the actual
display width may be enlarged. (This is client html behavior not the
behavior of asp.net)

If the "actual display" width is greater than the Explorer Browser's width,
the scroll bar will display.

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
S

Sam

thank you for your reply.

yes, i mean internet explorer horizontal scrollbar.
i disabled "auto generated column" and in program i set each columns width.
( my program use customers table, that have 11 columns) and i didn't set
datagrid1.width....and the browser display all columns (not rows) in a page
(so no horizontal scrollbar, only vertical scrollbar).
but when i set datagrid1.width = web.UI.WebControls.Unit.Pixel(1700)
the horizoatl scrollbar appear.
so it's make me have questions.
if you still do not understand, tommorow i'll send you source code and
picture of result
 
J

Jeffrey Tan[MSFT]

Hi Sam,

Thanks for your feedback.

Yes, this time, I understand your meaning.

If you specify a value that is greater than the total width amount of all
the columns, the html will enlarge each column to ensure that the ACTUAL
total width amount equals the datagrid's width value. Each column will be
added some value.

This is the client html behavior, it has nothing to do with DataGrid
control. Normally, we seldom change the entire datagrid's width at runtime,
we usually adjust certain column's width. We should let the datagrid's
width auto determined by the amount of the columns' width.

Can you tell me why you have to adjust the the datagrid's width?

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
J

Jeffrey Tan[MSFT]

Hi Sam,

Does my reply make sense to you? Do you still have any concern on this
issue?

Please feel free to post. Thanks

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
S

Sam

what i am going to say is i need to fixed the column width while i moved the
page back or forward, and i found it can be done when we used point not
pixel, am i correct ?
tks,
 
S

Sam

what i am going to say is i need to fixed the column width while i moved the
page back or forward, and i found it can be done when we used point not
pixel, am i correct ?
tks,
 
J

Jeffrey Tan[MSFT]

Hi Sam,

Normally, for a real world application, we do not set
DataGrid.AutoGenerateColumns to true. Then asp.net will not auto generate
column for datasource. And at this way, we have more control over the
column behavior.

You can just set the custom column width like this:
<asp:DataGrid id="DataGrid1" runat="server" Width="100%" Height="128px"
AllowPaging="True" AutoGenerateColumns="False"
PageSize="20">
<HeaderStyle CssClass="FS-dkblueheader"></HeaderStyle>
<ItemStyle CssClass="NB-LtBlueHeader"></ItemStyle>
<Columns>
<asp:BoundColumn DataField="...." HeaderText="....">
<HeaderStyle
Width="200px"></HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="...." HeaderText="....">
<HeaderStyle
Width="150px"></HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="...." HeaderText="....">
<HeaderStyle
Width="250px"></HeaderStyle>
</asp:BoundColumn>
</Columns>
</asp:DataGrid>

Through this way, you can specify all the columns width. I hope I did not
misundertand you.

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
J

Jeffrey Tan[MSFT]

Hi Sam,

Does my reply make sense to you? Do you still have any concern on this
issue?

Please feel free to post. Thanks

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top