ng2-smart-table
ng2-smart-table copied to clipboard
Is it possible to have a column editor list values loaded from API?
I am trying to get list values for a column via http get/API call, but when I do so by moving the table settings into the component constructor then I get issues with pagination not working.
If I do something like the following with "this.platformsSelect" being populated within the constructor then the list values remain blank after the fact:
columns: { platform: { title: 'Platform', type: 'text', editor: { type: 'list', config: { list: this.platformsSelect } } } }
Any insight or workarounds?
I was able to do that by initiating the settings from a method instead of in class directly. This is my list compoenent file for smart table
...
...
...
export class ListComponent {
selectList = [];
settings: Object;
source: LocalDataSource;
constructor(protected service: CategoryService) {
this.service.read()
.subscribe(
data => {
this.source = new LocalDataSource(data.results);
data.results.forEach(category =>{
// Populate the select list
this.selectList.push({value: category.id, title: category.title});
});
// Initiate the settings object
this.settings = this.loadTableSettings();
},
error => this.catchError(error)
);
}
loadTableSettings(){
return {
add: {
addButtonContent: '<i class="ion-ios-plus-outline"></i>',
createButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent: '<i class="ion-close"></i>',
confirmCreate: true,
},
edit: {
editButtonContent: '<i class="ion-edit"></i>',
saveButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent: '<i class="ion-close"></i>',
confirmSave: true,
},
delete: {
deleteButtonContent: '<i class="ion-trash-a"></i>',
confirmDelete: true
},
columns: {
title: {
title: 'Name',
type: 'string'
},
parent_category: {
title: 'Sub category of',
type: 'custom',
renderComponent: CategoryRenderComponent,
editor: {
type: "list",
config:{
list: this.selectList // a list to populate the options
}
}
},
is_active : {
title: 'Is active?',
editor:{
type:"checkbox",
config:{
true:"1",
false:"0"
}
},
filter: {
type: 'checkbox',
config: {
true: 'true',
false: 'false',
resetText: 'Reset filter'
}
},
type: 'custom',
renderComponent: CheckboxRenderComponent
}
}
};
}
...
...
...
}
@unicod3 can you please post the CategoryRenderComponent logic here. I created my custom one but facing some issues while updating select value.