How to dynamically add built-in filter data

[homx]

@akveo hi ! Excuse me how to dynamically add built-in filter data?

[homx]

@lexzhukov Now list: [{value: 'test', title: 'test'}] is fixed:

columns: {
          ProviderName: {
                title: 'providerName',
                filter: {
                    type: 'list',
                    config: {
                        selectText: 'all',
                        list: [{value: 'test',title: 'test'}],
                    }
                },
                sort: false
            },
}

I now want to get this data in the server, how to add to the list: [{value: 'test',title: 'test'}] array

[Koushikhore]

The setting object can be populated before data is loaded in source. I am not sure it is the right way. But this is the one I could make it work `@Component({ selector: 'app-demo-page', template: '<ng2-smart-table [settings]="settings" [source]="dataSource">' }) export class DemoComponent implements OnInit { constructor(private services: SomeServices) {} settings: any; dataSource: LocalDataSource = new LocalDataSource(); ngOnInit() { this.services.getList().subscribe(resp => { const list = resp.map(r => { return {value: r, title: r};}); this.settings = { columns: { ProviderName: { title: 'providerName', filter: { type: 'list', config: { selectText: 'all', list: list, } }, sort: false } } } this.services.getMainList().subscribe( resp2 => this.dataSource.load(resp2), e => {} );

    });

} }`

[AlexanderSkrypnyk]

hello guys! Van you help me? i got list of filters in table, but how can i get selected date in filter to send it? https://user-images.githubusercontent.com/16383326/30536443-825d069e-9c6e-11e7-8bfa-48f19df8ec41.png

[tusharwalzade216]

As @Koushikhore Said, you can do it with subscribing to an Observable. I'm also using the same way -

public vendorList = [];

ngOnInit() {
    this.getAllClientsData().subscribe(res => {
        this.vendorList = this.getUniqueArray(this.vendorList);
        this.tableSettings = this.smartTableSettings();
    });
}

smartTableSettings() {
    return {
        columns: {
            sr: { title: '#', filter: false, addable: false, editable: false },
            vendorid: {
                title: 'Vendor',
                valuePrepareFunction: (cell, row) => {
                    return row.vendorname;
                },
                editor: {
                    type: 'list',
                    config: {
                        selectText: 'Select...',
                        list: this.vendorList,
                    },
                },
                filter: {
                    type: 'list',
                    config: {
                        selectText: 'All',
                        list: this.vendorList,
                    },
                }
            },
            clientname: { title: 'Client' }
        }
    };
}

getAllClientsData() {
    return Observable.create(observable => {
        this.clientsService.getAllClientsData().subscribe(res => {
            if (res.length) {
                res.forEach((element, index) => {
                    this.vendorList.push({ title: element['vendorname'], value: element['vendorid'] });
                    element.sr = index + 1;
                });
            }
            this.allClientsData = new LocalDataSource(res);
            observable.next(true);
            return observable.complete();
        });
    });
}

[melaniecarr23]

I was able to do this in a similar way as above:

ngOnInit() {
    this.loadData();
    this.loadFilters();
  }
// load table data
  async loadData() {
    this.logger.log(`Loading appointment and filter data...`);
    this.ApptModels = await this.dataService.apptsFetch().toPromise();
  }
  // load filter data for the table
  async loadFilters() {
    console.log(`Loading filters...`);
    this.typeList = await this.dataService.typesFetch().toPromise();
    this.statusList = await this.dataService.statusesFetch().toPromise();

    // set the filters in the table settings
    this.apptSettings = await this.setTableSettings();
  }

  // add filter data to table settings
  setTableSettings() {
    return {
      actions: {
        delete: false,
        position: 'right' // left|right
      },
      columns: {
        type: {
          title: 'Type',
          valuePrepareFunction: type => {
            return type.abbr;
          },
          filter: {
            type: 'list',
            config: {
              selectText: 'ALL',
              list: this.typeList
            }
          },
          editor: {
            type: 'list',
            config: {
              selectText: 'Select ...',
              list: this.typeList
            }
          },
          filterFunction(type?: any, search?: string): boolean {
            if (type._id === search) {
              return true;
            } else {
              return false;
            }
          }
        },
        status: {
          title: 'Status',
          valuePrepareFunction: status => {
            return status.status;
          },
          filter: {
            type: 'list',
            config: {
              selectText: 'ALL',
              list: this.statusList
            }
          },
          editor: {
            type: 'list',
            config: {
              selectText: 'Select ...',
              list: this.statusList
            }
          },
          filterFunction(status?: any, search?: string): boolean {
            if (status._id === search) {
              return true;
            } else {
              return false;
            }
          }
        },
        other fields: {
          title: 'Other Fields',
          filter: true
        },
      },
      attr: {
        class: 'table table-bordered'
      },
      edit: {
        confirmSave: true
      }
    };
  }