-1

I am trying to add select filter to smart table and I am setting options with custom data. Select options data appear but adds as many empty options as the number of data. When I click on blank options, it's filtering the data. How can I remove empty options from select filter?

enter image description here

smart-table.component.ts

 satisDetayList : any[];
  clientsName: any[] =[];
 getData(){
  this.service.getSatisDetayTable().subscribe(data=>{
    this.satisDetayList=data;
    console.log(data);
  });
 }

 getClientName(){
  this.detayService.getClients().subscribe(data=>{
    this.clientsName=data;
    data.forEach(obj => {
      this.clientsName.push({value:obj.CARI_HESAP_UNVANI,title:obj.CARI_HESAP_UNVANI})
  });

  let newSettings = this.settings;
  newSettings.columns.CARI_HESAP_UNVANI.filter.config.list = this.clientsName;
  this.settings = Object.assign({}, newSettings);
  });

 }


  ngOnInit(): void {
    this.getData();
    this.getClientName();
  }

  onDeleteConfirm(event): void {
    if (window.confirm('Are you sure you want to delete?')) {
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }

  settings = {
    actions: false,
    add: {
      addButtonContent: '<i class="nb-plus"></i>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    columns: {
      TARIH: {
        title: 'Date',
        editor: {
          type: 'list',
          config: {
            selectText: 'Select',
            list: [
              {value: '1', title:'Option 1'},
              {value: '2', title:'Option 2'},
              {value: '3', title:'Option 3'},
              {value: '4', title:'Option 4'},
            ],
          },
        },
        filter: {
          type: 'list',
          config: {
            selectText: 'Select',
            list: [
              {value: '1', title:'Option 1'},
              {value: '2', title:'Option 2'},
              {value: '3', title:'Option 3'},
              {value: '4', title:'Option 4'},
            ],
          },
        },
      },
      CARI_HESAP_UNVANI: { ////////////////////////////////////// here
        title: 'Client Name',
        type: 'string',
        valuePrepareFunction: (CARI_HESAP_UNVANI) => { return CARI_HESAP_UNVANI},
        filter: {
          title:'Client Name',
          type: 'list',
          config: {
            selectText: 'Select',
            list: this.clientsName,
            
          },
        },
      },
Palle Due
  • 5,929
  • 4
  • 17
  • 32
rosa
  • 13
  • 1
  • 8

1 Answers1

0

I change the getClientName() function and problem solved !

 getClientName(){
  this.detayService.getClients().subscribe(data=>{
      data.forEach(obj => {
        this.clientsName.push({value:obj.CARI_HESAP_UNVANI,title:obj.CARI_HESAP_UNVANI})
    });
  
    let newSettings = this.settings;
    newSettings.columns.CARI_HESAP_UNVANI.filter.config.list = this.clientsName;
    this.settings = Object.assign({}, newSettings);
    });

 }
rosa
  • 13
  • 1
  • 8
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 13 '22 at 13:53