Displaying array data as tooltip

ChrisKolli

Hey hey,

I am a bit confused at the moment the problem is:
I have a cell that is a multiple select which gets a list of equipment codes like this: 1A, 2B, 3C
In my database i have a description for each code now i want to display the description as a tooltip while hovering over the cell like so:
1A: Brown Paper
2B: Yellow Grass
3C: Pink Fluffy Unicorns.
while only displaying the codes as data in the cell.

The data i get from the server looks like this:

{
"data":[{
      "DT_RowId":"row_8",
      "wochenplan":{"date":"20.04.21", "some_index":"some_data",},
      "ausfall":{"name":"Wetter","color":"#FF0000"},
      "equip_codes":[
          {"id":"1","name":"1A","equip_description":"Brown Paper"},
          {"id":"2","name":"2B","equip_description":"Yellow Grass"}
       ]
}]
}

now i can get the codes to be displayed in the cell no problem like this:

columns[
    {
    "data": "equip_codes[]", "render": '[, ].name',
    },
]

But i can't get the equip_codes[].equip_description to somehow be displayed in a tooltip.
I tried adding it in a second column which worked like this:

columns[
    {
    "data": "equip_codes[]", "render": '[, ].equip_description',
    },
]

But that didn't help me either

colin

You'll need to make the columns.render a bit smarter - as you need to also declare the tooltip in there too. This example here from this thread may help, as it is doing that,

Colin

ChrisKolli

Yeah i looked at that already and got it to work with another part of my data like this:

{
    "data": "lfz.reg",
    "render": function (data, type, row, meta) {
        return type === 'display'? '<div title="' + row.lfz.lfz_note + '">' + row.lfz.reg : row.lfz.reg;
    }
},

I tried using this code for the equipment

{
"data": "equip_codes[]", 
   render: function (data, type, row, meta) {
    return type === 'display'? '<div title="' + row.equip_codes.equip_description + '">' + row.equip_codes.name : row.equip_codes.name;
   }, 
},

but that gives me
Requested unknown parameter 'equip_codes[]' for row 0, column 4.

then I added the [] to my code so it was:

{
"data": "equip_codes[]", 
   render: function (data, type, row, meta) {
    return type === 'display'? '<div title="' + row.equip_codes[].equip_description + '">' + row.equip_codes[].name : row.equip_codes[].name;
   }, 
},

but that give me a js error:

{
    "resource": "/c:/xampp/htdocs/Wolfsportal/DatatableWP/js/table.wochenplan-editor.js",
    "owner": "typescript",
    "code": "1011",
    "severity": 8,
    "message": "An element access expression should take an argument.",
    "source": "ts",
    "startLineNumber": 438,
    "startColumn": 66,
    "endLineNumber": 438,
    "endColumn": 66
}

My guess is that the function does not understand what to do with the array i send in

kthorngren

Since its an array you will need a for loop or other loop of your choice to loop through the array elements and concat the data you want into a string that you can then use in the return statement for the title. Its all Javascript inside the render function, no Datatables magic

Kevin

ChrisKolli

In that case I will ask on stackoverflow. but thank you anyway.
Please leave this thread open though, I will report back when I get it working so others can find this.

Have a nice day

Chris

BTW: Maybe tooltips are a nice addition for the next update
So you could add them like this and let datatables handle the working part

{
    "data": "lfz.reg",
        "tooltip": "lfz.lfz_note"
    "editField": "wochenplan.reg",
    'className': 'reg'
},

ChrisKolli

Okay I got it to work without stackoverflow
code looks like this:

{
    render: function (data, type, row, meta){
        function listEquipCodes(equips) {
            let equip_names = [];
            for (let i=0; i<equips.length; i+=1) {
                 equip_names.push(equips[i].name);
            }
            return equip_names;
        }
        function listDescriptions(equips) {
            let equip_descripts = [];
            for (let i=0; i<equips.length; i+=1) {
                equip_descripts.push(equips[i].equip_description);
            }
            return equip_descripts;
        }
        return type === 'display'? '<div title="' + listDescriptions(row.equip_codes) + '">' + listEquipCodes(row.equip_codes) : listEquipCodes(row.equip_codes);
    }, 
    "editField": "equip_codes[].id",
    "className": "equip_code",
},

It gives me this output in the cell: 1A,2B
and this in the tooltip: Brown Paper,Yellow Grass

I know this is not the place for it but do you have an idea on how to add a space after the comma? It's a bit hard to read this way.

colin

It would help if there's a test case for this. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ChrisKolli

I don't really know how to change the test case to have an array in the data,
anyways I got it to work as i described in my initial code using this:

render: function (data, type, row, meta){
    function listEquipCodes(equips) {
        let equip_names = [];
        for (let i=0; i<equips.length; i+=1) {
            equip_names.push(equips[i].name);
        }
        return equip_names;
    }
    function listDescription(equips){
        let niceList = [];
        for (let i=0; i<equips.length; i+=1) {
            for (let i=0; i<equips.length; i+=1) {
                if(i === 0){
                    niceList.push(equips[i].name + ': ' + equips[i].equip_description);
                }else{
                    niceList.push('\n' + equips[i].name + ': ' + equips[i].equip_description);
                }
            }
            return niceList;
        }
    }
    return type === 'display'? '<div title="' + listDescription(row.equip_codes) + '">' + listEquipCodes(row.equip_codes) : listEquipCodes(row.equip_codes);
}, 

This the first function lists the codes the second one lists the descriptions like this:

1A: Brown Paper
2B: Yellow Grass

Just needed to figure out how to properly set a line break in the tooltip,
You need to use \n for that but not on the first loop because you would get an empty line in the tooltip