Mouse wheel vertical scrolling over fixed column
Mouse wheel vertical scrolling over fixed column
levi
Posts: 6Questions: 0Answers: 0
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
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
This discussion has been closed.
Replies
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
Thanks,
Allan
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]
[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]
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