Dropdown button not emiting select event on first row of grid

[Pankaj Meel]

In our project, we have used a dropdown button in one of the columns of the grid but when the items for the dropdown are rendered dynamically the select event is not getting triggered on the first row of the grid.
We have our component library for dropdown but the base for that is ejs-dropdownbutton​, code for the component is :

<div>

    <ejs-tooltip [id]="'tooltip_'+id" [content]='tooltip ? tooltip : "Options"' [target]="'#dropdown_'+id" [windowCollision]="true" [position]="tooltipPosition">

        <ejs-dropdownbutton ejs-dropdownbutton [id]="'dropdown_'+id" [items]="items" [iconCss]="icon" cssClass="{{ class}}"

            [content]="content" (select)="select($event)" aria-label="Button Menu" role="button" onKeyPress onKeyDown onKeyUp></ejs-dropdownbutton>

    </ejs-tooltip>

</div>

Implementation of the button:

<button-dropdown-grid [items]="getButtonActions(plan)" tooltip="Choose an option" [callback]="select"></button-dropdown-grid>

I have attached a video for reference

Attachment: screencastlocalhost_42102024_09_2514_21_35_434a98b5.rar

[Vasanthakumar K]

Hi Pankaj Meel,

Greetings from Syncfusion support.

Query: We are using a dropdown button in one of the columns of the grid, but when the items for the dropdown are rendered dynamically, the select event is not getting triggered on the first row of the grid.

We have prepared a sample based on your provided information, applying a wrapper dropdown button as a grid column template, and found that the select event is triggered correctly on all rows, including the first one. Whenever an item is selected from the dropdown button in the "Manage Records" column, a custom span message displays correctly above the grid. please refer the below properly working sample for your reference.

Sample: 194534-wrapped-dropdown-button-column-template-select-event - StackBlitz

To assist you further and replicate the issue more accurately, we require additional information. Please provide the following:

1. Full Grid Customization Code: Include the complete code for rendering the grid, including all definitions, custom column templates, event handling, and dynamic property updates.
2. Customized Sample: Please modify our shared sample or create one based on your application grid's customization to replicate the issue.
3. Syncfusion Package Versions: Share the versions of Syncfusion components you're using. If using an older version, please confirm whether you're open to updating to the latest version, as this might resolve the issue.

This information will allow us to troubleshoot more efficiently and offer the appropriate solution.

Regards,

Vasanthakumar K

[Pankaj Meel]

Hi  Vasanthakumar K,
Thank you for your reply.

I think you have missed seeing the main item that is causing the issue, in your working example  194534-wrapped-dropdown-button-column-template-select-event - StackBlitz you have the dropdown items predefined

public items: any[] = [

    {

      text: 'Cut',

    },

    {

      text: 'Copy',

    },

    {

      text: 'Paste',

    },

  ];

 whereas if you see my issue/question these items are not defined they are returned by a function that based on some conditions returns the required dropdown items.

So, if you change the code like

<button-dropdown-grid [items]="getButtonActions()" tooltip="Choose an option" [callback]="ddbselect"></button-dropdown-grid>

and add this function to your ts file

public getButtonActions(status? string) {

    const actions = [];

// in case need more conditions and dropdown items

    // if (status === 'ACTIVE') actions.push({ text: 'Edit' });

    // if (status === 'INACTIVE') actions.push({ text: 'Copy' });

    actions.push({ text: 'Delete' });

    return actions;

  }

you will be able to replicate the issue.

Thank you
Pankaj Meel

[YuvanShankar Arunagiri]

Hi Pankaj,

We have validated the reported query, and while using items as a function, it can be called infinite time, leading to changes in the component's items. However, you can change dynamic items by comparing the new and old items object. Please refer to the below code snippet and sample.

public getButtonActions(status?: string) {

      const actions = [];

      // in case need more conditions and dropdown items

      // if (status === 'ACTIVE') actions.push({ text: 'Edit' });

      // if (status === 'INACTIVE') actions.push({ text: 'Copy' });

      actions.push({ text: 'Delete' });

      if (JSON.stringify(this.items) !== JSON.stringify(actions)) {

        this.items = extend([], actions, [], true) as any[];

      }

      return this.items;

    }

 

Sample link: https://stackblitz.com/edit/angular-a3gsrn-iecesz?file=src%2Fapp.component.ts

Kindly get back to us if you need any further assistance.

Regards,

YuvanShankar A