Search code examples
telerikradgrid

Clickable link in RadGrid column


I have a RadGrid where a column in the grid holds a URL. When a put a value in the column I can see the URL but the URL is not clickable (to go to the URL). How can I make the URL clickable?

Here is a rough example of what I'm doing now:

DataTable table = new DataTable();
DataRow row = table.Rows[0];
row["URL"] = "http://www.google.com";
grid.DataSource = table;

In addition I'd really like to show specific text instead of the URL. Something similar to <a href="http://www.google.com">Link</a> in HTML. Is there anyway to do this?


Solution

  • Add all the columns manually in the ascx page and make the column you want to contain the hyperlink a GridTemplateColumn:

    <telerik:GridTemplateColumn 
        UniqueName="TemplateLinkColumn" 
        AllowFiltering="false" 
        HeaderText="URL">
        <ItemTemplate>
            <asp:HyperLink ID="Link" runat="server"></asp:HyperLink>
        </ItemTemplate>
    </telerik:GridTemplateColumn>
    

    Make sure that your grid has an OnItemDataBound method:

    <telerik:RadGrid 
        ID="RadGrid" 
        runat="server" 
        AutoGenerateColumns="False" 
        OnItemDataBound="RadGrid_ItemDataBound" >
    

    In your OnItemDataBound method set the field to the URL:

    protected void RadGrid_ItemDataBound(object aSender, GridItemEventArgs anEventArgs)
    {
        //Get the row from the grid.
        GridDataItem item = anEventArgs.Item as GridDataItem;
        GridTableCell linkCell = (GridTableCell)item["TemplateLinkColumn"];
        HyperLink reportLink = (HyperLink)reportLinkCell.FindControl("Link");
    
        // Set the text to the quote number
        reportLink.Text = "Google";
    
        //Set the URL
        reportLink.NavigateUrl = "http://www.google.com";
    
        //Tell it to open in a new window
        reportLink.Target = "_new";
    }