jQuery UI Widgets Forums Grid Click row, open window with row details?

Tagged: , ,

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

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

  • mwilliams0156

    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!



    Hello Mark,

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

    Best Regards,

    jQWidgets Team


    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”>
    <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
    theme: ‘dark’,
    width: 1368, //getWidth(‘Grid’),
    height: 600,
    source: dataAdapter,
    sortable: true,
    filterable: true,
    altrows: true,
    columnsresize: true,
    selectionmode: ‘singlerow’,
    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();

    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%’ });

    return {
    config: {
    dragArea: null
    init: function () {
    //Adding jqxWindow
    } ());

    $(document).ready(function () {
    //Initializing the demo



    <body background=”./images/bg3.jpg” class=’default’>
    <div id=’content’>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // Create a jqxMenu
    $(“#jqxMenu”).jqxMenu({ width: 1368, height: 30});
    <div id=’jqxWidget’>
    <div id=’jqxMenu’>



    <div id=”grid”>



    Hello Mark,

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

    Best Regards,

    jQWidgets Team


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

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

You must be logged in to reply to this topic.