Functioning hyperlinks in a DataGrid

[KennethRichards]

I have a grid that displays data when a user selects features on a map. Part of the data that displays in the grid is multiple columns that contain urls that will link to documents.

How would I format the cells in the grid with the urls to make them hyperlinks?

function updateGrid(featureSet){   var data=[];   var grid = dijit.byId('grid');   dojo.forEach(featureSet, function (entry) {    data.push({     objectid:entry.attributes.objectid,     apino:entry.attributes.apino,     otherid:entry.attributes.otherid,     operator:entry.attributes.operator,     county:entry.attributes.county,     twp:entry.attributes.twp,     rge:entry.attributes.rge,     headeruri:entry.attributes.headeruri,     section_:entry.attributes.section_,     drillertotaldepth:entry.attributes.drillertotaldepth,     formationtd:entry.attributes.formationtd,     wellname:entry.attributes.wellname        });           });   var dataForGrid= {    items: data    };       var store = new dojo.data.ItemFileReadStore({data:dataForGrid});   grid.setStore(store);  }

The fields that contain the headeruri reference are the ones that I am trying to make into hyperlinks.


[HTML]<table data-dojo-type="dojox.grid.DataGrid" escapeHTMLInData="false" jsid="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'" style="height:100%; width:100%">
          <thead>
            <tr>
     <th field="apino" width="auto">API No</th>
     <th field="otherid" width="auto">State Permit No</th>
     <th field="operator" width="auto">Operator</th>
     <th field="county" width="auto">County</th>
     <th field="twp" width="auto">Township</th>
     <th field="rge" width="auto">Range</th>
     <th field="section_" width="auto">Section</th>
     <th field="drillertotaldepth" width="auto">Depth (ft)</th>
     <th field="formationtd" width="auto">Formation at Depth</th>
     <th field="headeruri" width="auto">Well Folder</th>
     <th field="headeruri" width="auto">Scanned Well Log</th>
     <th field="headeruri" width="auto">LAS Data</th>
            </tr>
          </thead>
        </table>[/HTML]

I have been trying to use escapeHTMLInData with little success. I am still new to javascript and html so my knowledge is pretty limited.


Ken

[KenBuja]

Take a look at this post over in StackOverflow.

Additionally, Dojo now recommends that you switch over to dGrid for Dojo 1.7 and beyond.

[BenFousek]

You need to use a formatter.

Add the formatter param:
[HTML]<th field="headeruri" width="auto" formatter="linkFormatter">Well Folder</th>[/HTML]

Formatter function:

function linkFormatter(x) {
  //x is the value
  var link = '<a href=" + x + " target="_blank">Hyperlink</a>';
  return link;
}

I noticed you were using the same attribute (headeruri) for 3 different columns. Do you have more than one url in an array?

[KennethRichards]

You need to use a formatter.

Add the formatter param:
[HTML]<th field="headeruri" width="auto" formatter="linkFormatter">Well Folder</th>[/HTML]

Formatter function:

function linkFormatter(x) {
  //x is the value
  var link = '<a href=" + x + " target="_blank">Hyperlink</a>';
  return link;
}

I noticed you were using the same attribute (headeruri) for 3 different columns. Do you have more than one url in an array?

It does at the moment. I am trying to to get our network people to agree to let me post a new service with the urls in different fields. They don't like to put any duplicated data on the server and the old service is being used for other projects so I can't just replace it.

Ken

[BenFousek · Accepted solution]

As long as the order of the urls in the array is consistent you can use 3 formatter functions.

[HTML]<th field="headeruri" width="auto" formatter="folderFormatter">Well Folder</th>
<th field="headeruri" width="auto" formatter="logFormatter">Scanned Well Log</th>
<th field="headeruri" width="auto" formatter="lasFormatter">LAS Data</th>[/HTML]

function folderFormatter(x) {   //x is the value   var link = '<a href=" + x[0] + " target="_blank">Well Folder</a>';   return link; }  function logFormatter(x) {   //x is the value   var link = '<a href=" + x[1] + " target="_blank">Well Log</a>';   return link; }  function lasFormatter(x) {   //x is the value   var link = '<a href=" + x[2] + " target="_blank">LAS Data</a>';   return link; }

[BenFousek]

You can use this same concept with multiple fields too. Instead of field param use the fields param like this:
[HTML]fields="[NAME, URL]" formatter="link"[/HTML]

function link(x) {
  //x is array of values
  var link = '<a href=" + x[1] + " target="_blank">' + x[0] + '</a>';
  return link;
}