ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: maui_uku on April 18, 2020, 10:59:51 am

Title: data won't load into grid if called from Ajax
Post by: maui_uku on April 18, 2020, 10:59:51 am

Hello,

I need to load data from ajax call where the headers are modified for security.   Here is ajax call that is not modified for security but it does hit the controller and return data:

Code: [Select]

function getJsonData() {
                $.ajax({
                url: "http://localhost:53849/Home/PayrollAnnual/get",
                type: 'GET',
                contentType: 'application/json',
                async: true,
                success: function (dataJSON) {                 
                    return dataJSON;
                }
            });
        }
And here is how I am calling for it.

Code: [Select]

var dataModel = {
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            recIndx: "Id",           
            getUrl: function () {
                return {
                    url: getJsonData()
                }
            },
            getData: function (dataJson) {
                var data =  dataJson ;             
                //expand the first row.
                if (data && data.length) {
                    data[0]['pq_detail'] = { 'show': true };
                }
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
            }
        }
The getJsonData method does get called and I can see data when I debug.  The problem is that it never gets applied to grid.  And the getData part is never hit either.  Timing issue?  Thoughts?

Thank you.

Title: Re: data won't load into grid if called from Ajax
Post by: maui_uku on April 19, 2020, 02:36:03 am

Here is the issue recreated.

https://stackblitz.com/edit/paramquery-demo-ldujly?file=index.js

If you un-comment the "url:" line and comment out the "getUrl" line then it works fine.

How can I get the grid to load data from an ajax call?  I need this for my real app that calls a custom ajax method that adds auth headers.

Please advise.  Thank you!

Title: Re: data won't load into grid if called from Ajax
Post by: paramvir on April 20, 2020, 07:50:03 am

Thanks for sharing stackblitz.

When you want to make your own Ajax call, dataModel.location should be kept local and data should be assigned to dataModel.data directly followed by call to refreshDataAndView()

https://paramquery.com/pro/tutorial#topic-loaddata

Code: [Select]

  function getStockData() {
    $.ajax({
      url:
        "https://financialmodelingprep.com/api/v3/search?query=AA&limit=10&exchange=NASDAQ",
      type: "GET",
      contentType: "application/json",
      async: true,
      success: function(dataJSON) {
        debugger;
        console.log(dataJSON);
        //return dataJSON;
        $gridMain
          .pqGrid("option", "dataModel.data", dataJSON)
          .pqGrid("refreshDataAndView");
      }
    });
  }

https://stackblitz.com/edit/paramquery-demo-9wbj9p?file=index.js

Title: Re: data won't load into grid if called from Ajax
Post by: maui_uku on April 20, 2020, 11:30:36 pm

Thank you for your reply.  That is the fix I was looking for.