How to edit a column using dropdown component in AngularJS editable data grid?
By default, Angular Data Grid renders textbox component for all editable columns. Also, it offers the following in-built editor components to edit a column value based on the corresponding column data type. In this article, we are going to render a dropdownlist component while editing a Ship Country column (string column) for this we need to set columns.editType property as 'dropdownedit' for the corresponding column.
- NumericTextBox Component for integers, double and decimal data types.
- TextBox Component for string data type.
- DropdownList Component to show all unique values related to that field.
- CheckBox Component for Boolean data type.
- DatePicker Component for date data type.
- DateTimePicker Component for date time data type.
This article explains how to render dropdownlist component for string column instead of default textbox in grid edit mode.
HTML
<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar'> <e-columns> <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> <e-column field='CustomerName' headerText='Customer Name' width='120' [validationRules]='customeridrules'></e-column> <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> <e-column field='OrderDate' headerText='Order Date' width='130' editType='datepickeredit' format='yMd' textAlign='Right'></e-column> <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> <e-column field='ShipAddress' headerText='Ship Address' width='200'></e-column> </e-columns> </ejs-grid>
Component.ts
import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
import { EditService, ToolbarService} from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [ToolbarService, EditService]
})
export class AppComponent {
public data: Object[];
public editSettings: Object;
public toolbar: string[];
public orderidrules: Object;
public customeridrules: Object;
public freightrules: Object;
public pageSettings: Object;
public editparams: Object;
public ngOnInit(): void {
this.data = orderDetails;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode:"Normal"};
this.toolbar = ['Add', 'Edit', 'Delete'];
this.orderidrules = { required: true, number: true };
this.customeridrules = { required: true };
this.freightrules = { required: true };
this.editparams = { params: { popupHeight: '150px' }};
}
}
Console Output
|
Sample : https://stackblitz.com/edit/syncfusion-angular-editable-grid?file=main.ts
