Don't allow the to wrap the data in radgrid cell

6 posts, 0 answers
  1. Hrushikesh Mokashi
    Hrushikesh Mokashi avatar
    172 posts
    Member since:
    Dec 2007

    Posted 25 Feb 2009 Link to this post

    Hi All,

    I am using radgrid and VS2008.

    I want to show the data in grid in one line row.
    Currently it expand the cell and row height according to the data.
    I want to show the data in in line row . if data is greater then it will show the '...'.
    How can it achieve?

    I have tried the implement css which run in VS2005 for gridview.
     td { word-wrap: break-word; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }

    in VS2008 this css doesn't work.

    Or there is way to set the grid css?

    Thanks.


  2.
  3. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 25 Feb 2009 Link to this post

    Hello Hrushikesh,

    I recommend you examine the appropriate article in our documentation:
    No wrap for grid cell content

    Also you can set overflow: hidden to prevent the text wrapping.
    <style type="text/css"> 
        .MasterTable_SkinName td 
        { 
          overflow: hidden; 
        } 
        .GridHeader_SkinName 
        { 
          overflow: hidden; 
        } 
    </style> 

    Best regards,
    Daniel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Feb 2009 Link to this post

    Hi Hrushikesh,

    One suggestion is applying DataFormatString in order to prevent text wrapping.
    ASPX:
    <telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName" UniqueName="ShipName" DataFormatString="<nobr>{0}</nobr>">   
    </telerik:GridBoundColumn>   

    Another option is by setting the ItemStyle of the column. But for the wrap to take place properly make sure that the cell text contains white space in between. Also set the TableLayout to Fixed so that wrapping will occur in accordance with column resizing.
    ASPX:
    <MasterTableView TableLayout="Fixed" datasourceid="SqlDataSource1" > 
        <Columns> 
             . . .  
            <telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName" SortExpression="ShipName" UniqueName="ShipName">  
                 <ItemStyle Wrap="false" Width="50px"  />  
    </telerik:GridBoundColumn> 
        </Columns> 
    </MasterTableView> 

    Refer the following documentation for more information about preventing wraping for grid cell.
    No wrap for grid cell content

    Thanks,
    Shinu.
  7. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 10 Nov 2010 Link to this post

    Hello Daniel,

    You purposed solution is the only way for me to go as I'm extensively applying DataFormats in all the RadGrids I'm using site-wide (over 45 now). Here is the code from a CSS file called SiteStyles.Grid.scc:

    .MasterTable_Office2007 td {
      overflow: hidden;
      /* white-space: nowrap; */
    }
     
    .GridHeader_Office2007 {
      overflow: hidden;
    }

    Office2007 is the site's style. Kindly advise why wrapping is still in effect. Thank you.
  8.
  9. TurtleBoy
    TurtleBoy avatar
    1 posts
    Member since:
    Jul 2007

    Posted 10 Apr 2016 in reply to Hrushikesh Mokashi Link to this post

    The answer I found was to add the max-width property to the css:

    I have used:

        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

     

    This has given me what Hrushikesh seemed to be asking about.

  11. Eyup
    Admin
    Eyup avatar
    4078 posts

    Posted 13 Apr 2016 Link to this post

    Hi,

    Thank you for sharing your approach with our community. I'm also attaching a sample RadGrid web site to demonstrate this implementation.

    You can also display the text as a link and show some kind of pop-up mechanism to display the full text on user hover. Please check the options suggested here:
    http://www.telerik.com/forums/context-menu---open-a-pop-up#Qe9fJgzWrE2DhYPWX7OkCQ

    Alternatively, you can use a GridTemplateColumn and place the full text within scrollable divs with fixed overall width:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/columns/column-types#gridtemplatecolumn

    Regards,
    Eyup
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top