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.
Hello
I have a request who looks very similar to that thread :
https://www.syncfusion.com/forums/167798/add-column-and-dropdownedit-dynamically?reply=SEKT1a
But I want to add a drop-down edit with an ID. Everything needs to be dynamic. The problem with adding a drop-down edit with an ID it's I am not able to see the value ( text ) in the grid. (In the edit window of the grid, I see the text of the dropdown edit. When I save, that saves the ID in the col0. And after that, I just see the Id in my grid. )
( i also need to build the field of the column dynamicaly )
<button (click)="CreateColumn()">Add Column</button>
<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='272px' [allowSorting]="true" [sortSettings]='sortOptions'
(actionBegin)='actionBegin($event)' (actionComplete)='actionComplete($event)' (rowSelected)='rowSelected($event)' [columns]="columns">
</ejs-grid>
public columns = [];
CreateColumn(){
let datasource = [ { id: 'aaa' : name: 'hello'} ];
let col = {field: "col"+ this.columns.length, width: 150, headerText: 'header};
col["editType"] = "dropdownedit";
col["edit"] = { params: { query: new Query(), dataSource: datasource, fields: { text: 'name', value: 'id' } } }
this.columns.push(col);
}
I tried also with a foreign key in the column, but that does not seem to work when we add the column dynamically like that.
|
export class AppComponent {
@ViewChild('grid')
public grid: GridComponent;
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 columns;
public ngOnInit(): void {
orderDetails.forEach(dat => (dat['Currency'] = 'USD'));
this.data = orderDetails;
this.editSettings = {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: 'Dialog'
};
this.toolbar = ['Add', 'Edit', 'Delete'];
this.orderidrules = { required: true, number: true };
this.customeridrules = { required: true };
this.freightrules = { required: true };
this.editparams = { params: { popupHeight: '300px' } };
this.pageSettings = { pageCount: 5 };
this.columns = [
{
field: 'OrderID',
headerText: 'Order ID',
isPrimaryKey: true
},
{
field: 'CustomerID',
headerText: 'Customer ID'
},
{
field: 'Freight',
format: 'N2',
editType: 'numericedit'
},
{
field: 'Currency',
editType: 'dropdownedit',
edit: {
params: {
query: new Query(),
dataSource: [{ text: 'USD' }, { text: 'GBP' }, { text: 'EUR' }],
fields: { text: 'text', value: 'text' }
}
}
}
];
}
CreateColumn() {
let datasource = [{ id: 'aaa', name: 'hello' }];
let col = {
field: 'col' + this.columns.length,
width: 150,
headerText: 'header'
};
col['editType'] = 'dropdownedit';
col['edit'] = {
params: {
query: new Query(),
dataSource: datasource,
fields: { text: 'name', value: 'id' }
}
};
this.columns.push(col as any);
this.grid.refreshColumns();// refreshes the grid's columns
}
}
|
|
CreateColumn() {
let datasource = [{ id: 'aaa', name: 'hello' }];
let col = {
field: 'col' + this.columns.length,
width: 150,
headerText: 'header'
};
col['editType'] = 'dropdownedit';
col['edit'] = {
params: {
query: new Query(),
dataSource: datasource,
fields: { text: 'name', value: 'name' }
}
};
this.columns.push(col as any);
this.grid.refreshColumns();// refreshes the grid's columns
}
|
Maybe I do not understand well.. but I've said that I need the ID of the dropdown edit.
Now I see my text value everywhere. but how I will save the ID of the value of the drop-down edit after I save all my rows in the database?
I just have the text value in my grid.
Maybe it's store somewhere that I didn't find?
Hello, I think you should try it because if it's supposed to work, there is a bug in your grid component.
I used the stackblitz that you gave here in the previous message. I changed the function CreateColumn And when I add a column, the grid stays in the refresh mode and it's stuck there.
If it's not a bug, maybe you can help me and show me where is my mistake ?
|
CreateColumn() {
let datasource = [
{ orderid: 10268, id: 'aaa', name: 'hi' },
{ orderid: 10269, id: 'bbb', name: 'hello' }
];
let col = {
field: 'OrderID',
width: 150,
headerText: 'header',
foreignKeyValue: 'name',
foreignKeyField: 'orderid',
dataSource: datasource
};
col['editType'] = 'dropdownedit';
col['edit'] = {
params: {
query: new Query(),
dataSource: datasource,
fields: { text: 'name', value: 'name' }
}
};
this.columns.push(col as any);
this.grid.freezeRefresh(); // refreshes the grid and the modules injected to the grid.
}
|
Awesome.. that's working
We need to add GridAllModule.. and not just GridModule.. Took me a while to find out
