How to Display Long URLs and Strings Nicely in RadGrid

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 03 Sep 2009 Link to this post

    Requirements
    RadControls for ASP .NET AJAX version

    2008.1.415 and later
    .NET version 2.0 and later
    Visual Studio version

    2005 and later
    Programming language

    C#
    Browser support

    all browsers supported by RadControls for ASP .NET AJAX

    PROJECT DESCRIPTION

    Displaying URLs in a data grid control may not be hassle-free in all cases, because URLs are usually long and do not wrap easily. In fact URLs usually behave like long words and do not wrap at all. They could wrap if they contain some punctuation marks (e.g. '?'), which could serve as a wrap point.

    Probably one cannot count on the existence of wrap points in the URLs, so the question is how to improve the RadGrid appearance?

    One possible solution is to set TableLayout="Fixed" for the MasterTableView. In this way the content, which does not fit in the designated column width, will be truncated visually.

    An alternative approach is to reduce the length of the hyperlinks' visible text in ItemDataBound.

    Yet another approach is not to display the URLs as a hyperlink text, but some user-friendly text instead.

    Here is an example, which demonstrates several RadGrid configurations.

    All of the above approaches (except the last one) can actually be used for any type of long non-breakable strings, which one may want to display inside RadGrid.


    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Data" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server"> 
     
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
    { 
        DataTable dt = new DataTable(); 
        DataRow dr; 
        int colsNum = 4; 
        int rowsNum = 1; 
        string colName = "Column"; 
     
        for (int j = 1; j <= colsNum; j++) 
        { 
            dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
        } 
     
        for (int i = 1; i <= rowsNum; i++) 
        { 
            dr = dt.NewRow(); 
     
            for (int k = 1; k <= colsNum; k++) 
            { 
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1}Row{2}", colName, k, i); 
            } 
            dt.Rows.Add(dr); 
        } 
     
        (sender as RadGrid).DataSource = dt; 
    } 
     
    protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e) 
    { 
        if (e.Item is GridDataItem) 
        { 
            HyperLink hl = (e.Item as GridDataItem)["HyperLinkColumn1"].Controls[0] as HyperLink; 
            hl.Text = hl.Text.Substring(0, 28) + "..."; 
        } 
    } 
     
     
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <p>MasterTableView TableLayout="Auto"; URL does not contain a '?'</p> 
     
    <telerik:RadGrid 
        ID="RadGrid1" 
        runat="server" 
        Width="600px" 
        Skin="Office2007" 
        AutoGenerateColumns="false" 
        OnNeedDataSource="RadGrid_NeedDataSource"> 
        <MasterTableView> 
            <Columns> 
                <telerik:GridBoundColumn HeaderText="Column 1 20%" DataField="Column1" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 2 20%" DataField="Column2" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 3 30%" DataField="Column3" HeaderStyle-Width="30%" /> 
                <telerik:GridHyperLinkColumn HeaderText="HyperLinkColumn 30%" 
                    DataNavigateUrlFields="Column4" DataTextField="Column4" 
                    DataTextFormatString="http://this_is_my_very_long_url_format_string_which_will_not_wrap.com/q={0}" 
                    DataNavigateUrlFormatString="http://this_is_my_very_long_url_format_string_which_will_not_wrap.com/q={0}" 
                    HeaderStyle-Width="30%" /> 
            </Columns> 
        </MasterTableView> 
    </telerik:RadGrid> 
     
    <br /> 
     
    <p>MasterTableView TableLayout="Fixed"; URL does not contain a '?'</p> 
     
    <telerik:RadGrid 
        ID="RadGrid2" 
        runat="server" 
        Width="600px" 
        Skin="Office2007" 
        AutoGenerateColumns="false" 
        OnNeedDataSource="RadGrid_NeedDataSource"> 
        <MasterTableView TableLayout="Fixed"> 
            <Columns> 
                <telerik:GridBoundColumn HeaderText="Column 1 20%" DataField="Column1" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 2 20%" DataField="Column2" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 3 30%" DataField="Column3" HeaderStyle-Width="30%" /> 
                <telerik:GridHyperLinkColumn HeaderText="HyperLinkColumn 30%" 
                    DataNavigateUrlFields="Column4" DataTextField="Column4" 
                    DataTextFormatString="http://this_is_my_very_long_url_format_string_which_will_not_wrap.com/q={0}" 
                    DataNavigateUrlFormatString="http://this_is_my_very_long_url_format_string_which_will_not_wrap.com/q={0}" 
                    HeaderStyle-Width="30%" /> 
            </Columns> 
        </MasterTableView> 
    </telerik:RadGrid> 
     
    <br /> 
     
    <p>MasterTableView TableLayout="Fixed"; URL contains a '?'</p> 
     
    <telerik:RadGrid 
        ID="RadGrid3" 
        runat="server" 
        Width="600px" 
        Skin="Office2007" 
        AutoGenerateColumns="false" 
        OnNeedDataSource="RadGrid_NeedDataSource"> 
        <MasterTableView TableLayout="Fixed"> 
            <Columns> 
                <telerik:GridBoundColumn HeaderText="Column 1 20%" DataField="Column1" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 2 20%" DataField="Column2" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 3 30%" DataField="Column3" HeaderStyle-Width="30%" /> 
                <telerik:GridHyperLinkColumn HeaderText="HyperLinkColumn 30%" 
                    DataNavigateUrlFields="Column4" DataTextField="Column4" 
                    DataTextFormatString="http://this_url_wraps.com/?q={0}" 
                    DataNavigateUrlFormatString="http://this_url_wraps.com/?q={0}" 
                    HeaderStyle-Width="30%" /> 
            </Columns> 
        </MasterTableView> 
    </telerik:RadGrid> 
     
    <br /> 
     
    <p>MasterTableView TableLayout="Auto"; URL does not contain a '?'; ItemDataBound used</p> 
     
    <telerik:RadGrid 
        ID="RadGrid4" 
        runat="server" 
        Width="600px" 
        Skin="Office2007" 
        AutoGenerateColumns="false" 
        OnItemDataBound="RadGrid_ItemDataBound" 
        OnNeedDataSource="RadGrid_NeedDataSource"> 
        <MasterTableView> 
            <Columns> 
                <telerik:GridBoundColumn HeaderText="Column 1 20%" DataField="Column1" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 2 20%" DataField="Column2" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 3 30%" DataField="Column3" HeaderStyle-Width="30%" /> 
                <telerik:GridHyperLinkColumn UniqueName="HyperLinkColumn1" HeaderText="HyperLinkColumn 30%" 
                    DataNavigateUrlFields="Column4" DataTextField="Column4" 
                    DataTextFormatString="http://url_will_be_truncated_in_itemdatabound.com/?q={0}" 
                    DataNavigateUrlFormatString="http://url_will_be_truncated_in_itemdatabound.com/?q={0}" 
                    HeaderStyle-Width="30%" /> 
            </Columns> 
        </MasterTableView> 
    </telerik:RadGrid> 
     
    <br /> 
     
    <p>User-Friendly URLs</p> 
     
    <telerik:RadGrid 
        ID="RadGrid5" 
        runat="server" 
        Width="600px" 
        Skin="Office2007" 
        AutoGenerateColumns="false" 
        OnNeedDataSource="RadGrid_NeedDataSource"> 
        <MasterTableView> 
            <Columns> 
                <telerik:GridBoundColumn HeaderText="Column 1 20%" DataField="Column1" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 2 20%" DataField="Column2" HeaderStyle-Width="20%" /> 
                <telerik:GridBoundColumn HeaderText="Column 3 30%" DataField="Column3" HeaderStyle-Width="30%" /> 
                <telerik:GridHyperLinkColumn UniqueName="HyperLinkColumn1" HeaderText="HyperLinkColumn 30%" 
                    DataNavigateUrlFields="Column4" DataTextField="Column4" 
                    DataTextFormatString="my friendly URL here" 
                    DataNavigateUrlFormatString="http://my_friendly_url.com/?q={0}" 
                    HeaderStyle-Width="30%" /> 
            </Columns> 
        </MasterTableView> 
    </telerik:RadGrid> 
     
    </form> 
    </body> 
    </html> 
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.