clicks to get to the dropdown in combobox in grid

[scott.erickson@bethesdalc.orgParticipant]

How do I limit the clicks from 3 to 1 to get to the category combobox column in the nested grid code below. Thank you in advance.

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 { jqxComboBoxComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxcombobox';
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('myCombo') myCombo: jqxComboBoxComponent;
  @ViewChild('eventLog') eventLog: ElementRef;

  catSource: any =
  {
      datatype: 'json',
      datafields: [
          
          { name: 'categoryId', type: 'int'},
          { name: 'categoryDescription', type: 'string'}
          
          
          

      ],
      id:"categoryId",
      
      url: environment.server + environment.apiUrl + 'category'
  };
   
  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: 'categoryDescription',  type: 'string', value: {source: this.catSource, value: 'categoryId', name:'categoryDescription'} },
          { name: 'distributionAmount', type: 'float' },
          { name: 'categoryId', type: 'int' }
          
      ],
      id:"transactionId",
      url: environment.server + environment.apiUrl + 'distribution'
      
  };

   
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: 'categoryDescription', type: 'string', value:"categoryId" , values: { source:this.catDataAdapter.records, value: 'categoryId', name: 'categoryDescription'}},
          { name: 'distributionAmount', type: 'float' },
          { name: 'categoryId', type: 'int' } 
			],
			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',
        //selectionmode: 'singlecell',
        //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: 'categoryDescription',  columntype:'combobox', 
          createeditor: (row: number, value: any, editor: any): void => {
            editor.jqxComboBox( {  source: this.catDataAdapter, displayMember: 'categoryDescription', valueMember: 'categoryId'});}},
					{ text: 'Amount', datafield: 'distributionAmount', width: '34%'}
				 
        ]
      
			};
      console.log("SETTINGS",settings);
      console.log("MYCOMBO", this.myCombo)
      //jqwidgets.createInstance(<code>#${nestedGridContainer.id}</code>, 'jqxGrid', settings);
      jqwidgets.createInstance(<code>#${nestedGridContainer.id}</code>, '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.) {
        this.myGrid.showrowdetails(i)
        console.log("MYCOMBO", this.myCombo)
			//}
		}
  };
  //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() {
    //this.myCombo.selectIndex(4);
    
  }
   
}

[TodorParticipant]

Hello Scott,

Please review the following example whether it fits your needs.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[scott.erickson@bethesdalc.orgParticipant]

Got it working. One other question the dropdown works fine but when I click on another column the value in the combobox reverts back to valueMember: ‘categoryId’ instead of the discription. Thanks

[TodorParticipant]

Hello Scott,

Please find the updated example.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts