Gird column as dropdown

[Neo]

Hi All,

I want to add grid column, type as dropdown. My requirements are,

1. Add dropdown type column.

2. Load dropdown data when select on the dropdown (To reduce unnecessary data load and data load from other datasource)

3. Selected item should be display text field in the gird cell (Not the Value)

4. When posting data, that dropdown column data should get the Value field (Not the Text)

     

Currently I'm getting gird changes before posting like below, (Much better if we can get changed data with dropdown column and selected item value)

let gridChanges = this.grid.editModule.getBatchChanges()["changedRecords"];

Note: I'm using batch edit mode.

[Thavasianand Sankaranarayanan]

Hi Neo, 

Thanks for contacting Syncfusion support. 

We suggest you to use Grid foreignKey Column feature to achieve this requirement. Also, you do not need to provide editType as dropDownedit while using this feature. Because by default, we have used dropDownList to edit this foreignKey column values.  Please refer the below code snippet, 

<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' allowPaging="true"> 

    <e-columns> 

       <e-column field='EmployeeID' headerText='Ship City' foreighKeyField="ShipCity" foreignKeyValue="ShipCity" [dataSource]="dropdownData" width='150' textAlign='Right'></e-column> 

    </e-columns> 

</ejs-grid> 

Query: Currently I'm getting gird changes before posting like below, (Much better if we can get changed data with dropdown column and selected item value) 

From this query, we suspect that you need to get the selected items details from the dropDownList. So, we suggest you to bind the change event to the dropDownList by using the Grid column editParams property to get the selected items details. Please refer the below code snippet, 

HTML: 

 

<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' allowPaging="true"> 

    <e-columns> 

       <e-column field='EmployeeID' headerText='Ship City' foreighKeyField="ShipCity" foreignKeyValue="ShipCity" [dataSource]="dropdownData" [edit]="dpParams" width='150' textAlign='Right'></e-column> 

    </e-columns> 

</ejs-grid> 

TypeScript: 

 

this.dpParams = { 

            params: { 

                change: function (args: any) { 

                    console.log(args.value); // you can get the dropdown selected items details here 

                } 

            } 

        }; 

We have prepared the sample for the both queries and you can find that sample from the below link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid-1606967827.zip 

If we misunderstood your query or If you have any concern in our suggestion, then please provide more details about your requirement to us. This will help us to provide a better suggestion for your requirement as early as possible. 

Documentation for Grid foreignKey Column: https://ej2.syncfusion.com/angular/documentation/grid/columns/#foreign-key-column 

Live demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/column/foreign-key 

Regards, 

Thavasianand S. 

[Neo]

Hi Thavasianand,

Thank you very much for your valuable support from the Syncfusion. Highly appreciate that.

[Renjith Singh Rajendran]

Hi Neo, 

  

Thanks for your update. 

  

We are happy to hear that your requirement has been achieved. 

  

Please get back to us if you need further assistance. 

  

Regards, 

Renjith Singh Rajendran.