Redraw a table after cell contents expand and increase height.
Redraw a table after cell contents expand and increase height.
My table is:
$('#table').DataTable({
"autoWidth":false
, "fixedColumns": {leftColumns: 6 }
, "info":false
, "JQueryUI":true
, "order": [[ 6, "asc" ]]
, "ordering":true
, "paging":false
, "scrollY":"680px"
, "scrollX":"1485px"
, "scrollCollapse":true
, "columnDefs": [
{ className: "LeftNoWrap", "targets": [ 0,1,2,3,5,23] }
, { className: "RightNoWrap", "targets": [ 10,11,12,18,21,22 ] }
, { className: "CenterNoWrap", "targets": [ 4,6,7,8,9,13,14,15,16,17,19,20,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38 ] }
, {"targets": 23,
"render": function ( cellData, type, rowData, meta ) {
var locRow = meta.row;
return '<span id="spnSummaryComment'+locRow+'" class="ellipsis">' + cellData + '</span>';
}
}
]
,"drawCallback": function( settings ) {
fncAddEventsAndStripes($(this).attr('id'));
$(this).DataTable().columns.adjust();
}
On column 23, this has some text which gets reformatted by a function which creates 2 new span elements (one called more and one called less). The purpose of this is to hide the long text, but give the user the ability too view the whole text by toggling between the short and long text span elements. The "long text" may be several lines long.
By default, the shortened text is shown.
I have events which are linked to the new spans which do get fired (see below).
These get created by the fncAddEventsAndStripes() function called on the drawCallback event.
$('a[id^=aspnMigSummaryComment]','#tblMigSummary').on('click', function(e) {
e.preventDefault();
$('#tblMigSummary').DataTable().columns.adjust().rows().recalcHeight().draw;
});
However, this only adjusts the column widths but does not alter the row height in the left hand (fixed columns).
Is there anyway to do this?
Thanks,
Answers
The problem was with the
Should be :
Please close this call. Thanks.