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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Gird column as dropdown

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
loading
Tags: Grid
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.


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, 


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. 



Regards, 
Thavasianand S. 


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.

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon