How to Load Check box and Drop-down control in the Grid Column?

Question

Hello SyncFusion Team,Can you please provide a code or a suggestion to implement the drop-down and check-box control in the grid column. I have the Static data as [1.True and 2.False.] #1. Load Static Data in the Dropdown Control          - > Static Data[ 1.True, 2.False]  in the Drop-Down Control and showing the result as POST Data (1.True) Should be Selected in the Dropdown.     #2. Selected the data in the CheckBox Control        When the grid loads and if the Checkbox column data is true that checkbox should be checked, otherwise that should be unchecked.Thanks,Raj

Venkatesh Ayothi Raman · Answer

Hi Anandraj, Thanks for using Syncfusion products. Query #1:” Load Static Data in the Dropdown Control” We have achieved your requirement using columns properties of editType and edit template properties in the Grid. We can set editType as dropdownedit for Boolean column and render dropdown control for while editing the data by using edit template feature in Grid. Please refer to the following code example and Help documentation, Code example: [html page]

. . .

[ts file] export class NormalEditComponent implements OnInit { public data: Object[]; . . . public ddParams: IEditCell; public ngOnInit(): void { this.data = productData; . . . this.ddParams = { create: () => { this.elem = document.createElement('input'); return this.elem; }, read: () => { return this.dropdownObj.value; }, destroy: () => { this.dropdownObj.destroy(); }, write: (args: { rowData: Object, column: Column }) => { . . . this.dropdownObj = new DropDownList({ // set the local data to dataSource property dataSource: data, // map the appropriate columns to fields property fields: { text: 'Value' }, // set the value to DropDownList value:"true", // set the height of the popup element popupHeight: '200px' }); this.dropdownObj.appendTo(this.elem); } Help documentation: https://ej2.syncfusion.com/16.1.24/angular/documentation/grid/edit.html#cell-edit-template Note: If we misunderstood above query, then could you please share the following details? 1) Do you want to render Dropdown control in a new column? 2) Dropdown element select the value true while at initial rendering. Query #2:” Selected the data in the CheckBox Control” We have built-in support for displayAsCheckbox property to show the Boolean column as checkbox column. So, that checkbox will be checked/unchecked based on Boolean value while grid rendered on the page. Please refer to the following code example, Help documentation and sample, Code example:

. . .

Help documentation: https://ej2.syncfusion.com/16.1.24/angular/documentation/grid/api-columnDirective.html#displayascheckbox Sample: https://plnkr.co/edit/MpL111DlHq9boUGe4GW1?p=preview Regards, Venkatesh Ayothiraman.

Anandraj · Answer

Hi Venkatesh Ayothiraman,Thanks for helped me out of this issue.

Venkatesh Ayothi Raman · Answer

Hi Anandraj, 

Thanks for the feedback. 

We are very happy to hear that your requirement is achieved. 

Regards, 
Venkatesh Ayothiraman.