jQuery UI Widgets › Forums › Grid › Reset State to Default

Tagged: , , , , , , , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Reset State to Default Posts
  • July 17, 2015 at 9:19 pm Reset State to Default #73902

    bradsolves
    Participant

    We have set a default state for each of our grids and have “autosavestate” set to “true” so that the state of each grid is saved. We have also added functions to load the saved state upon rendering the grid. This all works very well.

    My question is: how can we “forget” the state? I would like to give the users an opportunity to completely clear all memory of each grid’s state (column width, sorting, filtering, etc). We have a button to clear the sorts and filters, but that does not reset column orders, widths, etc. Is there a way to create a button to clear state?

    Thank you in advance

    July 20, 2015 at 6:11 am Reset State to Default #73928

    Dimitar
    Participant

    Hello bradsolves,

    The way to do this is by saving the default state to a variable and, when necessary, load this state as a means of “forgetting” user changes.

    Best Regards,
    Dimitar

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

    August 6, 2015 at 3:24 pm Reset State to Default #74581

    bradsolves
    Participant

    Dimitar,
    Thank you for your reply. Would you please provide an example (or a link to the documentation) that shows how this feature works?
    Thank you,
    Brad

    August 7, 2015 at 5:10 am Reset State to Default #74593

    Dimitar
    Participant

    Hi Brad,

    Here is an example:

    <!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.11.1.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.storage.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/orders.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url,
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var defaultState = null;

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: source,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                autoheight: true,
                autoloadstate: false,
                autosavestate: false,
                columnsresize: true,
                columnsreorder: true,
                showfilterrow: true,
                filterable: true,
                ready: function () {
                    defaultState = $("#jqxgrid").jqxGrid('savestate');
                },
                columns: [
                  { text: 'Ship Name', filtercondition: 'starts_with', datafield: 'ShipName', width: 250 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 200 },
                  { text: 'Ship Country', datafield: 'ShipCountry' }
                ]
            });

            $("#resetState").jqxButton();

            $("#resetState").click(function () {
                $("#jqxgrid").jqxGrid('loadstate', defaultState);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 30px;">
            <input type="button" id="resetState" value="Reset State" />
        </div>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.