Links in header again

[rlramseyParticipant]

Hi,

I’ve been following the instructions at http://www.jqwidgets.com/community/topic/link-in-grid-column-header/, but they still aren’t working for me.

$("#jqxgrid").jqxGrid({
      autorowheight:true,
      autoheight: true,
      columnsresize: true,
      initrowdetails: initrowdetails,
      rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: row_details_height
      },
      rowdetails: true,
      width: 895,
      sortable: false,
      source: dataAdapter,
      columns: [
        { text: 'Number', datafield: 'protocol_number', width: 110},
        { text: 'Submitted', datafield: 'submitted', width: 90},
        { text: 'Approved', datafield: 'approved', width: 90},
        { text: 'Status', datafield: 'status', width: 100},
        { text: 'Summary', datafield: 'amendment_summary', columntype: 'textbox', width: 410},
        { text: '', datafield: 'links', width: 65, renderer: function(){
            //return '<a href="http://www.cnn.com" title="cnn" target="_blank"><div style="margin-left: 2px; float:left; display:inline-block;">Action</div>  <i class="icon-question-sign" style="float:right;"> </i></a>';
            return "<div style='margin-top: 3px; margin-left: 3px;'>Name<a style='display: inline;' href='http://www.google.ca' target='_blank'>Link</a></div>";
          }
        }
       ],
    });

  $("#jqxgrid").on('columnclick', function (event) {
    var args = event.args;
    var originalClick = args.originalEvent;
    var target = originalClick.target; alert(target.href);
    if (target.href) {
      window.open(target.href);
    }
  });

The goal is to have the commented out line be the column header, which includes a bootstrap glyph.

When I click “Link” in the example, the alert box just says undefined.

Any ideas what I’m missing?

Thanks,

[Peter StoevKeymaster]

Hi rlramsey,

Why do you think that the event’s target is your link and not your DIV tag?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rlramseyParticipant]

I wasn’t thinking it through, I guess. I had copied and pasted the code and didn’t notice that it said ‘columnclick’ for the event. If I take that section of the code out, nothing happens at all. When I move the cursor over the word “link” it doesn’t change to the link cursor and if I right click on it, I don’t get the ‘open in a new tab’ option.

If I inspect the source code, this is what the source says:
<a style="display: inline;" href="http://www.google.ca" target="_blank">Link</a>

So the link is there, but just not clickable. The best I’ve been able to do, and I forget which code permutation it was, was to have the link recognized by the browser so the cursor changes and I can right click on it and have the link open in a new tab, but left clicking on it did nothing.

Thanks,

Bob

[rlramseyParticipant]

If I do

var renderAction = function(){
    var value = "http://www.cnn.com";
    var format = {target: '"_blank"'};
    var html = $.jqx.dataFormat.formatlink(value, format);
    return html;
  }

with { text: '', datafield: 'links', width: 65, renderer: renderAction}

Then I get the anchor cursor when I mouse over it and I can right click on the header and open cnn in a new tab, but left not click on the header. Same result if I make renderAction into

var html = "<a href='http://www.cnn.com'>link</a>";
return html;

Any ideas?

[Author]

Posts