Cannot select dropdown button items in first row of a grid

[Ervin van der Merwe]

Good day, 

I'm trying to populate a dropdown button's items dynamically by calling a function that builds the items per row in the grid.

The bug I get is that only the first row in the grid does NOT allow me to select anything in the dropdown button. The rest of the gird rows do allow me to select from the dropdown.

<e-column headerText='Action' width=65>

    <ng-template #template #editTemplate let-data>

        <button ejs-dropdownbutton [items]='BuildActionBtnItems(data)'

            (select)="On_ActionBtnClick($event, data)" content='Select'></button>

    </ng-template>

</e-column>

actionBtnItems: string[] = ["Edit", "Manage", "Approve", "View Submissions"];

BuildActionBtnItems(rowItem: IForm): ItemModel[] { 

  let items: ItemModel[] = [];

  if (rowItem.isAdmin) {

    items.push({ text: this.actionBtnItems[0] }, { text: this.actionBtnItems[1] });

  }

  if (rowItem.isApprover) {

    items.push({ text: this.actionBtnItems[2] })

  }

  if (rowItem.isOwner) {

    items.push({ text: this.actionBtnItems[3] });

  }

  return items;

}

"@syncfusion/ej2-angular-grids": "^17.4.43",

"@syncfusion/ej2-angular-dropdowns": "^17.4.43",

"@syncfusion/ej2-angular-splitbuttons": "^17.4.43",

[Vignesh Sivagnanam]

Hi Ervin 

Based on your query, we found that the items in the dropdown button is not able to select in the first row of the grid. We are able to reproduce the reported issue at our end. This issue occurred due to the OnItemRender event of the button component is continuously triggered. To avoid the issue you can use the “beforeOpen” event to render the items to the button before open. 

We have validated and resolved the issue at our end. Please refer the below sample for your reference, 

Sample : https://stackblitz.com/edit/angular-uwh2zb-jrtfh5?file=app.component.html 

Code Example : 

<e-column headerText='Action' width=65> 

        <ng-template #template let-data> 

          <button ejs-dropdownbutton [items]= "items" (beforeOpen)='BuildActionBtnItems(data)' content='Clipboard' (select)="onSelect($event)"></button> 

        </ng-template> 

      </e-column> 

……………. 

……………. 

……………. 

public BuildActionBtnItems(rowItem) { 

    let items: ItemModel[] = []; 

    if (rowItem.index === "0") { 

      items.push( 

        { text: this.actionBtnItems[0] }, 

        { text: this.actionBtnItems[1] } 

      ); 

    } 

    if (rowItem.index === "1") { 

      items.push({ text: this.actionBtnItems[2] }); 

    } 

    if (rowItem.index === "2") { 

      items.push({ text: this.actionBtnItems[3] }); 

    } else { 

      items.push( 

        { text: this.actionBtnItems[0] }, 

        { text: this.actionBtnItems[1] } 

      ); 

    } 

    this.items = items; 

  } 

Please refer the below Documentation for your reference:  

Documentation : https://ej2.syncfusion.com/documentation/api/drop-down-button/dropDownButtonModel/#beforeopen 

Screenshot for your reference:  

 

Regards, 

Vignesh Sivagnanam