Multi Select - multi column dropdown

Posted by: eveverad3 on 14 January 2019, 7:43 pm EST

    • Post Options:
    • Link

    Posted 14 January 2019, 7:43 pm EST

    Hello Team,

    Working on Angular 2.

    Having the example below, how can I show a multi column dropdown when I click on Country?

    For example to show:

    ID Country Sales

    https://stackblitz.com/edit/angular-fjxcdb?embed=1&file=app/app.component.ts

    I still need the multi select functionality.

    Thanks,

  • Posted 14 January 2019, 7:46 pm EST

    I found this example that is somehow similar to my case but I was not able to adapt

    http://jsfiddle.net/Wijmo5/h04ze7tq/

  • Posted 15 January 2019, 11:19 pm EST

    Hi,

    We have updated the sample to show multiple columns in multiselect. Please refer to the following updated sample here:

    https://stackblitz.com/edit/angular-exgyek?file=app%2Fapp.component.ts

    ~Sharad

  • Posted 17 January 2019, 8:46 pm EST

    Hello Sharad,

    Thank you for your fast reply.

    Your answer helped me a lot. Would it be possible to add also headers so the user knows what represents every column in the multi select dropdown?

    Thanks and regards,

  • Posted 20 January 2019, 6:28 pm EST

    Yes, you may also display headers in the dropdown. To do so, please enable the select all checkbox by setting the showSelectAllCheckbox property to true and then format the select-all header to display our multi-column header.

    Please refer to the following code snippet and updated sample:

    let editor = new wjcInput.MultiSelect(rootEl, {
          itemsSource: this.multiSelSource,
          displayMemberPath: 'country',
          selectedValuePath: 'id',
          showSelectAllCheckbox: true
        });
        editor.isDroppedDownChanged.addHandler((s,e) => {
          if(!editor.isDroppedDown){
            return;
          }
    
          let dropDown = editor.dropDown;
          let selAllContainer = dropDown.querySelector('.wj-listbox-item.wj-header.wj-select-all');
          // save selectAll checkbox, since this instance is saved in the control to determine selectAll cb
          let selAllCb = selAllContainer.querySelector('input');
          selAllContainer.innerHTML = '<table><tr>' +
                '<td  class="sel-all-cb" style="width:30px;text-align:right">' + 
                // '<input type="checkbox" '+ (wjcCore.hasClass(e.item, 'wj-state-checked')? 'checked' :'') +'/>'+
                '</td>' +
    						'<td style="width:30px;text-align:center">' + 'ID' + '</td>' +
                '<td style="width:100px">' + 'Country' + '</td>' +
                '<td style="width:80px;text-align:right">' +
                  'Downloads' +
                '</td>' +
                '<td style="width:80px;text-align:right">' +
                  'Sales' +
                '</td>' +
                '</tr></table>';
          // append selectAll checkbox
          selAllContainer.querySelector('.sel-all-cb').appendChild(selAllCb);
    
        });
    

    https://stackblitz.com/edit/angular-o1srtk?file=app/app.component.ts

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels