Column header a link which opens a dialog box

Question

I am unable to create a sub grid column header as a link to another window.

Here is a sample of my code:

//Function which builds the hyperlink
function buildGridAllUploadURL(cellvalue, options, rowObject) {
    var val = options.rowId;
    alert(val);
    return "<a href='#' onClick='javascript:openDialog(" + val + ")'>" +  "Upload" + "<a>";          
} 

//function for dialog window
function openDialog(Id) {
    var upload_url = '<s:property value="uploadUrl"/>';
    $("#cpp_upload").load(upload_url+"?id="+Id);
    // $("#cpp_upload").HTMLFieldSetElement = $("#cpp_upload").dialog('open');
}

<sj:dialog id="cpp_upload" title="Notes" autoOpen="false"
           modal="false" height="300" width="500"
           buttons="{
                    'Submit':function() { okButton(); },
                    'Cancel':function() { cancelButton(); }
                    }">
</sj:dialog>
<sjg:grid id="cpp" subGridUrl="%{url}" gridModel="gridModel"
          viewsortcols="[true, 'vertical', true]" rowNum="9999"
          timeout="35" pager="false" navigator="false"
          cssStyle="underline" cssClass="link" draggable="true">

    <sjg:gridColumn name="A" index="A" title="Upload"
                    formatter="buildGridAllUploadURL"
                    align="center" width="100" sortable="false"/> 
    <sjg:gridColumn name="B" index="B" title="B" formatter="URL"
                    cssClass="link" cssStyle="underline" align="center" 
                    width="100" sortable="false"/>
</sjg:grid>

1. Requirement: I need to make the highlighted item as hyperlink opening to a new dialog etc window on a click. The sjg:gridcolumn provides with very limited options.

2. My approach: I have tried with fetching the header location. I am not able to get the header by its ID either.

Heres an image of what I am trying to achieve.