4

I am using the PrimeNG dropdown with the PrimeNG turbo table. I have column that uses the dropdown in edit mode where I need the options to be filtered based on the value of another column. Then I have the issue described here.

I can't really find a good way to use lists for the options instead of a method as that would require me to maintain a list of options for each of the rows in the table.

  1. Does anyone know how to fix the issue ?
  2. Can someone suggest a better way of getting the options where I don't face this problem ?
aynber
  • 22,380
  • 8
  • 50
  • 63
danskov
  • 113
  • 1
  • 13
  • create stackblitz ??? – Akj Aug 07 '18 at 07:23
  • https://stackblitz.com/edit/test-p-table-7viayn. Basically just make column 2 not require doubleclick. – danskov Aug 07 '18 at 13:30
  • 1
    I see on the GitHub link you posted that you got the solution, would you mind posting the solution here as an answer? – Pratik Aug 08 '18 at 00:09
  • 1
    Its not a solution its a reproduction. Try picking an option in the second dropdown and you will notice that it requires you to click twice. – danskov Aug 08 '18 at 06:17

2 Answers2

3

I spent probably 2.5 hours on this issue... I was almost banging my head against the wall! :D

Checked another angular component on the project at hand where the dropdown was working correctly and indeed the difference was the [options] property that was being assigned directly from a var within the component itself. On this one having the issue the [options] were being dynamically created with a function and I was facing that double click issue. This was breaking the (onChange) event which was not being fired and hence ruined the expected functionality.

So I got here in this question I think from this issue on Prime-NG GitHub repo. This fortunately made me understand what was the issue.

Searched a bit more using different terms and found this answer here on SO and just adapted it to be used with p-dropdown like this:

UI side:

<p-dropdown [options]="dynamicOptions"
            appendTo="body"
            optionLabel="label"
            (onChange)="optionChanged(report)"                                          
            (onShow)="getDynamicOptions(report)">

The trick here is to use the (onShow) event to build the dynamic options.

Component side:

export class MyComponent {
    dynamicOptions: OptionItem[];  
               
    getDynamicOptions(report: Report) {
        //debugger;

        let dynamicOptions: OptionItem[] = [
            {
                label: 'No Action',
                value: 'no-action'
            }
        ];

        // your logic here to build dynamic options...

        this.dynamicOptions = dynamicOptions;
    }
}
Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
-1

I updated you code as below, and it works.

Chnages in OnInit

 ngOnInit() {
    this.cols = [
      { field: 'vin', header: 'Vin' },
      { field: 'year', header: 'Year' }
    ];
    this.cars.push(
      { val1: { 'id': 1, 'value': '1' }, val2: { 'id': 7, 'value': '7' } });

this.options1.push({ 'id': 1, 'value': '1' });
this.options1.push({ 'id': 2, 'value': '2' });
this.options1.push({ 'id': 3, 'value': '3' });


this.options2.push({ 'id': 7, 'value': '7' });
this.options2.push({ 'id': 8, 'value': '8' });
  }

Changes in Html

<p-dropdown [options]="options2" [(ngModel)]="rowData.val2"  optionLabel="value" dataKey="id"></p-dropdown>
Dheeraj Kumar
  • 3,917
  • 8
  • 43
  • 80