<!DOCTYPE html>
<html lang="en">
<head>
<title id='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.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/jquery-1.8.2.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/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="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = "";
// prepare the data
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' }
],
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server - send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
}
};
// initialize the input fields.
$("#firstName").addClass('jqx-input');
$("#lastName").addClass('jqx-input');
$("#product").addClass('jqx-input');
$("#firstName").addClass('jqx-rc-all');
$("#lastName").addClass('jqx-rc-all');
$("#product").addClass('jqx-rc-all');
$("#firstName").width(150);
$("#firstName").height(23);
$("#lastName").width(150);
$("#lastName").height(23);
$("#product").width(150);
$("#product").height(23);
if (theme.length > 0) {
$("#firstName").addClass('jqx-input-' + theme);
$("#lastName").addClass('jqx-input-' + theme);
$("#product").addClass('jqx-input-' + theme);
$("#firstName").addClass('jqx-rc-all-' + theme);
$("#lastName").addClass('jqx-rc-all-' + theme);
$("#product").addClass('jqx-rc-all-' + theme);
}
$("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
$("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, theme: theme, spinButtons: true });
var dataAdapter = new $.jqx.dataAdapter(source);
var id;
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
pageable: true,
autoheight: true,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ 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: 'Delete', datafield: 'Delete', columntype: 'button', cellsrenderer: function () {
return "Delete row";
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
id = $("#jqxgrid").jqxGrid('getrowid', row);
var offset = $("#jqxgrid").offset();
$("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
// show the popup window.
$("#popupWindow").jqxWindow('show');
}
},
]
});
// initialize the popup window and buttons.
$("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
$("#del").jqxButton({ theme: theme });
$("#cancel").jqxButton({ theme: theme });
$("#del").click(function () {
$('#jqxgrid').jqxGrid('deleterow', id);
$("#popupWindow").jqxWindow('hide');
});
$("#cancel").click(function () {
$("#popupWindow").jqxWindow('hide');
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid">
</div>
<div style="margin-top: 30px;">
<div id="cellbegineditevent">
</div>
<div style="margin-top: 10px;" id="cellendeditevent">
</div>
</div>
<div id="popupWindow">
<div>
Delete row</div>
<div style="overflow: hidden;">
<p>
Are you sure you would like to delete the selected row?</p>
<button id="del">
Yes</button>
<button id="cancel">
No</button>
</div>
</div>
</div>
</body>
</html>