dataModel - reading data from external file

[stelco]

Hi, I have the following txt file and javascript.  The first part of the script loops and displays the contents of the vehicles.txt file.  The second part of the script shows the embedded JSON data in the pqgrid.  What Im trying to do is combine the 2 so that the external vehicles.txt file is added to the pqgrid.  Im aware that this needs to be added as a variable:

        obj.dataModel = { data: data };
        // obj.dataModel = { data: url }; // read in the data from the data in the file (vehicles.txt)

Ideally I would like to convert the txt file to json (it is actually a valid json format although my script will only read it as txt so I changed the file extension), parse it and add to datamodel.

Hope this makes sense.


vehicles.txt

[ 
{
    "Model":"TT ROADSTER SPECIAL EDITIONS 2.0 TDI Quattro Black Edition S Tronic",
    "Repayments":"£459",
    "Term":"",
    "CapID":null
  },
  {
    "Model":"TT ROADSTER SPECIAL EDITIONS 2.0T FSI Black Edition ",
    "Repayments":"£359",
    "Term":"",
    "CapID":null
  },
  {
    "Model":"TT ROADSTER SPECIAL EDITIONS 2.0T FSI Black Edition S Tronic",
    "Repayments":"£379",
    "Term":"",
    "CapID":null
  },
  {
    "Model":"TT ROADSTER SPECIAL EDITIONS 2.0T FSI Quattro Black Edition S Tronic",
    "Repayments":"£399",
    "Term":"",
    "CapID":null
  }
]



<script type="text/javascript">

    $(function () {
            var data = [
    ['A1 HATCHBACK 1.2 TFSI S Line ', '£209'],
    ['A1 HATCHBACK 1.2 TFSI Sport ', '£189'],
    ['A1 HATCHBACK 1.4 TFSI 140 S Line ', '£229'],
    ['A1 HATCHBACK 1.4 TFSI 140 S Line S Tronic', '£239'],
            ];

        var xmlhttp = new XMLHttpRequest();
        var url = "js/vehicles.txt";

        xmlhttp.onreadystatechange = function (json) {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var myArr = JSON.parse(xmlhttp.responseText);
                myFunction(myArr);
            }
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        function myFunction(arr) {
           var out = "";
            var i;
        for (i = 0; i < arr.length; i++) {
            out += arr.Model + '&nbsp&nbsp&nbsp&nbsp'
               + arr.Repayments + '&nbsp&nbsp&nbsp&nbsp'
               + arr.Term + '&nbsp&nbsp&nbsp&nbsp'
               + arr.CapID + '<br>';
        }
        document.getElementById("id01").innerHTML = out;
        }



        var obj = { width: 750, height: 600, title: "Dynamic ChoiceList", resizable: true, draggable: true };
        obj.colModel = [

        { title: "Model", width: 300, dataType: "string" },
        { title: "Repayments", width: 100, dataType: "integer", align: "right" },
        { title: "Term", width: 100, dataType: "integer", align: "right" },
        { title: "CapID", width: 100, dataType: "integer", align: "right" }

        ];
        obj.dataModel = { data: data };
        // obj.dataModel = { data: url }; // read in the data from the data in the file (vehicles.txt or vehicles.json)

        $("#grid_array").pqGrid(obj);

    });

</script>

   <!--display without qgrid!-->   

        <div id="id01"></div>

    <!--display with pqgrid!-->

        <div id="grid_array"></div>

[paramvir]

string can be converted into JSON with JSON.parse function.

or

Remote data can also be loaded in the grid from a remote url (static JSON file as in your case or script ) with dataModel.getUrl and dataModel.getData callbacks.

Example: http://paramquery.com/demos/paging

[stelco]

Hi, thanks for this.  Ive amended the example code and the column headings and sorting is working.  The external data isnt loading though.  Below is my code with the external JSON format at the bottom.  Thanks.

Edit: Please note, I am using ASP.Net aspx (web forms) and not HTML. Would this make any difference to the callbacks?

<script type="text/javascript">
$(function () {
    var colM = [

        { title: "Model", width: 300, dataType: "string" },
        { title: "Repayments", width: 100, dataType: "integer", align: "right" },
        { title: "Term", width: 100, dataType: "integer", align: "right" },
        { title: "CapID", width: 100, dataType: "integer", align: "right" },

    ];
    var dataModel = {
        location: "remote",
        sorting: "remote",
        paging: "remote",
        dataType: "JSON",
        method: "GET",
        curPage: 1,
        rPP: 20,
        sortIndx: 2,
        sortDir: "up",
        rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
        getUrl: function () {
            var sortDir = (this.sortDir == "up") ? "asc" : "desc";
            var sort = ['Model', 'Repayments', 'Term', 'CapID'];
            return { url: "js/vehicles.json", data: "cur_page=" + this.curPage + "&records_per_page=" +
                this.rPP + "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir };
        },
        getData: function (dataJSON) {
            //var data=               
            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };               
        }
    }
 
    var grid1 = $("div#grid_paging").pqGrid({ width: 900, height: 400,
        dataModel: dataModel,
        colModel: colM,
        title:"Shipping Orders",
        resizable: true,           
        columnBorders: true,
        freezeCols: 2
    });
});
</script>


js/vehicles.json

[
  {
    "Model":"A1 HATCHBACK 1.2 TFSI S Line ",
    "Repayments":"£209",
    "Term":"6 Month",
    "CapID":1234
  },
  {
    "Model":"A1 HATCHBACK 1.2 TFSI Sport ",
    "Repayments":"£189",
    "Term":"6 Month",
    "CapID":5678
  },
  {
    "Model":"A1 HATCHBACK 1.4 TFSI 140 S Line ",
    "Repayments":"£229",
    "Term":"12 Month",
    "CapID":5678
  },
  {
    "Model":"A1 HATCHBACK 1.4 TFSI 140 S Line S Tronic",
    "Repayments":"£239",
    "Term":"6 Month",
    "CapID":5678
  }
]

[paramvir]

your dataModel should be something like this

Code: [Select]

var dataModel = {
        location: "remote",
        sorting: "local",
        paging: "local",
        dataType: "JSON",
        method: "GET",
        curPage: 1,
        rPP: 20,
        sortIndx: 2,
        sortDir: "up",
        rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
        getUrl: function () {
            return { url: "js/vehicles.json" }
        },
        getData: function (dataJSON) {
            return { data: dataJSON };               
        }
    }


[stelco]

Tried that but still not pulling the data through.  I have also tried the following code which does pull the external data in.  I need to bring the 2 together if possible so that it works inside pqgrid.  Any help appreciated as our company do plan to upgrade to Pro if I can demonstrate what is possible with the free version.  Thanks.

Has this anything to do with the fact that im working with asp.net (aspx) and client ids?

eg. http://localhost/Cbs.Proteus.Web.Driver/PagesNewCars/DynamicChoiceList.aspx?ClientPageId=953

<script type="text/javascript">
    $(function () {


        var xmlhttp = new XMLHttpRequest();
        var url = "js/vehicles.txt";

        xmlhttp.onreadystatechange = function (json) {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var myArr = JSON.parse(xmlhttp.responseText);
                myFunction(myArr);
            }
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        function myFunction(arr) {
           var out = "";
            var i;
        for (i = 0; i < arr.length; i++) {
            out += arr.Model + '&nbsp&nbsp&nbsp&nbsp'
               + arr.Repayments + '&nbsp&nbsp&nbsp&nbsp'
               + arr.Term + '&nbsp&nbsp&nbsp&nbsp'
               + arr.CapID + '<br>';
        }
        document.getElementById("id01").innerHTML = out;
        }


    });

</script>

[paramvir]

First you should try it with dataModel.location = 'remote'. It uses jQuery $.ajax call which in turn is based upon the same XMLHttpRequest internally as you are trying to do.

There should not be any difference due to ASP.NET as you are simply making call to a static JSON file with a .json extension.

Check whether you get any error in the browser console. Also implement dataModel.error callback to detect any problem. Put an alert/ breakpoint inside dataModel.getData callback and check the format of dataJSON.

[stelco]

Hi,

Thanks for the reply.
Turns out that I needed to add the following MIME type to web.config in my Visual Studio project.

  <system.webServer>
  <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>

Edit:
I am now having problems with the data not displaying.  It loads correctly in browser (Firefox/FireBug - also tested in IE, Chrome) but not displaying.

Please see my screenshot:
http://screencast.com/t/xZy1Uz56fOk

(Ignore the data below the pqgrid, this is a separate script)

This is my complete script:

Code: [Select]

<script type="text/javascript">
    $(function () {
        var colM = [

            { title: "Model", width: 300 },
            { title: "Repayments", width: 100 },
            { title: "Term", width: 100 },
            { title: "CapID", width: 100 },

        ];

        var dataModel = {
            location: "remote",
            sorting: "local",
            paging: "local",
            dataType: "JSON",
            method: "GET",
            curPage: 1,
            rPP: 20,
            sortIndx: 2,
            sortDir: "up",
            rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
            getUrl: function () {
                return { url: "js/vehicles.json" }
            },
            getData: function (dataJSON) {
                return { data: dataJSON };
            }
        }

        var grid1 = $("div#grid_paging").pqGrid(
            {
            width: 700, height: 400,
            dataModel: dataModel,
            colModel: colM,
            title: "Car Models",
            resizable: true,
            columnBorders: true,
            //freezeCols: 2
            });
 
    });
</script>

    <div id="grid_paging"></div>

[paramvir]

you need to include dataIndx (match key names in JSON data) in all columns of colModel.

var colM = [

            { title: "Model", width: 300, dataIndx: "Model" },
            { title: "Repayments", width: 100, dataIndx: "Repayments" },
            { title: "Term", width: 100, dataIndx: "Term" },
            { title: "CapID", width: 100, dataIndx: "CapID" },

        ];

[stelco]

Working now. Thats great. Thanks.