gantt-custom-hyperlink-column.md

title	description	type	page_title	slug	position	tags	res_type
Create Hyperlink column in RadGantt	Add hyperlink column in RadGantt.	how-to	Add hyperlink column in RadGantt	gantt-custom-hyperlink-column			kb

Environment

Product Version	2019.3.1023
Product	RadGantt for ASP.NET AJAX

Description

At the time of writing, RadGantt does not support column templates. Nevertheless, the cells of the treelist view can be accessed via the data-uid property of the row as explained in [Customize style and content of treelist column in RadGantt]({%slug gantt-access-and-customize-treelist-cells%}) KB article.

The same setup is used as the referenced article, the only change is in the OnClientDataBound event handler.

Solution

<script>
    function getColumnIndexByColumnField(gantt, field) {
        var cols = gantt.columns();
        for (var i = 0; i < cols.length; i++) {
            var col = cols[i];
            // for title seach, use col.title
            if (col.field == field) {
                return i;
            }
        }
        return -1;
    }
    function OnClientDataBound(sender, args) {
        var tasks = sender.get_allTasks();

        tasks.forEach(function (task, index) {
            var taskuid = tasks[0]._uid;

            var $row = $telerik.$(sender.get_element()).find("tr[data-uid=" + taskuid + "]");
            var $cell = $row.find(">td").eq(getColumnIndexByColumnField(sender, "title"));

            // set styles for the "title" cell
            // https://api.jquery.com/css/#css-properties
            $cell.css({
                "color": "white",
                "background-color": "greenyellow"
            });
            
            // make it a hyperlink
            var title = task.get_title();
            var url = "/default.aspx?q="+task.get_id();
            // the <span> containing the text
            var $span = $cell.find("span").last();

            // http://stackoverflow.com/questions/5215316/convert-a-spans-text-into-a-hyperlink
            $span.replaceWith(function () {
                // custom logic for creating the link URL
                return '<a href="' + url + '" target="_blank">' + title + '</a>';
            });
        })
    }
</script>

See Also

• [Customize style and content of treelist column in RadGantt]({%slug gantt-access-and-customize-treelist-cells%})