Loading prompt of grid: modalmask on loading grid, center of prompt

[martintaal]

Hi,
I have a page with multiple grids, when a user clicks on one grid, another grid is refreshed/reloaded.

During this reload action a loading prompt is shown in modal mode. The loading prompt places a modal mask over the whole page. I would like to achieve the following:
1- the modal mask should only be placed over the grid which is getting refreshed
2- the prompt should be centered on the grid which is getting loaded

For the first I can use a trick (change the isc.showPrompt method), for the second I am not yet sure how to do that easily. However, I prefer to use a standard method.

Is there a standard way of getting this done without me replacing isc.showPrompt?

btw, I saw the ListGrid.loadingDataMessage message but it is only used if the grid is initially empty, not when a grid is refreshed.

gr. Martin

[Isomorphic]

Normal behavior for a refresh, if done via grid.data.invalidateCache, is that the loading message is shown.

That said, if you want to block all interactivity for the grid, no need to override isc.showPrompt, just disable the automatic prompting for that operation (add showPrompt:false to requestProperties) and then place an element of your own creation over the grid (eg, a gray Canvas at 50% opacity or similar) and remove it when DataArrived fires.

[asingla]

I am looking for similar thing. But I didn't understand the solution. I didn't get how to add a Canvas over the grid.

Waiting for your response. Thanks for your help and time.

[asingla]

I see the moveAbove, moveBelow methods for canvas but somehow that is not working for me.

I created a MaskedElement (a canvas element) with 0 dimension and added to the parent element and by default it's hidden. Now when ajax request is being made I changed the dimensions of this MaskedElement to the canvas object which is to be masked.

like

MaskedElement.setTop(elemToMasked.getTop());
MaskedElement.setLeft(elemToMasked.getLeft());
MaskedElement.setHeight(elemToMasked.getHeight());
MaskedElement.setWidth(elemToMasked.getWidth());
MaskedElement.moveAbove(elemToMasked);
MaskedElement.show();

But I see that MaskedElement has taken the position of elemToMasked and canvas object has moved down.

Can you please tell me what is wrong with my approach? Thanks

[martintaal]

Not sure that I understand fully, you achieved what you want isn't the canvas moved down and MaskedElement is shown over it. Maybe you want to set opacity of MaskedElement to something like 50% to make the underlying canvas shine through.

gr. Martin

[asingla]

May be some confusion over words. What I meant by down was that my canvas element moved below and MaskedElement has taken the position of canvas. So it did not masked the canvas element. I mean user can still work on the canvas element.

[martintaal]

I don't know why that happens, maybe they are part of the same layout.

gr. Martin

[asingla]

I didn't get what do you mean by "maybe they are part of the same layout."

I put the MaskedElement in the same layout object as the canvas (to be masked element). That's what the documentation says for moveAbove method.

"Puts this widget just above the specified widget in the stacking order, so it appears in front of the specified widget if both widgets have the same parent."

Am i doing anything wrong? Thanks for your time.

[martintaal]

I am afraid that I do not know either what happens here and how to solve it...

gr. Martin

[asingla]

Ok.. did the solution work for you as advised by Isomorphic in this post?

If yes, can you please share your code snippet or tell me what did you do.

Thanks.