FixedColumns width changing when using default filter (and also using the column filter plugin)

susurs

Hi,

thanks for the great plugin and good documentation! I've implemented datatables with ajax loading, multi-row header, colvis and the default filter (actually, I used the column filter plugin but deactivated it in order to track down the following problem).

I've got two problems:

1) when I use the filter functionality, the leftmost of the two left fixed columns changes its width, specifically its width grows. Because the width of the fixed columns is 320px, second fixed column becomes smaller and smaller until its content takes several text lines. This causes the column height of the fixed columns and the data columns to be out of sync.

2) when I use the column filter plugin and sorting functionality, the sorting functionality causes the input controls in the header to vanish (I slightly customized the columnfilter plugin to support multi-row headers, but this shouldn't be the problem).

The table is initalized as following:

[code]
oTable = $("#table2").dataTable({
"oLanguage": {
"sProcessing": "Bitte warten...",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sZeroRecords": "Keine Einträge vorhanden.",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sSearch": "Suchen",
"sUrl": "",
"oPaginate": {
"sFirst": "Erster",
"sPrevious": "Zurück",
"sNext": "Nächster",
"sLast": "Letzter"
}
}
, "fnInitComplete": function () { resizeGrid(); }
, "fnDrawCallback": function () {

//important: actually, the fnDrawCallback code is commented out when using the default filter functionality
if ($("#table2_wrapper div.dataTables_scrollHeadInner th input").size() > 0)
return;

var focusedElementId = $("*:focus").attr("id");

//backup old input field values
var oldInputs = $("#table2_wrapper div.dataTables_scrollHeadInner input");
var oldValues = new Array(oldInputs.size());

oldInputs.each(function (i, v) {
oldValues[i] = $(this).val();
});

//(recreate) column filter
$("#table2").dataTable().columnFilter({
iFixedLeftColumns: 2,
rootElement: "#table2_wrapper div.dataTables_scrollHeadInner ",
sPlaceHolder: "head:after",
sRangeFormat: "von {from} bis {to}",
aoColumns:
[
{ type: "text" }
, null
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
, { type: "number-range" }
]
});

//restore column filter values
var newInputs = $("#table2_wrapper div.dataTables_scrollHeadInner input");

newInputs.each(function (i, v) {
$(this).val(oldValues[i]);
});


if (focusedElementId != null)
$("#" + focusedElementId).focus();

//stop event propagation for clicks in input fields in header (otherwise the grid resorts on click)
$("#table2_wrapper div.dataTables_scrollHeadInner thead input").click(function (event) { event.stopPropagation(); this.focus(); });
}
, "sDom": 'T<"H"Cfr>t<>'
, "sScrollX": "100%"
, "sScrollY": "100%"
//, "sScrolXInner": "1px"
, "bScrollCollapse": false
, "bAutoWidth": true
, "bPaginate": false
, "bSort": false
, "bStateSave": true
, "bProcessing": true
, "bJQueryUI": true
, "aoColumns": [
{ "mDataProp": "colname1", "sWidth": "200px" }
, { "mDataProp": "colname2", "sWidth": "200px" }
, { "mDataProp": "colname3", "sWidth": "110px" }
, { "mDataProp": "colname4", "sWidth": "110px" }
, { "mDataProp": "colname5", "sWidth": "110px" }
//31 more columns here
]
, "oColVis": {
"buttonText": "Spaltenauswahl"
, "aiExclude": [0, 1]
}

});



//stuff to resize the grid whenever the jquery ui layout is resized
outerLayout.options.center.onresize_end = function (name, element, state, options, layoutname) {
resizeGrid();
};

// fixed columns setup.
new FixedColumns(oTable, { "iLeftColumns": 2, "iLeftWidth": 320, sHeightMatch:"auto" });



// ...


var myData = "topsecreturlparameters"
$.ajax({
type: "POST",
url: "report2b.aspx/GetReportData",
data: "{" + myData + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
error: function (jqXHR, textStatus, errorThrown) {
$.unblockUI();
if (errorThrown == "Unauthorized") {
$("#dialog-modal").dialog({ height: 180, modal: true, buttons: { Ok: function () { $(this).dialog("close"); window.location.replace("http://localhost:800/resultv2"); } } });
}

},
success: function (msg) {

$.unblockUI();
if (msg.d.ErrorKey != undefined) {
$("#ctl00_lblInfoFeld").html(msg.d.ErrorMessage);
} else {

// ...

var dtData = [];
$.each(msg.d.Rows, function () {
dtData.push(this);
});
oTable.fnAddData(dtData);

// ...
}
}
});

});

// ...

[/code]

Can anybody point out a solutions or workaround to this problem? If I disable sorting at all, the column filter works as expected.

Best regards
Thomas