jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
122 lines (115 loc) • 5.56 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element Deferred Scrolling</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of the default functionality of Custom Element Grid." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
var 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
}
];
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);
JQXElements.settings['gridSettings'] =
{
source: dataAdapter,
altrows: true,
sortable: true,
scrollmode: 'deferred',
scrollfeedback: 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: (row, column, value) => {
return '<img src="../../../images/t-shirts/' + value + '"/>';
}
},
{ text: 'Title', datafield: 'label', width: 250 },
{ text: 'Price', cellsformat: 'c2', datafield: 'price' }
]
};
</script>
</head>
<body>
<div class="example-description">
This example illustrates the Custom element Grid's deferred scrolling feature. In order to enable the feature, set the 'scrollmode' property to 'deferred'. The deferred scrolling enables you to scroll without updating the grid. This feature can be very useful when the grid contains elements such as pictures or large text.
</div>
<jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>