jQuery UI Widgets Forums Angular Tooltip for jqxTree in Angular 4 framework

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 6 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • ponraj
    Participant

    How can we add tooltip to jqxTree in Angular? Tree is getting created using JSON data in create component method.


    Hristo
    Participant

    Hello ponraj,

    You could try this approach with TypeScript.
    Please, take a look at this demo:

     -[ app.component.html: ]-
    <jqxTree #myTree></jqxTree>
    
     -[ app.component.ts: ]-
    import { Component, ViewChild, AfterViewInit } from '@angular/core';
    import { jqxTreeComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtree';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    
    export class AppComponent implements AfterViewInit {
        @ViewChild('myTree') myTree: jqxTreeComponent;
    
        ngAfterViewInit() {
            this.myTree.createComponent(this.settings);
    
            let treeItems = document.getElementsByClassName('jqx-tree-item');
            for (let item in treeItems) {
                let currentItem = treeItems[item];
                try {
                    jqwidgets.createInstance('#' + currentItem.id, 'jqxTooltip', { content: '100% tested <br/>' + (<HTMLElement>currentItem).innerText });
                }
                catch (error) {
                    //console.log('Error:', error);
                }
            }
        }
    
        data: any[] = [
            {
                '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
        source = {
            datatype: 'json',
            datafields: [
                { name: 'id' },
                { name: 'parentid' },
                { name: 'text' },
                { name: 'value' }
            ],
            id: 'id',
            localdata: this.data
        };
        // create data adapter & perform Data Binding.
        dataAdapter = new jqx.dataAdapter(this.source, { autoBind: true });
    
        // 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.  
        records: any = this.dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
    
        settings: any = {
            source: this.records,
            width: '300px'
        };
    }
    

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 6 years ago by  Hristo.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.