dynamic header and body.Inline editing alignment issue

Durga12

Hi,
I am using datatables, everything seems good. I have alignment issue when I do inline edit by clicking on a cell and on blur the edited value is updated. If the entered value is long, only that cell is aligned vertically but not the entire column including header.
I am binding both the header and body dynamically through jquery. So, I cannot fix the width and there are around 50 columns(which is not constant) and about 900 rows. Please help me how to take the maximum width size of a cell in a column after edit.

Thanks,
Durga V.

Durga12

Hi,
Any idea to achieve this?

Thanks,
Durga V.

allan

Can you link to a test case showing the issue please? It might be that you need to call columns.adjust() after the update, but the columns should align automatically after an edit.

Allan

Durga12

Note:The table is created dynamically using jquery.

var table;
function TableFormation() {  
    var currentScreenHeight = GetScreenHeight();//function to get table height
    table = $('#gridView').dataTable({
        "scrollY": currentScreenHeight,
        "scrollX": true,
        "paging": false,
        "bSort": false,
        "bFilter": false,
        "info": false,
        "bAutoWidth": false,
        fixedColumns: {
            leftColumns: 1
        }
    });

function GetScreenHeight() {
    var divGoBackHeight = $('#divTraverseAndBack').height();
    var divTableHeaderHeight = $('#divTableHeading').height();
    var headerHeight = $('header').height();
    var screenHeight = $(window).height() - 85;

    var tableHeight = screenHeight - (divGoBackHeight + divTableHeaderHeight + headerHeight) + "px";
    return tableHeight;
}

TableFormation() will be called while rendering the table for the first time on load.
while rendering for the first time the width of header & body matches and no alignment issue. Once I click on any cell, increase or decrease the value's length. Then, only the entire column width is changed but header width is mismatched and cause alignment issues.

In which event should I call this table.columns.adjust().draw();? I tried calling this at

$(document).delegate('#gridView tbody tr td input, #gridView tbody tr td select', 'blur', function (e) {}

ie, once the focus of the cell changes. But table.columns is "undefined".

Regards,
Durga V.