jQWidgets Forums

Tagged: grid, grid sort mode, sortmode

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

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

Author

sortmode many : savestate 1 Posts

August 8, 2018 at 5:33 am sortmode many : savestate 1 #101419

Manabu Suzuki

Participant

Hello

An error occurs in this flow.

1. To sortmode “many”
2. To Sort (many column)
3. $(“#@@@”).jqxGrid(“savestate”);
4. $(“#@@@”).jqxGrid(“loadstate”);
5. To sort one column

and

When saving a column, redrawing a grid with no data will result in an error.

<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<div>
        <input type="button" value="Button_save" id='jqxButton_save' />
    </div>
    
    <div>
        <input type="button" value="Button_load" id='jqxButton_load' />
    </div>

 var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     //source: adapter,
     sortable: true,
    sortmode: 'many',
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         width: 90
     }, {
         text: 'Last Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }]
 });
 $("#jqxgrid").jqxGrid("loadstate");
 
 console.log("test")
 
 $("#jqxButton_save").jqxButton({ width: 120, height: 40 });
 $("#jqxButton_load").jqxButton({ width: 120, height: 40 });
 
  $("#jqxButton_save").on('click', function () {
   $("#jqxgrid").jqxGrid("savestate");
  });
  
   $("#jqxButton_load").on('click', function () {
   $("#jqxgrid").jqxGrid("loadstate");
  });

I am sorry my english is not good
thank you

August 8, 2018 at 6:22 am sortmode many : savestate 1 #101422

Peter Stoev

Keymaster

Hi Manabu,

We cannot reproduce this with jQWidgets ver. 6.0.5. Which version of jQWidgets do you use?

Example code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to Save/Load the Grid's state.</title>
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../scripts/jquery-1.12.4.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);

            $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                source: source,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                autoheight: true,
                autoloadstate: false,
                sortmode: 'many',
                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 });
            $("#loadState").jqxButton({ theme: theme });
            var state = null;
            $("#saveState").click(function () {
                // save the current state of jqxGrid.
                state = $("#grid").jqxGrid('savestate');
            })
            ;
            $("#loadState").click(function () {
                // load the Grid's state.
                if (state) {
                    $("#grid").jqxGrid('loadstate', state);
                }
                else {
                    $("#grid").jqxGrid('loadstate');
                }
            });
        });
    </script>
</head>
<body class='default'>
        <div id="grid">
        </div>
        <div style="margin-top: 30px;">
            <input type="button" id="saveState" value="Save State" />
            <input type="button" id="loadState" value="Load State" />
        </div>
</body>
</html>

Steps:

1. Sort multiple columns.
2. Save State
3. Load State
4. Sort again.

No error occurs.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

August 8, 2018 at 6:54 am sortmode many : savestate 1 #101423

Peter Stoev

Keymaster

Update, I managed to reproduce it when the Grid is without data. We will update this in 6.0.6 version.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

August 8, 2018 at 7:31 am sortmode many : savestate 1 #101425

Manabu Suzuki

Participant

I’m sorry.
Not an error,
I sorted several columns and saved them, but when loading, only one column is sorted.

There was one kind of sort row stored in local storage.

I think that this is probably the cause.

Thank you.

Author

Posts

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

You must be logged in to reply to this topic.