data won't load into grid if called from Ajax

[maui_uku]

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.

[maui_uku]

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!

[paramvir]

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

[maui_uku]

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