ng2-smart-table icon indicating copy to clipboard operation
ng2-smart-table copied to clipboard

Is it possible to have a column editor list values loaded from API?

Open ghost opened this issue 8 years ago • 2 comments

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?

ghost avatar Mar 17 '17 16:03 ghost

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 avatar Mar 23 '17 16:03 unicod3

@unicod3 can you please post the CategoryRenderComponent logic here. I created my custom one but facing some issues while updating select value.

AkhilNaidu09 avatar Nov 30 '17 19:11 AkhilNaidu09