A way to have different selectable columns in a MultiSelectDropdown

Hi,

I'm currently working in an angular project, and I need to know if there is a way to have different selectable columns in the multiselect ( for example to click different elements from different columns and to do something with that data).

The multiselect I've done is the following:

<ejs-multiselect id='sample-list1' [dataSource]='filteredGrid' [fields]='fields' [placeholder]='waterMark'
         [mode]='mode' (open)='onOpen($event)' (select)="onSelect($event)"  (tagging)="onTagging($event) " #multiselect>
            <ng-template #headerTemplate>
                        <div>
                        <i class="e-input-group-icon icon-buscar" style="display:inline-block"></i>
                        <!-- <ejs-multiselect #columnasBusqueda [dataSource]='listaColumnas' [fields]="{text: 'nombre', value: 'id_columna'}" mode='CheckBox' [allowFiltering]='false' [allowCustomValue]='false' selectAllText='Todo' unSelectAllText="Todo" showSelectAll=true [showClearButton]="false" [popupWidth]="200" [changeOnBlur]="false" (created)="onColumnasBusquedaCreated()" (change)="onColumnasBusquedaChange()"></ejs-multiselect>-->
                        <div class="e-input-group busquedadesplegable-cont;  display:inline-block">
                            <input #textoBusqueda  autocomplete="off"
                            type="text" placeholder="Buscar..." class="e-input" (input)="onInputChange($event)"
                            (keyup.delete)="borrarBusqueda()"/>  
                            <i class="e-input-group-icon icon-equis" (click)="borrarBusqueda()"></i>
                        </div>
                        </div>
              </ng-template>
        </ejs-multiselect>

1 Reply

KP Kokila Poovendran Syncfusion Team July 19, 2023 04:36 PM UTC

Hi David,


We apology for any inconvenience caused. We do have a demo available on our website that demonstrates the column layout when you open the popup. Please find the demo link bellow:


Demohttps://ej2.syncfusion.com/angular/demos/#/bootstrap5/multi-select/template


We hope that this demo meets your requirements. If you have any specific use cases or if the demo doesn't entirely address your needs, we kindly request you to provide us with a video illustration or more details about your requirements. This will enable us to assist you more effectively and find the best possible solution for your scenario.


Regards,

Kokila Poovendran.


Loader.
Up arrow icon