jQuery UI Widgets Forums TreeGrid TreeGrid Column Cells Alignment

This topic contains 10 replies, has 5 voices, and was last updated by  admin 3 years, 8 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • TreeGrid Column Cells Alignment #49590

    Gary
    Participant

    Can you please review my attached code. I/m having trouble with several features working using jqxTreeGrid in build 3.2.1. I’m also using jquery 1.10.2. Happens in IE11, Chrome and Firefox.

    1. Cell Alignment
    2. Aggregates for overall summary total
    3. Expand Row function

    Attached code:

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=”Description”>TreeGrid Data Grouping.</title>
    <meta name=”description” content=”Data Grouping – JavaScript Tree Grid Demo | jQWidgets”>
    <link rel=”stylesheet” href=”../lib/jqwidgets/styles/jqx.base.css” type=”text/css”/>
    <link rel=”stylesheet” href=”../lib/jqwidgets/styles/jqx.energyblue.css” type=”text/css”/>
    <link rel=”stylesheet” href=”../css/Bootstrap-Extra.css” type=”text/css”/>

    <script type=”text/javascript” src=”../lib/jquery/jquery-1.10.2.min.js”></script>

    <script type=”text/javascript” src=”../lib/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxdatatable.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxtreegrid.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    var theme = ‘energyblue’;

    // Input Test data
    var accounts = [
    {“AcctID”: 1, “AcctOpenDate”: “01\/01\/2003”, “AcctCat”: “Banking”, “AcctName”: “Checking”, “AcctNumber”: “0”, “AcctBalance”: 2350},
    {“AcctID”: 2, “AcctOpenDate”: “01\/01\/2003”, “AcctCat”: “Banking”, “AcctName”: “Savings”, “AcctNumber”: “0”, “AcctBalance”: 33472},
    {“AcctID”: 3, “AcctOpenDate”: “01\/01\/2003”, “AcctCat”: “Banking”, “AcctName”: “Visa”, “AcctNumber”: “0”, “AcctBalance”: -2357},
    {“AcctID”: 4, “AcctOpenDate”: “01\/01\/2003”, “AcctCat”: “Investing”, “AcctName”: “401K”, “AcctNumber”: “0”, “AcctBalance”: 50000}
    ];

    var cellClass = function (row, dataField, cellText, rowData) {
    var cellValue = rowData[dataField];
    if (cellValue < 1000) {
    return “min”;
    }
    if (cellValue < 0) {
    return “minavg”;
    }
    if (cellValue > 40000) {
    return “avg”;
    }
    return “max”;
    };

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘AcctID’, type: ‘int’ },
    { name: ‘AcctOpenDate’, type: ‘date’},
    { name: ‘AcctCat’, type: ‘string’ },
    { name: ‘AcctName’, type: ‘string’ },
    { name: ‘AcctNumber’, type: ‘string’ },
    { name: ‘AcctBalance’, type: ‘number’ }

    ],
    hierarchy: {
    groupingDataFields: [
    { name: “AcctCat” }
    ]
    },
    id: ‘AcctID’,
    localData: accounts
    };

    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);

    // create Tree Grid
    $(“#treeGrid”).jqxTreeGrid(
    {
    height: 394,
    width: 475,
    source: dataAdapter,
    theme: theme,
    pageable: true,
    columnsResize: true,
    showAggregates: true,
    showSubAggregates: true,
    aggregatesHeight: 70,
    altRows: true,
    ready: function () {
    $(“#treeGrid”).jqxTreeGrid(‘expandRow’, 0);
    $(“#treeGrid”).jqxTreeGrid(‘expandRow’, 1);
    },
    columns: [
    { text: ‘Account’, dataField: ‘AcctName’, width: 200 },
    { text: ‘Open Date’, dataField: ‘AcctOpenDate’, width: 125, cellsFormat: ‘d’ },
    { text: ‘Balance’, dataField: ‘AcctBalance’, width: 150, cellsFormat: ‘c2’, cellClassName: cellClass, aggregates: [‘sum’, ‘count’]}
    ]
    });

    $(“#columnAlignment”).jqxDropDownList({selectedIndex: 0, autoDropDownHeight: true, source: [‘Left’, ‘Center’, ‘Right’], height: 25 });
    $(“#columnAlignment”).on(‘change’, function (event) {

    var index = event.args.index;

    switch (index) {
    case 0:
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctBalance’, ‘align’, ‘left’);
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctOpenDate’, ‘align’, ‘left’);
    break;
    case 1:
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctBalance’, ‘align’, ‘center’);
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctOpenDate’, ‘align’, ‘center’);
    break;
    case 2:
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctBalance’, ‘align’, ‘right’);
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctOpenDate’, ‘align’, ‘right’);
    break;
    }
    });

    $(“#cellsAlignment”).jqxDropDownList({ selectedIndex: 0, autoDropDownHeight: true, source: [‘Left’, ‘Center’, ‘Right’], height: 25 });
    $(“#cellsAlignment”).on(‘change’, function (event) {
    var index = event.args.index;
    switch (index) {
    case 0:
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctOpenDate’, ‘cellsAlign’, ‘left’);
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctBalance’, ‘cellsAlign’, ‘left’);

    break;
    case 1:
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctOpenDate’, ‘cellsAlign’, ‘center’);
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctBalance’, ‘cellsAlign’, ‘center’);

    break;
    case 2:
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctOpenDate’, ‘cellsAlign’, ‘right’);
    $(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘AcctBalance’, ‘cellsAlign’, ‘right’);
    break;
    }
    });

    $(‘#treeGrid’).on(‘rowClick’, function (event) {
    var args = event.args;
    var row = args.row;
    if (row.AcctName != undefined) {
    alert(“The row you clicked is: ” + row.AcctName);
    }
    });

    });
    </script>
    </head>
    <body class=’default’>
    <div id=”treeGrid”></div>
    <div style=”font-size: 13px; font-family: Verdana; width: 600px; margin-top: 10px;”>
    <div style=”float: left; width: 300px;”>
    <h4>Column Alignment</h4>

    <div id=”columnAlignment”></div>
    </div>
    <div style=”float: left; width: 300px;”>
    <h4>Cells Alignment</h4>

    <div id=”cellsAlignment”></div>
    </div>
    </div>
    </body>
    </html>

    TreeGrid Column Cells Alignment #49597

    Peter Stoev
    Keymaster

    Hi Gary,

    The only issue is the one with the cells alignment and it would be fixed in the next version. Expand/Collapse works fine, the problem is that you passed wrong data key for the root rows. The code should be:$("#treeGrid").jqxTreeGrid('expandRow', "Row0");

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    • This reply was modified 10 years, 2 months ago by  Peter Stoev.
    TreeGrid Column Cells Alignment #49641

    Gary
    Participant

    Peter,

    Thanks….

    Gary

    TreeGrid Column Cells Alignment #54575

    Gopre400
    Participant

    I see this was a few months ago, but does cellsAlign work in Tree Grid?

    Despite adding cellsAlign: ‘right’, the column still aligns left…

    { text: ‘Bid Total’, datafield: ‘BidTotal’, align: ‘right’, cellsAlign: ‘right’, cellsformat: ‘c2’, editable: false, width: 100,

    TreeGrid Column Cells Alignment #54577

    Peter Stoev
    Keymaster

    Hi Gopre400,

    Yes, cellsAlign works pretty fine in the TreeGrid. Example #1: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-column-alignment.htm?arctic, Example #2: http://jsfiddle.net/3Rd98/ – See the second column’s Alignment.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    TreeGrid Column Cells Alignment #112673

    robf
    Participant

    Hello Peter,
    My tree grid does not move (render) its children to the right – i.e. all children data show directly under the parent when I click the arrow.

    How is this done?

    Thanks.

    https://ibb.co/Ch0PGV9

    • This reply was modified 3 years, 8 months ago by  robf.
    TreeGrid Column Cells Alignment #112675

    robf
    Participant

    Oddly, when I use the ‘metrodark’ theme it aligns children properly. Classic, energyblue does not. ??

    https://ibb.co/7NT7cb5

    • This reply was modified 3 years, 8 months ago by  robf.
    TreeGrid Column Cells Alignment #112682

    admin
    Keymaster

    Hi robf,

    Could you please share a jsfiddle, which shows an error with that? The reason i ask for a sample is that our demo works correctly online and it is possible that some other CSS affects the alignment in your case.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    TreeGrid Column Cells Alignment #112688

    robf
    Participant

    Hi Peter,
    The problem seems to occur when the first column width is too narrow and then wrapping occurs. I noticed because I resized it wider and then it fell into place. How do we keep that column fixed width without wrapping to show the proper visual hierarchy? Is this a feature of the treegrid?
    Thank you.
    Rob

    TreeGrid Column Cells Alignment #112689

    robf
    Participant

    Peter. Success! I found these options which appear to solve.
    minWidth: 150,
    width: 150,
    autoCellHeight:false

    Thank you!

    TreeGrid Column Cells Alignment #112693

    admin
    Keymaster

    Hi Rob,

    The autoCellHeight wraps the content so event if text alignment is set, the wrapping makes is obsolete. You’re right. I forgot about that option and thanks a lot about the feedback.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.