1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. MultiSelect pre-selected items

MultiSelect pre-selected items

Good morning,
I'm using Syncfusion for Essential JS 2 and MultiSelect component.
I use multiSelectObject.value to preselect items.
But when I have all item selected and I remove an item from the list, the popup list doesn't display anymore.


Attachment: Images_a7bbcb13.rar

9 Replies
IB Ilakkiya Baskar Syncfusion Team June 12, 2018 03:16 AM UTC

Hi Mini Dev,    
    
Thank you for contacting Syncfusion support. We have analyzed your query. We suggest you to use hideSelectedItem property to false in the MultiSelect component. It will show the selected items in the popup. 
var listObj = new ej.dropdowns.MultiSelect({ 
        // set the placeholder to MultiSelect input element 
        placeholder: 'Favorite Sports', 
        // set the type of mode for how to visualized the selected items in input element. 
        mode: 'Box', 
       hideSelectedItem:false, 
    }); 
    listObj.appendTo('#box'); 
 
Please refer the below link, 
 
Please let us know, if there is any concern. 
  
Regards,  
Ilakkiya B.  


MD Mini Dev June 12, 2018 08:12 AM UTC

Hi,
I read in documentation hideSelectedItem property is set to false by default. 
Anyway it may be a solution but it's not I need.
The problem is only when I already have all items preselected. It is correct not to show anything (because I don't have other items in list) but when I removed (click on the x) an item, this item is correctly removed but the popup list does not display it anymore.
Is this behavior correctly or could it be a bug? This happens only in this case.

IB Ilakkiya Baskar Syncfusion Team June 13, 2018 12:20 PM UTC

Hi Mini Dev,  
    
Thank you for your details.   
  
We can reproduce the issue when we select the popup items by using keyboard in the MultiSelect component. By using down arrow key and enter key, select all the popup items and clear and then check the popup items. By this scenario, we can reproduce the issue.   
  
Therefore, kindly confirm us whether you’re facing the same scenario at your end.  
  
  


  
Regards   
Ilakkiya B   


MD Mini Dev July 12, 2018 08:45 AM UTC

I need to pre-select items in multi select box. 
To do this I use value.
My code:
<div class="form-group">
    <label>...</label>
    <div class="control-wrapper">
        <div class="control-styles">
            <ejs-multiselect id="box"></ejs-multiselect>
        </div>
    </div>
</div>

<script>
    function runMultiSelectBox() {
        var mainIdsArr = [];

        @if (ViewBag.mainIdsStringArray != null)
        {
            foreach (var d in ViewBag.mainIdsStringArray)
            {
                <text>mainIdsArr.push(@d);</text>
            }
        }
        var multiSelectObject = new ej.dropdowns.MultiSelect({
            dataSource: ej.data.DataUtil.parse.isJson(@Html.Raw(ViewBag.mainIdsJson)),
            fields: {
                text: "...",
                value: "..."
            },
            htmlAttributes: {
                name: "..."
            },
            maximumSelectionLength: 1000.0,
            mode: "Box",
            placeholder: "...",
            value: mainIdsArr,
            zIndex: 9999            
        });

        multiSelectObject.appendTo('#box');
    }

    runMultiSelectBox();
</script>

Is correct use value?

Attachment: Capture_340dcaa0.zip

PO Prince Oliver Syncfusion Team July 13, 2018 08:54 AM UTC

Hi Mini, 

Thank you for your update. 

Yes, you can use the value property to pre-select the values in the MultiSelect component. You need to pass the values as array of string or number to pre-select multiple. Kindly refer to the following UG documentation link: https://ej2.syncfusion.com/documentation/multi-select/api-multiSelect.html?lang=es5#value 

You can also pre-select using the text property. Make sure that you pass the items bound in the value field for value property and items bound in the text field in text property to properly pre-select the items in the MultiSelect. 

Please let us know if you require any further assistance on this. 

Regards, 
Prince 


MD Mini Dev July 13, 2018 01:18 PM UTC

Hi,
I try to explain what's the wrong behavior.
Following step by step
1) I have an item preselected in the multi select box (see 1-capture screenshot)
2) I select another element from the multi select list (see 2-capture screenshot). Now I have two items selected
3) I click on the x to clean preselected items (see 3-capture screenshot)
4) In the multi select list the first item (preselected at beginning) isn't more visible

Attachment: Capture_9ab8995d.zip

PO Prince Oliver Syncfusion Team July 17, 2018 11:38 AM UTC

Hi Mini, 

Thank you for contacting Syncfusion support. 

We can replicate the reported issue in our end. We will fix this issue and the fix will be available in upcoming next patch release.  

Regards, 
Prince 


MD Mini Dev July 17, 2018 11:51 AM UTC

Hi,

I have a regular license but in a different account.

Is it possible to have a patch?

PO Prince Oliver Syncfusion Team July 18, 2018 06:07 AM UTC

Hi Mini, 

Thank you for your update. 

The patch release will be available next week and will be published globally in npm repository. You can install it from there, once it is available. 

Regards, 
Prince 


Loader.
Up arrow icon