Implementing Callback Properly

[Bawzee]

Hi Paramvir,

I am new to the asynchronous nature of javascript and am having difficulty making the grid wait for my data before displaying.  Here are the bullet points for this scenario.  I'm hoping I can get away without providing a lot of code, but I will do whatever is needed to get this particular issue resolved. 

• The app is being created with node.js and Electron.
• I have one function that fetches the data from an SQLite database residing on the local hard drive the app is on.
• I have another function that has all the code to display the grid.

So the code looks something like this:

Code: [Select]

function getGridData(callback) {
    <--the code to get the grid data for the dataModel-->
    callback(gridData);
}

function displayGrid (gridData){
   <--the code to define and display the grid-->
    var $grid = $("#main_grid").pqGrid(obj);
}

getGridData(displayGrid);

When i run the script, a blank grid with no gridData is diplayed.  If I click any button on the grid toolbar that gets the instance of the grid, all of the data is then displayed so I know the callback executed and passed the data to the displayGrid function.  Also if I put a short timeout around the

Code: [Select]

var $grid = $("#main_grid").pqGrid(obj);
statement, the grid is initialize properly with all gridData so again, I know the callback is working and passing the gridData, but the displayGrid is displaying without waiting for the dataModel data.  This is driving me crazy so if you can help me with this, I would be very appreciative.

Thanks,
Bawzee

[paramvir]

How have you assigned data to the grid, in particular what's the value of dataModel.

[Bawzee]

This is my dataModel:

dataModel: { data: gridData, recIndx: 0 }

the gridData is the array that is passed to this function in the callback.  And it works as in it does pass through and will populate the grid, but only displays the data in the grid after a refresh.  Or if I wrap
 

Code: [Select]

var $grid = $("#main_grid").pqGrid(obj);
in a setTimeout function for half a second, the grid will instantiate with all the data.  But I know that is the wrong way to fix this issue so I'd rather not rely on that.

[paramvir]

Do you initially see the message inside the grid: "No rows to display"

If I click any button on the grid toolbar that gets the instance of the grid, all of the data is then displayed so I know the callback executed and passed the data to the displayGrid function.

What's the code for click event listener of the button which makes it display the data?

[Bawzee]

Do you initially see the message inside the grid: "No rows to display"

Yes, I do initially see the message "No rows to display".

This is the code for the click event listener"

Code: [Select]

{ type: 'button', icon: 'ui-icon-plus', label: 'Add Account', listener: function () {
                            var rowData = { 2:  "" }; //empty row
                            $grid.pqGrid("addRow", { rowData: rowData, rowIndxPage: 0 });
                            $grid.pqGrid("setSelection", null);
                            $grid.pqGrid("setSelection", { rowIndxPage: 0, dataIndx: 2 });
                            $grid.pqGrid("editFirstCellInRow", { rowIndxPage: 0 });                       
                        }
}
As soon as I click this button to add a row to the grid, all of the data populates to the grid as well as the blank new row being displayed for editing and saving.

I appreciate your help with this.

[paramvir]

That's strange.

I've created a jsfiddle similar to your description, but I don't see the mentioned issue.

http://jsfiddle.net/frh9yk9w/

Please make the necessary changes in jsfiddle so as to reproduce the issue and share it.

[Bawzee]

When I try to simulate building the dataModel data array with a 3 second timeout and passing it through to the grid, it works properly the way it should work so I'm unable to reproduce the issue this way. 

I'm thinking the issue may be related to way I have coded the function I'm using to call the data as I am new to working with javascript.  This is pretty much the actual code I'm using to build the data array.  I know this may not be a paramquery issue, but I was wondering if you noticed anything in my code that might be causing the issue:

Code: [Select]

function getMyTable(callback){
    const sqlite3 = require('sqlite3').verbose();


        var testoCommerceDB = new sqlite3.Database('app/data/testo_commerce.db');
        var myTable = [];
        var myTableRow = [];

        testoCommerceDB.each("SELECT * FROM myTable_Accounts", function(err, row) {
           
            myTableRow.push(row.myTable_id);
            myTableRow.push(row.myTable_creation_date);
            myTableRow.push(row.domain);
            myTableRow.push(row.myTable_login_url);
            myTableRow.push(row.myTable_username);
            myTableRow.push(row.myTable_password);
            myTableRow.push(row.myTable_ip);
            myTableRow.push(row.whm_account_name);

            myTable.push(myTableRow);
            myTableRow = [];
        });
        testoCommerceDB.close();
        callback(myTable);
       
        console.log(myTable);
}

[paramvir]

Your previous description: 

data is loaded in the grid but displayed only when button is clicked in the toolbar.

, implies that something is wrong with client side code, which I can confirm after seeing it live on jsfiddle.

--------------

Anyway why don't you use the pqgrid recommended way of loading remote data through RESTful API.

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

Example based on remote data ( dataModel.location  = "remote" ): https://paramquery.com/pro/demos/group_rows

You would need to modify your server side method getMyTable() to return JSON string in the format.

{"data":[ 1st row,  2nd row, ...]}

Sample of data returned from server: https://paramquery.com/Content/orders.json?pq_datatype=JSON&_=1486646263700