Mouse wheel vertical scrolling over fixed column

levi

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

allan

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

levi

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

allan

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

levi

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]

levi

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]

levi

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.

allan

Thank you for this. I'll try it out later on today.

Allan

levi

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

allan

Really sorry - no. I'm been swamped recently and haven't been able to look at this yet :-(. Hope to do so soon.

Allan