jQWidgets Forums

jQuery UI Widgets › Forums › Grid › action after loadstate

Tagged: ,

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    action after loadstate Posts
  • November 6, 2017 at 10:32 am action after loadstate #97118

    drinktea
    Participant

    i want to do something(eg.change the grid css) after loadstate
    is there any event i can use to detect if the loadstate is finish?

    November 6, 2017 at 2:22 pm action after loadstate #97124

    Stanislav
    Participant

    Hello drinktea,

    Here is a post that should help you:
    Example

    Best Regards,
    Stanislav

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

    November 6, 2017 at 2:47 pm action after loadstate #97125

    drinktea
    Participant

    thank for your help
    i have try the
    1.window.onload = function () { alert(“It’s loaded!”) }
    2.var chkReadyState = setInterval(function() {
    if (document.readyState == “complete”) {
    // clear the interval
    clearInterval(chkReadyState);
    // finally your page is loaded.
    alert(‘finish’);
    }
    }, 100);
    but the message shows before loadstate finish rendering the grid

    November 6, 2017 at 3:32 pm action after loadstate #97128

    Stanislav
    Participant

    Hello drinktea,

    I did some testing, and your sample seemed to work just fine.
    Maybe you have something else that might hinder the code.

    Best Regards,
    Stanislav

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

    November 6, 2017 at 4:32 pm action after loadstate #97129

    drinktea
    Participant

    i write the sample code below to test
    what can i do if i want to alert(finish loading) after “loadstate”
    loadstate did not fire the window.onload event
    thanks again

    <script type=”text/javascript”>
    $(document).ready(function () {
    var data = generatedata(500);
    var source =
    {
    localdata: data,
    datafields:
    [
    { name: ‘name’, type: ‘string’ },
    { name: ‘productname’, type: ‘string’ },
    { name: ‘available’, type: ‘bool’ },
    { name: ‘date’, type: ‘date’},
    { name: ‘quantity’, type: ‘number’ }
    ],
    datatype: “array”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $(“#grid”).jqxGrid(
    {

    source: dataAdapter,
    showfilterrow: true,
    filterable: true,
    columnsresize: true,

    selectionmode: “checkbox” ,
    columns: [
    { text: ‘Name’, datafield: ‘name’, width: 215 },

    {
    text: ‘Product’, filtertype: ‘textbox’, datafield: ‘productname’, width: 220
    },
    { text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 67 },
    { text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘range’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’ },
    { text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘right’ }
    ]
    });

    $(‘#savestatebutton’).jqxButton({ height: 25});
    $(‘#loadstatebutton’).jqxButton({ height: 25});
    $(‘#savestatebutton’).click(function () {
    $(“#grid”).jqxGrid(‘savestate’);
    });
    $(‘#loadstatebutton’).click(function () {
    $(“#grid”).jqxGrid(‘loadstate’);
    alert(“It’s loaded!”)
    });
    });
    window.onload = function () { alert(“It’s loaded!”) }
    </script>
    </head>
    <body class=’default’>
    <div id=”grid”>
    </div>
    <input style=”margin-top: 10px;” value=”savestatebutton” id=”savestatebutton” type=”button” />
    <input style=”margin-top: 10px;” value=”loadstatebutton” id=”loadstatebutton” type=”button” />
    </body>
    </html>

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.