Ellipsis renderer that can expand column to show full text

YoDavish

Is there somthing similiar to ellipsis renderer for long text columns that if we click into the column that would expand the column to display the full text?

kthorngren

I don't believe anything exists to do this. However it looks like the ellipsis renderer could be updated to look at flag variable to decided whether to display the full data or the shortened data. Maybe something like this:

    return function (d, type, row) {
        // Order, search and type get the original data
        if (type !== 'display') {
            return d;
        }
        if ( ! ellipsisFlag ) {
          return d;
        }

Then use an event handler, depending on what you want to click, to toggle the ellipsisFlag flag. Will need to call rows().invalidate() and draw() in the event handler to have Datatables redraw the table. Something like this:
https://live.datatables.net/secomafe/1/edit

Kevin

colin

Just a quick note to say this example from this thread is similar, but you click on each record to expand the ellipses.

Colin

YoDavish

@kthorngren and @colin Thanks, I've gotten to work almost exactly how I want it. I put in an achor tag into the row that triggers the toggle. One last puzzle is how can it get to be only row specific, currently it will toggle all rows, this is the main function here:

    $.fn.dataTable.render.ellipsis = function (cutoff, wordbreak, escapeHtml) {
            var esc = function (t) {
                return ('' + t)
                    .replace(/&/g, '&')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;');
            };
            return function (d, type, row) {
                // Order, search and type get the original data
                if (type !== 'display') {
                    return d;
                }
                if ( ! ellipsisFlag ) {
                    if (d == null) return d;
                    return d + '<a href=# onclick=\'toggleShowMore();\'>Show Less</a>';
                }
                if (typeof d !== 'number' && typeof d !== 'string') {
                    if (escapeHtml) {
                        return esc(d);
                    }
                    return d;
                }
                d = d.toString(); // cast numbers
                if (d.length <= cutoff) {
                    if (escapeHtml) {
                        return esc(d);
                    }
                    return d;
                }
                var shortened = d.substr(0, cutoff - 1);
                // Find the last white space character in the string
                if (wordbreak) {
                    shortened = shortened.replace(/\s([^\s]*)$/, '');
                }
                // Protect against uncontrolled HTML input
                if (escapeHtml) {
                    shortened = esc(shortened);
                }
                return ('<span class="ellipsis" title="' +
                    esc(d) +
                    '">' +
                    shortened + 
                    '&#8230;</span><a href=# onclick=\'toggleShowMore();\'>Show more</a>');
            };
        };

kthorngren

Did you see Colin's example and thread he linked to? That should get you started.

Kevin

YoDavish

@kthorngren Yep, I figured it out and got it to work now, however, another issue pop up though. When I enabled server side. I no longer can toggle per row, it will toggle for all rows again.

YoDavish

nvm figured it out too. Thanks for you help!

kthorngren

We will need to see the problem to help debug. Please provide a link to your page or a test case replicating the issue so we can take a look. You can use one of the server side processing templates from here:
https://datatables.net/manual/tech-notes/9#Server-side-processing

Kevin