angularng2-smart-table

ng2-smart-table - Use object on column with editor type list


In my angular application I am using ng2-smart-table. In one column I would like to use a list of objects that have an id and a description. I managed to do it this way:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  template: `
    <ng2-smart-table [settings]="settings"></ng2-smart-table>    
  `
})

export class AppComponent  {
  name = 'Angular';
  test = [
    {title: '1', value: 'test1'},
    {title: '2', value: 'test2'},
    {title: '3', value: 'test3'}
  ];

  settings = {
    columns: {    
      campagna: {
        title: 'campaign',
        filter: false,
        width: '250px',
        type: 'html',
        editor: {
          type: 'list',
          config: {                  
            list: this.test,      
          },
        }
      }        
    }
  };
}

The problem is that the title representing the id of the object is displayed in the combobox. when I add the selected object, the description is correctly displayed.

I would like the description to appear in the combobox. There is a way to do it?

This is stackblitz: https://stackblitz.com/edit/angular-btgun6

Thank You


Solution

  • first of all you are using value as title you need to replace your test list with

    test = [
        {title: 'test1', value: '1'},
        {title: 'test2', value: '2'},
        {title: 'test3', value: '3'}
      ];
    

    now you need to use

    valuePrepareFunction: (cell, row,test) => {
              debugger
              var t=test.column.dataSet.columns[0].settings.editor.config.list.find(x=>x.value===cell)
              if(t)
               return t.title },
    

    in you campagna object click here for demo

    you can also do this for list as given below

    test = [
            {title: 'test1', value: 'test1'},
            {title: 'test2', value: 'test2'},
            {title: 'test3', value: 'test3'}
          ];