Grid savestate - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, jqxgrid, loadstate, multiple, savestate

This topic contains 6 replies, has 4 voices, and was last updated by usrimas 10 years, 10 months ago.

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

Author

Grid savestate Posts

March 28, 2013 at 10:32 am Grid savestate #18197

naatha

Member

Hello,

Is it possible to save different states of the same grid by different names

and later on load the states by selecting the desired states?

Thanks

March 28, 2013 at 10:47 am Grid savestate #18198

Dimitar

Participant

Hello naatha,

Yes, it is possible. Here is how:

<!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.3.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/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            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);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                theme: theme,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                autoheight: true,
                autoloadstate: false,
                autosavestate: false,
                columnsresize: true,
                columnsreorder: true,
                showfilterrow: true,
                filterable: true,
                columns: [
                  { text: 'Ship Name', filtercondition: 'starts_with', datafield: 'ShipName', width: 250 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 200 },
                  { text: 'Ship Country', datafield: 'ShipCountry' }
                ]
            });
            $("#saveState").jqxButton({ theme: theme });
            $("#saveState2").jqxButton({ theme: theme });
            $("#loadState").jqxButton({ theme: theme });
            $("#loadState2").jqxButton({ theme: theme });
            var state = null;
            $("#saveState").click(function () {
                // save the current state of jqxGrid.
                state = $("#jqxgrid").jqxGrid('savestate');
            });
            $("#saveState2").click(function () {
                // save the current state of jqxGrid.
                state2 = $("#jqxgrid").jqxGrid('savestate');
            });
            $("#loadState").click(function () {
                // load the Grid's state.
                if (state) {
                    $("#jqxgrid").jqxGrid('loadstate', state);
                }
                else {
                    $("#jqxgrid").jqxGrid('loadstate');
                }
            });
            $("#loadState2").click(function () {
                // load the Grid's state.
                if (state2) {
                    $("#jqxgrid").jqxGrid('loadstate', state2);
                }
                else {
                    $("#jqxgrid").jqxGrid('loadstate');
                }
            });
        });
    </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="saveState" value="Save State" />
            <input type="button" id="saveState2" value="Save State 2" />
            <input type="button" id="loadState" value="Load State" />
            <input type="button" id="loadState2" value="Load State 2" />
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 28, 2013 at 11:05 am Grid savestate #18200

naatha

Member

Hi Dimitar,

Thanks for your quick replay.

I want to allow the user to save their different grid setting by different name, like MySetting1, MySetting2….to a folder.

Later on the user can load the setting by selecting the names.

Is it possible?

thanks

March 28, 2013 at 11:37 am Grid savestate #18205

Dimitar

Participant

Hi naatha,

Saving different states to different variables is the only way of having multiple saved states of a grid.

Best Regards,
Dimitar

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

May 6, 2013 at 6:41 pm Grid savestate #20640

jim

Member

Hi,

Is there a way to save the state and then load it the next time the page is loaded via a cookie? I’m able to get your sample above working, but need to save and reload the state when the page is reloaded.

Jim

March 1, 2014 at 10:30 pm Grid savestate #50353

usrimas

Participant

Hi,

Can savestate/loadstate be done to/from database ( mysql ) ? As I can understand , then user save own state , it save to local pc. But with pc, user can’t get the saved state . I’m prefering database , because it can be more flexible …

With best regards !

March 1, 2014 at 11:02 pm Grid savestate #50354

usrimas

Participant

Found solution for that :
http://www.jqwidgets.com/community/topic/grid-saving-state-to-database/

Author

Posts

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

You must be logged in to reply to this topic.