jQWidgets Forums

Tagged: delay showing of loading image, loading image show after some time

This topic contains 6 replies, has 2 voices, and was last updated by sun21170 11 years, 4 months ago.

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

Author

How to control the time after which loading panel renders? Posts

January 28, 2014 at 1:03 am How to control the time after which loading panel renders? #48483

Participant

I am trying to show loading image only if grid has not been updated for 500 ms. So, if the grid takes 700 ms to update, then the loading image shows only after 500 ms have passed.
Can I do this? If yes, then how would I do it?

Thanks
Sunil

January 28, 2014 at 6:33 am How to control the time after which loading panel renders? #48492

Peter Stoev

Keymaster

Hi Sunil,

The $(‘#jqxGrid’).jqxGrid(‘showloadelement’); displays the load image. The “hideloadelement” hides it. You can use these for manually displaying or hiding the load image when you wish.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 29, 2014 at 7:48 am How to control the time after which loading panel renders? #48570

sun21170

Participant

I used the following code to achieve my goal of not displaying the loading panel, if the grid updates within 400 ms, which I believe provides a more smoother experience for the end-user.
Basically, I hide the loading panel before sending request to web service to get data and also set it to show after 400 ms in beforeSend event of jqxdataAdapter. Then, in bindingComplete event of the grid, I clear the timeout interval and also make sure the loading panel is hidden. I am using ASP.Net pages, so my code below is for an aspx page.

Also, you will find some dates being used, which I have to measure the performance of grid by displaying the time in milliseconds it takes to bind a grid on clicking a page number in pager or on sorting a column. You will find the loading panel displays accurately only when grid binding takes more than 400 milliseconds.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqxGridSample1.aspx.cs" Inherits="GridViewSamples.jqxGridSample1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
             <div id="perf" style="color: red; font-family: arial"></div>
            <div id="jqxgrid">
            </div>
        </div>
    </form>
    <script type="text/javascript">
        var startDate = new Date();
        var ti = null;
        $(document).ready(function () {
            source = {
                datatype: "json",
                datafields: [
                    { name: 'SalesOrderID', type: 'integer' },
                    { name: 'SalesOrderNumber', type: 'string' },
                    { name: 'CustomerID', type: 'integer' },
                    { name: 'PurchaseOrderNumber', type: 'string' },
                    { name: 'DueDate', type: 'date' },
                    { name: 'OrderDate', type: 'date' }
                ],
                formatdata: function (data) {
                   // alert('data.sortdatafield ' + data.sortdatafield);
                    data.sortdatafield = data.sortdatafield || '';
                    data.sortorder = data.sortorder || '';
                    return JSON.stringify({ pagenum: data.pagenum, pagesize: data.pagesize, sortdatafield:data.sortdatafield, sortorder: data.sortorder });
                },
                sort: function () {
                    $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                },
                id: 'SalesOrderID',
                url: 'WebService1.asmx/GetSalesOrders',
                type: 'POST'
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                                                    {
                                                        contentType: 'application/json; charset=utf-8',
                                                        loadError: function (jqXHR, status, error) {
                                                            alert(error);
                                                        },
                                                        downloadComplete: function (data, status, xhr) {
                                                            // update the totalrecords count.
                                                            source.totalrecords = data.d.Count;
                                                            return data.d.Data;
                                                        },
                                                        beforeSend: function (jqXHR, settings) {
                                                            $("#jqxgrid").jqxGrid("hideloadelement");
                                                            ti =  setTimeout(function () { $("#jqxgrid").jqxGrid("showloadelement"); }, 400);

                                                        }
                                                    }
                );
            $("#jqxgrid").jqxGrid({
                theme: 'ui-redmond',
                width: 740,
                source: dataAdapter,
                pageable: true,
                sortable: true,
                autoheight: true,
                virtualmode: true,
                rendergridrows: function (args) {
                    return args.data;
                },
                columns: [
                    { text: 'Sales Order ID', dataField: 'SalesOrderID', width:120 },
                    { text: 'Sales Order Number', dataField: 'SalesOrderNumber', width:120 },
                    { text: 'Purchase Order Number', dataField: 'PurchaseOrderNumber', width:120 },
                    { text: 'Customer ID', dataField: 'CustomerID', width:120 },
                    { text: 'Order Date', dataField: 'OrderDate', width: 130, cellsformat: 'MM-dd-yyyy' },
                    { text: 'Due Date', dataField: 'DueDate', width: 130, cellsformat: 'MM-dd-yyyy' }
                ]
            });
            $('#jqxgrid').on('bindingcomplete', function (event) {
                var endDate = new Date();
                $('#perf').html((endDate.getTime() - startDate.getTime()) + " milliseconds");
                clearTimeout(ti);
               $("#jqxgrid").jqxGrid("hideloadelement"); 
            });
            $('#jqxgrid').on('pagechanged', function (event) {
                startDate = new Date();
            });
            $('#jqxgrid').on('pagesizechanged', function (event) {
                startDate = new Date();
            });
            $('#jqxgrid').on('sort', function (event) {
                startDate = new Date();
            });
        });
    </script>
</body>
</html>

January 29, 2014 at 8:02 am How to control the time after which loading panel renders? #48580

Peter Stoev

Keymaster

Hi sun21170,

The problem in this code is that you call a function of jqxGrid while the jqxGrid is still not initialized. Actually, I do not understand why that code is required at all. jqxGrid displays and hides its Load image automatically and that works pretty well. If you want to update the Grid’s data dynamically and use the same data source, you can just call the “updatebounddata” method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 29, 2014 at 9:01 am How to control the time after which loading panel renders? #48585

sun21170

Participant

Hi Peter,

So where would be the best place to initially hide the loading panel ( may be the initialized event of the grid)? I found my code prevented the automatic display of loading panel when total time taken was less than 400 ms and seemed to be satisfactory in that respect.
I think displaying a loading panel too frequently is not very eye friendly for users who spend a large amount of time in front of their screens especially if the load time is going to be very small like up to 500 ms. For people who spend an hour or two in front of their screens, it does not affect them. But this is just my opinion.

Thanks
Sunil

January 29, 2014 at 9:17 am How to control the time after which loading panel renders? #48586

sun21170

Participant

Hi Peter,

When I put the hide loading panel code in grid’s initialize event, then it does not work and the loading panel will then display many times even when total time taken is less than 400 ms.

Thanks
Sunil

January 30, 2014 at 4:53 am How to control the time after which loading panel renders? #48645

sun21170

Participant

Hi Peter,

Could you please highlight what errors could result from my code? So far it’s been working well and as expected.
But I may have missed something since I am a new user of these controls.

Thanks
Sunil

Author

Posts

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

You must be logged in to reply to this topic.