jQuery UI Widgets Forums Angular Expand JqxTreeGrid row and sub row based on button click

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 1 week, 3 days ago.

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

  • angulardev19
    Participant

    Hi,
    I want to implement collapse/expand based on selection of button(‘1′,’2′,’3’,..)in tree. If I click on the button-1 open all level-1 rows, the same way if I click on button-2 then open rows only up to level-2, same for 3 and more.

    I have attached my code.

    app.component.ts

    import { Component, ViewChild } from ‘@angular/core’;

    import { jqxTreeGridComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxtree.ts’;

    @Component({
    selector: ‘app-root’,
    templateUrl: ‘./app.component.html’
    })

    export class AppComponent {
    @ViewChild(‘TreeGrid’) treeGrid: jqxTreeGridComponent

    getWidth() : any {
    if (document.body.offsetWidth < 850) {
    return ‘90%’;
    }

    return 850;
    }

    demoloop(id:any){
    debugger
    let lengg = parseInt(id)
    for(let i=lengg; i>=0; i–){
    this.demo(i);
    }
    }

    demo(id:any){
    debugger;
    let listrow = this.treeGrid.getRows();
    this.treeGrid.collapseAll();
    if(id === ‘*’){
    this.treeGrid.expandAll();
    }
    let leng = parseInt(id)
    console.log(leng)
    for(let i = 0; i < leng; i++){
    console.log(i)
    this.treeGrid.expandRow(i);

    }
    }

    data: any[] = [
    {
    ‘id’: ‘1’, ‘name’: ‘Corporate Headquarters’, ‘budget’: ‘1230000’, ‘location’: ‘Las Vegas’,
    ‘children’:
    [
    {
    ‘id’: ‘2’, ‘name’: ‘Finance Division’, ‘budget’: ‘423000’, ‘location’: ‘San Antonio’,
    ‘children’:
    [
    {
    ‘id’: ‘4’, ‘name’: ‘Investment Department’, ‘budget’: ‘310000’, ‘location’: ‘San Antonio’,
    ‘children’:
    [
    { ‘id’: ‘5’, ‘name’: ‘Banking Office’, ‘budget’: ‘240000’, ‘location’: ‘San Antonio’ },
    { ‘id’: ‘6’, ‘name’: ‘Bonds Office’, ‘budget’: ‘70000’, ‘location’: ‘San Antonio’ },
    ]
    },
    { ‘id’: ‘3’, ‘name’: ‘Accounting Department’, ‘budget’: ‘113000’, ‘location’: ‘San Antonio’ }
    ]
    },
    {
    ‘id’: ‘7’, ‘name’: ‘Operations Division’, ‘budget’: ‘600000’, ‘location’: ‘Miami’,
    ‘children’:
    [
    { ‘id’: ‘8’, ‘name’: ‘Manufacturing Department’, ‘budget’: ‘300000’, ‘location’: ‘Miami’ },
    { ‘id’: ‘9’, ‘name’: ‘Public Relations Department’, ‘budget’: ‘200000’, ‘location’: ‘Miami’ },
    { ‘id’: ’10’, ‘name’: ‘Sales Department’, ‘budget’: ‘100000’, ‘location’: ‘Miami’ }
    ]
    },
    { ‘id’: ’11’, ‘name’: ‘Research Division’, ‘budget’: ‘200000’, ‘location’: ‘Boston’,
    ‘children’:
    [
    { ‘id’: ’12’, ‘name’: ‘Banking Office’, ‘budget’: ‘240000’, ‘location’: ‘San Antonio’ },
    { ‘id’: ’13’, ‘name’: ‘Bonds Office’, ‘budget’: ‘70000’, ‘location’: ‘San Antonio’,
    ‘children’:
    [
    { ‘id’: ’14’, ‘name’: ‘Banking Office’, ‘budget’: ‘240000’, ‘location’: ‘San Antonio’ },
    { ‘id’: ’15’, ‘name’: ‘Bonds Office’, ‘budget’: ‘70000’, ‘location’: ‘San Antonio’ },
    ] },
    ] }
    ]
    }
    ];

    source: any =
    {
    dataType: ‘json’,
    dataFields: [
    { name: ‘name’, type: ‘string’ },
    { name: ‘budget’, type: ‘number’ },
    { name: ‘id’, type: ‘number’ },
    { name: ‘children’, type: ‘array’ },
    { name: ‘location’, type: ‘string’ }
    ],
    hierarchy:
    {
    root: ‘children’
    },
    localData: this.data,
    id: ‘id’
    };

    dataAdapter: any = new jqx.dataAdapter(this.source, {
    loadComplete: () => {
    }
    });

    ready(): void {
    // this.treeGrid.expandRow(1);
    // this.treeGrid.expandRow(2);
    };

    columns: any[] = [
    { text: ‘Name’, align: ‘center’, dataField: ‘name’, width: 200 },
    { text: ‘Location’, dataField: ‘location’, cellsAlign: ‘center’, align: ‘center’, width: 150 },
    {
    text: ‘Budget’, cellsAlign: ‘center’, align: ‘center’, dataField: ‘budget’, cellsFormat: ‘c2’,
    aggregates: [‘sum’],
    // aggregatesRenderer: (aggregatesText, column, element, aggregates, type) => {
    // let renderString = ”;
    // if (type == ‘aggregates’) {
    // renderString = ‘<div style=”margin: 4px; float: right; height: 100%;”>’;
    // }
    // else {
    // renderString = ‘<div style=”float: right; height: 100%;”>’;
    // }
    // let euro = this.dataAdapter.formatNumber(0.74 * aggregates.sum, ‘f2’);
    // let usd = this.dataAdapter.formatNumber(aggregates.sum, ‘f2′);
    // renderString += “<table><tr><td rowspan=’2’>Total: </td><td>” + usd + ” USD</td><tr><td>” + euro + ” EUR</td></tr></table>”;
    // return renderString;
    // }
    }
    ];
    }

    app.component.html

    <div>
    <button (click)=”demo(‘1’)”>1</button>
    <button (click)=”demo(‘2’)”>2</button>
    <button (click)=”demo(‘3’)”>3</button>
    <button (click)=”demo(‘*’)”>*</button>
    </div>

    <jqxTreeGrid [theme]=”‘material'”
    [width]=”getWidth()”
    [source]=”dataAdapter”
    [altRows]=”true”
    [showSubAggregates]=”true”
    [columnsResize]=”true”
    [columns]=”columns”
    [ready]=”ready”
    #TreeGrid>
    </jqxTreeGrid>


    Hristo
    Participant

    Hello angulardev19,

    Could you clarify it?
    What is the issue here I cannot figure out?
    Is there any error message in the console?
    It is a case of implementation and personal solution.
    I would like to suggest you use the getRows method.
    With it you could use to investigate for a level of the records and also with using the recursion to go deep investigation to see is there an inner records.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    angulardev19
    Participant

    Hello Hristo,

    Thanks for the replay.

    I want to expand jqxTreeGrid by level Suppose I have 3 buttons. if I click button 1 then I want to Expand Level1 and for button 2 I want to expand level 2 and so on.

    In my case, if I click button 2 it’s not expanding by levels that’s my issue.

    • This reply was modified 1 week, 5 days ago by  angulardev19.
    • This reply was modified 1 week, 5 days ago by  angulardev19.

    Hristo
    Participant

    Hello angulardev19,

    Could you provide us with one simplified example that demonstrates your case?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.