Mouse wheel vertical scrolling over fixed column

Mouse wheel vertical scrolling over fixed column

levilevi Posts: 6Questions: 0Answers: 0
edited November 2013 in DataTables 1.9
Hi there,

I started using DataTables last month, and I have been incredibly impressed with how flexible and easy to use it has been. Thank you!

I just have a quick question: I am using fixed columns and sScrollY together, just like in this example: http://datatables.net/extras/fixedcolumns/

I notice that in the example and in my implementation, using the mouse wheel to vertically scroll does not cause the table to scroll when the mouse is positioned over the fixed column (i.e. the DTFC_LeftBodyWrapper & DTFC_Cloned area of the table).

Since the fixed column is not an index column and is styled like the rest of the table, I would love it if mouse wheel vertical scrolling worked over the fixed column. I've tried handling the scroll event of DTFC_LeftBodyWrapper, but was unable to create the desired effect. Is there any known way to achieve vertical scrolling so that scrolling over the fixed column provides the same action as scrolling over the other columns?

Thank you!

Levi

Replies

  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    Can you try the FixedColumns dev version - this should be addresses there: https://github.com/DataTables/FixedColumns/blob/master/media/js/dataTables.fixedColumns.js

    Allan
  • levilevi Posts: 6Questions: 0Answers: 0
    edited November 2013
    Thanks for your quick reply, Allan!

    I do see that yScrolling over fixed columns works in the dev version! However, it looks like the dev version has introduced a few other problems. I'm observing my fixed column seeming to appear twice, with one instance fixed horizontally and the other instance scrolling horizontally with the rest of the table. Initially, before I've scrolled horizontally, the 2 instances appear one on top of the other, so it looks like there's just one instance. But when I scroll horizontally, I see one instance move to the left with the rest of the table while the other instance stays fixed. Also, as I continue scrolling horizontally, I see that the other columns remain visible as they move past the fixed column right border and into the area of the fixed column.

    Is this a known issue with the dev version? Or does it seem that this issue is unique to my implementation (btw, I'm using DataTables 1.9.4)? I'm afraid I cannot publicly post a sample as credentials are necessary, but if it would be useful to you to see the issue, perhaps we can figure something out.

    If it is not useful for you to look into my dev version issues right now, I'm happy waiting until the dev version makes it to release and then figuring it out then. It's helpful to know that the vertical scrolling over fixed columns issue is on your radar and will be fixed in the release version soon!

    Thanks again,

    Levi
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    Can you link to a test case showing the problem please? Being able to resolve issues like this will make it go to release sooner!

    Thanks,
    Allan
  • levilevi Posts: 6Questions: 0Answers: 0
    Sorry for the delayed reply. I've stripped away the extraneous code and have a reproducible example code. As I said, I'm unable to publicly post the credentials that would be necessary to view the page on our servers. But you can use the code included in this post to easily reproduce.

    Create a folder and put the following 3 scripts in the folder:
    jquery-1.7.2.min.js - Name this file "jquery-1.7.2.min.js"
    dataTables 1.9.4 js source - Name this file "jquery.dataTables.js"
    FixedColumns 2.5.0.dev source - Name this file "FixedColumns_dev.js"

    Add a fourth script to the folder named "summary_dates.js" with the following code:
    [code]
    var summary_data_table;
    var summary_fixed_columns;

    function getHeaderColumnIndex(thId) {
    return $.inArray(thId, initialThArray);
    }

    window.slide_toggle_dev = function () {
    $('#dev_table_body').slideToggle();
    $('#search_input').toggle();
    };

    function collapse_column(caller) {
    var column = $(caller).parent().parent();
    var domColId = column[0].id;

    var colIndex = getHeaderColumnIndex(domColId);
    summary_data_table.fnSetColumnVis(colIndex, false, false); //false
    summary_data_table.fnSetColumnVis(colIndex + 1, true, false); //true
    summary_data_table.fnAdjustColumnSizing();
    summary_data_table.fnDraw();
    };

    function expand_column(caller) {
    var column = $(caller);
    var domColId = column[0].id;
    var colIndex = getHeaderColumnIndex(domColId);
    summary_data_table.fnSetColumnVis(colIndex, false, false);
    summary_data_table.fnSetColumnVis(colIndex - 1, true, false);
    summary_data_table.fnAdjustColumnSizing();
    summary_data_table.fnDraw();
    };

    var initialThArray = new Array();

    $(document).ready(function () {

    var headerRow = $('#header_row');
    $.each(headerRow.children(), function (index, item) {
    initialThArray.push(item.id);
    });

    var deviceThIndex = getHeaderColumnIndex('device_th');
    var usageThIndex = getHeaderColumnIndex('usage_th');
    var usageRawThIndex = getHeaderColumnIndex('usage_raw_th');
    var savingsThIndex = getHeaderColumnIndex('savings_th');
    var savingsRawThIndex = getHeaderColumnIndex('savings_raw_th');
    var updatedThIndex = getHeaderColumnIndex('updated_th');
    var updatedRawThIndex = getHeaderColumnIndex('updated_raw_th');

    var collapsedColumnIndices = [];
    var standardColumnIndices = [];
    $('.collapsed_th').each(function (index, item) {
    var columnIndex = getHeaderColumnIndex(item.id);
    collapsedColumnIndices.push(columnIndex);
    });
    $('.j_standard_th').each(function (index, item) {
    var columnIndex = getHeaderColumnIndex(item.id);
    standardColumnIndices.push(columnIndex);
    });

    summary_data_table = $('#summary_devices_table').dataTable({
    "sScrollY": "600px",
    "bPaginate": false,
    "sScrollX": "100%",
    "bScrollCollapse": true,
    "aaSorting": [[deviceThIndex, 'asc']],
    "sDom": 'lrtip', //we need a custom filter input box, so we turn the automatic one off and manually filter using datatables api fnFilter

    "bAutoWidth": true,

    "aoColumnDefs": [
    { "iDataSort": [usageRawThIndex], "aTargets": [usageThIndex] },
    { "iDataSort": [savingsRawThIndex], "aTargets": [savingsThIndex] },
    { "iDataSort": [updatedRawThIndex], "aTargets": [updatedThIndex] },
    { "asSorting": ["desc", "asc"], "aTargets": [usageThIndex, savingsThIndex, updatedThIndex] },

    { "bSortable": false, "bSearchable": false, "bVisible": false, "sWidth": "20px", "aTargets": collapsedColumnIndices },
    { "sWidth": "100px", "aTargets": standardColumnIndices }
    ]
    });


    summary_fixed_columns = new FixedColumns(summary_data_table, {
    "iLeftColumns": 2
    });


    $('#search_input').keyup(function () {
    summary_data_table.fnFilter($(this).val());
    });

    //collapse extra columns initially
    // $('.j_init_collapse').each(function () {
    // collapse_column($('#' + this.id)[0]);
    // });
    });

    [/code]
  • levilevi Posts: 6Questions: 0Answers: 0
    Add a file named "example.html" with the following code:

    [code]


    Home Page






    Device Details








    Last Reading
    Device
    UpdatedRaw
    Modlet –
    +
    Gateway –
    +

    User –
    +

    Type –
    +
    Location –
    +
    Brand –
    +
    Model –
    +
    Usage –
    +
    UsageRaw
    Savings –
    +
    SavingsRaw







      2:30 PM
    Enterpr1 ch1 device
    1385994600
    Enterpr1 Helene

    Enterprise Test Gateway


    max+enterprisetest@test.com


    Air Cleaner/Purifier

    Default location





    0.0 kWh

    0
    0.0 kWh

    0



      2:30 PM
    WH3 and Helene Computer
    1385994600
    Enterpr1 Helene

    Enterprise Test Gateway


    max+enterprisetest@test.com


    Computer - laptop

    Default location

    Apple

    Macbook Air

    0.0 kWh

    0
    0.1 kWh

    0.065



















    [/code]
  • levilevi Posts: 6Questions: 0Answers: 0
    Once your folder contains the 4 js files, as well as example.html, open example.html in Chrome. Once the page is loaded, scrolling horizontally will display the error because there are two visible instances of the 2 fixed columns, and one scrolls with the table while the other remains fixed. Please let me know if you have any issues reproducing this using the resources provided.
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    Thank you for this. I'll try it out later on today.

    Allan
  • levilevi Posts: 6Questions: 0Answers: 0
    Hi Allan,

    Just wanted to check in. Were you able to reproduce the issue using this code? I hope that it's been helpful to you as you continue to improve this awesome product!

    Thank you!

    Levi
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    Really sorry - no. I'm been swamped recently and haven't been able to look at this yet :-(. Hope to do so soon.

    Allan
This discussion has been closed.