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

Gird column as dropdown

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.


3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team July 18, 2019 05:06 AM

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. 



NE Neo July 22, 2019 09:03 PM

Hi Thavasianand,

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


RS Renjith Singh Rajendran Syncfusion Team July 24, 2019 05:03 AM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon