Problems with loadingMessage and noDataMessage in OnDemandGrid

[MichelleRogers1]

I have a grid that is populating from a query and queryTask using specific parameters.  I want my OnDemandGrid to show a loading message and a no data message, which I understand can be done inside the code for creating the OnDemandGrid.  For some reason when I do it this way, the message for noDataMessage comes into the grid at the bottom of the results when they are there, but nothing comes into the grid while the user is waiting for the data to populate.  Here is the code for my creation of the grid along with the queryTask and query that are associated with it.  I did not add in any css for the messages.

function execute() {
 var queryTask = new QueryTask(window.historicalUrl);
 var timeExtent= new TimeExtent();
 timeExtent.startTime=new Date(dom.byId("date").value);
 timeExtent.endTime=new Date(dom.byId("date2").value);
 var query = new Query();
 query.returnGeometry = false;
 query.outFields = window.historicalOutFields;
 query.text = dom.byId("mydropdown").value;
 query.timeExtent = timeExtent;
 queryTask.execute(query, function(results) {
   var data = [];
   var data = array.map(results.features, function(feature) {
    return {
     //property names used here match those used when creating the dgrid
     "Velocity": feature.attributes[window.historicalOutFields[0]],                  
     "SpeedLimit": feature.attributes[window.historicalOutFields[1]],                  
     "StreetName": feature.attributes[window.historicalOutFields[2]],
     "TimeStamp": feature.attributes[window.historicalOutFields[3]]
    }
   });
  var memStore = new Memory({ data: data });
  //create historical data dgrid
  window.grid3 = new (declare([OnDemandGrid, Selection]))({
   bufferRows: Infinity,
   store:memStore,
   maxRowsPerPage: 5000,
   columns: {         
    "Velocity": { "label": "Speed (MPH)", "formatter": dojoNum.format },
    "SpeedLimit":{"label": "Speed Limit", "formatter":dojoNum.format},
    "StreetName": "On Street",
    "TimeStamp": {"label": "Last Contact", "formatter": formatTimestamp}
   },
   loadingMessage: "Loading data...",
   noDataMessage: "No results found."
  }, "grid3");
  grid3.set("sort", [{attribute:"TimeStamp", descending:true}]);
  //window.grid3.set("store", memStore);
 });
}

Any help is much appreciated, thanks!

[JonathanUihlein]

I have dealt with this before and unfortunately, both loadingMessage and noDataMessage are a bit vague.

According to the dgrid documentation:

loadingMessage
An optional message to be displayed in the loading node which appears when a new page of results is requested.

noDataMessage
An optional message to be displayed when a query yields no results.

It looks like loadingMessage will only trigger while the grid waits for new data to render and not while the data is loading.
Since you are using an onDemandGrid, that will only happen if you scroll down really fast when using a gigantic dataset.

It also looks like noDataMessage only displays when using a query with your dgrid, and that query returns null.
However, if you set a query on the dgrid before your data is loaded, the noDataMessage will display.

With this in mind, if you want to have a true loading indicator, you will have to use a combination of JS and CSS. This is easier than it sounds. I said earlier that the noDataMessage will show if you apply a query to your dgrid before the data is loaded. You can use this to your advantage. You can treat noDataMessage as a placeholder for your loading message (or set it to "" if you are going to use an image gif). The noDataMessage is contained in the following div:

<div class="dgrid-no-data"></div>

You can modify this div to be your loading indicator container.

This is one I use on a personal site:

.dgrid-no-data {
    background-image: url("../images/loaders/loading_blue.gif");
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    text-align: center;
    width: 100%;


}

I've attached the image I use.

***
Off topic but I wanted to make sure you set the idProperty on your store (the unique ID) so that dgrid can properly sort and query your data set.
NOTE: the default value of idProperty is "id" so if that happens to be your uid field, then you can ignore this.

var memStore = new Memory({ data: data, idProperty: "UNIQUE_ID_FIELD_GOES_HERE"});

Hope this helps, even if not exactly what you expected.

[MichelleRogers1]

I have dealt with this before and unfortunately, both loadingMessage and noDataMessage are a bit vague.

According to the dgrid documentation:

loadingMessage
An optional message to be displayed in the loading node which appears when a new page of results is requested.

noDataMessage
An optional message to be displayed when a query yields no results.

It looks like loadingMessage will only trigger while the grid waits for new data to render and not while the data is loading.
Since you are using an onDemandGrid, that will only happen if you scroll down really fast when using a gigantic dataset.

It also looks like noDataMessage only displays when using a query with your dgrid, and that query returns null.
However, if you set a query on the dgrid before your data is loaded, the noDataMessage will display.

With this in mind, if you want to have a true loading indicator, you will have to use a combination of JS and CSS. This is easier than it sounds. I said earlier that the noDataMessage will show if you apply a query to your dgrid before the data is loaded. You can use this to your advantage. You can treat noDataMessage as a placeholder for your loading message (or set it to "" if you are going to use an image gif). The noDataMessage is contained in the following div:

<div class="dgrid-no-data"></div>

You can modify this div to be your loading indicator container.

This is one I use on a personal site:

.dgrid-no-data {
    background-image: url("../images/loaders/loading_blue.gif");
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    text-align: center;
    width: 100%;


}

I've attached the image I use.

***
Off topic but I wanted to make sure you set the idProperty on your store (the unique ID) so that dgrid can properly sort and query your data set.
NOTE: the default value of idProperty is "id" so if that happens to be your uid field, then you can ignore this.

var memStore = new Memory({ data: data, idProperty: "UNIQUE_ID_FIELD_GOES_HERE"});

Hope this helps, even if not exactly what you expected.

Jon,

I just tried this, but the problem that I have is that we have other grids that don't always have something in them, and the grid that we want the loading on, doesn't automatically populate, instead, the grid shows up when a button is clicked to start the query and queryTask.  Also, we were wanting the user to know when there are no records for the query that they searched for, and by putting this in there, that is not possible.

[JonathanUihlein]

Also, we were wanting the user to know when there are no records for the query that they searched for, and by putting this in there, that is not possible.

It's totally possible; you would just need to write your own logic to update the contents of that div depending on a) the query and b) the results.

Pseudo Code:

        // Default Grid State
        grid.noDataMessage = "";
        grid.refresh();

        //When the query is executed...
        grid.noDataMessage = "Loading...";
        grid.refresh();

        //When the query is done...
        //div only shows if query returns nothing... this is just in case of that
        grid.noDataMessage = "No Results.";
        grid.refresh();

This is using text of course.
Logic for using an image would differ slightly in that I would create a child div inside of:

<div class="dgrid-no-data"></div>

... and use that div to show the spinner gif.

[MichelleRogers1]

It's totally possible; you would just need to write your own logic to update the contents of that div depending on a) the query and b) the results.

Pseudo Code:

        // Default Grid State
        grid.noDataMessage = "";
        grid.refresh();

        //When the query is executed...
        grid.noDataMessage = "Loading...";
        grid.refresh();

        //When the query is done...
        //div only shows if query returns nothing... this is just in case of that
        grid.noDataMessage = "No Results.";
        grid.refresh();

I guess I am confused on where this code would go.  I have only been dealing with esri's javascript api for about 4 months, and javascript in general for about a year.  I can post the full code to a jsfiddle if needed so that you have a better understanding of what I'm trying to do, you would have to replace the service with a public facing one as ours is sensitive information so it's not public.

[JonathanUihlein]

I guess I am confused on where this code would go.  I have only been dealing with esri's javascript api for about 4 months, and javascript in general for about a year.  I can post the full code to a jsfiddle if needed so that you have a better understanding of what I'm trying to do, you would have to replace the service with a public facing one as ours is sensitive information so it's not public.

A JSFiddle would be great!

[MichelleRogers1]

A JSFiddle would be great!

Here's the JSFiddle:http://jsfiddle.net/mrogers83/kT86X/