Click row, open window with row details? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: events, grid, window

This topic contains 4 replies, has 2 voices, and was last updated by mwilliams0156 6 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Click row, open window with row details? Posts
May 9, 2018 at 2:37 am Click row, open window with row details? #100111

mwilliams0156
Participant

Wasn’t sure if I should post this under “window” or “grid”…

I have successfully setup a grid that loads data from XML – which I will likely convert to CSV instead as I see no benefit of using XML… Anyway, my grid shows only part of the data of the “record..” ..

I have been able to create a double click event that captures the row and index in an alert popup, but even after dumbing down the window demo code I still can’t get the code to fire on the double click event much less grab data from the currently selected row.

Any ideas? I’m a hobbyist developer and not terribly seasoned so I apologize if my problem is rudimentary, but would appreciate any help..

Great widgets by the way!!! I was playing around with Telerik, and I think I like this better – especially since its at no cost for a hobbyist developer like myself!

Mark

May 9, 2018 at 7:44 am Click row, open window with row details? #100119

Martin
Participant

Hello Mark,

Can you, please, send your code so I can take a look at it?
Thank you!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

May 9, 2018 at 12:03 pm Click row, open window with row details? #100137
mwilliams0156
Participant
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 window

function _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’>
- . home
- . entry
- . utilities
- . links
- . communicate
</div>
</div>

<br><br>

<div id=”grid”>
</div>
</div>

</center>
</body>
</html>
May 10, 2018 at 8:07 am Click row, open window with row details? #100145

Martin
Participant

Hello Mark,

I created a simpler demo for you: Demo
I hope that this is what you are trying to achieve.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

May 10, 2018 at 11:14 pm Click row, open window with row details? #100158

mwilliams0156
Participant

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. 🙂
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.