jQWidgets Forums

jQuery UI Widgets › Forums › Grid › jqxGrid: Column Groups initialization Error – Columns Hierarchy

Tagged: 

This topic contains 6 replies, has 2 voices, and was last updated by  arunthatham 10 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    jqxGrid: Column Groups initialization Error – Columns Hierarchy Posts
  • May 12, 2015 at 11:46 am jqxGrid: Column Groups initialization Error – Columns Hierarchy #70993

    arunthatham
    Participant

    HI,

    Am working on columns hierarchy feature of jqxGrid and am trying to group column 1 and 3 in an array of 10 columns. But am getting the following error:
    jqxGrid: Column Groups initialization Error. Please, check the initialization of the jqxGrid’s columns array. The columns in a column group are expected to be siblings in the columns array.

    Regards,
    Arunthatham

    May 12, 2015 at 11:52 am jqxGrid: Column Groups initialization Error – Columns Hierarchy #70995

    Peter Stoev
    Keymaster

    Hi Arunthatham,

    The exception is thrown by us to point you out how to correctly create Column Groups.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    May 12, 2015 at 12:34 pm jqxGrid: Column Groups initialization Error – Columns Hierarchy #71000

    arunthatham
    Participant

    HI,

    Thanks for replying. I understand the exception. But what does it mean? Am getting it when am trying to group column 1 and 3 in an array of 10 columns. Is this not possible? Please let me know the correct steps.

    May 12, 2015 at 12:40 pm jqxGrid: Column Groups initialization Error – Columns Hierarchy #71003

    Peter Stoev
    Keymaster

    Hi Arunthatham,

    I do not know what you do in your code so please share jsfiddle.net sample which demonstrates your scenario.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    May 12, 2015 at 12:50 pm jqxGrid: Column Groups initialization Error – Columns Hierarchy #71006

    arunthatham
    Participant

    HI Peter,

    Below is the default code of columns hierarchy with a small change. I have removed column group for “OrderDate”. Wont it automatically group the columns “Freight” and “Order Address”?

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>This sample illustrates the Columns Hierarchy feature of jqxGrid.
    </title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.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/jqxgrid.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.columnsresize.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsreorder.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.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/jqxpanel.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=”../../scripts/demos.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {

    // prepare the data
    var source =
    {
    datatype: “xml”,
    datafields: [
    { name: ‘SupplierName’, type: ‘string’ },
    { name: ‘Quantity’, type: ‘number’ },
    { name: ‘OrderDate’, type: ‘date’ },
    { name: ‘OrderAddress’, type: ‘string’ },
    { name: ‘Freight’, type: ‘number’ },
    { name: ‘Price’, type: ‘number’ },
    { name: ‘City’, type: ‘string’ },
    { name: ‘ProductName’, type: ‘string’ },
    { name: ‘Address’, type: ‘string’ }
    ],
    url: ‘../sampledata/orderdetailsextended.xml’,
    root: ‘DATA’,
    record: ‘ROW’
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function () {

    }
    });
    // create jqxgrid.
    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    groupable:false,
    source: dataAdapter,
    pageable: true,
    autorowheight: true,
    altrows: true,
    columnsresize: true,
    columnsreorder:true,
    columns: [
    { text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘SupplierName’, width: 110 },
    { text: ‘Name’, columngroup: ‘ProductDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 },
    { text: ‘Quantity’, columngroup: ‘ProductDetails’, datafield: ‘Quantity’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 80 },
    { text: ‘Freight’, columngroup: ‘OrderDetails’, datafield: ‘Freight’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 100 },
    { text: ‘Order Date’, cellsalign: ‘center’, align: ‘center’, cellsformat: ‘d’, datafield: ‘OrderDate’, width: 100 },
    { text: ‘Order Address’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘OrderAddress’, width: 100 },
    { text: ‘Price’, columngroup: ‘ProductDetails’, datafield: ‘Price’, cellsformat: ‘c2’, align: ‘center’, cellsalign: ‘center’, width: 70 },
    { text: ‘Address’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘Address’, width: 120 },
    { text: ‘City’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘City’, width: 80 }
    ],
    columngroups:
    [
    { text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’ },
    { text: ‘Order Details’, parentgroup: ‘ProductDetails’, align: ‘center’, name: ‘OrderDetails’ },
    { text: ‘Location’, align: ‘center’, name: ‘Location’ }
    ]
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=”jqxgrid”>
    </div>
    </body>
    </html>

    Thanks,
    Arunthatham.

    May 12, 2015 at 12:52 pm jqxGrid: Column Groups initialization Error – Columns Hierarchy #71007

    Peter Stoev
    Keymaster

    No it won’t. They’re not siblings as its written in the exception.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    May 12, 2015 at 1:06 pm jqxGrid: Column Groups initialization Error – Columns Hierarchy #71008

    arunthatham
    Participant

    Hi Peter,

    Thanks for the reply. So it means that the columns to be grouped should be placed next to each other in the columns array. I have one more doubt. I want to reorder all the columns in the array. I understand that the column groups can not be dragged to reorder. But I want to place a column which is not part of any group in front of a group. The modified code is below. I have remove column “Price” from the “ProductDetails” group. Now I want to drag and drop in front of the group. ie., next to SupplierName. How do I achieve that?

    Note: Am able to drag drop a column in front of the group if there are already two columns if front of the group.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>This sample illustrates the Columns Hierarchy feature of jqxGrid.
    </title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.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/jqxgrid.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.columnsresize.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsreorder.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.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/jqxpanel.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=”../../scripts/demos.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {

    // prepare the data
    var source =
    {
    datatype: “xml”,
    datafields: [
    { name: ‘SupplierName’, type: ‘string’ },
    { name: ‘Quantity’, type: ‘number’ },
    { name: ‘OrderDate’, type: ‘date’ },
    { name: ‘OrderAddress’, type: ‘string’ },
    { name: ‘Freight’, type: ‘number’ },
    { name: ‘Price’, type: ‘number’ },
    { name: ‘City’, type: ‘string’ },
    { name: ‘ProductName’, type: ‘string’ },
    { name: ‘Address’, type: ‘string’ }
    ],
    url: ‘../sampledata/orderdetailsextended.xml’,
    root: ‘DATA’,
    record: ‘ROW’
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function () {

    }
    });
    // create jqxgrid.
    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    groupable:false,
    source: dataAdapter,
    pageable: true,
    autorowheight: true,
    altrows: true,
    columnsresize: true,
    columnsreorder:true,
    columns: [
    { text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘SupplierName’, width: 110 },
    { text: ‘Name’, columngroup: ‘ProductDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 },
    { text: ‘Quantity’, columngroup: ‘ProductDetails’, datafield: ‘Quantity’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 80 },
    { text: ‘Freight’, columngroup: ‘OrderDetails’, datafield: ‘Freight’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 100 },
    { text: ‘Order Date’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, cellsformat: ‘d’, datafield: ‘OrderDate’, width: 100 },
    { text: ‘Order Address’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘OrderAddress’, width: 100 },
    { text: ‘Price’, datafield: ‘Price’, cellsformat: ‘c2’, align: ‘center’, cellsalign: ‘center’, width: 70 },
    { text: ‘Address’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘Address’, width: 120 },
    { text: ‘City’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘City’, width: 80 }
    ],
    columngroups:
    [
    { text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’ },
    { text: ‘Order Details’, parentgroup: ‘ProductDetails’, align: ‘center’, name: ‘OrderDetails’ },
    { text: ‘Location’, align: ‘center’, name: ‘Location’ }
    ]
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=”jqxgrid”>
    </div>
    </body>
    </html>

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.