Scrollbar on Row details Div

[Benji6996Participant]

I have a grid and within the grid I have rowdetails enabled. The row details is a simple div with text within it. As you cannot set the height of the rowdetails to ‘auto’, I have decided to set the overflow of the div to auto, thus add a scrollbar to it.

My problem is that the content does not scroll with the mousewheel, instead when you scroll it scrolls the grid instead.

I assume this is probably a CSS issue, but if not, is there a way I can turn off the scrolling on the grid and just use the default Windows scroll bar to scroll both the grid and the div?

Here is my code:

var initrowdetails = function (index, parentElement, gridElement, record){
	var details_container = null;
	var details = null;
	details_container = $($(parentElement).children()[0]);
	if(details_container != null){
		details_container.html(record.details.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br />$2'));
	}
};
$('#grid').jqxGrid({
	width: 800,		
	height: 350,
	source: dataAdapter,
	theme: 'metro',
	rowdetails: true,
	initrowdetails: initrowdetails,
	rowdetailstemplate: {
		rowdetails: "<div class=\"foo-details\"></div>",
		rowdetailsheight: 200,
		rowdetailshidden: true
	},
	columns: [
		{ text: 'Foo', datafield: 'foo' },
		{ text: 'Bar', datafield: 'bar' },
	]
});

[Peter StoevKeymaster]

Hi Benji6996,

To turn off the Grid’s mouse wheel scrolling, you may set its: enablemousewheel property to false.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts