how to set datagrid column width ?

Discussion in 'ASP .Net Datagrid Control' started by Sam, Apr 20, 2004.

  1. Sam

    Sam Guest

    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,
    Sam, Apr 20, 2004
    #1
    1. Advertising

  2. 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.
    Jeffrey Tan[MSFT], Apr 20, 2004
    #2
    1. Advertising

  3. Sam

    Sam Guest

    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]"" <> wrote in message
    news:...
    > 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.
    >
    Sam, Apr 20, 2004
    #3
  4. Sam

    Sam Guest

    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]"" <>
    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]"" <> wrote in message
    news:$...
    > 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.
    Sam, Apr 22, 2004
    #4
  5. 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.
    Jeffrey Tan[MSFT], Apr 22, 2004
    #5
  6. Sam

    Sam Guest

    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]"" <> wrote in message
    news:...
    > 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.
    >
    Sam, Apr 22, 2004
    #6
  7. 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.
    Jeffrey Tan[MSFT], Apr 22, 2004
    #7
  8. Sam

    Sam Guest

    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

    ""Jeffrey Tan[MSFT]"" <> wrote in message
    news:...
    > 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.
    >
    Sam, Apr 23, 2004
    #8
  9. 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.
    Jeffrey Tan[MSFT], Apr 23, 2004
    #9
  10. 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.
    Jeffrey Tan[MSFT], Apr 28, 2004
    #10
  11. Sam

    Sam Guest

    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,

    ""Jeffrey Tan[MSFT]"" <> wrote in message
    news:...
    > 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.
    >
    Sam, Apr 28, 2004
    #11
  12. Sam

    Sam Guest

    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,

    ""Jeffrey Tan[MSFT]"" <> wrote in message
    news:...
    > 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.
    >
    Sam, Apr 28, 2004
    #12
  13. 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.
    Jeffrey Tan[MSFT], Apr 28, 2004
    #13
  14. 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.
    Jeffrey Tan[MSFT], Apr 30, 2004
    #14
  15. Sam

    Sam Guest

    thanks, i really appreciated your help.

    ""Jeffrey Tan[MSFT]"" <> wrote in message
    news:YtuQ$...
    > 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.
    >
    Sam, May 3, 2004
    #15
  16. Hi Sam

    You are welcome!!

    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], May 3, 2004
    #16
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Joko suprianto

    set the width of dataGrid column

    Joko suprianto, Mar 13, 2005, in forum: ASP .Net
    Replies:
    6
    Views:
    24,263
    smanipasu
    Jan 21, 2009
  2. AndrewF
    Replies:
    1
    Views:
    744
    Bruce Barker
    Oct 10, 2005
  3. Charleees
    Replies:
    2
    Views:
    8,189
    Eliyahu Goldin
    Jun 20, 2006
  4. Cal
    Replies:
    1
    Views:
    522
    Tim B
    Jan 8, 2007
  5. Carl Howarth

    DG Column Width vs Table Column Width

    Carl Howarth, Oct 22, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    254
    Eliyahu Goldin
    Oct 24, 2004
Loading...

Share This Page