Combobox column

[scott.erickson@bethesdalc.orgParticipant]

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() {
}

}

[TodorParticipant]

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

[scott.erickson@bethesdalc.orgParticipant]

Thank You I got that working

[Author]

Posts