FF Flickering when updating datasource - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: datagrid control, grid control, jqxgrid

This topic contains 9 replies, has 2 voices, and was last updated by sdalby 12 years, 1 month ago.

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

Author

FF Flickering when updating datasource Posts

November 1, 2012 at 1:11 pm FF Flickering when updating datasource #10408

sdalby

Member

I have a grid which is updated every 4. second using following code:

    setTimeout(function () {
        if (!$('#jqxEodDetailsWindow').jqxWindow('isOpen') &&
            !$('#jqxStartEodWindow').jqxWindow('isOpen') &&
            !$('#jqxTaskDetailsWindow').jqxWindow('isOpen')&&
            activePage == 0) {
            taskOverviewDataadapter.dataBind();
        }
        setTimeout(arguments.callee, refreshIntervalMs);
    }, refreshIntervalMs);

In IE9 it works perfectly but FireFox (latest version) is flickering which is very bad.

Can GUI update of the grid be disabled until data are in place?

November 1, 2012 at 2:58 pm FF Flickering when updating datasource #10414

Peter Stoev

Keymaster

Hi sdalby,

For updating the Grid’s data, you should use the Grid’s updatebounddata method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 1, 2012 at 3:08 pm FF Flickering when updating datasource #10415

sdalby

Member

Hi,

I tried and it is even worse, not only does it also flickr but it also shows the *Loading* image.

I am so dead if I cant fix this. Is there another approach?

November 1, 2012 at 3:17 pm FF Flickering when updating datasource #10416

Peter Stoev

Keymaster

Hi sdalby,

I can’t provide you another approach. The updatebounddata should be used to update the Grid’s data. If you load data from external file, the loading image should appear till the data is loaded and that is by design. Depending on your Grid initialization and the amount of data to be loaded, the rendering performance is different.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 1, 2012 at 3:26 pm FF Flickering when updating datasource #10419

sdalby

Member

Are you aware of that IE9 is completely smooth with this and doesnt show a loading message.

I am thinking that your attempt to show this prior to loading is what is causing the problem – can I attempt to disable it somehow?

Any way at all?

November 1, 2012 at 4:06 pm FF Flickering when updating datasource #10425

Peter Stoev

Keymaster

Hi sdalby,

Please, post a small sample which will enable us to track your issue. You can also send the sample to support@jqwidgets.com

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 1, 2012 at 4:38 pm FF Flickering when updating datasource #10432

sdalby

Member

Hi thanks for taking this up. I understand it is standard behaviour, but I am dead if I cannot make this work.

The code monitors jobs running on a server. From here the user can start jobs but it is vital that the list continously montors the state of jobs (started, executing, failing, stopped etc.). This is achived by asking the server each 4 seconds.

I spent a looong time trying to make this work with WebServices but I couldnt make it work, so I call an ASP.NET Generic handler.

The flickering can in my experience only be caused but the fact that you update something prior to loading, then loads and updates. This “something” could very well be the loading image – and since IE doesnt show it and runs smoothly, this is likely to be the case.

You would really make me a happy camper, if this can be fixed 🙂

function defineOverviewGrid() {
    var activePage = 0;
    source = {
        type: "GET",
        url: 'EodOverviewList.ashx',
        contentType: 'application/json; charset=utf-8',
        datatype: "json",
        datafields: [
            { name: 'Id' },
            { name: 'TimeToFire', type: 'date' },
            { name: 'SysDate', type: 'date' },
            { name: 'NewDate', type: 'date' },
            { name: 'Status' },
            { name: 'ReasonForExecution' },
            { name: 'ModulesExecuted' },
            { name: 'CampTransNo', type: 'int' },
            { name: 'LinkBar' }
         ],
        async: false,
        formatdata: function (data) {
            activePage = data.pagenum;
            return { pagenum: data.pagenum, pagesize: data.pagesize };
        }
    };
    $.ajax({
        url: 'EodOverviewWebService.asmx/GetOverviewCount',
        contentType: 'application/json; charset=utf-8',
        async: false,
        error: errorHandler,
        success: function (data) {
            source.totalrecords = data.d;
        }
    });
    var statusCellRenderer = function (row, columnfield, value) {
        var html = '<div style="background: ' + taskStatusColorLookup[value].background + ';color: ' + taskStatusColorLookup[value].color + ';width: 100%;height: 100%">\n' +
                   '<div style="padding-left: 6px;padding-top: 4px">' + taskStatusColorLookup[value].text + '</div>' +
                   '</div>';
        return html;
    };
    var linkBarCellRenderer = function (row, columnfield, value) {
        var html = '<div style="padding-left: 6px;padding-top: 4px">&amp;nbsp' + value + '</div>';
        return html;
    };
    taskOverviewDataadapter = new $.jqx.dataAdapter(source);
    $("#jqxOverviewGrid").jqxGrid(
        {
            selectionmode: 'none',
            width: 1270,
            source: taskOverviewDataadapter,
            theme: theme,
            autoheight: true,
            pageable: true,
            virtualmode: true,
            pagesize: 25,
            altrows: true,
            rendergridrows: function () {
                return taskOverviewDataadapter.records;
            },
            
            columns: [
                { text: 'Task id', datafield: 'Id', width: 50 },
                { text: 'Execution date', datafield: 'TimeToFire', cellsformat: 'dd-MM-yy hh:mm:ss', width: 140, resizable: true },
                { text: 'System date', datafield: 'SysDate', cellsformat: 'dd-MM-yy', width: 90, resizable: true },
                { text: 'New date', datafield: 'NewDate', cellsformat: 'dd-MM-yy', width: 90, resizable: true },
                { text: 'Camp transno', datafield: 'CampTransNo', width: 90, resizable: true },
                { text: 'Modules executed', datafield: 'ModulesExecuted', width: 300, resizable: true },
                { text: 'Reason for execution', datafield: 'ReasonForExecution', width: 300, resizable: true },
                { text: 'Status', datafield: 'Status', width: 130, resizable: true, cellsrenderer: statusCellRenderer },
                { text: 'Actions', datafield: 'LinkBar', width: 80, resizable: true, cellsrenderer: linkBarCellRenderer }
            ]
        });
    var refreshIntervalMs = 4000;
    setTimeout(function () {
        if (!$('#jqxEodDetailsWindow').jqxWindow('isOpen') &amp;&amp;
            !$('#jqxStartEodWindow').jqxWindow('isOpen') &amp;&amp;
            !$('#jqxTaskDetailsWindow').jqxWindow('isOpen')&amp;&amp;
            activePage == 0) {
           // taskOverviewDataadapter.dataBind();
           $("#jqxOverviewGrid").jqxGrid('updatebounddata');
        }
        setTimeout(arguments.callee, refreshIntervalMs);
    }, refreshIntervalMs);

November 2, 2012 at 9:40 am FF Flickering when updating datasource #10451

Peter Stoev

Keymaster

Hi sdalby,

Unfortunately, using the following sample code, we are unable to reproduce the flickering:

<!DOCTYPE html>
<html lang="en">
<head>
     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = {
                totalrecords: 1000,
                localdata:
                [
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" },
                    { Id: 1, TimeToFire: "T1", SysDate: "S2", NewDate: "ND", Status: "Status", ReasonForExecution: "RFE", CampTransNo: "CTN" }
                ],
                contentType: 'application/json; charset=utf-8',
                datatype: "json",
                datafields: [
                    { name: 'Id' },
                    { name: 'TimeToFire', type: 'date' },
                    { name: 'SysDate', type: 'date' },
                    { name: 'NewDate', type: 'date' },
                    { name: 'Status' },
                    { name: 'ReasonForExecution' },
                    { name: 'ModulesExecuted' },
                    { name: 'CampTransNo', type: 'int' },
                    { name: 'LinkBar' }
                 ]
            };
            taskOverviewDataadapter = new $.jqx.dataAdapter(source);
            $("#jqxOverviewGrid").jqxGrid(
                {
                    selectionmode: 'none',
                    width: 1270,
                    source: taskOverviewDataadapter,
                    autoheight: true,
                    pageable: true,
                    virtualmode: true,
                    pagesize: 25,
                    altrows: true,
                    rendergridrows: function () {
                        return taskOverviewDataadapter.records;
                    },
                    columns: [
                        { text: 'Task id', datafield: 'Id', width: 50 },
                        { text: 'Execution date', datafield: 'TimeToFire', cellsformat: 'dd-MM-yy hh:mm:ss', width: 140, resizable: true },
                        { text: 'System date', datafield: 'SysDate', cellsformat: 'dd-MM-yy', width: 90, resizable: true },
                        { text: 'New date', datafield: 'NewDate', cellsformat: 'dd-MM-yy', width: 90, resizable: true },
                        { text: 'Camp transno', datafield: 'CampTransNo', width: 90, resizable: true },
                        { text: 'Modules executed', datafield: 'ModulesExecuted', width: 300, resizable: true },
                        { text: 'Reason for execution', datafield: 'ReasonForExecution', width: 300, resizable: true },
                        { text: 'Status', datafield: 'Status', width: 130, resizable: true },
                        { text: 'Actions', datafield: 'LinkBar', width: 80, resizable: true }
                    ]
                });
            setInterval(function () {
                $("#jqxOverviewGrid").jqxGrid('updatebounddata');
            }, 4000);
        });
    </script>
</head>
<body class='default'>
     <div id="jqxOverviewGrid"></div>
</body>
</html>

I am afraid that I don’t know how we can proceed with this one, since we can’t replicate it locally.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 2, 2012 at 10:26 am FF Flickering when updating datasource #10453

sdalby

Member

You load local data, Can you introduce some sort of delay simulating a longer load process?

November 2, 2012 at 12:57 pm FF Flickering when updating datasource #10463

sdalby

Member

I have reached the conclusion that I will write my own replacement, so dont spent any more time on this on my behalf

Author

Posts

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

You must be logged in to reply to this topic.