Messages

1

Help for ParamQuery Grid (free version) / Re: Rpp options - only page refresh loads data, not on page load.

« on: September 07, 2014, 08:55:12 pm »

I appear to have fixed this.  It was the sort Index.  It works without using sortIndx or selecting a column heading.  All data loads on page load now.

Code: [Select]

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

2

Help for ParamQuery Grid (free version) / Re: Rpp options - only page refresh loads data, not on page load.

« on: September 05, 2014, 12:48:51 am »

Hi,

please see the following video.  The GET request just keeps looping: http://screencast.com/t/wMcj4Qbvt

3

Help for ParamQuery Grid (free version) / Re: Rpp options - only page refresh loads data, not on page load.

« on: September 02, 2014, 05:38:42 pm »

Can anybody advise about this please?

4

Help for ParamQuery Grid (free version) / Rpp options - only page refresh loads data, not on page load.

« on: September 01, 2014, 10:24:22 pm »

Hi, I have a working grid with my JSON data being read from a remote .json file.  The issue I have is that the data doesnt load (display) on page load, it only loads (displays) after selecting an Rpp option from the drop down.  Can anyone suggest how I would go about displaying the data on page load...does the initial Rpp option need to automatically refresh or something?

            rPP: 20,
            rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
            curPage: 1,

Here is my complete code:

Code: [Select]

<script type="text/javascript">
    $(function () {
        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" },

        ];

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

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

    <div style="margin:10px" id="grid_paging"></div>

5

Help for ParamQuery Grid (free version) / Re: dataModel - reading data from external file

« on: August 24, 2014, 03:40:46 am »

Working now. Thats great. Thanks.

6

Help for ParamQuery Grid (free version) / Re: dataModel - reading data from external file

« on: August 22, 2014, 12:58:07 am »

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>

7

Help for ParamQuery Grid (free version) / Re: dataModel - reading data from external file

« on: August 19, 2014, 09:18:17 pm »

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>

8

Help for ParamQuery Grid (free version) / Re: dataModel - reading data from external file

« on: August 19, 2014, 07:55:23 pm »

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
  }
]

9

Help for ParamQuery Grid (free version) / dataModel - reading data from external file

« on: August 14, 2014, 09:16:08 pm »

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>

10

Help for ParamQuery Grid (free version) / Re: getting data from asp.net page's web method or web service

« on: August 08, 2014, 06:14:42 pm »

Hi, I have been looking for a C# ASP.Net solution for pqgrid and Ive found the test download very useful so thanks for that.

What I need to do though is pull in the data from a locally hosted .json file.  For example, this data in the code behind would be populated via the locally hosted file.  Any help on this appreciated as im a front end developer and fairly new to C#.

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet=true)]       
        public static List<book> getData()
        {
            var list = new List<book>
                {
                new book{Model = "A1 HATCHBACK 1.2 TFSI S Line", Repayments = "£209", CAPID = "1234"},
                new book{Model = "A1 HATCHBACK 1.2 TFSI Sport", Repayments = "£189", CAPID = "5678" },
                new book{Model = "A1 HATCHBACK 1.4 TFSI 140 S Line", Repayments = "£229", CAPID = "9101112" },
                new book{Model = "A3 HATCHBACK 1.2 TFSI 110 S Line", Repayments = "£219", CAPID = "131415" },
                new book{Model = "A3 HATCHBACK 1.2 TFSI 110 S Line S Tronic", Repayments = "£229", CAPID = "161718" }
                };
            return list;