Search code examples
javascripttfsazure-devopsvisual-studio-extensions

VSTS extensions Grid Control header style

Making my own VSTS extension. The extension returns a grid with the list of bugs in the project and some calculations made on these bugs.

I want to style the header of the grid to make the font bigger and with different background.

I checked the documentation from MS (https://www.visualstudio.com/en-us/docs/integrate/extensions/reference/client/controls/grid) and they mention the possibility to specify HeaderCss class. So I did the following: - I created a CSS class in my html header:

<head>
    <style>
    .mystyle {
        background-color: coral;
        color: white;
        font-size: 25px;
    }
    </style>
    <title>Weighted Defect Count Calculation</title>
    <script src="sdk/scripts/VSS.SDK.js"></script>
</head>

I added the class name inside the javascript, where the grid columns options are defined: 

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

I get a 401 Unauthorized error when I run the extension. If I remove the HeaderCss thingy then it works perfectly.

  • I tried "mystyle" (with double qoutes). I get syntax error
  • I tried 'mystyle' (with single qoute). I get syntax error

Anyone can help?

Documentation from MS: https://www.visualstudio.com/en-us/docs/integrate/extensions/reference/client/controls/grid

Tutorial I followed to make the extension is here: http://nocture.dk/2016/01/02/lets-make-a-visual-studio-team-services-extension/

Solution

  • Using headerCss:"mystyle" instead. (First character is lowercase).

    On the other hand, the value of headerCss is string instead of array or object.