jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
207 lines (187 loc) • 9.67 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element CellsSelection</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 cells selection in 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/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="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../sampledata/generatedata.js"></script>
<script type="text/javascript">
var source =
{
localdata: generatedata(200),
datafields:
[
{ name: 'id', type: 'number' },
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' }
],
datatype: 'array'
};
var dataAdapter = new jqx.dataAdapter(source);
JQXElements.settings['gridSettings'] =
{
source: dataAdapter,
selectionmode: 'singlecell',
columns: [
{ text: 'First Name', datafield: 'firstname', width: 200 },
{ text: 'Last Name', datafield: 'lastname', width: 200 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' },
]
};
JQXElements.settings['checkBoxSettings'] =
{
checked: true
};
JQXElements.settings['dropDownList1Settings'] =
{
dropDownWidth: 230, selectedIndex: 1, autoDropDownHeight: true,
source: ['none', 'single cell', 'multiple cells', 'multiple cells extended', 'multiple cells advanced']
};
JQXElements.settings['dropDownList2Settings'] =
{
selectedIndex: 1, autoDropDownHeight: true,
source: ['First Name', 'Last Name', 'Product Name', 'Quantity', 'Unit Price']
};
window.onload = function() {
var myGrid = document.querySelector('jqx-grid');
var myCheckBox = document.querySelector('jqx-check-box');
var myDropDownLists = document.querySelectorAll('jqx-drop-down-list');
var myButtons = document.querySelectorAll('jqx-button');
myGrid.selectcell(2, 'lastname');
myButtons[0].addEventListener('click', function() {
var inputItemValue = document.querySelector('#scrollToInput').value;
myGrid.ensurerowvisible(inputItemValue);
});
myButtons[1].addEventListener('click', function() {
myGrid.clearselection();
});
myButtons[2].addEventListener('click', function() {
var index = document.querySelector('#rowIndexInput').value;
var columnindex = myDropDownLists[1].getSelectedIndex();
var columndatafield = myGrid.getcolumnat(columnindex).datafield;
myGrid.selectcell(index, columndatafield);
});
myDropDownLists[0].addEventListener('select', function(event) {
var index = event.args.index;
myButtons[1].disabled = false;
switch (index) {
case 0:
myGrid.selectionmode = 'none';
myButtons[1].disabled = true;
break;
case 1:
myGrid.selectionmode = 'singlecell';
break;
case 2:
myGrid.selectionmode = 'multiplecells';
break;
case 3:
myGrid.selectionmode = 'multiplecellsextended';
break;
case 4:
myGrid.selectionmode = 'multiplecellsadvanced';
break;
}
});
myCheckBox.addEventListener('change', function(event) {
myGrid.enablehover = event.args.checked;
});
myGrid.addEventListener('cellselect', function(event) {
var columnheader = myGrid.getcolumn(event.args.datafield).text;
var selectedCellLog = document.querySelector('#selectedCell');
selectedCellLog.innerHTML = 'Row: ' + event.args.rowindex + ', Column: ' + columnheader;
});
myGrid.addEventListener('cellunselect', function(event) {
var columnheader = myGrid.getcolumn(event.args.datafield).text;
var unSelectedCellLog = document.querySelector('#unSelectedCell');
unSelectedCellLog.innerHTML = 'Row: ' + event.args.rowindex + ', Column: ' + columnheader;
});
};
</script>
</head>
<body>
<div class="example-description">
This example shows how to use the Custom element Grid's Cells Selection API.
</div>
<jqx-grid settings="gridSettings"></jqx-grid>
<div style="margin-top: 20px;">
<div style="clear: both; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; font-size: 12px;">
<div style="float: left;">
<div>
<input value="100" style="width: 50px; float: left; margin-right: 0.5em" maxlength="4" id="scrollToInput" type="text" />
<jqx-button>Scroll to Row</jqx-button>
</div>
<div style="margin-top: 10px"></div>
<jqx-check-box settings="checkBoxSettings">Enable Hover</jqx-check-box>
<div style="margin-top: 10px;">
Selection Mode:
<div style="margin-top: 5px"></div>
<jqx-drop-down-list settings="dropDownList1Settings"></jqx-drop-down-list>
</div>
</div>
<div style="float: left; margin-left: 20px;">
<div>
<div>
<table>
<tr>
<td align="right">
Row:
</td>
<td>
<input value="0" style="float: left; width: 50px;" maxlength="4" id="rowIndexInput" type="text" />
</td>
</tr>
<tr>
<td align="right">
Column:
</td>
<td>
<jqx-drop-down-list settings="dropDownList2Settings"></jqx-drop-down-list>
</td>
</tr>
<tr>
<td align="right">
<jqx-button>Clear Selection</jqx-button>
</td>
<td>
<jqx-button>Select Cell</jqx-button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="float: left; margin-left: 20px;">
<span>Selection Log:</span>
<div style="margin-top: 10px;">
<span>Selected Cell:</span> <span id="selectedCell"></span>
<br />
<span>Unselected Cell:</span> <span id="unSelectedCell"></span>
</div>
</div>
</div>
</div>
</body>
</html>