Author Topic: First try at remote data  (Read 2360 times)

glt

  • Newbie
  • *
  • Posts: 8
    • View Profile
First try at remote data
« on: July 21, 2018, 05:39:55 am »
Hi,

I am trying to get a first try at using location: "remote" and having no success.
I see in Fiddler that the call to the supplied URL for the data is made and a valid
JSON string is returned, but PQGrid always says, "No Rows to display".
I must be doing something dumb, but I just don't see it. Code is below.

Many thanks for any help.
Cheers,
Geoff


Returned JSon:
[{"fltrID":68247,"prj_code":"148806","days_actual":263,"days_actual_formatted":"263","days_review_threshold":8.77,"days_inactivity_threshold":2.92,"cost_actual":68.30,"cost_review_threshold":0.034150,"alertStatus":2}]


HTML/Javascript:
<div id="grid_array"></div>



<script>
        $(function () {
            //Initialize
            var oSummaryData = {
                recIndx: "fltrID", //primary key
                location: "remote",
                sorting: "local",
                dataType: "JSON",
                method: "GET",
                url: "/PQGridPOC/PQGridPOC/Home/PQGridDataSource",
                getData: function (response) {
                    return { data: response.data };
                }
            };

            var obj = {};
            obj.width = 700;
            obj.height = 400;
            obj.colModel = [
                { title: "fltrID", dataIndx: 0 },
                { title: "prj", dataIndx: 1 },
                { title: "code", dataIndx: 2 },
                { title: "days", dataIndx: 3 },
                { title: "actual", dataIndx: 4 },
                { title: "days_actual_formatted", dataIndx: 5 },
                { title: "days_review_threshold", dataIndx: 6 },
                { title: "days_inactivity_threshold", dataIndx: 7 },
                { title: "cost_actual", dataIndx: 8 },
                { title: "cost_review_threshold", dataIndx: 9 },
                { title: "alertStatus", dataIndx: 10 },
            ];

            obj.dataModel = oSummaryData;
            $("#grid_array").pqGrid(obj);
        });
</script>

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: First try at remote data
« Reply #1 on: July 23, 2018, 01:13:29 pm »
dataIndx mentioned in colModel should match with field names in data.

glt

  • Newbie
  • *
  • Posts: 8
    • View Profile
Re: First try at remote data
« Reply #2 on: July 24, 2018, 12:31:50 am »
Hi PQ.

I cleaned things up and got it working.
The main thing that was causing me grief was that the returned JSon didn't have a parent
name, so the getData function needed to be just:
return { data: response };
instead of:
return { data: response.data };

Thanks for the help :)

Cheers,
Geoff

Working code below:
Code: [Select]
<script>
        $(function () {
            //Initialize
            var oSummary = {
                title: "Grid From JSON",
                resizable: true
            };
           
            oSummary.colModel = [
                { title: "fltrID", dataType: "integer", dataIndx: "fltrID" },
                { title: "prj_code", dataType: "string", dataIndx: "prj_code" },
                { title: "days_actual", dataType: "integer", dataIndx: "days_actual" },
                { title: "days_actual_formatted", dataType: "integer", dataIndx: "days_actual_formatted" },
                { title: "days_review_threshold", dataType: "integer", dataIndx: "days_review_threshold" },
                { title: "days_inactivity_threshold", dataType: "integer", dataIndx: "days_inactivity_threshold" },
                { title: "cost_actual", dataType: "float", dataIndx: "cost_actual" },
                { title: "cost_review_threshold", dataType: "float", dataIndx: "cost_review_threshold" },
                { title: "alertStatus", dataType: "string", dataIndx: "alertStatus" },
            ];

            oSummary.dataModel = {
                dataType: "JSON",
                location: "remote",
                method: "GET",
                url: "/PQGridPOC/PQGridPOC/Home/PQGridDataSource",
                getData: function (response) {
                    return { data: response };
                }
            };

            $("#grid_array").pqGrid(oSummary);
        });
</script>