jQWidgets Forums

Tagged: grid autoloadstate

This topic contains 6 replies, has 3 voices, and was last updated by alexz 11 years, 11 months ago.

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

Author

Autoloadstate not working Posts

May 1, 2013 at 3:14 am Autoloadstate not working #20370

greg.o

Member

Hi,

I have just tried turning on the autosavestate and autoloadstate options in the grid. The save appears to be working…

The following was saved in local storage when I have made a format change (just did a column resize on the screen)

{"width":600,"height":400,"pagenum":0,"pagesize":20,"pagesizeoptions":["20","50","100","200","500"],"selectedrowindexes":[],"selectedrowindex":-1,"filters":{"filterscount":0},"groups":[],"columns":{"list":{"width":150,"hidden":false,"pinned":false,"groupable":true,"resizable":true,"draggable":true,"text":"List","align":"left","cellsalign":"left","index":0},"lst_OptionID":{"width":137,"hidden":false,"pinned":false,"groupable":true,"resizable":true,"draggable":true,"text":"Code","align":"left","cellsalign":"left","index":1},"lst_OptionName":{"width":150,"hidden":false,"pinned":false,"groupable":true,"resizable":true,"draggable":true,"text":"Description","align":"left","cellsalign":"left","index":2},"lst_OptionSequence":{"width":90,"hidden":false,"pinned":false,"groupable":true,"resizable":true,"draggable":true,"text":"Sequence","align":"left","cellsalign":"left","index":3},"lst_ID":{"width":null,"hidden":true,"pinned":false,"groupable":true,"resizable":true,"draggable":true,"text":"Lst_ID","align":"left","cellsalign":"left","index":4}}}

But when I refresh the page…

The whole title bar is blank… columns are the right width but no title and no ability to recover it… just have to delete the local storage or turn off the autoloadstate…

Can send you a snapshot if you need.

Any ideas???

Thanks
Greg

May 1, 2013 at 3:49 am Autoloadstate not working #20371

greg.o

Member

Sorry… some more details…

jqwidgets 2.8.3
jquery 1.9.1

browser: chrome Version 26.0.1410.65

Thanks
Greg

May 1, 2013 at 6:31 am Autoloadstate not working #20381

Peter Stoev

Keymaster

Hi Greg,

The information from your post is not enough for reproducing the reported behavior.
Please, provide a sample which demonstrates the problem on your side.

Best Regards,
Peter Stoev

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

May 1, 2013 at 10:31 am Autoloadstate not working #20403

greg.o

Member

Hi Peter,
Thanks! Included is the table definition… I could attach snapshots but not sure how to do that…
let me know if there is anything else that’s relevant.

Thanks again,
Greg

$(“#tblList”).jqxGrid(
{
source: source,
width: 600,
columnsresize: true,
columns: [
{ text: ‘List’, datafield: ‘list’ , width: 150 },
{ text: ‘Code’, datafield: ‘lst_OptionID’ , width: 60 },
{ text: ‘Description’, datafield: ‘lst_OptionName’ , width: 150 },
{ text: ‘Sequence’, datafield: ‘lst_OptionSequence’ , width: 90 },
{ text: ‘Lst_ID’, datafield: ‘lst_ID’ , hidden: true } ],
filterable: true,
sortable: true,
pageable: true,
autoheight: false,
pagesizeoptions: [’20’, ’50’, ‘100’,’200′,’500′],
pagesize: 20,
virtualmode: true,
rendergridrows: dtaList,
autosavestate: true,
autoloadstate: true
});

May 2, 2013 at 1:27 am Autoloadstate not working #20447

Peter Stoev

Keymaster

Hi,

I tried to reproduce the reported behavior without avail.

Below is my test sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this demo jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.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/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="../../jqwidgets/jqxgrid.storage.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.grouping.js"></script>  
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            // generate sample data.
            var generatedata = function (startindex, endindex) {
                var data = {};
                for (var i = startindex; i < endindex; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["id"] = i;
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
                    data[i] = row;
                }
                return data;
            }
            var source =
            {
                datatype: "array",
                localdata: {},
                totalrecords: 1000000
            };
            // load virtual data.
            var rendergridrows = function (params) {
                var data = generatedata(params.startindex, params.endindex);
                return data;
            }
            var totalcolumnrenderer = function (row, column, cellvalue) {
                var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
                return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                autoheight: true,
                source: dataAdapter,
                theme: theme,
                virtualmode: true,
                autosavestate: true,
                autoloadstate: true,
                pagesize: 20,
                groupable: true,
                sortable: true,
                filterable: true,
                columnsresize: true,
                pagesizeoptions: ['20', '50', '100', '200', '500'],
                pageable: true,
                rendergridrows: rendergridrows,
                columns: [
                    { text: 'Id', datafield: 'id', width: 50 },
                    { text: 'First Name', datafield: 'firstname', width: 100 },
                    { text: 'Last Name', datafield: 'lastname', width: 100 },
                    { text: 'Product', datafield: 'productname', width: 180 },
                    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
                    { text: 'Unit Price', datafield: 'price', width: 70, cellsalign: 'right', cellsformat: 'c2' },
                    { text: 'Total', datafield: 'total', hidden: true, cellsrenderer: totalcolumnrenderer, width: 100, cellsalign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

May 2, 2013 at 8:43 pm Autoloadstate not working #20488

alexz

Member

Hi,

I have the same problem, add


showtoolbar:true,
rendertoolbar:function (toolbar) { //some code }

and you will notice that when you don’t have any state saved your toolbar won’t render. After applying some filters toolbar works fine again.

Br, Alex

May 2, 2013 at 10:03 pm Autoloadstate not working #20496

alexz

Member

Ok, now I’ve examined the source code and it seems to be ok in version 2.8.3. I was testing with 2.8.1

Br, Alex

Author

Posts

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

You must be logged in to reply to this topic.