We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dynamic data source dropdow list colum by row

Hi all, I have a question, hopefully you can help me, is there a way to have different options for a dropdown cell on each row? For example, In the first row have these options:

  1. First option
  2. Second option
and in the second one, these options:
  1. Third option
  2. Fourth option
and in the rest of the rows, different options for each row.

Is that possible?

Regards 

1 Reply

JC Joseph Christ Nithin Issack Syncfusion Team October 26, 2022 05:28 PM UTC

Hi Pradeep,


Greetings from Syncfusion support.


Based on your requirement, you need to render dropdown control to edit a column in the Grid and want to change the dataSource dynamically based on the rowData. You can achieve your requirement by using cellEditTemplate feature.


The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, destroy functions. Refer to the below documentation for more information.


cellEditTemplate:


 

 this.editparams = {

      create: () => {

        this.elem = document.createElement('input');

        return this.elem;

      },

      read: () => {

        return this.dropDown.value;

      },

      destroy: () => {

        this.dropDown.destroy();

      },

      write: (args: { rowDatacolumn }) => {

        this.dropDown = new DropDownList({

          value: args.rowData[args.column.field],

          dataSource:

            args.rowData['OrderID'] % 2 == 0

              ? this.dropdownData1

              : this.dropdownData2,

        });

        this.dropDown.appendTo(this.elem);

      },

    };

 


In the write function, you can get the current row-data and column details from its event argument. Based on the rowData you can bind different dataSource to the dropdown control. Refer to the below code example for more information.


Sample: https://stackblitz.com/edit/angular-wcmnso-ybeu11?file=app.component.ts


Note: The dropdown displays the current cell value only when the value is available in its dataSource.


Dropdown doc:

https://ej2.syncfusion.com/angular/documentation/drop-down-list/

https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/


Please get back to us if you need further assistance.


Regards,

Rajapandiyan S


Loader.
Live Chat Icon For mobile
Up arrow icon