FixedColumns With Horizontal and Vertical Scrolling Issues

FixedColumns With Horizontal and Vertical Scrolling Issues

maliu1970maliu1970 Posts: 15Questions: 2Answers: 0
edited April 2014 in FixedColumns
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

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • maliu1970maliu1970 Posts: 15Questions: 2Answers: 0
    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.
  • maliu1970maliu1970 Posts: 15Questions: 2Answers: 0
    Here's the html










    Facility



    Date



    Hours Processed



    Hours Expected



    Total Operations


    Tower


    TRACON








    IFR Primary



    IFR Overflights



    VFR Primary



    VFR Overflights

    ....
    ....
    ....
  • maliu1970maliu1970 Posts: 15Questions: 2Answers: 0
    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
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • maliu1970maliu1970 Posts: 15Questions: 2Answers: 0
    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
  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read
  • maliu1970maliu1970 Posts: 15Questions: 2Answers: 0
    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.
This discussion has been closed.