CODEWITHSUNDEEP
angularng2-smart-table
20.miles
20.miles

Reputation: 189

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

Upvotes: 0

Views: 3074

Answers (2)

Abdulbasit Khaleeq
Abdulbasit Khaleeq

Reputation: 48

I was facing the same issue of not getting Text in ng2-smart-table 's columns cell. ng2-smart-table was showing dropdown's value instead of text. I used find operator in valuePrepareFunction of ng2-smart-table's settings object on value property of my list which was used for dropdown. 

columns: {
  name: {
    title: 'Name',
    type: 'string',
  },
  category :{
    title: 'Category',
    type: 'html',
    valuePrepareFunction: (cell, row,category) => {
      debugger
      var t= this.categories.find(x=>x.value===cell)
      if(t)
       return t.title },
    editor: {
      type: 'list',
      config: {
        selectText: 'Select one',
        list: this.categories,
      }
    },
    filter: {
      type: 'list',
      config: {
        selectText: 'Select one',
        list: this.categories,
      },
    }
  }

the column's cell contains value and we used that value to find its title/text from list of categories (in my case it was named categories, for you it will be test)

Upvotes: 0

Zulqarnain Jalil
Zulqarnain Jalil

Reputation: 1691

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'}
      ];

Upvotes: 1

Related Questions