Showing overlay "processing" when grid data submitted

[mallepaddiParticipant]

Hi

Is there any widget available to show “processing” overlay when we initiate “ajax” request which submitts data to server and overlay should disappear when we got response back to ajax request ?

Let me know if there is any widget to do this ?

Thanks

[DimitarParticipant]

Hello mallepaddi,

You may use the grid load element. Show it with the method showloadelement and hide it with hideloadelement. You can change the “Loading” string using localization, e.g.:

var localizationobj = {};
localizationobj.loadtext = "Processing";

// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
    width: 670,
    source: dataAdapter,
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    editable: true,
    selectionmode: 'multiplecellsadvanced',
    localization: localizationobj,
...

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[mallepaddiParticipant]

HI.

it works while loading grid data, how to increase width of “loading” text, as i need it bit long, now it’s truncated into multiple lines.

Thanks

[DimitarParticipant]

Hello mallepaddi,

The width of the load element can be changed dynamically as follows:

$("#jqxgrid .jqx-grid-load").parent().parent().width("200px");

where jqxgrid is the id of your grid.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[mallepaddiParticipant]

HI

Somehow it doesn’t work ..

var localizationobj = {};
localizationobj.loadtext = “Processing ………………….. testing “;

$(“#productgrid .jqx-grid-load”).parent().parent().width(“400px”);

$(‘#productgrid’).jqxGrid({
………….
localization: localizationobj,
…………..

Thanks

[mallepaddiParticipant]

Hi

it works when i code like … but to centralize element, somehow it starts from center goes till the end, which doesn;t look it, is there a way to put it in center.

$(‘#productgrid’).jqxGrid({
…..
localization: localizationobj,
…..
});

$(“#productgrid .jqx-grid-load”).parent().parent().width(“400px”);

[DimitarParticipant]

Hello mallepaddi,

The following selection controls the div, containing the animation and text:

$("#productgrid .jqx-grid-load").parent()

and the following – its parent:

$("#productgrid .jqx-grid-load").parent().parent()

By controlling the first selection’s margins, you can position the elements as you like. There are also other methods, which require modification of the style of both selections.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[mallepaddiParticipant]

HI

Can we grey out the screen when using “showloadelement” and “hideloadelement” to prevent user from clicking any other buttons ?

Thanks

[DimitarParticipant]

Hi mallepaddi,

Unfortunately, this cannot be achieved. Note, however, that you actually cannot click anything inside the grid while the load element is shown.

A an idea on the matter is to temporarily disable your buttons after calling showloadelement and enable them after hideloadelement.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts