Fixed Width to Rad Grid Bound Column

19 posts, 0 answers
  1. Ritzie
    Ritzie avatar
    28 posts
    Member since:
    Jan 2009

    Posted 09 Jun 2009 Link to this post



    Hello All,
                   I want to apply a fixed width to Telerik Rad Grid's Bound Column,It may be with or without filtering.Please suggest me the answer,its urgent....
                    If the data in the grid bound's is large the disigning is all misplaced



    Thankx
    Ritzie




  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jun 2009 Link to this post

    Hi Ritzie,

    Try setting HeaderStyle-Width property of GridBoundColumn as shown below for setting fixed width for bound column.

    ASPX:
     
      . . .  
    <telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName" SortExpression="ShipName" UniqueName="ShipName">  
        <HeaderStyle Width="100px" /> 
    </telerik:GridBoundColumn> 
      . . . 
    Note: Set the TableLayout property of grid MasterTableView to Fixed.

    -Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    6 posts
    Member since:
    Oct 2012

    Posted 05 Oct 2012 Link to this post

    *** Update 2 ***

    There is still an issue.  When I set the TableLayout to Fixed I lose the horizontal scrolling that I have enabled here:

    <ClientSettings>
                <Scrolling AllowScroll="True" ScrollHeight="1000" SaveScrollPosition="True"></Scrolling>

    *** Update 1 ***

    Solution worked when I set MasterTableView =>  TableLayout="Fixed"

    *** Original Post ***

    This solution is not working for me, possibly because my Grid is very wide.


    Here is my column definition:

    <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments" UniqueName="Comments">
        <HeaderStyle Width="150px" />
        <ItemStyle Width="150px" />
    <FooterStyle Width="150px" /> </telerik:GridBoundColumn>

    The width of the MasterTableView is set to 100%.

    <MasterTableView Width="100%" 
    

    I've tried the value "150" instead of "150px" as well.

    You think it would be straightforward - setting the width of a column.

    This is perhaps one more case where I have to hack together some custom javascript to get the display I want out of a Telerik control.
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 08 Oct 2012 Link to this post

    Hello,

    Note that it is not recommended to set ItemStyle-Width for setting column widths. Only HeaderStyle-Width should be used. Try changing your code as shown below and see if it works as you expected:
     
    <MasterTableView TableLayout="Fixed">
      <Columns>
      <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments"    UniqueName="Comments">
         <HeaderStyle Width="150px" />
      </telerik:GridBoundColumn>
    ..............

    Greetings,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Mark
    Mark avatar
    6 posts
    Member since:
    Oct 2012

    Posted 08 Oct 2012 Link to this post

    Thanks Pavlina - this solution will work in most cases, but not with the grid I'm working with because it is very wide and when I set - TableLayout="Fixed"- I lose the horizontal scrolling that I have enabled via:
    <ClientSettings> 
        <Scrolling AllowScroll="True" ScrollHeight="550" SaveScrollPosition="True"></Scrolling>
    </ClientSettings>

    Without horizontal scrolling, a portion of the grid is not visible / inaccessible to the user.

    So the problem is: How do I set a fixed column width and enable horizontal scrolling with the RadGrid control. 

    I currently believe that there is not going to be a fix / solution possible by setting RadGrid / MasterTableView / GridColumn properties. 

    I think my solution will be to set the TableLayout property to fixed and implement my own scrolling by placing the RadGrid in a div with some custom CSS.

    If there is a inherent Telerik property solution, that would be great, but in my experience, Telerik controls work great 80% of the time and 20% of the time require custom work to get the desired display.


  7. Mark
    Mark avatar
    6 posts
    Member since:
    Oct 2012

    Posted 08 Oct 2012 Link to this post

    To solve this display problem I've once again kind of hacked the RadGrid control by setting css properties of the HTML that the RadGrid control renders in javascript.  In this case, I'm setting the overflow property of rendered two divs that surround the rendered table element of the RadGrid control.

    This javascript needs to be run EVERY TIME the grid is rendered.  So if you do a column sort or anything that results in one of these massive viewstate ajax panel postbacks, you need to run the javascript again because the Telerik RadGrid has rendered new HTML.

    $("#ctl00_PageContent_RadGrid1").css("overflow-x""scroll");     
    $("#ctl00_PageContent_RadGrid1_GridData").css("overflow""visible");

    Again, to set the column widths explicitly, you are going to need to set the MasterTableView TableLayout property to fixed.
    <MasterTableView TableLayout="Fixed">
  8. Mark
    Mark avatar
    6 posts
    Member since:
    Oct 2012

    Posted 08 Oct 2012 Link to this post

    With this solution I see grid lines in the grid when I scroll.  The grid lines disappear when I click a grid row, or sometimes on a horizontal scroll they disappear by themselves after a couple seconds.

    I have: 
    <MasterTableView GridLines="None"  


    Is there another property I need to set to hide the dotted / dashed grid lines I'm seeing when I scroll?

    Also I have to explicitly specify the width of every column (at this point) or they are simply not displayed at all.

    Privina, do you think the developments in this post warrant a support ticket?  Can you perhaps send me a link or some documentation where it explains how to configure the RadGrid to display fixed width columns in a horizontally scrollable grid?  Or an assertion that the Telerik RadGrid just has problems in this scenario and I should use other means to display my information - that would also be sufficient.


  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 08 Oct 2012 Link to this post

    Hi Ritzie,

    For more information about scrolling and fxed colum widths you can refer to the online resources below:
    http://www.telerik.com/help/aspnet-ajax/grid-scroll-with-static-headers.html
    http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx
    http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx

    All the best,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Mark
    Mark avatar
    6 posts
    Member since:
    Oct 2012

    Posted 08 Oct 2012 Link to this post

    This stuff works when (and perhaps only when in the case of wide grids) the width of each column is explicitly specified.
  11. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Oct 2012 Link to this post

    Hi,

    One option is explicitly specify column widths as you said. Another option is to set the same width for all columns through HeaderStyle section of the RadGrid property pane:
    <HeaderStyle Width="200px"/>

    Greetings,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  12. Anna Katrina
    Anna Katrina avatar
    9 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2013 Link to this post

    Thank You Pricy for the advice.. Ill keep that in mind :D
  13. Dylan
    Dylan avatar
    17 posts
    Member since:
    Apr 2013

    Posted 17 Jun 2013 Link to this post

    Hi,

    How can I set an auto width to all my Radgrid's columns ? Auto here means I want the column width to follow the content. I don't want to set the width for each columns of my Radgrid because it's just too many.
  14. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jun 2013 Link to this post

    Hi,

    Please set the TableLayout="Auto" for the MasterTable view.

    ASPX:
    <MasterTableView TableLayout="Auto">
    . . . . . .
    </MasterTableView>

    Thanks,
    Princy
  15. Dylan
    Dylan avatar
    17 posts
    Member since:
    Apr 2013

    Posted 17 Jun 2013 Link to this post

    Hi Princy,

    By default the setting is Auto but the column width too narrow and causing the content to be multiple lines. How I can set the width for each column to width of it's content in every Radgrid that I have using CSS ?

    Regards,
    Dylan
  16. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jun 2013 Link to this post

    Hi,

    I guess you want to set the width for all columns of a radgrid.Please try setting the HeaderStyle-Width property of the radgrid.

    ASPX:
    <telerik:RadGrid ID="RadGrid1" runat="server"   HeaderStyle-Width="200px" >
     <MasterTableView  TableLayout="Auto">
    . . . . . . . . . . . . . .
     </MasterTableView>
    </telerik:RadGrid>

    Thanks,
    Princy
  17. Majeed
    Majeed  avatar
    4 posts
    Member since:
    Mar 2014

    Posted 04 Jun 2014 in reply to Pavlina Link to this post

    I want to Modified RadGrid`s Column`s width I have Did all thing mean Modified the Column width, Filtering Width but now problem is when I run my Project in IE10 the Header and filtering textbox appear perfectly but the body of grids is distrubed kindly help me and Find attachment for quick understanding.

    Thanks in advance.
  18. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 05 Jun 2014 Link to this post

    Hello Majeed ,

    If you are using the latest version of the controls you should not encounter similar issue. Also make sure that you are not using ItemStyle-Width for setting column widths and you have only HeaderStyle-Width property set for the columns in pixel.

    Regards,
    Pavlina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  19. Sunil
    Sunil avatar
    2 posts
    Member since:
    May 2015

    Posted 12 May 2015 in reply to Princy Link to this post

    nice it works
  20. Sunil
    Sunil avatar
    2 posts
    Member since:
    May 2015

    Posted 12 May 2015 in reply to Mark Link to this post

    nice mark it works.............. thanks
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017