jQuery UI Widgets Forums Grid FF Flickering when updating datasource

This topic contains 9 replies, has 2 voices, and was last updated by  sdalby 11 years, 5 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • FF Flickering when updating datasource #10408

    sdalby
    Member

    Hi

    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?

    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

    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?

    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

    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?

    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

    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);
    • This reply was modified 11 years, 5 months ago by  sdalby.
    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

    FF Flickering when updating datasource #10453

    sdalby
    Member

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

    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

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

You must be logged in to reply to this topic.