jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Error importing CSV data to grid

Tagged: ,

This topic contains 2 replies, has 1 voice, and was last updated by  Raj Desai 9 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Error importing CSV data to grid Posts
  • July 1, 2015 at 5:32 pm Error importing CSV data to grid #73262

    Raj Desai
    Participant

    Hi Team,

    I saw this link posted by JQWidgets team about CSVdatabinding. In this link, if we give CSV data in the form of text file as URL, we get the data displayed in grid format on our HTML page.

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/bindingtocsv.htm?arctic

    I tried working on that. So heres the code. This is my csv data in text file. (grid.txt)

    Order,Id,Comment,Id Type,Ub Action,Ub Factor?,Lb Action,Lb Factor?
    1,345,Do this,Country,Act on this by 4pm,TRUE,Latest by 10pm please,FALSE
    2,475,Dont do this,Industry,Act on this by 1pm,TRUE,Latest by 10pm please,TRUE
    3,87655,Do this urgently,Sector,Act on this by 12am,TRUE,Latest by 10pm please,FALSE
    4,3537,Dont edit pls,Sedol,Act on this by 8pm,FALSE,Latest by 10pm please,FALSE

    Here is my HTML code

    <html>
    <head>
    <script src=”http://apmqa.mcm.com/plugins/jquery-1.9.1/jquery-1.9.1.js”></script>
    <script src=”http://apmqa.mcm.com/plugins/bootstrap-3.1.1-dist/js/bootstrap.min.js”></script>

    <link rel=”stylesheet” href=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/demos.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    var url = ‘http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/grid.txt’;

    var source =
    {
    datatype: “csv”,
    datafields: [
    { name: ‘Order’, type: ‘number’ },
    { name: ‘Id’, type: ‘number’ },
    { name: ‘Comment’, type: ‘string’ },
    { name: ‘Id Type’, type: ‘string’ },
    { name: ‘Ub Action’, type: ‘string’ },
    { name: ‘Ub Factor?’, type: ‘bool’ },
    { name: ‘Lb Action’, type: ‘string’ },
    { name: ‘Lb Factor?’, type: ‘bool’ }
    ],
    url: url
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    source: dataAdapter,
    columnsresize: true,
    columns: [
    { text: ‘Order’, columntype: ‘textbox’, datafield: ‘Order’, width: 120 },
    { text: ‘Id’, columntype: ‘textbox’, datafield: ‘Id’, width: 120 },
    { text: ‘Comment’, columntype: ‘textbox’, datafield: ‘Comment’, width: 200 },
    { text: ‘Id Type’, columntype: ‘dropdownlist’, datafield: ‘Id Type’, width: 150 },
    { text: ‘Ub Action’, columntype: ‘textbox’, datafield: ‘Ub Action’, width: 120 },
    { text: ‘Ub Factor?’, columntype: ‘checkbox’, datafield: ‘Ub Factor?’, width: 70 },
    { text: ‘Lb Action’, columntype: ‘textbox’, datafield: ‘Lb Action’, width: 120 },
    { text: ‘Lb Factor?’, columntype: ‘checkbox’, datafield: ‘Lb Factor?’, width: 70 }
    ]
    });
    });
    </script>

    <style>
    </style>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’>
    <div id=”jqxgrid”></div>
    </div>
    </body>

    </html>

    The table headers gets displayed on grid but no data gets displayed. The console gives the following error.

    XMLHttpRequest cannot load http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/grid.txt?filtersc…pagenum=0&pagesize=10&recordstartindex=0&recordendindex=18&_=1435771308746. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

    Have i missed anything ??? Also, the link provided by you has the following code.
    var url = ‘../sampledata/nasdaq_vs_sp500.txt’;

    We cannot access this link ? i wanted to see if i have displayed my csv data right. Please let me know where i have gone wrong. It would be a very great help to me.

    July 1, 2015 at 5:37 pm Error importing CSV data to grid #73263

    Raj Desai
    Participant

    I also copied the following demos.js file and saved it on my local machine
    http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js

    and provided below link where i saved the demos.js
    <script type=”text/javascript” src=”http://apmqa.mcm.com/plugins/jqwidgets-ver3.5.0/jqwidgets/demos.js”></script>

    July 1, 2015 at 6:02 pm Error importing CSV data to grid #73264

    Raj Desai
    Participant

    I get it. I should specifiy the intranet server link while accessing the HTML file rather than just clicking on that file from my local machine. how dumb. Thanks anyways guys.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.