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.
|
public columns: object[] = [
{
field: "type", headerText: "type", editType: "dropdownedit", edit: {
params: {
query: new Query(),
dataSource: this.dropdown,
fields: { value: "type", text: "type" }
}
}
}
]; |
|
[app.component.ts]
...
export class AppComponent implements OnInit {
public data: object[];
public editSettings: object;
public toolbar: string[];
public dropdown: object[] = [{ type: "example1" }, { type: "example2" }, { type: "example3" }, { type: "example4" },
{ type: "example5" }, { type: "example6" }, { type: "example7" }];
public dropdown1: object[] = [];
public columns: object[] = [
{ field: "OrderID", headerText: "OrderID", isPrimaryKey: true, width: 120 },
{
field: "type", headerText: "type", editType: "dropdownedit", edit: {
params: {
query: new Query(),
dataSource: this.dropdown,
fields: { value: "type", text: "type" }
}
}
},
{ field: "type2", headerText: "type 2", editType: "dropdownedit", edit: {
params: {
query: new Query(),
dataSource: this.dropdown1,
fields: { value: "type2", text: "type2" }
}
}}
];
ngOnInit(): void {
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.data = data;
}
actionBegin(args: any): void {
if(args.requestType === "beginEdit"){
(this.columns[2] as any).edit.params.dataSource = [{"type2":"solution1"},{"type2":"solution2"},{"type2":"solution3"},{"type2":"solution4"},{"type2":"solution5"},{"type2":"solution6"},
{"type2":"solution7"},{"type2":"solution8"}];
}
}
}
[app.component.html]
<ejs-grid #Grid [dataSource]='data' [columns]='columns' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)="actionBegin($event)">
</ejs-grid>
|
|
...
export class AppComponent implements OnInit {
public data: object[];
public editSettings: object;
public toolbar: string[];
public dropdown: object[] = [{ type: "Date" }, { type: "Byte" }]; //set dropdown data at initial for dropdown 1
public dropdown1: object[] = []; //set dropdown data as empty as initial for dropdown 2
public columns: object[] = [
{ field: "OrderID", headerText: "OrderID", isPrimaryKey: true, width: 120 },
{
field: "type", headerText: "type", editType: "dropdownedit", edit: {
params: {
query: new Query(),
dataSource: this.dropdown, //assign datasource to dropdown column using editParams
fields: { value: "type", text: "type" }
}
}
},
{
field: "type2", headerText: "type 2", editType: "dropdownedit", edit: {
params: {
query: new Query(),
dataSource: this.dropdown1, //assign datasource to dropdown column using editParams
fields: { value: "type2", text: "type2" }
}
}
}
];
ngOnInit(): void {
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.data = data;
}
actionBegin(args: any) {
if (args.requestType === "beginEdit") {
if (args.rowData['type'] === "Date") { check whether the first dropdown contains Date value
this.columns[2]['edit'].params.dataSource = [{ type2: 'test1' },{ type2: 'test2' },{ type2: 'test3' }]; //set datasource to second dropdown column if the value contains “Date”
} else if (args.rowData['type'] === 'Byte') { check whether the first dropdown contains “Byte” value
this.columns[2]['edit'].params.dataSource = [{ type2: 'run2' },{ type2: 'run1' },{ type2: 'run3' }]; //set datasource to second dropdown column if the value contains “Byte”
}
}
}
} |
|
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { data } from './datasource';
import { GridComponent, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Query } from '@syncfusion/ej2-data';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
@ViewChild('grid')
public grid: GridComponent;
public date: object[] = [{ type2: 'test1' },{ type2: 'test2' },{ type2: 'test3' }];
public byte: object[] = [{ type2: 'run2' },{ type2: 'run1' },{ type2: 'run3' }];
public data: object[];
public editSettings: object;
public toolbar: string[];
public dropdown: object[] = [{ type: "Date" }, { type: "Byte" }];
public columns: object[] = [
{ field: "OrderID", headerText: "OrderID", isPrimaryKey: true, width: 120 },
{
field: "type", headerText: "type", editType: "dropdownedit", edit: {
params: {
query: new Query(),
change: (args) => {
var type2 = document.getElementById(this.grid.element.closest('.e-grid').getAttribute('id')+'type2')['ej2_instances'][0];
type2.value = null;
type2.dataSource = args.itemData.type === 'Date' ? this.date : this.byte;
},
dataSource: this.dropdown,
fields: { value: "type", text: "type" }
}
}
},
{
field: "type2", headerText: "type 2", editType: "dropdownedit", edit: {
params: {
query: new Query(),
dataSource: this.dropdown1,
fields: { value: "type2", text: "type2" }
}
}
}
];
ngOnInit(): void {
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.data = data;
}
actionBegin(args: any) {
if (args.requestType === "beginEdit") {
if (args.rowData['type'] === "Date") {
this.columns[2]['edit'].params.dataSource = this.date;
} else if (args.rowData['type'] === 'Byte') {
this.columns[2]['edit'].params.dataSource = this.byte;
}
}
}
} |
