TreeGrid Column Cells Alignment - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: text alignment in tree grid, tree grid ui component, treegrid

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

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

Author

TreeGrid Column Cells Alignment Posts
February 16, 2014 at 10:42 pm 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>

February 17, 2014 at 6:20 am 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

February 17, 2014 at 6:03 pm TreeGrid Column Cells Alignment #49641

Gary
Participant

Peter,

Thanks….

Gary

May 16, 2014 at 7:03 pm 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,

May 16, 2014 at 7:41 pm 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

August 14, 2020 at 5:04 am 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

August 14, 2020 at 5:29 am 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

August 14, 2020 at 2:28 pm 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

August 15, 2020 at 8:13 am 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

August 15, 2020 at 8:20 am 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!

August 16, 2020 at 5:20 pm 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
Author

Posts

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

You must be logged in to reply to this topic.