VSTS extensions - Hyperlinks in Grid Source

Question

Made my own VSTS extension that returns a Grid with a list of bugs read using a wiql.

I want the (UI Control) Grid to include the bug title and hyperlink to the bug url so that it is possible to click on the title to jump to the bug. I could not find any possibility to do that, but I do not believe that it is not possible.

This is how I'm building my source to the grid:

    var sourceArray = workItems.map(function (w) {
        return [
            w.id, 
            w.fields["System.Title"], 
            w.fields["System.State"], 
            w.fields["GrundfosScrum.gfSeverity"], 
            w.fields["GrundfosScrum.gfLikelihood"], 
            w.fields["System.AssignedTo"]];
    });

And later:

    var options = {
        width: "100%",
        height: "500px",
        source: sourceArray,
        columns: [
            { text: "ID", index: 0, width: 100, headerCss: "mystyle" },
            { text: "Title", index: 1, width: 200, headerCss: "mystyle" },
            { text: "State", index: 2, width: 100, headerCss: "mystyle" },
            { text: "Severity", index: 3, width: 200, headerCss: "mystyle" },
            { text: "Likelihood", index: 4, width: 200, headerCss: "mystyle" },
            { text: "Assigned To", index: 5, width: 300, headerCss: "mystyle" },
        ]
    };

I tried to replace w.fields["System.Title"] with w.fields["System.Title"].link(w.url), the result was html hyperlink in the table instead of a hyperlink inside the grid.

Any ideas?

Anyone have ideas? or is it simply not supported? – wolf_guru Jan 01 '18 at 17:21 — wolf_guru, Jan 01 '18 at 17:21

Eddie Chen - MSFT · Accepted Answer · 2018-01-03T01:11:41.513

This is not supported by add link in the grid. But you can call Open row details method to to achieve the feature you want. Get the URL information and open a new window when the openRowDetail method is triggered.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Open Row Sample</title>
    <script src="sdk/scripts/VSS.SDK.js"></script>
</head>
<body>
    <script type="text/javascript">
        VSS.init({
            explicitNotifyLoaded: true,
            usePlatformScripts: true,
            usePlatformStyles: true       
        });
    </script>
    <h1>Open Row Sample</h1>
    <div id="grid-container"></div>
    <script type="text/javascript">
    VSS.require(["VSS/Controls", "VSS/Controls/Grids"],
    function (Controls, Grids) {
    var dataSource = [];
    dataSource.push({key: "VisualStudio", value: "https://www.visualstudio.com/"});
    dataSource.push({key: "Bing", value: "https://www.bing.com/"});

    var grid = Controls.create(Grids.Grid, $("#grid-container"), {
        height: "1000px",
        columns: [
            { text: "Property key", index: "key", width: 150 },
            { text: "Property value", index: "value", width: 600 }
        ],
        source: dataSource,
        openRowDetail: (index) => {
        var info = grid.getRowData(index);
        window.open(info.value);
    }
    });
    VSS.notifyLoadSucceeded();
    });
    </script>
</body>
</html>

Thanks. The example you gave is showing the syntax using TypeScripte. Could you help me with an example using JavaScript. — wolf_guru, Jan 02 '18 at 23:34
@wolf_guru It's almost the same as the example. See my updated answer for details. — Eddie Chen - MSFT, Jan 03 '18 at 01:12

score 0 · Answer 2 · edited Jan 07 '22 at 14:00

For anyone else is struggling with this like I was (as the documentation is pretty poor for the more granular stuff), I did it as follows.

Firstly, in the column definition in the later versions you just add a hrefIndex to the field you wish to bind e.g.

{ text: "Path", index: "path", width: 600, hrefIndex:'branchUrl' },

This works for the most part, but there doesn't appear to be (or at least, in the version I'm using) a binding for the target. So instead, I'd override the _drawCell function call as follows:

{ text: "Path", index: "path", width: 600, hrefIndex:'branchUrl', getCellContents : renderHref }

Where renderHref is:

var renderHref = function(rowInfo, dataIndex, expandedState, level, column, indentIndex, columnOrder){
                
    var indent;
    var cell = document.createElement('div');
    cell.className = 'grid-cell';

    var width = column.width || 20;
    cell.style.width = isNaN(width) ? width : width + "px";

    var jCell = $(cell);
    var hrefText = this.getColumnValue(dataIndex,column.hrefIndex,-1);
    var text = this.getColumnText(dataIndex,column,columnOrder);
    jCell.append($("<a/>").attr("href", hrefText).attr('target','_blank').text(text));

    return jCell;
};

Note that in my override I haven't bothered with the same logic as the original _drawCell for the indents etc., as I didn't need it.

This ensures that the hyperlink is rendered within the div container as a grid cell within the grid, and also allows you to set the target.

VSTS extensions - Hyperlinks in Grid Source

2 Answers2