Loading image when loading huge data

[krnacmParticipant]

Hi guys,

I wonder if it is possible to show some loading image (e.g turn wheel) when combobox is loading huge amount of data and it looks like it is nothing doing.

Thanks,

Kind regards,
Matej

[DimitarParticipant]

Hello Matej,

How about this: add the following style to your page:

<style type="text/css">
    .jqx-combobox-input, .jqx-combobox-content
    {
        background: url('../../images/loader.gif') no-repeat center;
    }
</style>

Remove the background image on the bindingComplete event:

$("#jqxComboBox").on('bindingComplete', function (event) {
    $(".jqx-combobox-input, .jqx-combobox-content").css({ "background-image": "none" });
});

Best Regards,
Dimitar

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

[krnacmParticipant]

Hi Dimitar,

thanks for your suggestion, but it is not working correctly. It set the loading icon image to the combobox always, but I need to only when the data is loading data. Maybe another css class needs to be use instead of .jqx-combobox-input, .jqx-combobox-content which is set only when the data are loaded, but I guess there is not some king of this class. I checked the CSS Styling for combobox and I didn’t find something similar.

Maybe a solution can be to set the background image in some event befor the data begin to load and in bindigComplete event remove the image. Is there some kind of event before the data are loaded?

Thanks,

Kind regards,
Matej

[DimitarParticipant]

Hi Matej,

The loading image does not display always, only until the bindigComplete event fires. This means it will show only during data loading. Please make sure you bind to the event before the combobox initialization, as shown in this fiddle: http://jsfiddle.net/jqwidgets/UKG2p/.

Best Regards,
Dimitar

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

[krnacmParticipant]

Hi Dimitar,

I have get it to work, thanks.

Kind regards,
Matej

[frankbur1Participant]

hi dimitar,

works fine, but what would be to do, if i have 4 comboboxes?
when i say: $(“.jqx-combobox-input, .jqx-combobox-content”).css({ “background-image”: “none” });
on all comboboxes the loading image is away.
i found no way to set an id on the comboboxes, is there a way?

how could i handle this?

kindest regards, frank

[DimitarParticipant]

Hi Frank,

In most of our examples (including the above), an id is assigned to the combobox, i.e. <div id='jqxComboBox'></div>. You can use CSS selections such as #jqxComboBox .jqx-combobox-input to target the input of only a specific combobox.

Best Regards,
Dimitar

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

[frankbur1Participant]

hi dimitar,

works fine.

THX, kindest regrads, frank

[Author]

Posts