column index - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: column, grid, group, groupable, index, jqxgrid, load, loadstate, reorder, save, savestate, state

This topic contains 4 replies, has 3 voices, and was last updated by Dimitar 10 years, 12 months ago.

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

Author

column index Posts

September 25, 2013 at 10:11 am column index #29550

rajiv

Member

when I do grouping, the index of column is getting changed, so when i load the state of grid, order of column is getting changed.but I don’t want to change the then order, because my first column having checkbox, after loading state it goes to 2-3 position.

Could you please tell me how to maintain order of column while grouping.

Regards
Rajiv Kumar

October 14, 2013 at 7:05 am column index #30672

sved

Participant

Same problem on my side, moreover when I group by any column, the checkbox column dissapear. I’m using 3.0.3 (with 3.0.2) the issue is not reproducable

October 15, 2013 at 6:54 am column index #30722

Dimitar

Participant

Hello,

We could not reproduce the reported issues with the current version of jQWidgets (3.0.3). Here is the example we tested with:

<!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.10.2.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/jqxcheckbox.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.edit.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.grouping.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // prepare the data
            var data = generatedata(200, true);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                theme: theme,
                columnsresize: true,
                columnsreorder: true,
                autoloadstate: false,
                autosavestate: false,
                groupable: true,
                columns: [
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 100 },
                  { text: 'Last Name', editable: false, datafield: 'lastname', width: 100 },
                  { text: 'Product', editable: false, datafield: 'productname', width: 180 },
                  { text: 'Available', datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70 },
                  { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', editable: false, datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', editable: false, datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $("#saveState").jqxButton({ theme: theme });
            $("#loadState").jqxButton({ theme: theme });
            var state = null;
            $("#saveState").click(function () {
                // save the current state of jqxGrid.
                state = $("#jqxgrid").jqxGrid('savestate');
            })
            ;
            $("#loadState").click(function () {
                // load the Grid's state.
                if (state) {
                    $("#jqxgrid").jqxGrid('loadstate', state);
                }
                else {
                    $("#jqxgrid").jqxGrid('loadstate');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
        <div id="jqxgrid">
        </div>
    </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>

Please provide us with a step-by-step guide to reproducing the issue with the provided example.

Best Regards,
Dimitar

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

October 15, 2013 at 2:47 pm column index #30759

sved

Participant

Hello your example doesn’t contains checkbox. Please just add selectionmode: ‘checkbox’, while initializing the grid in the properties and try to group + reorder the columns. Right after that, hit the savestate + loadstate.

October 16, 2013 at 6:22 am column index #30798

Dimitar

Participant

Hi sved,

We were not able to reproduce the reported issue, following these steps:

1) Group by any two columns;
2) Reorder the columns;
3) Click Save State;
4) Reorder the columns some more;
5) Click Load State.

The result is that the first reordering of the columns is restored. The checkbox selection column is intact.

The only change from the previous example is selectionmode: “checkbox”. Version of jQWidgets used – 3.0.3. Tested under Internet Explorer 9, Google Chrome and Firefox.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.