Create a Hyperlink column

1 posts, 0 answers
  1. Peter
    Peter avatar
    3 posts
    Member since:
    May 2016

    Posted 16 Oct 2017 Link to this post


    Telerik Product and Version

    UI for ASP.NET AJAX 2017 R3

    Supported Browsers and Platforms

    all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    RadGantt, .NET 4.0/4.5 C#

    This example demonstrates how to convert the content of a cell into a hyperlink.

    The conversion is achieved by iterating all tasks in the OnClientDataBound event and based on their unique id (_uid property of the dataItem) the corresponding row elements are found. Once a reference to the row is obtained, the desired cell is accessed and modified as demonstrated in the attached project. 
    <telerik:RadGantt runat="server" OnClientDataBound="OnClientDataBound" ID="RadGantt1" SelectedView="WeekView" >
    var $ = $telerik.$;
    function OnClientDataBound(sender, args) {
        var dataItems = sender.get_allTasks();
        for (var j = 0; j < dataItems.length; j++) {
            var dataItem = dataItems[j];
            var row = $("[data-uid='" + dataItem._uid + "']");
            // .eq(1) determines which column should be converted into a hyperlink
            var span = row.find("td").eq(1).find("span").last();
            span.replaceWith(function () {
                // custom logic for creating the link URL
                var url = $.trim($(this).text());
                return '<a href="' + url + '" target="_blank">' + url + '</a>';
Back to Top