The jqxGrid's deferred scrolling feature. In order to enable the feature, set the "scrollmode" property to "deferred".
A live JavaScript/jQuery example of jqxGrid, the jQWidgets Grid component, with its complete source code below. It is one of 139 jqxGrid demos for jQuery.
altrows property – Enables or disables the alternating rows.height property – Sets or gets the Grid's height.rowsheight property – Sets or gets the height of the grid rows.scrollmode property – Determines the scrolling mode.scrollfeedback property – When the "scrollmode" is set to "deferred", the "scrollfeedback" function may be used to display custom UI Tooltip next to the scrollbar.width property – Sets or gets the Grid's width.columns property – Sets the Grid columns.sortable property – The sortable property enables or disables the sorting feature.source property – Sets and gets the source.To run it in your own page, load jqx.base.css, a theme and the library files below from npm (npm install jqwidgets-scripts) or the jsDelivr CDN, then add the markup and the script. jQuery is not required: jqxcore.js provides $. Getting started with jqxGrid shows the setup step by step.
The page loads jqx.base.css, a theme and these library files: jqxcore.js, jqxdata.js, jqxbuttons.js, jqxscrollbar.js, jqxmenu.js, jqxgrid.js, jqxgrid.sort.js, jqxgrid.filter.js, jqxgrid.selection.js, jqxpanel.js, jqxcheckbox.js, jqxlistbox.js, jqxdropdownlist.js.
It also loads helper scripts of this demo site, which are not part of the library: demos.js (getWidth() and other layout helpers).
$(document).ready(function () {
products =
[
{
label: 'Retro Rock T-shirt',
pic: 'black-retro-rock-band-guitar-controller.png',
price: 15
},
{
label: 'Lucky T-shirt',
pic: 'bright-green-gettin-lucky-in-kentucky.png',
price: 18
},
{
label: 'Loading T-shirt',
pic: 'brown-loading-bar-computer-geek.png',
price: 25
},
{
label: 'Cool Story T-shirt',
pic: 'cool-story-bro.png',
price: 20
},
{
label: 'The beard T-shirt',
pic: 'fear-the-beard.png',
price: 17
},
{
label: 'Don\'t care T-shirt',
pic: 'honey-badger-don-t-care.png',
price: 19
},
{
label: 'Guitar T-shirt',
pic: 'scott-pilgrim-red-rock-band.png',
price: 24
},
{
label: 'Dodgers T-shirt',
pic: '2-sided-dodgers-bankrupt-t-shirt-ash.png',
price: 21
},
{
label: 'Misfits T-shirt',
pic: 'misfits-sf-giants-white.png',
price: 21
}
];
// prepare the data
var source =
{
datatype: "array",
datafields: [
{ name: 'label', type: 'string' },
{ name: 'pic', type: 'string' },
{ name: 'price', type: 'number' }
],
localdata: products
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create grid.
$("#grid").jqxGrid(
{
width: 700,
height: 380,
source: dataAdapter,
altrows: true,
sortable: true,
scrollmode: 'deferred',
scrollfeedback: function(row)
{
return '<table style="height: 150px;"><tr><td><img src="../../images/t-shirts/' + row.pic + '"/></td></tr><tr><td>' + row.label + '</td></tr></table>';
},
rowsheight: 115,
columns: [
{
text: 'Image', datafield: 'pic', width: 115, cellsrenderer: function (row, column, value) {
return '<img src="../../images/t-shirts/' + value + '"/>';
}
},
{
text: 'Title', datafield: 'label', width: 250
},
{
text: 'Price', cellsformat: 'c2', datafield: 'price'
}
]
});
});<div id="jqxWidget">
<div id="grid">
</div>
</div>