Create a Hyperlink column

Thread is closed for posting
2 posts, 0 answers
  1. EA29E686-AF27-4642-ABE0-763F955DCF04
    EA29E686-AF27-4642-ABE0-763F955DCF04 avatar
    13 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>';
  2. 0AE0E5A2-E1F6-4A1F-9B61-A94FC4AFE11C
    0AE0E5A2-E1F6-4A1F-9B61-A94FC4AFE11C avatar
    22 posts
    Member since:
    Feb 2016

    Posted 19 Mar 2018 in reply to EA29E686-AF27-4642-ABE0-763F955DCF04 Link to this post

    The example you shared is good and does satisfy our requirement for now. However, I would recommend to have Hyperlink column as one of the default column types for custom columns within RadGantt chart.
Back to Top

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