jQuery UI Widgets Forums Angular Combobox column

This topic contains 2 replies, has 2 voices, and was last updated by  scott.erickson@bethesdalc.org 4 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Combobox column #105736

    Hello,

    I can’t get the combobox column working in the nested grid. the data is being retrieved from the API, all the columns working except the ‘category’ combobox column. screen shot, html, and ts file below

    <script src=”../aot/grid_nestedgrids.bundle.js”></script>
    <script src=”../aot/grid_customcomboboxcolumn.bundle.js”></script>
    <link rel=”stylesheet” type=”text/css” href=”https://www.jqwidgets.com/public/jqwidgets/styles/jqx.black.css”>
    <link rel=”stylesheet” type=”text/css” href=”https://www.jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css”>

    <p>
    Transactions
    </p>
    <div style=”font-size: 13px; font-family: Verdana; position: relative;”>

    <jqxGrid #myGrid (onCellselect)=”myGridOnCellSelect($event)” (onCellendedit)=”myGridOnCellEndEdit($event)” [theme]=”‘black'”
    [width]=”‘100%'” [source]=”dataAdapter” [columns]=”columns” [columnsresize]=”true”
    [pageable]=”true” [autoheight]=”true” [sortable]=”true” [filterable]=”true” [altrows]=”true”
    [editable]=”true” [selectionmode]=”‘multiplecellsadvanced'” [columnsresize]=”true”
    [rowdetails]=”true” [initrowdetails]=”initRowDetails”
    [ready]=”ready” [rowdetailstemplate]=”rowdetailstemplate” [selectionmode]=”‘singlecell'”>
    </jqxGrid>

    <jqxButton #myButton [disabled]=’false’ (onClick)=”onButtonClick($event)”
    [width]=”120″ [height]=”40″>
    Show nested rows
    </jqxButton>
    </div>
    <div #eventLog style=”font-size: 13px; margin-top: 20px; font-family: Verdana”></div>

    import { Component, OnInit, ViewChild, ElementRef } from ‘@angular/core’;
    import { environment } from ‘../../../environments/environment’;
    import { jqxGridComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid’;
    import { jqxButtonComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons’;
    import { Source } from ‘webpack-sources’;

    @Component({
    selector: ‘app-transactions’,
    templateUrl: ‘./transactions.component.html’,
    styleUrls: [‘./transactions.component.css’]
    })

    export class TransactionsComponent implements OnInit {
    @ViewChild(‘myGrid’) myGrid: jqxGridComponent;
    @ViewChild(‘myButton’) myButton: jqxButtonComponent;
    @ViewChild(‘eventLog’) eventLog: ElementRef;
    source: any =
    {
    datatype: ‘json’,
    datafields: [
    //{ name: ‘transactionId’, type: ‘int’ },
    { name: ‘merchant’, type: ‘string’ },
    { name: ‘transactionDate’, type: ‘date’ },
    { name: ‘transactionAmount’, type: ‘float’ },
    { name: ‘merchantCategory’, type: ‘string’ }

    ],
    id:”transactionId”,
    url: environment.server + environment.apiUrl + ‘fc’
    };
    distSource: any =
    {
    datatype: ‘json’,
    datafields: [
    //{ name: ‘transactionId’, type: ‘int’ },
    { name: ‘unit’, type: ‘string’ },
    //{ name: ‘categoryId’, type: ‘int’ },
    { name: ‘distributionAmount’, type: ‘float’ }

    ],
    id:”transactionId”,
    url: environment.server + environment.apiUrl + ‘distribution’
    };

    catSource: any =
    {
    datatype: ‘json’,
    datafields: [

    { name: ‘categoryId’, type: ‘int’}

    ],
    id:”categoryId”,
    url: environment.server + environment.apiUrl + ‘category’
    };
    getWidth() : any {
    if (document.body.offsetWidth < 850) {
    return ‘90%’;
    }

    return 850;
    }

    dataAdapter: any = new jqx.dataAdapter(this.source,
    {
    formatData: (data: any): any => {
    data.featureClass = ‘P’;
    data.style = ‘full’;
    data.maxRows = 50;
    data.username = ‘jqwidgets’;
    return data;
    }
    }
    );

    distDataAdapter: any = new jqx.dataAdapter(this.distSource,{autoBind:true},
    {
    formatData: (data: any): any => {
    data.featureClass = ‘P’;
    data.style = ‘full’;
    data.maxRows = 50;
    data.username = ‘jqwidgets’;
    return data;
    }
    }

    );
    catDataAdapter: any = new jqx.dataAdapter(this.catSource,{autoBind:true},
    {
    formatData: (data: any): any => {
    data.featureClass = ‘P’;
    data.style = ‘full’;
    data.maxRows = 50;
    data.username = ‘jqwidgets’;
    return data;
    }
    }

    );
    //catDataAdapter: any = new jqx.dataAdapter(this.catSource,{autoBind:true},
    // {
    // formatData: (data: any): any => {
    // data.featureClass = ‘P’;
    // data.style = ‘full’;
    // data.maxRows = 50;
    // data.username = ‘jqwidgets’;
    // return data;
    // }
    // }

    //);

    nestedGrids: any[] = new Array();

    // create nested grid.
    initRowDetails = (index: number, parentElement: any, gridElement: any, record: any): void => {
    let id = record.uid.toString();
    let nestedGridContainer = parentElement.children[0];

    this.nestedGrids[index] = nestedGridContainer;
    let filtergroup = new jqx.filter();
    let filter_or_operator = 1;
    let filtervalue = id;
    let filtercondition = ‘equal’;
    let filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    // fill the orders depending on the id.
    let dist = this.distDataAdapter.records;
    let distbyid = [];
    for (let i = 0; i < dist.length; i++) {
    let result = filter.evaluate(dist[i][‘uid’]);
    if (result)
    distbyid.push(dist[i]);
    }
    let distSource = {
    datafields: [
    //{ name: ‘transactionId’, type: ‘int’ },
    { name: ‘unit’, type: ‘string’ },
    { name: ‘categoryId’, type: ‘int’, values: { source:this.catDataAdapter, value: ‘categoryId’}},
    { name: ‘distributionAmount’, type: ‘float’ }
    ],
    id: ‘transactionId’,
    localdata: distbyid
    }
    let nestedGridAdapter = new jqx.dataAdapter(distSource);
    if (nestedGridContainer != null) {

    let settings = {
    width: ‘100%’,
    height: ‘100%’,
    editable:true,
    //showfilterrow: true,
    //filterable: true,
    selectionmode: ‘multiplecellsextended’,
    //autowidth: true,
    //height: 200,
    columnsresize: true,
    theme: ‘energyblue’,
    source: nestedGridAdapter,
    columns: [
    //{ text: ‘Unit’, datafield: ‘unit’, width: ‘50%’},
    { text: ‘Unit’, datafield: ‘unit’, width: ‘33%’},
    { text: ‘Category’, datafield: ‘categoryId’, columntype:’combobox’, selectedIndex:”1″,
    createeditor: (row: number, value: any, editor: any): void => {
    editor.jqxComboBox({ source: this.catDataAdapter, displayMember: ‘categoryId’, valueMember: ‘categoryId’});}},
    { text: ‘Amount’, datafield: ‘distributionAmount’, width: ‘34%’}

    ]
    };
    console.log(“SETTINGS”,settings);
    //jqwidgets.createInstance(#${nestedGridContainer.id}, ‘jqxGrid’, settings);
    jqwidgets.createInstance(#${nestedGridContainer.id}, ‘jqxGrid’, settings);
    }
    }
    renderer = (row: number, column: any, value: string): string => {
    return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
    }

    rowdetailstemplate: any = {
    rowdetails: ‘<div id=”nestedGrid” style=”margin: 10px;”></div>’, rowdetailsheight: 220, rowdetailshidden: true
    };

    ready = (): void => {
    this.myGrid.showrowdetails(0);
    };

    columns: any[] =
    [
    { text: ‘Merchant’, datafield: ‘merchant’, width: ‘25%’},
    { text: ‘Amount’, datafield: ‘transactionAmount’, width: ‘25%’ },
    { text: ‘Date’, datafield: ‘transactionDate’, cellsformat: ‘f’, width: ‘25%’ },
    { text: ‘Category’, datafield: ‘merchantCategory’, minwidth: ‘25%’}
    ];

    onButtonClick(event) {
    let rows = this.myGrid.getrows();

    for (let i = 0; i < rows.length; i++) {
    let data = this.myGrid.getrowdata(i);

    //if (data.City == ‘London’) {
    this.myGrid.showrowdetails(i)
    //}
    }
    };
    myGridOnCellSelect(event: any): void {
    let column = this.myGrid.getcolumn(event.args.datafield);
    let value = this.myGrid.getcellvalue(event.args.rowindex, column.datafield);
    let displayValue = this.myGrid.getcellvalue(event.args.rowindex, column.displayfield);
    this.eventLog.nativeElement.innerHTML = ‘<div>Selected Cell<br/>Row: ‘ + event.args.rowindex + ‘, Column: ‘ + column.text + ‘, Value: ‘ + value + ‘, Label: ‘ + displayValue + ‘</div>’;
    };
    myGridOnCellEndEdit(event: any): void {
    let column = this.myGrid.getcolumn(event.args.datafield);
    let container = this.eventLog.nativeElement;
    if (column.displayfield != column.datafield) {
    container.innerHTML = ‘<div>Cell Edited:<br/>Index: ‘ + event.args.rowindex + ‘, Column: ‘ + column.text + ‘<br/>Value: ‘ + event.args.value.value + ‘, Label: ‘ + event.args.value.label
    + ‘<br/>Old Value: ‘ + event.args.oldvalue.value + ‘, Old Label: ‘ + event.args.oldvalue.label + ‘</div>’;
    }
    else {
    container.innerHTML = ‘<div>Cell Edited:<br/>Row: ‘ + event.args.rowindex + ‘, Column: ‘ + column.text + ‘<br/>Value: ‘ + event.args.value
    + ‘<br/>Old Value: ‘ + event.args.oldvalue + ‘</div>’;
    }
    }
    constructor() { }

    ngOnInit() {
    }

    }

    Combobox column #105757

    Todor
    Participant

    Hello Scott,

    I’ve made you a working example of nested grid with combobox. Please review it. If you still have difficulties, please share a stackblitz.com example with your code which demonstrates the issue then we would be able to properly investigate it.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

    Combobox column #105772

    Thank You I got that working

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

You must be logged in to reply to this topic.