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

This topic contains 5 replies, has 3 voices, and was last updated by  Hristo 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 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 4 months, 3 weeks ago by  angulardev19.
    • This reply was modified 4 months, 3 weeks 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


    Gaurav@123
    Participant

    Hello angulardev19..
    you can check this code which is similar to your code for expand and collapse.

    @section scripts {
    <style>
    body { width: 100%; height: 100%; }
    .jqx-grid-cell input[type=”button”]{
    width:100%;
    z-index:10;
    opacity:0.01!important;
    z-index:5!important;
    display:block!important;
    }
    </style>
    <link rel=’stylesheet’ href=’https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’>
    <link href=”~/jqwidgets/styles/jqx.base.css” rel=”stylesheet” />
    <script src=”~/Scripts/jquery-1.11.1.min.js”></script>
    <script src=”~/jqwidgets/jqxcore.js”></script>
    <script src=”~/jqwidgets/jqxdata.js”></script>
    <script src=”~/jqwidgets/jqxbuttons.js”></script>
    <script src=”~/jqwidgets/jqxscrollbar.js”></script>
    <script src=”~/jqwidgets/jqxdatatable.js”></script>
    <script src=”~/jqwidgets/jqxtreegrid.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    var source =
    {
    dataType: “json”,
    dataFields:
    [
    { name: ‘PartAssemblyId’, type: ‘number’ },
    { name: ‘ComponentName’, type: ‘string’ },
    { name: ‘PartNo’, type: ‘string’ },
    { name: ‘OEMRev’, type: ‘string’ },
    { name: ‘DEPartNo’, type: ‘string’ },
    { name: ‘Quantity’, type: ‘number’ },
    { name: ‘ParentId’, type: ‘number’ },
    { name: ‘TypeName’, type: ‘string’ },
    { name: ‘TAPType’, type: ‘string’ },
    { name: ‘DirectoryId’, type: ‘number’ },
    { name: ‘ReferenceId’, type: ‘string’ },
    { name: ‘IsManualDEPart’, type: ‘number’ },
    { name: ‘RevNo’, type: ‘string’ },
    { name: ‘RevRemark’, type: ‘string’ },
    { name: ‘CreatedBy’, type: ‘number’ },
    { name: ‘CreatedDate’, type: ‘number’ },
    { name: ‘ModifiedBy’, type: ‘number’ },
    { name: ‘ModifiedDate’, type: ‘number’ },
    { name: ‘Status’, type: ‘string’ },
    { name: ‘UserId’, type: ‘number’ },
    { name: ‘FolderCount’, type: ‘string’ },
    { name: ‘Level’, type: ‘number’ }

    ],

    hierarchy:
    {
    keyDataField: { name: ‘PartAssemblyId’ },
    parentDataField: { name: ‘ParentId’ }
    },
    id: ‘PartAssemblyId’,
    url: ‘GetEmployees’,
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // call jqxTreeGrid

    $(“#treeGrid”).jqxTreeGrid(
    {
    width: 1000,
    height: 500,
    source: dataAdapter,
    //pageable: true,
    //sortable: true,
    ready: function () {
    $(“#treeGrid”).jqxTreeGrid(‘expandRow’, ‘2’);
    //alert();
    },
    //choose the columns you wish to display on screen
    columns: [
    { text: ‘TSME PartNo’, dataField: ‘DEPartNo’, width: 200 },
    { text: ‘Part Description’, dataField: ‘ComponentName’, width: 200 },
    { text: ‘Level’, dataField: ‘Level’, width: 100 },
    { text: ‘Type Name’, dataField: ‘TypeName’, width: 100 },
    { text: ‘Qty’, dataField: ‘Quantity’, width: 100 },
    { text: ‘Status’, dataField: ‘Status’, width: 100 },
    { text: ‘OEM Part No’, dataField: ‘PartNo’, width:100 },
    { text: ‘Remark’, dataField: ‘RevRemark’, width: 100 },
    { text: ‘View’, dataField: ‘View’, width: ‘5%’, columntype: ‘button’,
    cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
    return ‘<i class=”fa fa-pencil fa-lg fa-fw”> </i>’;
    },
    buttonclick: function (row) {
    alert(‘hey ‘ + row);
    }
    }

    ]
    });
    });
    </script>
    }

    • This reply was modified 4 months, 1 week ago by  Gaurav@123.

    Hristo
    Participant

    Hello Gaurav@123,

    Could you clarify your issue?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.