jQuery UI Widgets Forums Grid Grid doesn't get loaded when there is no data

This topic contains 8 replies, has 3 voices, and was last updated by  Peter Stoev 10 years, 10 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Hi,

    I came across an issue where the grid doesn’t get loaded when the data (i.e. array, json) supplied to it is empty. I tested this on one of the demo files of jqxgrid, and i got the same result. Following is the error message i get on the error console,

    Error: d.datafield is undefined
    Source File: file:///C:/jqwidgets-ver1.6/jqwidgets/jqxgrid.filter.js
    Line: 6

    Is there a workaround for this?

    Amila Domingo


    Peter Stoev
    Keymaster

    Hi Amila,

    Thank you for the feedback.

    I have tested the reported issue and I have reproduced it. When you bind the Grid to an empty data source and apply filtering to the data, the grid will not be loaded. The issue can be reproduced with loca, json and xml data. I will create a new work item regarding it and we will fix it in the next release which is expected in the beginning of the next week. I will update this thread when the new version is uploaded.

    Best Regards,
    Peter Stoev

    http://www.jqwidgets.com
    jQWidgets Team


    Peter Stoev
    Keymaster

    Hi Amila,

    I am happy to tell you that the new version has been released. You can download it from here: http://www.jqwidgets.com/download.

    Best Regards,
    Peter Stoev

    http://www.jqwidgets.com
    jQWidgets Team


    sadranyi
    Member

    i also have problems loading my xml data it wont show in the grid
    this is the code

    js file
    ————————————————————————–
    var theme = getTheme();
    var repurl = “../data/reps.xml”;

    // Preparing Data
    var repSource =
    {
    datatype: “xml”,
    datafields:
    [
    { name: ‘RepName’ },
    { name: ‘RepCode’ },
    { name: ‘Branch’ },
    { name: ‘CRDNumber’ },
    { name: ‘NumberofAccounts’ },
    { name: ‘NumberofTrades’ },
    { name: ‘NumberofCancels’ },
    { name: ‘AverageCommission’ },
    { name: ‘AveragePH’ },
    { name: ‘AverageCOA’ },
    { name: ‘AverageTurnover’ }
    ],
    root: “Reps”,
    record: “Rep”,
    id: “RepID”,
    url: repurl
    };

    var repDataAdapter = new $.jqx.dataAdapter(repSource, {
    downloadComplete: function (data, status, xhr) { },
    loadComplete: function (data) {},
    loadError: function (xhr, status, error) { }
    });

    // Initialize Grid
    $(“#repGrid”).jqxGrid(
    {
    width: 760,
    source: repDataAdapter,
    theme: theme,
    //pageable: true,
    //autoheight: true,
    //sortable: true,
    //altrows: true,
    //selectionmode: ‘singlecell’,
    //enabletooltips: true,
    columnsresize: true,
    columns:
    [
    { text: ‘Rep Name’, datafield: ‘RepName’, width: 100 },
    { text: ‘Rep Code’, datafield: ‘RepCode’, width: 100 },
    { text: ‘Branch’, datafield: ‘Branch’, width: 100 },
    { text: ‘CRD Number’, datafield: ‘CRDNumber’, width: 100, cellsalign: ‘right’ },
    { text: ‘No. of Accounts’, datafield: ‘NumberofAccounts’, width: 120, cellsalign: ‘right’},
    { text: ‘No. of Trades’, datafield: ‘NumberofTrades’, width: 110, cellsalign: ‘right’},
    { text: ‘No. of Cancels’, datafield: ‘NumberofCancels’, width: 120, cellsalign: ‘right’},
    { text: ‘Avg Comm.’, datafield: ‘AverageCommission’, width: 100, cellsalign: ‘right’},
    { text: ‘Avg P & H’, datafield: ‘AveragePH’, width: 100, cellsalign: ‘right’},
    { text: ‘Avg COA’, datafield: ‘AverageCOA’, width: 100, cellsalign: ‘right’},
    { text: ‘Avg Turnover’, datafield: ‘AverageTurnover’, width: 120, cellsalign: ‘right’},
    ]
    });
    ————————————

    xml file
    —————–

    Smith, Paul
    ABC
    Wall ST
    21378945
    50
    1050
    3
    539
    45
    0.04
    2.2

    Ballas, Peter
    BCA
    Wall ST
    56123987
    85
    1785
    5
    85.47000000000001
    30
    0.055
    3.7

    Barnet, Joe
    GRP
    Wall ST
    49638251
    92
    1932
    6
    155.05
    30
    0.037
    5.4

    Smith, Bill
    123
    Wall ST
    21654654
    110
    2310
    7
    93.10000000000001
    50
    0.08
    7.8

    Hutchens, Dan
    WZD
    Wall ST
    51651651
    200
    4200
    12
    408.9225
    30
    0.05
    6

    Lee, Eric
    BE4
    Wall ST
    66651566
    105
    2205
    7
    3402.0000000000005
    45
    0.021
    4.1

    Lord, Dustin
    DFH
    Wall ST
    77656565
    66
    1386
    4
    11690.000000000002
    30
    0.01
    2.9

    Abate, John
    SE7
    Wall ST
    65654654
    20
    420
    1
    753.9000000000001
    50
    0.025
    3.4

    Rupp, Mike
    883
    Wall ST
    93321986
    77
    1617
    5
    222.40750000000003
    50
    0.06
    5.7


    Peter Stoev
    Keymaster

    Hi sadranyi,

    Could you post a valid .xml file because the provided data is not in xml format? I also suggest you to take a look at this help topic which shows how to load XML into the Grid.

    Looking forward to your reply.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    sadranyi
    Member

    how can i send the xml without the editor striping it
    i have tried just about everything u listed in the help topic but still having the same issue.

    i really need it for i presentation that will lead to purchase

    • This reply was modified 10 years, 10 months ago by  sadranyi.

    Peter Stoev
    Keymaster

    Hi sadranyi,

    I have been able to show the data in the Grid using the following code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var repurl = "reps.xml";
    // Preparing Data
    var repSource =
    {
    datatype: "xml",
    datafields:
    [
    { name: 'RepName' },
    { name: 'RepCode' },
    { name: 'Branch' },
    { name: 'CRDNumber' },
    { name: 'NumberofAccounts' },
    { name: 'NumberofTrades' },
    { name: 'NumberofCancels' },
    { name: 'AverageCommission' },
    { name: 'AveragePH' },
    { name: 'AverageCOA' },
    { name: 'AverageTurnover' }
    ],
    root: 'Reps',
    record: 'Rep',
    id: 'RepID',
    url: repurl
    };
    var repDataAdapter = new $.jqx.dataAdapter(repSource, {
    downloadComplete: function (data, status, xhr) { },
    loadComplete: function (data) {},
    loadError: function (xhr, status, error) { }
    });
    // Initialize Grid
    $("#jqxgrid").jqxGrid(
    {
    width: 760,
    source: repDataAdapter,
    columns:
    [
    { text: 'Rep Name', datafield: 'RepName', width: 100 },
    { text: 'Rep Code', datafield: 'RepCode', width: 100 },
    { text: 'Branch', datafield: 'Branch', width: 100 },
    { text: 'CRD Number', datafield: 'CRDNumber', width: 100, cellsalign: 'right' },
    { text: 'No. of Accounts', datafield: 'NumberofAccounts', width: 120, cellsalign: 'right'},
    { text: 'No. of Trades', datafield: 'NumberofTrades', width: 110, cellsalign: 'right'},
    { text: 'No. of Cancels', datafield: 'NumberofCancels', width: 120, cellsalign: 'right'},
    { text: 'Avg Comm.', datafield: 'AverageCommission', width: 100, cellsalign: 'right'},
    { text: 'Avg P & H', datafield: 'AveragePH', width: 100, cellsalign: 'right'},
    { text: 'Avg COA', datafield: 'AverageCOA', width: 100, cellsalign: 'right'},
    { text: 'Avg Turnover', datafield: 'AverageTurnover', width: 120, cellsalign: 'right'}
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
    </div>
    </body>
    </html>

    xml file:

    <?xml version="1.0" encoding="UTF-8"?>
    <Reps>
    <Rep RepID="1">
    <RepName>Smith, Paul</RepName>
    <RepCode>ABC</RepCode>
    <Branch>Wall ST</Branch>
    <CRDNumber>21378945</CRDNumber>
    <NumberofAccounts>50</NumberofAccounts>
    <NumberofTrades>1050</NumberofTrades>
    <NumberofCancels>3</NumberofCancels>
    <AverageCommission>539</AverageCommission>
    <AveragePH>45</AveragePH>
    <AverageCOA>0.04</AverageCOA>
    <AverageTurnover>2.2</AverageTurnover>
    </Rep>
    <Rep RepID="2">
    <RepName>Ballas, Peter</RepName>
    <RepCode>BCA</RepCode>
    <Branch>Wall ST</Branch>
    <CRDNumber>56123987</CRDNumber>
    <NumberofAccounts>85</NumberofAccounts>
    <NumberofTrades>1785</NumberofTrades>
    <NumberofCancels>5</NumberofCancels>
    <AverageCommission>85.47000000000001</AverageCommission>
    <AveragePH>30</AveragePH>
    <AverageCOA>0.055</AverageCOA>
    <AverageTurnover>3.7</AverageTurnover>
    </Rep>
    <Rep RepID="3">
    <RepName>Barnet, Joe</RepName>
    <RepCode>GRP</RepCode>
    <Branch>Wall ST</Branch>
    <CRDNumber>49638251</CRDNumber>
    <NumberofAccounts>92</NumberofAccounts>
    <NumberofTrades>1932</NumberofTrades>
    <NumberofCancels>6</NumberofCancels>
    <AverageCommission>155.05</AverageCommission>
    <AveragePH>30</AveragePH>
    <AverageCOA>0.037</AverageCOA>
    <AverageTurnover>5.4</AverageTurnover>
    </Rep>
    <Rep RepID="4">
    <RepName>Smith, Bill</RepName>
    <RepCode>123</RepCode>
    <Branch>Wall ST</Branch>
    <CRDNumber>21654654</CRDNumber>
    <NumberofAccounts>110</NumberofAccounts>
    <NumberofTrades>2310</NumberofTrades>
    <NumberofCancels>7</NumberofCancels>
    <AverageCommission>93.10000000000001</AverageCommission>
    <AveragePH>50</AveragePH>
    <AverageCOA>0.08</AverageCOA>
    <AverageTurnover>7.8</AverageTurnover>
    </Rep>
    <Rep RepID="5">
    <RepName>Hutchens, Dan</RepName>
    <RepCode>WZD</RepCode>
    <Branch>Wall ST</Branch>
    <CRDNumber>51651651</CRDNumber>
    <NumberofAccounts>200</NumberofAccounts>
    <NumberofTrades>4200</NumberofTrades>
    <NumberofCancels>12</NumberofCancels>
    <AverageCommission>408.9225</AverageCommission>
    <AveragePH>30</AveragePH>
    <AverageCOA>0.05</AverageCOA>
    <AverageTurnover>6</AverageTurnover>
    </Rep>
    <Rep RepID="6">
    <RepName>Lee, Eric</RepName>
    <RepCode>BE4</RepCode>
    <Branch>Wall ST</Branch>
    <CRDNumber>66651566</CRDNumber>
    <NumberofAccounts>105</NumberofAccounts>
    <NumberofTrades>2205</NumberofTrades>
    <NumberofCancels>7</NumberofCancels>
    <AverageCommission>3402.0000000000005</AverageCommission>
    <AveragePH>45</AveragePH>
    <AverageCOA>0.021</AverageCOA>
    <AverageTurnover>4.1</AverageTurnover>
    </Rep>
    <Rep RepID="7">
    <RepName>Lord, Dustin</RepName>
    <RepCode>DFH</RepCode>
    <Branch>Wall ST</Branch>
    <CRDNumber>77656565</CRDNumber>
    <NumberofAccounts>66</NumberofAccounts>
    <NumberofTrades>1386</NumberofTrades>
    <NumberofCancels>4</NumberofCancels>
    <AverageCommission>11690.000000000002</AverageCommission>
    <AveragePH>30</AveragePH>
    <AverageCOA>0.01</AverageCOA>
    <AverageTurnover>2.9</AverageTurnover>
    </Rep>
    <Rep RepID="8">
    <RepName>Abate, John</RepName>
    <RepCode>SE7</RepCode>
    <Branch>Wall ST</Branch>
    <CRDNumber>65654654</CRDNumber>
    <NumberofAccounts>20</NumberofAccounts>
    <NumberofTrades>420</NumberofTrades>
    <NumberofCancels>1</NumberofCancels>
    <AverageCommission>753.9000000000001</AverageCommission>
    <AveragePH>50</AveragePH>
    <AverageCOA>0.025</AverageCOA>
    <AverageTurnover>3.4</AverageTurnover>
    </Rep>
    <Rep RepID="9">
    <RepName>Rupp, Mike</RepName>
    <RepCode>883</RepCode>
    <Branch>Wall ST</Branch>
    <CRDNumber>93321986</CRDNumber>
    <NumberofAccounts>77</NumberofAccounts>
    <NumberofTrades>1617</NumberofTrades>
    <NumberofCancels>5</NumberofCancels>
    <AverageCommission>222.40750000000003</AverageCommission>
    <AveragePH>50</AveragePH>
    <AverageCOA>0.06</AverageCOA>
    <AverageTurnover>5.7</AverageTurnover>
    </Rep>
    </Reps>

    The XML file is at the same folder where the .htm file is. I am also using jQWidgets ver. 1.8.

    To format HTML, JavaScript or any other code, use the white button before the text color button in the toolbar above the Editor. Select the text for formatting and click the button.

    Hope this helps you.

    Best Regards,
    Peter Stoev

    http://www.jqwidgets.com
    jQWidgets Team


    sadranyi
    Member

    i still have a blank grid
    when i download the zip file which folders should i include in my project ?


    Peter Stoev
    Keymaster

    Hi sadranyi,

    I prepared online demo from your xml and using the code I posted in my last post. Here’s the demo link: Online Demo

    Download Project: bindtoxml.zip.

    I suppose that the url to your xml data was incorrect.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.