How can I use a MultiSelectComponent as a toolbar-item?

[Laurin S]

Hi,

I would like to use a MultiSelectComponent as a toolbar item in the ToolbarComponent. Using the template property of the ItemModel I'm able to visualize the MultiSelectComponent, however, when I'm selecting an element of the MultiSelect, I'm having the following problems:

• MultiSelect Mode=Box: once selecting an item, the MultiSelectComponent gets multiline... is there a way to have the component automatically adjust its width?
• MultiSelect Mode=CheckBox: when selecting an item, there occurs an error (Cannot read property 'setAttribute' of null)

I've attached a demo piece of code, that shows the two problems. Thanks.

Attachment: index_daefe4e8.zip

[Satheesh Kumar Balasubramanian]

Hi Laurin, 

  

Thanks for using Syncfusion Products. 

  

Query 1: 

  

We have validated your reported query "MultiSelect Mode=Box: once selecting an item, the MultiSelectComponent gets multiline... is there a way to have the component automatically adjust its width?" and let you know that multiselect will take default width of toolbar item when it is placed inside toolbar. So, we suggest you to set width for multiselect to resolve the reported issue. 

  

index.js:  

        <MultiSelectComponent 

          allowFiltering={true} 

          width="400px" 

          dataSource={[ 

            { id: '1', description: 'Item 1' }, 

            { id: '2', description: 'Item 2' }, 

            { id: '3', description: 'Item 3' } 

          ]} 

          fields={this.fields} 

          mode="Box" 

          placeholder="Mode BOX" 

          showSelectAll={true} 

          showClearButton={true} 

          showDropDownIcon={true} 

          filterBarPlaceholder="Select" 

        /> 

  

Query 2: 

We have validated your reported query "MultiSelect Mode=CheckBox: when selecting an item, there occurs an error (Cannot read property 'setAttribute' of null)" with your shared snippets and let you know that you have missed to inject the CheckBoxSelection module. We suggest you to Inject the CheckBoxSelection module to resolve the reported issue. For the same we have prepared a sample for your reference which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/react-multiselect-inside-toolbar?file=index.js 

  

index.js:  

import { 

  CheckBoxSelection, 

  Inject, 

  MultiSelectComponent 

} from '@syncfusion/ej2-react-dropdowns'; 

  

 <MultiSelectComponent> 

 <Inject services={[CheckBoxSelection]} /> 

 </MultiSelectComponent> 

  

Note: We have rendered MultiSelect component inside Toolbar component using ItemDirective tag instead of rendering in Toolbar ItemModel. 

  

Kindly try the above sample and let us know if you need any further assistance. 

  

Regards, 

Satheesh Kumar B 

[Laurin S]

Thanks for the quick replay.

Query 1: To sum up, there is no way to have an automatic adjustment of the width, correct?

Query 2: How can I use the "<Inject services={...} />" when using the "items" property of the toolbar, and therefore using the MultiSelect class, instead of the MultiSelectComponent? (as used in the original code example)

I have to use the items-property of the toolbar, since I have to create the items dynamically. Therefore, I have to use the MultiSelect-class, rather than the MultiSelectComponent, since the "template" property of a toolbar item allows me only to use objects...

Can you please add the "needed" code lines in the attached code sample to make the demo work, without changing the general structure and property assignments. Thanks.

Attachment: index_ac2a493e.zip

[Satheesh Kumar Balasubramanian]

Hi Laurin, 

  

Thanks for your update. 

  

Query 1:  

Yes, we need to set fixed width for MultiSelect component to resolve the reported issue. Since, multiselect will take default width of toolbar item when it is placed inside toolbar. 

  

Query 2:  

We have validated your reported query "MultiSelect Mode=CheckBox: when selecting an item, there occurs an error (Cannot read property 'setAttribute' of null)" with your shared snippets and injected the CheckBoxSelection module in your shared snippets to resolve the reported issue. For the same we have modified the sample for your reference which can be viewed from the following link.  

  

Sample: https://stackblitz.com/edit/react-multiselect-inside-toolbar-pts4mu?file=index.js 

  

index.js:   

import { 

  CheckBoxSelection, 

  MultiSelect 

} from '@syncfusion/ej2-react-dropdowns'; 

  

MultiSelect.Inject(CheckBoxSelection); 

  

Kindly try the above sample and let us know if you need any further assistance. 

  

Regards, 

Satheesh Kumar B