How to make a row expandable?

How to make a row expandable?

pr0skilledpr0skilled Posts: 1Questions: 1Answers: 0

I've got a table where most of the cells contain a short string, but one cell contains quite a lot of information so the whole row becomes large in height. How can I make this cell contain information like "some long string with a lot of..." and make the row be able to expand on click?
http://live.datatables.net/bukeqite/4/edit?html,css,js,console,output

This question has accepted answers - jump to:

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited August 2022 Answer ✓

    I use two fields that I load from the server: One is the short field and the other one is the long, complete version. The fields are called "vat_qa.vat_hint_short" and "vat_qa.vat_hint". The fields are displayed in column 2 of the data table.

    If you click on the row you see the full version. If you deselect the short version is shown again. You could change this to clicking just the cell.

    Here is my code:

    ...
    var vatHintShortOrig; //save the original vat hint short because it get's overwritten on select!
    
    yourDataTable
        .on('select', function (e, dt, type, indexes) { 
            var ix = indexes[0];
            vatHintShortOrig = dt.row(ix).data().vat_qa.vat_hint_short;
            dt.cell( ix, 2 ).data( dt.row(ix).data().vat_qa.vat_hint ).draw();
        })
        .on( 'deselect', function( e, dt, type, indexes ) {  
            var ix = indexes[0];
            dt.row(ix).data().vat_qa.vat_hint_short = vatHintShortOrig;
            dt.cell( ix, 2 ).invalidate().draw();
        });
    
  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736
    Answer ✓

    See if the Ellipsis plugin does what you want.

    Kevin

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    @Kevin, I tried that plugin and for some reason (forgot which) I couldn't make it work. Hence I rolled my own.

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736
  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited August 2022

    Hi Kevin,

    I just tried the test case in Chrome and Firefox. If I click on the Info cell nothing happens. The row doesn't expand on click, it does nothing.

    So, yes the ellipsis plugin shortens the text to 10 characters - but that's all unfortunately. Hence I dropped it completely and rolled my own.

    Roland

    P.S.: That is my Editor server side code to create the two fields and make sure words aren't cut in the middle etc. Pretty much the same as the ellipsis plugin is doing on the client side.

    Field::inst( 'vat_qa.vat_hint' )
        ->validator( function ( $val, $data, $opts ) use ( $msg, $signsLit ) {
            if ( isset($val) ) {
                if ( strlen($val) > 2048 ) {
                    return $msg[1] . 2048 . $signsLit;
                }
            }
            return true;
        } ),
    Field::inst( 'vat_qa.vat_hint AS vat_qa.vat_hint_short' )->set( false )
        ->getFormatter( function($val, $data, $opts) {
            $wordArr = explode("\n", wordwrap($val, 120));
            return array_shift($wordArr) . '...';
        })
    

    Before clicking:

    After clicking a row:

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736
    edited August 2022 Answer ✓

    Oh, I see the part you couldn't get working is the click to expand. The plugin allows for hovering to see the text.

    You could add click to expand capability to the plugin. A similar technique of a hidden flag. could be used toggle the flag on row or cell click to expand or collapse the row. A simple change to the plugin that looks at the flag is all thats needed. This way the actual data in the cell isn't changed and a call to draw() is not needed. Updated the plugin like this:

            if ( type !== 'display' || row[7] == -1) { // check flag too
                return d;
            }
    

    The event handler toggles the flag. All the work is client side :smile:

    http://live.datatables.net/bukeqite/10/edit

    Kevin

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    Cool! Excellent solution!

    I think your's is best because hiding and showing columns seems to be easier than my solution which involves changing the data source of a cell.

Sign In or Register to comment.