jQWidgets Forums
Forum Replies Created
-
pretty much EXACTLY what I was looking for.
Thank you so much for your help.. I also now see how I should submit code.. Sorry for being a n00b.
Sure! I have removed the text from the window section from the demo app code as I am assuming I would just get a blank window popped up if my attempts were successful at making this work.
————
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>cons0le – web.</title>
<link rel=”stylesheet” href=”./jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”./jqwidgets/styles/jqx.dark.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxpanel.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.pager.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxwindow.js”></script><script type=”text/javascript” src=”./scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var url = “./customers.xml”;// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘Country’, map: ‘m\\:properties>d\\:Country’, type: ‘string’ },
{ name: ‘Country_Code’, map: ‘m\\:properties>d\\:Country_Code’, type: ‘string’ },
{ name: ‘NPA’, map: ‘m\\:properties>d\\:NPA’, type: ‘string’ },
{ name: ‘Prefix’, map: ‘m\\:properties>d\\:Prefix’, type: ‘string’ },
{ name: ‘Suffix’, map: ‘m\\:properties>d\\:Suffix’, type: ‘string’ },
{ name: ‘Extension’, map: ‘m\\:properties>d\\:Extension’, type: ‘string’ },
{ name: ‘Category’, map: ‘m\\:properties>d\\:Category’, type: ‘string’ },
{ name: ‘Passphrase’, map: ‘m\\:properties>d\\:Passphrase’, type: ‘string’ },
{ name: ‘Code’, map: ‘m\\:properties>d\\:Code’, type: ‘string’ },
{ name: ‘Short_Description’, map: ‘m\\:properties>d\\:Short_Description’, type: ‘string’ }
],
root: “entry”,
record: “content”,
id: ‘m\\:properties>d\\:ItemID’,
url: url,};
var dataAdapter = new $.jqx.dataAdapter(source);// Create jqxGrid
$(“#grid”).jqxGrid(
{
theme: ‘dark’,
width: 1368, //getWidth(‘Grid’),
height: 600,
source: dataAdapter,
sortable: true,
filterable: true,
altrows: true,
columnsresize: true,
selectionmode: ‘singlerow’,
pageable:true,
columns: [
{ text: ‘Country’, datafield: ‘Country’, width: 120 },
{ text: ‘Country Code’, datafield: ‘Country_Code’, width: 120 },
{ text: ‘NPA’, datafield: ‘NPA’, width: 80 },
{ text: ‘Prefix’, datafield: ‘Prefix’, width: 60 },
{ text: ‘Suffix’, datafield: ‘Suffix’, width: 60 },
{ text: ‘Extension’, datafield: ‘Ext.’, width: 90 },
{ text: ‘Category’, datafield: ‘Category’, width: 100 },
{ text: ‘Passphrase’, datafield: ‘Passphrase’, width: 120 },
{ text: ‘Code’, datafield: ‘Code’, width: 80 },
{ text: ‘Short Description’, datafield: ‘Short_Description’, width: 538 }
]
});$(‘#grid’).on(‘rowdoubleclick’, function (event)
{
//alert(“Row with bound index: ” + event.args.rowindex +” has been clicked.s”);
//Creating the demo windowfunction _createWindow() {
var jqxWidget = $(‘#jqxWidget’);
var offset = jqxWidget.offset();$(‘#window’).jqxWindow({
position: { x: offset.left + 50, y: offset.top + 50} ,
showCollapseButton: true, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500,
initContent: function () {
$(‘#tab’).jqxTabs({ height: ‘100%’, width: ‘100%’ });
$(‘#window’).jqxWindow(‘focus’);
}
});
};return {
config: {
dragArea: null
},
init: function () {
//Adding jqxWindow
_createWindow();
}
};
} ());$(document).ready(function () {
//Initializing the demo
basicDemo.init();
});
});</script>
</head>
<body background=”./images/bg3.jpg” class=’default’>
<center>
<br><br>
<div id=’content’>
<script type=”text/javascript”>
$(document).ready(function () {
// Create a jqxMenu
$(“#jqxMenu”).jqxMenu({ width: 1368, height: 30});
});
</script>
<div id=’jqxWidget’>
<div id=’jqxMenu’></div>
</div><br><br>
<div id=”grid”>
</div>
</div></center>
</body>
</html>