FixedColumns With Horizontal and Vertical Scrolling Issues

maliu1970

Hi Allan,

We have a very wide DataTable comprising of 29 columns. We want to freeze the first five columns. These five columns have "rowspan=2". We have vertical headers in all the other columns. When I freeze the left five columns the height of column header doubles. We are using server side processing/data- pipelining. Whenever I scroll vertically the height keeps increasing of the headers. It seems with every scroll it doubles it to a point that the whole page is covered with just the row headers.

Second problem is that when scrolling too fast the left pane with the frozen columns disappear completely and then after a while they reappear that is not a big issue though.

Please help. Thank you very much.

Best regards,

Ali

allan

When you say 'five columns have "rowspan=2"' - where are these rows - they can't be in the tbody as DataTables doesn't support that.

Beyond that, can you link to to the page so I can take a look please?

Allan

maliu1970

Hi Allan,

They are in the header let me try to send you a screen shot but here's the html and js code

function UpdateMonthlyOrDailyTCReportDataTable(Facility, ServiceArea, District, SummaryBy, StartDate, EndDate) {
var oTable = $('#tblTrafficCountsMonthDay').dataTable();

$("#throbber").dialog({ modal: true });
$(".ui-dialog-titlebar").hide();

if (oTable.dataTableSettings[0].sAjaxSource != null) {
oCache.iCacheLower = -1;
oTable.fnClearTable(0);
oTable.fnSort([[0, "asc"]]);
}

else {

oTable = $("#tblTrafficCountsMonthDay").dataTable({

"bProcessing": true,
"bAutoWidth": false,
"bServerSide": true,
"bLengthChange": false,
"bFilter": false,
"sScrollX": "100%",
// "sScrollXInner": "150%",
"bScrollCollapse": true,
"bAutoWidth": false,
"sDom": 'C<"clear">frtiS',
//"bPaginate": true,
//"sPaginationType": "full_numbers",
"bScrollCollapse": true,
"sScrollY": "360px",
"iDisplayLength": 16,
"bInfo": true,
"sAjaxSource": "Services/TCIService.svc/GetServerSideTrafficCountData",
"aoColumns": [
{ "mDataProp": "FAC_CD", sClass: "tdData" },
{ "mDataProp": "TCDATE", sClass: "tdData" },
{ "mDataProp": "PROCESSED_HRS", sClass: "tdData" },
{ "mDataProp": "EXPECTED_HRS", sClass: "tdData" },
{ "mDataProp": "TOTAL_OPS", sClass: "tdData" },
{ "mDataProp": "TW_IFR_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TW_IFR_OVRFLT_TOTAL", sClass: "tdData" },
{ "mDataProp": "TW_VFR_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TW_VFR_OVRFLT_TOTAL", sClass: "tdData" },
{ "mDataProp": "TW_LCL_VFR_TOTAL", sClass: "tdData" },
{ "mDataProp": "TOTAL_TOWER_OPS", sClass: "tdData" },
{ "mDataProp": "TR_IFR_PR_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_IFR_LESS15_HUB_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_IFR_MORE15_HUB_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_IFR_S_LESS15_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_IFR_S_MORE15_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_IFR_S_LESS15_HUB_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_IFR_S_MORE15_HUB_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_IFR_OVRFLT_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_VFR_PR_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_VFR_HUB_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_VFR_S_LESS15_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_VFR_S_MORE15_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_VFR_S_LESS15_HUB_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_VFR_S_MORE15_HUB_I_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_VFR_OVRFLT_TOTAL", sClass: "tdData" },
{ "mDataProp": "TR_NON_RDR_TOTAL", sClass: "tdData" },
{ "mDataProp": "TOTAL_TRACON_OPS", sClass: "tdData" },
{ "mDataProp": "FACILITYNAME", sClass: "tdData", "bVisible": false }

],
"bDestroy": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27]}],

"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "p_fac_cd", "value": $('#Select_FacilityId').val() == 'ALL' ? "" : $('#Select_FacilityId').val() });
aoData.push({ "name": "p_service_area", "value": $('#Select_ServiceCtr').val() === 'ALL' ? "" : $('#Select_ServiceCtr').val() });
aoData.push({ "name": "p_district", "value": $('#Select_District').val() === 'ALL' ? "" : $('#Select_District').val() });
aoData.push({ "name": "p_summary_by", "value": $("#hid_SummaryBy").val() });
aoData.push({ "name": "p_from_dt", "value": $('#hid_From_Date').val() });
aoData.push({ "name": "p_to_dt", "value": $('#hid_To_Date').val() });
aoData.push({ "name": "p_begin_rec_id", "value": '0' });
aoData.push({ "name": "p_end_rec_id", "value": '0' });
fnSetKey(aoData, "iDisplayLength", "280");

fnDataTablesPipeline($("#hid_SummaryBy").val(), sSource, aoData, fnCallback);

},

"fnInitComplete": function () {
setTimeout(function () {
new FixedColumns(oTable, {

"iLeftColumns": 5,
"sHeightMatch": "auto",
"iLeftWidth": 350

});

oTable.fnAdjustColumnSizing();
}, 10);
}

});
}



Is there a way I can send you the screen shot as well? Thanks a lot.

maliu1970

Here's the html










Facility



Date



Hours Processed



Hours Expected



Total Operations


Tower


TRACON








IFR Primary



IFR Overflights



VFR Primary



VFR Overflights

....
....
....

maliu1970

Allan,

Here's the screen shot after scrolling it.

https://drive.google.com/file/d/0BwrywIt_NG8vRGVqeTViMEFQZWs/edit?usp=sharing

Thank you very much.

Best regards,

Ali

allan

I suspect there is a problem with the CSS since I presume you are using that to rotate the text. however, I would need a link to a live test case to be able to offer any help.

Allan

maliu1970

I removed the vertical CSS and even then it does that. What is a live test case? Please advise. Thank you very much.

Best regards,

Ali

tangerine

http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

maliu1970

Dear Allan,

I'm not sure how to create this test case as I have server side processing using data-pipelining. I can put the html and VB code here but not sure how to post the WCF Service and the data that is returned. Sorry for being so daft. Thank you very much for your help.