How to set multiple selection in dropdown in ng2-smart-table?
Asked Answered
P

2

8

In my app, I have load dynamic values in dropdown list of ng2-smart-table. Now I have to enable multiple selection in dropdown in ng2-smart-table.

Note: Multiple selection in dropdown not for checkbox.

Pictograph answered 11/12, 2018 at 18:1 Comment(3)
Don't know much about angular6 but I believe this might help you: valor-software.com/ng2-selectMerill
No , It just dropdown , In my case it's table with many features.Pictograph
Post your code block of drop down to get more Idea , about your question.Haemostat
F
12

I think you can try with your own custom editor component. I've added a basic select with a multiple attribute, but you can create a custom component more complex as you prefer.

Pass data to your component with valuePrepareFunction and voila.

settings.ts

private settings = {
 // Previous config ...

 columns: {
  multiple: {
    title: 'Multi select',
    type: 'html',
     editor: {
      type: 'custom',
      valuePrepareFunction: (cell, row) => row,
      component: MultiSelComponent,
     },
  }
 }
}

multiSel.component.html

<select multiple [(ngModel)]="yourModelStore">
  <option *ngFor="let item of myValues" [value]="item.value">{{item.name}}</option>
</select>

multiSel.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';

....

export class MultiSelComponent implements OnInit {

  @Input() value;

  yourModelStore: any; // rendered as this.yourModelStore = ['value', 'value'];

  ngOnInit() {
    this.myValues = this.value;
  }

module.ts

declarations:[
  //others ...

  MultiSelComponent
]
entryComponents: [
  MultiSelComponent
]

**I've edit the answer and added more infos on setting and component.ts

Fathometer answered 20/12, 2018 at 13:50 Comment(3)
Thanks for your reply, I'll try and update you soon.Pictograph
Sorry for the delay, Due to some urgent work on another project I cann't get chance to implement it yet. But yes I'll try soon.Pictograph
Hi, I am new to angular, Ia m able to get the dropdown but not able to get the value selected. Probably I am not using "yourModelStore" properly. Can you elaborate what is "yourModelStore" @FathometerPhytogenesis
C
-2
 yourField: {
    title: 'Your field title',
    editor: {
      type: 'list',
      config: {
        selectText: 'Select',
        list: [
          { value: '1', title: 'Admin' },
          { value: '2', title: 'Manager' },
        ],
      },
    },
    type: 'number',
  },
Clino answered 12/11, 2019 at 2:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.