jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by slodge 12 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

How to display the 'loading' animation for subsequent fetches Posts

September 27, 2012 at 11:08 am How to display the 'loading' animation for subsequent fetches #8592

slodge

Member

In the app I’m playing with at present I dynamically change the grid data using an autocomplete type mechanism – using dataAdapter.dataBind() calls to request grid refreshes.

When the grid loads for the first time I see ‘loading’

However, on subsequent loads I don’t see this – the grid simply displays the current content until the new content is available.

Is there any option to clear the current data and to display the loading animation during the load.

I know I can clear the display myself using ‘clear’, but I haven’t found any way to show the loading animation.

Thanks

Stuart

September 27, 2012 at 12:40 pm How to display the 'loading' animation for subsequent fetches #8595

Peter Stoev

Keymaster

Hi Stuart,

If the requests are async and you are using the latest version, you should see the loading element. However, in case you want to explicitly display it, use this:

$("#jqxgrid").jqxGrid('showloadelement');

To hide it, use the ‘hideloadelement’ method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 27, 2012 at 1:07 pm How to display the 'loading' animation for subsequent fetches #8599

slodge

Member

Thanks – adding that works nicely for me.

I tried to repro the original problem with this sample – I’m using 4.2.2 and I can’t get the loading to display after the first hit.

Note: To repro this, I’m using:
– jQWidgets v2.4.2 (2012-Sep-12)
– FFox
– Fiddler2 to simulate slow network connections

Hope this helps

Stuart

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Remote Data 2.</title>
    <link rel="stylesheet" href="/Content/jqx/jqx.base.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="/Scripts/jqx/jqx-all.js" type="text/javascript"></script>
    <script type="text/javascript" src="/Scripts/jqx/globalization/jquery.global.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'name' },
                    { name: 'countryName' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' }
                ],
                url: "http://ws.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 50,
                    q: $('#startWith').val()
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                formatData: function (data) {
                    data.q = $('#startWith').val();
                }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                    { text: 'City', datafield: 'name', width: 170 },
                    { text: 'Country Name', datafield: 'countryName', width: 200 },
                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                ]
            });
            $('#theButton').click(function () {
                dataAdapter.dataBind();
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <input type="text" id="startWith" value='london'></input>
        <button id="theButton">Press to refresh</button>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.