Programmatically changing font color of labels - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: jqxtree, programmatically change color, Tree, updateItem

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

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

Author

Programmatically changing font color of labels Posts

October 15, 2014 at 10:32 pm Programmatically changing font color of labels #61207

Participant

I have a JSON jqxTree that is being rendered properly (with Label, id, value, etc). And I have a list of ids that need to be colored differently when the tree get rendered. I was thinking, that after the tree initializes I should traverse the tree and set the style for each element’s id that I have in the list.

The issue I am facing is that from the event initialize() that gets fired, I have no idea how to traverse it and set the style of the elements.

This is what I have so far…

var myList = ${myList};
var colorChangeList= ${colorChangeList};

$(‘#jqxTree’).on(‘initialized’, function (event) {
alert(‘initialized:’ + event);
// put in logic to set labels of id’s to blue
for(Item item : theTree) {
if(item.id belongsIn(colorChangeList) {
item.label.color = blue;
}
}
});

$(‘#jqxTree’).jqxTree({
source : myList,
height : ‘100%’,
width : ‘50%’
}

October 16, 2014 at 8:03 am Programmatically changing font color of labels #61232

Nadezhda

Participant

Hello arossol,

Here is an example which shows how to change font color programmatically:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></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="../../scripts/demos.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0;
            margin: 0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
            {
                "id": "2",
                "parentid": "1",
                "text": "Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "3",
                "parentid": "1",
                "text": "Peppermint Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "4",
                "parentid": "1",
                "text": "Salted Caramel Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "5",
                "parentid": "1",
                "text": "White Hot Chocolate",
                "value": "$2.3"
            }, {
                "text": "Chocolate Beverage",
                "id": "1",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "6",
                "text": "Espresso Beverage",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "7",
                "parentid": "6",
                "text": "Caffe Americano",
                "value": "$2.3"
            }, {
                "id": "8",
                "text": "Caffe Latte",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "9",
                "text": "Caffe Mocha",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "10",
                "text": "Cappuccino",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "11",
                "text": "Pumpkin Spice Latte",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "12",
                "text": "Frappuccino",
                "parentid": "-1"
            }, {
                "id": "13",
                "text": "Caffe Vanilla Frappuccino",
                "parentid": "12",
                "value": "$2.3"
            }, {
                "id": "15",
                "text": "450 calories",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "16",
                "text": "16g fat",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "17",
                "text": "13g protein",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "14",
                "text": "Caffe Vanilla Frappuccino Light",
                "parentid": "12",
                "value": "$2.3"
            }]
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'parentid' },
                    { name: 'text' },
                    { name: 'value' }
                ],
                id: 'id',
                localdata: data
            };
 
            // create data adapter.
            var dataAdapter = new $.jqx.dataAdapter(source);
                             
            // perform Data Binding.
            dataAdapter.dataBind();
            // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
            // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
            // specifies the mapping between the 'text' and 'label' fields.  
            var myList = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
            $('#jqxTree').on('initialized', function (event) {
                var treeItems = $("#jqxTree").jqxTree('getItems');
                var firstItem = treeItems[0];
                $('#jqxTree').jqxTree('updateItem', firstItem, { label : "<span style='color: red;'>" + firstItem.label + "</span>" });
            
                alert("You created the Tree"); 
            });
            $('#jqxTree').jqxTree({ source: myList, width: '300px' });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxTree'>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

October 16, 2014 at 5:32 pm Programmatically changing font color of labels #61261

arossol

Participant

Yes that’s what I need. thanks a ton!

Author

Posts

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

You must be logged in to reply to this topic.