• If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

Announcement

Collapse
No announcement yet.

Create clickable URL from text in grid field

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Create clickable URL from text in grid field

    I have a grid column field that receives a text string from the backend RPG program which I have formatted as a URL. The URL displays as text in the grid field, but I would like this to be a clickable link.

    How do I show a URL like "http://mywebapp.mycompany.local/receipts/receipt?p=107225289&d=20170510&rt=y" as a clickable link (with text like "Click for Receipt") in the grid column field?

    EDIT: Ok, I have the link working, using the following controller action:

    Code:
        onFileGridCellClick: function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
            //-- When user clicks SLIP field, open the associated link in a new browser window
            var grid = tableview.up('grid'),
            headerCt = grid.down('headercontainer'),
            colName  = headerCt.items.getAt(cellIndex).dataIndex;
    
            if (colName == 'SLIP') {
                window.open(record.get('SLIP'), '_blank');
            }
    Yay, works great! HOWEVER, I'd still like to show the text "Click for Receipt" instead of the URL... can I show Click for Receipt but still have the contents of the grid column field contain the URL as I currently have?

    Or, maybe I need to make a dummy field that just contains "Click for Receipt" and show that in the grid, but then use the actual link field SLIP if they click on the dummy field...? Or something like that?
    Last edited by roedea; 05-15-2017, 06:43 PM.

  • #2
    Just format your grid renderer as follows:

    return '<a href="MYLINK">Click For Receipt</a>';

    Comment


    • #3
      Hi Sean,

      Ok, that looks like what I need. What is the syntax to substitute my actual link (contained in field SLIP) for MYLINK in your example above?

      Thanks.

      Comment


      • #4
        Code:
        dataIndex : 'FIELDA',
        renderer   : function(v){
            return '<a href="' + v + '">Click For Receipt</a>';
        }

        Comment


        • #5
          Thank you.

          Ok, I removed my controller action and my renderer now looks like this and it works great:

          Code:
                                      renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                          if (value !== '') {
                                              return '<a href="' + value + '" target="_blank">Click For Receipt</a>';
                                          } else {
                                              return ' ';
                                          }
                                      },

          Comment

          Working...
          X