How to create expandable table row? (not a child row)

JoeJoeJoe

There is a lot on here about how to create child table rows that can be expanded but I haven't been able to find any info on simple expandable parent rows. One of my columns contains a lot of text and I would like to have my table so that the rows are no more than one line in width, with a clickable "more" button that expands the table row.

Any information on this would be much appreciated thanks,

colin

Hi @JoeJoeJoe ,

That does sound like a child row to me - just with it being opened by a button. Another approach perhaps is something like this here - in that example, the text is abbreviated, and clicking on the cell expands the text to show the entire string. You could do that same, but expand only on a button press.

Cheers,

Colin

JoeJoeJoe

Thank you, that does indeed look like what I'd like to implement. However I'm getting this error message when trying to implement as is: Error: Object doesn't support property or method 'ellipsis'.

`function (data, status, jgXhr, params) {
                $('#LOG_ERROR').dataTable({      
                    "data": JSON.parse(data), 
                    autoWidth: true,
                    columnDefs: [
                        {
                            targets: 1,
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return renderedData = $.fn.dataTable.render.ellipsis(10)(data, type, row);
                                }
                                return data;
                            }
                        }
                    ],

                    "columns": [
                        {
                            "data": "TaskSchedulerLogUid",
                            "visible": false
                        },
                        {
                            "data": 'TaskSchedulerLogErrorUid',
                        },
                        {
                            "data": 'ErrorTime',
                            "render": function (data, type, row) {
                                var dateSplit = data.split("");
                                return type === "display" ?
                                    dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18] :
                                    data;
                            },
                        },
                        {
                            "data": "ErrorDescription",
                        },
                        {
                            "data": "PrimaryKeyName",
                        },
                        {
                            "data": "PrimaryKeyValue",
                        }
                    ]
                })
                //EXPANDABLE ROWS
                $('tbody').on('click', 'tr', function () {
                        $(this).children('td:eq(3)').text(vTable.row(this).data()[3]);
                        vTable.cell(this, 3).invalidate('dom');
                })               
            }`

colin

Ah, it's probably because you didn't include the JS file - check my example from before, and look at the HTML tab for the sources,

C

JoeJoeJoe

oops, didn't see that. Still trying to get this to work. It appears to be hitting all the breakpoints without any errors, but my table in the web app still looks exactly the same (expanded without the option to minimise)

WtmErrorDetails.vars.primaryTable = $('#LOG_ERROR').DataTable({
                    "dom": "rtp",  
                    "data": JSON.parse(data),
                    autoWidth: true,
                    columnDefs: [
                        {
                            targets: 1,
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return renderedData = $.fn.dataTable.render.ellipsis(10)(data, type, row);
                                }
                                return data;
                            }
                        }
                    ],
                    "columns": [
                        {
                            "data": "TaskSchedulerLogUid",
                            "visible": false
                        },
                        {
                            "data": 'TaskSchedulerLogErrorUid',
                        },
                        {
                            "data": 'ErrorTime',
                            "render": function (data, type, row) {
                                var dateSplit = data.split("");
                                return type === "display" ?
                                    dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18] :
                                    data;
                            },
                        },
                        {
                            "data": "ErrorDescription",
                        },
                        {
                            "data": "PrimaryKeyName",
                        },
                        {
                            "data": "PrimaryKeyValue",
                        },
                    ],                  
                });

                $('tbody').on('click', 'tr', function () {
                    $(this).children('td:eq(1)').text(WtmErrorDetails.vars.primaryTable.row(this).data()[1]);
                    WtmErrorDetails.vars.primaryTable.cell(this, 1).invalidate('dom');
                })

colin

It's hard to diagnose from the code, would be better to create a test case, like my one above, or even modify my one

C

JoeJoeJoe

Sorry, couldn't figure out how to get a test case running as my table data is loaded from a database using ajax. I figured that is likely to be the issue. With invalidate('dom'), from what I've gathered, it's asking to read the new data from the dom. Shouldn't it be invalidate('data')?

I've tried it, but it doesn't work either. The ellipsis now shows correctly on my rows. When I click a row, breakpoints for the click function are hit, but nothing happens.