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. Advertisements

  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. Advertisements

  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)

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



     
    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 ?

     
    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,

     
    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
     
    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,
     
    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,
     
    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.
     
    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. Advertisements

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 (here). After that, you can post your question and our members will help you out.