Tabulator: Getting Cell data, when click on Row

[martinl86]

Hi how can i get the Cell data, when i click on row and read it into my textboxes.
I got it to work, when i click on cell one by one, but i would like to know if it's possible til clik on a Row. And then get the data into my textboxes from that Row index.
For ex. Cell name = name.txt and Cell city = city.txt
My code is.
//Build Tabulator
$("#example-table").tabulator({
index: "eniroId",
height: "511px",
responsiveLayout: true,
placeholder: "No Data Set",
selectable: true,
layout: "fitColumns",
pagination: "local",
paginationSize: 10,
columns: [
{ title: "Eniro Id", field: "eniroId", sorter: "string", width: 200},
{
title: "Navn", field: "companyInfo.companyName", sorter: "string", cellClick: function test (e, row) {

                    $("#<%=txtNavnPick.ClientID%>").val(row.getValue());


                }
            },
            {
                title: "Vejnavn", field: "address.streetName", sorter: "string", width: 200, cellClick: function (e, row) {

                    $("#<%=txtAdr1Pick.ClientID%>").val(row.getValue());

            }},
            {
                title: "Postnr", field: "address.postCode", sorter: "string", width: 200, cellClick: function (e, row) {

                    $("#<%=txtZipcodePick.ClientID%>").val(row.getValue());

            }},
            {
                title: "By", field: "address.postArea", sorter: "string", width: 200, rowClick: function (e, row) {

                    $("#<%=txtByPick.ClientID%>").val(row.getValue());
                    alert("cell clicked - " + row.getValue());

            }},

        ],
        rowClick: function (e, row) {
            alert("Row " + row.getIndex() + " Clicked!!!!")

      //Here i would like to get the data into my textboxes, like this.

$("#<%=txtNavnPick.ClientID%>").val(row.getValue());
$("#<%=txtByPick.ClientID%>").val(row.getValue());

        },



        ajaxResponse: function (url, params, response) {
            //url - the URL of the request
            //params - the parameters passed with the request
            //response - the JSON object returned in the body of the response.
            //return the data property of a response json object
            return response.adverts;

        },


    });
    //trigger download of data.csv file
    $("#download-csv").click(function () {
        $("#example-table").tabulator("download", "csv", "data.csv");
    });


    //select row on "select" button click
    $("#select-row").click(function () {
        $("#example-table").tabulator("selectRow", 1);
    });

    //deselect row on "deselect" button click
    $("#deselect-row").click(function () {
        $("#example-table").tabulator("deselectRow", 1);
    });

    //select row on "select all" button click
    $("#select-all").click(function () {
        $("#example-table").tabulator("selectRow");
    });

    //deselect row on "deselect all" button click
    $("#deselect-all").click(function () {
        $("#example-table").tabulator("deselectRow");
    });


    $('#addButton').click(function () {
        var word = $("#<%=txtWord.ClientID%>").val();

        $("#example-table").tabulator("setData",  "https://api.eniro.com/cs/search/basic?profile=PD&key=key&country=dk&version=1.1.3&search_word='" + word + "'");


    });

    $('#downButtonCsv').click(function () {
        var word = $("#<%=txtWord.ClientID%>").val();

        //custom file formatter
        var fileFormatter = function (columns, data, options, setFileContents) {


            //create a list of all name fields
            var names = [];

            data.forEach(function (row) {
                names.push(row.name);
            })

            //trigger file download, passing the formatted data and mime type
            setFileContents(names.join(", "), "text/plain");
        }

        //trigger file download");

        $("#example-table").tabulator("download", "csv", "data.csv", { delimiter: "." }); 

    });

[Rodbjartson]

This is very very well documented already.
Read this: rowcomponent

This can be helpful:
var rowData = row.getData();

[martinl86]

Thanks i had tried that, but just returns "object object" in my alert. So i thought i was missing something
rowClick: function (e, row) {
var data = row.getData(); //get data object for row

            var cells = row.getCells();

            alert("cell clicked - " + data + cells);

        },

[Rodbjartson]

I recommend using console.log, that way you can see the object and expand it.
What you do now is printing the row component object.
Your screenshot does not relate to your code since the alert says "row clicked" while your code says cell clicked.

var rows = $("#example-table").tabulator("getRows"); 
var row = rows[0].getData();

console.log(row);

Try something like this.

[martinl86]

I changed the Cell click to Row click text :) but thanks i will try it

[martinl86]

I see in the console, it's selecting the first row.

But i want to get row, that i clicked on, and then get the first field data, into my textbox, Is there something wrong with my index?

[Rodbjartson]

@martinl86
var selectedRows = $("#example-table").tabulator("getSelectedRows"); //get array of currently selected row components.

Now you have one or more selectedrows.
selectedRows[0] is one row component

selectedRows[0].getData(); Now you have the data

Say you want address.streetName

selectedRows[0].getData().address.streetName

[martinl86]

getData() returns [object Object]

[Rodbjartson]

selectedRows[0].getData().address.streetName
What happens here?

[martinl86]

YES!!! Many thanks, you are my hero :)

[Rodbjartson]

No problem mate. Keep in mind that this has nothing to do with Tabulator, this is plain javascript knowledge! I recommend reading more about objects/object oriented programming and datastructures.
Also when an issue has been solved, please close it!