jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
166 lines (148 loc) • 7.5 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element PopupEditing</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 popup editing 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/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxwindow.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/jqxinput.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 data = generatedata(200);
var source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' }
]
};
var dataAdapter = new jqx.dataAdapter(source);
JQXElements.settings['gridSettings'] =
{
};
JQXElements.settings['windowSettings'] =
{
resizable: false, isModal: true,
autoOpen: false, modalOpacity: 0.01,
width: 400, height: 300
};
window.onload = function() {
var editrow;
var myWindow = document.querySelector('jqx-window');
var myInputs = document.querySelectorAll('jqx-input');
var myNumberInputs = [myInputs[3], myInputs[4]];
var myButtons = document.querySelectorAll('jqx-button');
var myGrid = document.createElement('jqx-grid');
myGrid.settings = {
source: dataAdapter,
pageable: true,
autoheight: true,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 200 },
{ text: 'Last Name', datafield: 'lastname', width: 200 },
{ text: 'Product', datafield: 'productname', width: 190 },
{ text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
{ text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{
text: 'Edit', datafield: 'Edit', columntype: 'button',
cellsrenderer: function() { return 'Edit' },
buttonclick: function(row) {
editrow = row;
var dataRecord = myGrid.getrowdata(editrow);
myInputs[0].val(dataRecord.firstname);
myInputs[1].val(dataRecord.lastname);
myInputs[2].val(dataRecord.productname);
myNumberInputs[0].val(dataRecord.quantity);
myNumberInputs[1].val(dataRecord.price);
myWindow.position = { x: 68, y: 68 };
myWindow.open();
}
}
]
};
document.querySelector('.myGridContainer').appendChild(myGrid);
myButtons[0].addEventListener('click', function() {
if (editrow >= 0) {
var row =
{
firstname: myInputs[0].val(),
lastname: myInputs[1].val(),
productname: myInputs[2].val(),
quantity: parseInt(myNumberInputs[0].val()),
price: parseFloat(myNumberInputs[1].val())
};
var rowID = myGrid.getrowid(editrow);
myGrid.updaterow(rowID, row);
myWindow.close();
}
});
myButtons[1].addEventListener('click', function() {
myWindow.close();
});
};
</script>
</head>
<body>
<div class="example-description">
In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes click the 'Cancel' button in the popup dialog.
</div>
<div class="myGridContainer"></div>
<jqx-window settings="windowSettings">
<div>Edit</div>
<div style="overflow: hidden;">
<table>
<tr>
<td align="right">First Name:</td>
<td align="left"><jqx-input></jqx-input></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td align="left"><jqx-input></jqx-input></td>
</tr>
<tr>
<td align="right">Product:</td>
<td align="left"><jqx-input></jqx-input></td>
</tr>
<tr>
<td align="right">Quantity:</td>
<td align="left"><jqx-input ></jqx-input></td>
</tr>
<tr>
<td align="right">Price:</td>
<td align="left"><jqx-input ></jqx-input></td>
</tr>
<tr>
<td align="right"></td>
<td style="padding-top: 10px;" align="right">
<jqx-button style="margin-right: 5px;">Save</jqx-button>
<jqx-button class="cancelBtn">Cancel</jqx-button>
</td>
</tr>
</table>
</div>
</jqx-window>
</body>
</html>