How to put an html element in dojo dgrid table header

Question

I want to place a hyperlink in the <th> of dojo dgrid table, but it is not possible when I tried it declarative

<thead>
    <tr>
       <th data-dgrid-column="{ field:'AVAILABLE_BALANCE',resizable:true}">Available
                                Balance<a href="#">click</a>
      </th>
    </tr>
</thead> 

it displays like

Available Balance <a href="#">click</a>

How to do it

Answer 1

You can use the column renderHeaderCell do achieve this.

using HTML to grid way

<thead>
  <tr>
    <th data-dgrid-column="{ field:'AVAILABLE_BALANCE',resizable:true, 
        renderHeaderCell:customRenderHeaderCell}">
    </th>
  </tr>
</thead>

JavaScript:

function customRenderHeaderCell(node){
    var div = document.createElement("div");
    div.innerHTML = "Available Balance<a href='#'>click</a>";
    return div;
}

using programmatic way

require([ 'dgrid/Grid' ], function (Grid) {
    var columns = {
        first: {
            label: "First Name"
        },
        last: {
            label: "Last Name"
        },
        balance: {
            field: 'AVAILABLE_BALANCE',
            resizable: true,
            renderHeaderCell: function(node){
               var div = document.createElement("div");
               div.innerHTML = "Available Balance<a href='#'>click</a>";
               return div;
           }
       }
    };
    var grid = new Grid({ columns: columns }, 'grid'); 
    grid.renderArray(arrayOfData);
});