How to use DropDownList and Combo-Box in Batch-edit mode of Angular Grid

[Sandip Kumar]

Hi,

I am using angular grid in my angular 8 project.

Can you guide me how to use ejs-combobox or ejs-dropdownlist in batch-edit mode so that I can manage text and value properties in drop-down.

Regards,

Sandip Kumar

[Magesh Sabapathi]

Hi Sandip , 

Query : How to use ejs-Dropdownlist in Batch-edit mode. 

For dropdown type edit in Batch editing we have an inbuild support and to access this you need to add “editType=’dropdownedit’”  while defining the columns.  

But in the query you have mentioned that you need to manage text and value properties in drop-down. For this we suggest to use the cell edit template method. The cell edit template is used to add a custom component for a particular column 

Please refer the code snippet and sample. 

App.component.ts 

import { Component, OnInit, ViewChild } from "@angular/core"; 

import { orderDataSource } from "./data"; 

import { DropDownList } from "@syncfusion/ej2-dropdowns"; 

import { Button } from "@syncfusion/ej2-buttons"; 

@Component({ 

  selector: "app-root", 

  template: ` <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

            <e-column field='ShipCity' headerText='Ship City' width='150' [edit]='shipCityEditParams'></e-column> 

        </e-columns> 

}) 

export class AppComponent { 

  @ViewChild("grid", { static: true }) gridObj: GridComponent; 

  public dropDataSource = [ 

    { text: "Köln", value: 1 }, 

         … 

  ]; 

  public ngOnInit(): void { 

    this.data = orderDataSource; 

    this.editSettings = {allowEditing: true, allowAdding: true,allowDeleting: true, mode: "Batch"}; 

    this.toolbar = ["Add", "Edit", "Delete", "Cancel", "Update"]; 

    this.shipCityEditParams = { 

            create: () => { 

                this.elem1 = document.createElement('input'); 

                return this.elem1; 

            }, 

            read: () => { 

                return this.dropObj.text; 

            }, 

            destroy: () => { 

                this.dropObj.destroy(); 

            }, 

            write: (args: { rowData: object, column: Column }) => { 

                this.dropObj = new DropDownList({ 

                    dataSource: this.dropDataSource, 

                    text: args.rowData[args.column.field], 

                    fields: { text: 'text', value: 'value' }, 

                    floatLabelType: 'Never' 

                }); 

                this.dropObj.appendTo(this.elem1); 

            } 

    }; 

} 

For combo box editing – Code snippet 

 

App.component.ts 

import { comboBox } from "@syncfusion/ej2-dropdowns"; 

public comboData = ['Kevzara', 'Dupixent-AD', 'Dupixent', 'Dupixent AD','Kevaza’]; 

function write(args) { 

        dObj = new ej.dropdowns.ComboBox({ 

            dataSource: comboData, 

            allowFiltering: true,    //enable filtering 

            value: args.rowData[args.column.field] 

        }); 

        dObj.appendTo(this.elem1); 

    } 

 

Api link : https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#cell-edit-template 

Sample : https://stackblitz.com/edit/angular-dyptyw-qisjxy?file=app.component.html 

Please get back to us if you need further assistance 

Regards 

Magesh