Displaying array data as tooltip

Displaying array data as tooltip

ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0
edited April 2021 in DataTables

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

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    edited April 2021

    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 :smile:

    Kevin

  • ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0

    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 :D
    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'
    },
    
  • ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0

    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.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0

    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

This discussion has been closed.