Gird column as dropdown

Neo

Asked On July 17, 2019 11:25 AM UTC

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.

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On July 18, 2019 01:06 PM UTC

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.

Reply | Reply with quote

Neo

Replied On July 23, 2019 05:03 AM UTC

Hi Thavasianand,

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

Reply | Reply with quote

Renjith Singh Rajendran [Syncfusion]

Replied On July 24, 2019 01:03 PM UTC

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
146027	Jul 17,2019 11:25 AM UTC	Jul 24,2019 01:03 PM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US