Tabulator: rowClick

[sean-magin]

rowClick:function(){
window.open("https://cryptoreport.com/" + row.getData().symbol + "_blank");
},

Using this code, when I click on a row my console logs:

tabulator.js:12 Uncaught ReferenceError: row is not defined
    at Object.rowClick (tabulator.js:12)
    at HTMLDivElement.<anonymous> (tabulator.min.js:1)
    at HTMLDivElement.dispatch (jquery.js:4435)
    at HTMLDivElement.r.handle (jquery.js:4121)

If I remove the + row.getData().symbol + "_blank") portion of the code it opens a new window and works, so the issue is definitely here.

[sean-magin]

and row isn't defined because I'm render all my JSON data in columns, however I want the rowClick to trigger a URL from the symbol column no matter where they click on the row. That make sense?

[olifolkerd]

you are getting that error because row needs to be passed into the rowClick callback definition as an argument:

rowClick:function(row){
    window.open("https://cryptoreport.com/" + row.getData().symbol + "_blank");
},

Cheers

Oli

[sean-magin]

I get this error after setting the argument to row

On 18/06/2017, at 6:14 PM, Oli Folkerd [e-mail] wrote:

you are getting that error because row needs to be passed into the rowClick callback as an argument:

rowClick:function(row){
window.open("https://cryptoreport.com/" + row.getData().symbol + "_blank");
},
Cheers

Oli

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/377#issuecomment-309259177, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDqC8T8a1CLbDh_GTyk9NK9jIlW5Tks5sFMBHgaJpZM4N9XaE.

[olifolkerd]

Could you post your full Tabulator constructor as i cannot replicate the issue you are having.

Cheers

Oli

[sean-magin]

```
$(document).ready(function() {
// all custom jQuery will go here

$("#example-table-theme").tabulator({
height:false, // set height of table (optional)
fitColumns:true,
headerFilterPlaceholder:"Search Coins",
resizableColumns: false,
rowClick:function(row){
window.open("https://cryptoreport.com/" + row.getData().symbol + "_blank");
},
responsiveLayout: false, //fit columns to width of table (optional)

columns:[ //Define Table Columns
    {title:"#", field:"rank", sorter:"number", width:50, frozen: true},
    {title:"Coin", field:"name", sorter:"string", width:150, frozen: true, headerFilter:"input"},
    {title:"Symbol", field:"symbol", sorter:"string", width:100},
    {title: "Price", field:"price_usd", width:150, sorter:"number", align:"center", formatter:"money", formatterParams:{symbol:"$"}},
    {title: "Market Cap", field:"market_cap_usd", width:200, sorter:"number", align:"center", formatter:"money", formatterParams:{symbol:"$", precision:null}},
    {title:"24hr Volume", field:"24h_volume_usd", width:200, sorter:"number", align:"center", formatter:"money", formatterParams:{symbol:"$", precision:null}},
    {title:"Available Supply", field:"available_supply", sorter:"date", align:"center", formatter:"money", formatterParams:{precision:null}},
],

});

$("#example-table-theme").tabulator({
initialSort:[
{title:"#", field:"rank", sorter:"number", width:50},
{title:"Symbol", field:"symbol", sorter:"string", width:150},
{title:"Coin", field:"name", sorter:"string", width:150},
{title: "Price", field:"price_usd", sorter:"number", align:"center", formatter:"money", formatterParams:{symbol:"$"}},
{title: "Market Cap", field:"market_cap_usd", sorter:"number", align:"center", formatter:"money", formatterParams:{symbol:"$", precision:null}},
{title:"24hr Volume", field:"24h_volume_usd", sorter:"number", align:"center", formatter:"money", formatterParams:{symbol:"$", precision:null}},
{title:"Available Supply", field:"available_supply", sorter:"number", align:"center", formatter:"money", formatterParams:{precision:null}},
],
});

//load sample data into the table
$("#example-table-theme").tabulator("setData", "https://api.coinmarketcap.com/v1/ticker/?limit=100");

$("#example-table-theme").tabulator({
virtualDom:true, //disable virtual DOM rendering
});

//Re-render table when viewport width is changed
$(window).resize(function(){
$("#example-table-theme").tabulator("redraw", true); //trigger full rerender including all data and rows
});

});

[olifolkerd]

Got to the bottom of it, you were also missing the event argument:

rowClick:function(e,row){
    window.open("https://cryptoreport.com/" + row.getData().symbol + "_blank");
},

Also looking at your code, have you intentionally disabled the virtual dom? if you set a height on the table it will render more efficiently.

Cheers

Oli

[sean-magin]

LOL should've known! Ah, and nope just was playing with virtualDOM and that was where I last had it, thanks for the heads up. What height is ideal for rendering?

[olifolkerd]

choose any height you like, you can set any valid css in the height

[sean-magin]

Thanks for the help Oli, tabulator's great

[olifolkerd]

Thanks for the kind words! its always great to hear Tabulator is appreciated :)

[sean-magin]

You’re very welcome. You’ve been a ton of help and super on the ball with responses, much appreciated

On 18/06/2017, at 9:11 PM, Oli Folkerd [e-mail] wrote:

choose any height you like, you can set any valid css in the height

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/377#issuecomment-309265730, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDqI6myw3tZy0Azz-KVGr8SdpbLcRks5sFOmogaJpZM4N9XaE.