Hide/Show does not work in listGrid.dataChanged: function (operationType) {}

[mkramer]

Hi,

I am trying to htmlPane.show() a message during long data operations and htmlPane.hide() when complete.
I can actuate the htmlPane.show()/htmlPane.hide() methods using buttons, but am not able to show/hide in the body of the dataChanged: function (operationType) {}.

Why does this work with buttons, but not in a function? I also tried to actuate the click event of the buttons within the function, but that did not work either.

Here is my code:

isc.RestDataSource.create({
    ID: "shopMdSource",
    fields: [
        { name: "id", title: "Id", primaryKey: true, canEdit: false, hidden: true },
        { name: "key", title: "Customer Tag", length: 30, type: "text" },
        { name: "namespace", title: "Namespace", hidden: true },
        { name: "value", title: "Initial Case Quantity", hidden: true },
        { name: "value_type", title: "value_type", hidden: true },
        { name: "description", title: "Description", hidden: true },
        { name: "owner_id", title: "owner_id", hidden: true },
        { name: "created_at", title: "created_at", hidden: true },
        { name: "updated_at", title: "updated_at", hidden: true },
        { name: "owner_resource", title: "owner_resource", hidden: true },
        { name: "admin_graphql_api_id", title: "admin_graphql_api_id", hidden: true }
    ],
    dataFormat: "json",
    promptStyle: "modal",
    fetchDataURL: "/listSMF",
    addDataURL: "/createSMF",
    updateDataURL: "/updateSMF",
    removeDataURL: "/removeSMF"
});

isc.HTMLPane.create({
    ID: "busyMessage1", height:110, showEdges:true, builderAutoID: true, autoDraw: false,
    contents: "<strong><table bgcolor='#B7ECEC' style='  margin: 0;  border-radius: 25px;'><tr><td style='padding: 15px; padding-bottom: 0px;'><img src='/progressCursorTracker.gif'>&nbsp;&nbsp;Updating Product Data...</td></tr><tr><td style='padding: 15px;'>This may take a while if you have a lot of Products...</td></tr></table></strong>",
    contentsType: "fragment",
    evalScriptBlocks:true,
    captureSCComponents:true,
    disabled:false,
    visibility:"hidden"
})
var reloadPage = false;
isc.ListGrid.create({
    ID: "shopMdListGrid",
    width: 500, height: 224,
    //emptyCellValue: "--",
    loadingDataMessage: "<strong><table bgcolor='#B7ECEC' style='border-radius: 25px;'><tr><td style='padding: 15px; padding-bottom: 0px;'>${loadingImage}&nbsp;Loading Data</td></tr><tr><td style='padding: 15px;'>This may take a while if you have a lot of Customer Tags...</td></tr></table></strong>",
    loadingDataMessage: "<strong><table bgcolor='#B7ECEC' style='border-radius: 25px;'><tr><td style='padding: 15px; padding-bottom: 0px;'>${loadingImage}&nbsp;Loading Data</td></tr><tr><td style='padding: 15px;'>This may take a while...</td></tr></table></strong>",
    alternateRecordStyles: true,
    headerBackgroundColor: "#43467F",
    dataSource: shopMdSource,
    sortField: 0, // sort by key
    dataPageSize: 50,
    autoDraw: false,
    builderAutoID: true,
    autoFetchData: true,
    autoSaveEdits: true,
    dataChanged: function (operationType) {
        //alert(operationType);
        //isc.logWarn("dataArrived: ");

[B]        busyMessage1.show();[/B]

        columnsUpdated = false; 
        //shopProdListGrid.invalidateCache();

        //Remove LG from VL
        shopProdManagerVL.removeMember(shopProdListGrid);
        //Destroy LG
        shopProdListGrid.destroy();
        //Destroy DS
        shopProdRestDataSource.destroy();
        //Instantiate DS
        var theProdFields = [...prodFields]; //copy the static product fields prototype to the working copy
        isc.RestDataSource.create(shopProdRestDataSourceParms);
        //Instantiate LG
        isc.ListGrid.create(shopProdListGridParms);
        //Add LG to VL in the second position
        shopProdManagerVL.addMember(shopProdListGrid, 1);

[B]        busyMessage1.hide();[/B]
    },

});

Any help would be appreciated!!

Mike

[Isomorphic]

Your hide and show are working fine, but you've placed them at the beginning and end of a JavaScript method. That entire method executes synchronously, then the browser refreshes the view, and you've already hidden the busyMessage.

It's not clear during what operation you are trying to show a busy message, since nothing you are doing in this method takes very long. If you wanted to show a busy message while the new shopProdListGrid is fetching data, that's a built-in capability - see rpcRequest.promptStyle.

[mkramer]

Your hide and show are working fine, but you've placed them at the beginning and end of a JavaScript method. That entire method executes synchronously, then the browser refreshes the view, and you've already hidden the busyMessage.

Hmmm, this is a problem for me because the shopProdListGrid responds very quickly and it's busy rpcRequest.promptStyle message is gone by the time the JS executes in the dataChanged JS routine.

It's not clear during what operation you are trying to show a busy message, since nothing you are doing in this method takes very long. If you wanted to show a busy message while the new shopProdListGrid is fetching data, that's a built-in capability - see rpcRequest.promptStyle.

The shopMdListGrid only adds/deletes record which requires that the shopProdListGrid to be rebuilt due to the way data is displayed in the grid. The shopProdListGrid is located on another tab in the user interface so therefore it's rpcRequest.promptStyle prompt is not visible at the time it is being rebuilt.

Can you suggest how I may be able to work around this issue? I was hoping to display a Loading Data message to the user. The mouse pointer is the spinning circle but if the mouse pointer is not in the middle of the screen it is not obvious what is going on during the operation.

Thanks!

Mike

[mkramer]

Is there a way to trigger the shopProdListGrid.invalidateCache() method upon switching to the tab that contains the shopProdListGrid.? This could be a way to work around this problem.

[Blama]

There is a onTabSelected Handler on TabSet.
you can do it from there.
Also, if you have many Tabs, you should use this to lazily create your Tab-contents.

Best regards
Blama

[Isomorphic]

If these are two related requests, use Queuing to combine them into a single HTTP turnaround, and then the prompt will cover both.

If you can’t do that for whatever reason, just show your busy message then use setTimeout() before taking further actions. This will cause the browser to draw your busy message before starting on the other operations.

[mkramer]

I ended up using the following to trigger the rebuild of shopProdListGrid when switching to its tab:

 
tabSelected: function(tabSet, tabNum, tabPane, ID, tab, name){
    if(columnsUpdated == false){
      columnsUpdated = false; 
      shopProdListGrid.invalidateCache();
    }
  },

I still have the problem of not being able to show a message while processing and Add/Delete in shopMdListGrid. The mouse cursor turns into a spinner, but I need to tell the user what is going on. I tried setting the shopMdListGrid promptStyle: "dialog" prameter as suggested above, but this made no difference changing the spinner to a dialog.

Why aren't there symmetric messages for each of the other CRUD actions such as savingDataMessage, removingDataMessage, updatingDataMessage?

Thanks!
Mike

[Isomorphic]

We just explained how to properly do a busy message if it needs to surround a long draw as opposed to a network request:

If you can’t do that for whatever reason, just show your busy message then use setTimeout() before taking further actions. This will cause the browser to draw your busy message before starting on the other operations.

And again, if your save is for some reason really slow, you can use rpcRequest.promptStyle "dialog". Then rpcRequest.prompt is shown. You can change what message is shown via eg saveRequestProperties.

[Isomorphic]

Oh, we see you tried to use promptStyle:"dialog", but somehow failed. We can't help unless we see what you did. There are multiple ways to turn it on, including the requestProperties argument to fetchData().

[mkramer]

Sorry, here's the code:

isc.ListGrid.create({
    ID: "shopMdListGrid",
    width: 500, height: 224,
    loadingDataMessage: "<strong><table bgcolor='#B7ECEC' style='border-radius: 25px;'><tr><td style='padding: 15px; padding-bottom: 0px;'>${loadingImage}&nbsp;Loading Data</td></tr><tr><td style='padding: 15px;'>This may take a while if you have a lot of Customer Tags...</td></tr></table></strong>",
    alternateRecordStyles: true,
    headerBackgroundColor: "#43467F",
    dataSource: shopMdSource,
    sortField: 0, // sort by key
    dataPageSize: 50,
    autoDraw: false,
    builderAutoID: true,
    autoFetchData: true,
    autoSaveEdits: true,
    waitForSave: true,
[B]    promptStyle: "dialog",[/B]
    dataChanged: function (operationType) {
        columnsUpdated = false; 
    },

[Isomorphic]

We've referred to the property several times as rpcRequest.promptStyle, and that's also what's in the docs. You are trying to set it directly on ListGrid.

[mkramer]

Ok, I implemented the following code:

isc.RPCManager.promptStyle = "dialog";
isc.RPCManager.saveDataPrompt =   "<strong><table bgcolor='#B7ECEC' style='border-radius: 25px;'><tr><td style='padding: 15px; padding-bottom: 0px;'>${loadingImage}&nbsp;Saving Data</td></tr><tr><td style='padding: 15px;'>This may take a while if you have a lot of Products...</td></tr></table></strong>";
isc.RPCManager.removeDataPrompt = "<strong><table bgcolor='#B7ECEC' style='border-radius: 25px;'><tr><td style='padding: 15px; padding-bottom: 0px;'>${loadingImage}&nbsp;Deleting Data</td></tr><tr><td style='padding: 15px;'>This may take a while if you have a lot of Products...</td></tr></table></strong>";

The isc.RPCManager.removeDataPrompt works as I would expect rendering the html string in the Dialog, but the isc.RPCManager.saveDataPrompt does not render the html string assigned to it. It shows the following:

Any suggestions as to why the saveDataPrompt string is not rendering in the dialog?

[Isomorphic]

Please make better use of the documentation, and please read our suggestions more carefully. We don't show you as having purchased either a license or support, and it's taking several tries to get you going in areas where the docs are already solid *and* we've elaborated here in the forums for you.

First of all, you want addClassProperties() to change settings on the RPCManager, not direct assignment.

Also, the docs for saveDataPrompt tell you *it's for DynamicForms*. We already covered, in a previous post here, how to change the message for a grid:

Then rpcRequest.prompt is shown. You can change what message is shown via eg saveRequestProperties.

[mkramer]

Just a side note that I do not reach out for help until I have spent a considerable amount of time trying to figure things out on my own! As far as buying a support package, I hope to be in a position to do so in the future, but am not in a position to do so at this moment. Your continued support is much appreciated!

Thank you for the above pointers. I was able to achieve my desired functionality with the following code:

isc.RPCManager.addClassProperties({
    "promptStyle": "dialog",
    "removeDataPrompt": "<strong><table bgcolor='#B7ECEC' style='border-radius: 25px;'><tr><td style='padding: 15px; padding-bottom: 0px;'>${loadingImage}&nbsp;Deleting Data</td></tr><tr><td style='padding: 15px;'>This may take a while if you have a lot of Products...</td></tr></table></strong>"
});

var reloadPage = false;
isc.ListGrid.create({
    ID: "shopMdListGrid",
    width: 500, height: 224,
    loadingDataMessage: "<strong><table bgcolor='#B7ECEC' style='border-radius: 25px;'><tr><td style='padding: 15px; padding-bottom: 0px;'>${loadingImage}&nbsp;Loading Data</td></tr><tr><td style='padding: 15px;'>This may take a while if you have a lot of Customer Tags...</td></tr></table></strong>",
    alternateRecordStyles: true,
    headerBackgroundColor: "#43467F",
    dataSource: shopMdSource,
    sortField: 1, 
    dataPageSize: 50,
    autoDraw: false,
    builderAutoID: true,
    autoFetchData: true,
    waitForSave: true,
    selectionType:"single",
    canReorderFields:false,
    canGroupBy:false,
    canEdit:false,
    dataChanged: function (operationType) {
        columnsUpdated = false; 
        this.setCanEdit(false);
    },
    saveRequestProperties: {
        "promptStyle": "dialog",
        "prompt": "<strong><table bgcolor='#B7ECEC' style='border-radius: 25px;'><tr><td style='padding: 15px; padding-bottom: 0px;'>${loadingImage}&nbsp;Saving Data</td></tr><tr><td style='padding: 15px;'>This may take a while if you have a lot of Products...</td></tr></table></strong>"
    }

});

Thanks!

Mike