jQWidgets Forums
Forum Replies Created
-
Author
-
Hi Peter,
I am using jqxgrid – pop- up window example for my project, And i wanted to implement dirty flag on pop-up cancel. Please suggest. I tried beforeunload but it doesnt seem to work as i expect.
March 24, 2016 at 8:51 pm in reply to: Need help with jqxGrid – not working for me Need help with jqxGrid – not working for me #82820Hi ,
jqxgrid is not displayed, i am trying the sample code as in the website ..
Code below:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Test</title>
<link rel=”stylesheet” href=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js”></script><script type=”text/javascript” src=”www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”js/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// 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”).jqxInput({ theme: theme });
$(“#lastName”).jqxInput({ theme: theme });
$(“#product”).jqxInput({ theme: theme });$(“#firstName”).width(150);
$(“#firstName”).height(23);
$(“#lastName”).width(150);
$(“#lastName”).height(23);
$(“#product”).width(150);
$(“#product”).height(23);
$(“#quantity”).jqxNumberInput({spinMode: ‘simple’, width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true });
$(“#price”).jqxNumberInput({ spinMode: ‘simple’, symbol: ‘$’, width: 150, min: 0, height: 23, spinButtons: true });
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
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) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#firstName”).val(dataRecord.firstname);
$(“#lastName”).val(dataRecord.lastname);
$(“#product”).val(dataRecord.productname);
$(“#quantity”).jqxNumberInput({ decimal: dataRecord.quantity });
$(“#price”).jqxNumberInput({ decimal: dataRecord.price });
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
$(“#popupWindow”).on(‘open’, function () {
$(“#firstName”).jqxInput(‘selectAll’);
});$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { firstname: $(“#firstName”).val(), lastname: $(“#lastName”).val(), productname: $(“#product”).val(),
quantity: parseInt($(“#quantity”).jqxNumberInput(‘decimal’)), price: parseFloat($(“#price”).jqxNumberInput(‘decimal’))
};
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#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>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>First Name:</td>
<td align=”left”><input id=”firstName” /></td>
</tr>
<tr>
<td align=”right”>Last Name:</td>
<td align=”left”><input id=”lastName” /></td>
</tr>
<tr>
<td align=”right”>Product:</td>
<td align=”left”><input id=”product” /></td>
</tr>
<tr>
<td align=”right”>Quantity:</td>
<td align=”left”><div id=”quantity”></div></td>
</tr>
<tr>
<td align=”right”>Price:</td>
<td align=”left”><div id=”price”></div></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div> –>
</div>
</body>
</html>Generatedata JS:
function generatedata(rowscount) {
// prepare the data
var data = new Array();
if (rowscount == undefined) rowscount = 100;
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);row[“id”] = i;
row[“available”] = productindex % 2 == 0;
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;var date = new Date();
date.setFullYear(2012, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row[“date”] = date;data[i] = row;
}return data;
}Please help me to solve the issue or pls let me know why it is not displayed
-
AuthorPosts