Clickable link in RadGrid column

Question

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?

Carolacarolan

Answer 1

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";
}

Carolacarolan

It gives me null pointer exception in this line GridTableCell linkCell = (GridTableCell)item["TemplateLinkColumn"]; – Farthingale

Small typo in the line that sets reportLink: that should just be HyperLink reportLink = (HyperLink)linkCell.FindControl("Link"); – Flooded

Answer 2

Have you tried the GridHyperLinkColumn? Below is a detailed example.

<telerik:GridHyperLinkColumn FooterText="HyperLinkColumn footer" DataTextFormatString="Search Google for '{0}'" DataNavigateUrlFields="CompanyName" UniqueName="CompanyName" DataNavigateUrlFormatString="http://www.google.com/search?hl=en&amp;q={0}&amp;btnG=Google+Search" HeaderText="HyperLink<br/>Column" DataTextField="CompanyName"></telerik:GridHyperLinkColumn>

You can also view the demosite to see how it works. http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/columntypes/defaultcs.aspx

Helicoid

Thanks Michael, Is it possible to use javascript onclick event as like: <li onclick="TINY.box.show({url:'advanced.html',width:300,height:150})">Ajax, Advanced Functions</li> – Siccative

I like to have this on click in <telerik:Gridhyperlinkcolumn – Siccative

Answer 3

You will also need to check for the correct type, as follows;

if (anEventArgs.Item.GetType().Name != "GridDataItem")
{
    return;
}

Outlook