jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
183 lines (168 loc) • 8.72 kB
HTML
<html lang="en">
<head>
<title id='Description'>This example shows how to use the Grid Row Selection API.
</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.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="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = generatedata(200);
var source =
{
localdata: data,
datafields:
[
{ name: 'id', type: 'number' },
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#grid").jqxGrid(
{
width: getWidth('Grid'),
height: 350,
source: dataAdapter,
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' }
]
});
// initialize buttons and checkboxes.
$("#selectrowbutton").jqxButton({ theme: theme });
$("#scrolltobutton").jqxButton({ theme: theme });
$("#clearselectionbutton").jqxButton({ theme: theme });
$("#enableselection").jqxDropDownList({
autoDropDownHeight: true, dropDownWidth: 230, width: 120, height: 25, selectedIndex: 1, source: ['none', 'single row', 'multiple rows',
'multiple rows extended', 'multiple rows advanced']
});
$("#enablehover").jqxCheckBox({ checked: true });
// select a row.
$("#selectrowbutton").click(function () {
var index = parseInt($("#rowindexinput").val());
if (!isNaN(index)) {
$("#grid").jqxGrid('selectrow', index);
}
});
// clears the selection.
$("#clearselectionbutton").click(function () {
$("#grid").jqxGrid('clearselection');
});
// scroll to a row.
$("#scrolltobutton").click(function () {
var index = parseInt($("#rowindexinput2").val());
if (!isNaN(index)) {
$("#grid").jqxGrid('ensurerowvisible', index);
}
});
// enable or disable the selection.
$("#enableselection").on('select', function (event) {
var index = event.args.index;
$("#selectrowbutton").jqxButton({ disabled: false });
switch (index) {
case 0:
$("#grid").jqxGrid('selectionmode', 'none');
$("#selectrowbutton").jqxButton({ disabled: true });
break;
case 1:
$("#grid").jqxGrid('selectionmode', 'singlerow');
break;
case 2:
$("#grid").jqxGrid('selectionmode', 'multiplerows');
break;
case 3:
$("#grid").jqxGrid('selectionmode', 'multiplerowsextended');
break;
case 4:
$("#grid").jqxGrid('selectionmode', 'multiplerowsadvanced');
break;
}
});
// enable or disable the hover state.
$("#enablehover").on('change', function (event) {
$("#grid").jqxGrid('enablehover', event.args.checked);
});
// display selected row index.
$("#grid").on('rowselect', function (event) {
$("#selectrowindex").text(event.args.rowindex);
});
// display unselected row index.
$("#grid").on('rowunselect', function (event) {
$("#unselectrowindex").text(event.args.rowindex);
});
// select the second row.
$("#grid").jqxGrid('selectrow', 2);
});
</script>
</head>
<body class='default'>
<div id="grid">
</div>
<div style="margin-top: 20px;">
<div style="clear: both; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; font-size: 12px;">
<div>
<input value="100" style="width: 50px;" maxlength="4" id="rowindexinput2" type="text" />
<input id="scrolltobutton" type="button" value="Scroll to Row" />
</div>
<div style="margin-top: 10px;">
<input value="0" style="width: 50px;" maxlength="4" id="rowindexinput" type="text" />
<input id="selectrowbutton" type="button" value="Select Row" />
<input id="clearselectionbutton" type="button" value="Clear Selection" />
</div>
<div style="margin-top: 10px;" id="enablehover">
Enable Hover
</div>
<div style="margin-top: 10px;">
Selection Mode:
<div style="margin-top: 5px;" id="enableselection">
</div>
<div style="margin-top: 10px; font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;">
Selection Modes:
<ul>
<li>"none" - disables the selection. Selection is possible only through the API.</li>
<li>"singlerow" - full row selection. Each click changes the selected row.</li>
<li>"multiplerows" - each click selects a new row. Click on a selected row unselects it.</li>
<li>"multiplerowsextended" - users can select multiple rows with drag and drop or<br /> by clicking on rows while holding Ctrl or Shift.</li>
</ul>
</div>
</div>
</div>
<div style="clear: both; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; font-size: 12px;">
<span>Selection Log:</span>
<div style="margin-top: 10px;">
<span>Selected Row Index:</span> <span id="selectrowindex"></span>
<br />
<span>Unselected Row Index:</span> <span id="unselectrowindex"></span>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>