jQuery UI Widgets Forums Grid column index

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    column index Posts
  • column index #29550



    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.

    Rajiv Kumar

    column index #30672


    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

    • This reply was modified 10 years, 7 months ago by  sved.
    column index #30722



    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">
    <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,
    { 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
    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 {
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
    <div id="jqxgrid">
    <div style="margin-top: 30px;">
    <input type="button" id="saveState" value="Save State" />
    <input type="button" id="loadState" value="Load State" />

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

    Best Regards,

    jQWidgets team

    column index #30759


    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.

    column index #30798


    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,

    jQWidgets team

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

You must be logged in to reply to this topic.