How to show pre-select some items of the list ?

[Sandra Bordier]

Dear support,

I use a multiselect in a form, which works very well.

When I submit my form , the selected items from the multiselect are stored in my database.

Next, when I click an "edit" button of my page, it opens a dialog with a form which contains the multiselect.
Here, I would like to show in the multiselect every items that have been previsouly created ( but it must also show the rest of the list by clicking on the on the multiselect).

In fact, I would like to do a similar thing as I would do in a simple select element : 
"<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>"

but with your multiselect elements  : 

<ejs-multiselect id='cars' ?? ></ejs-multiselect>

Is it possible ?

Best regards,

[Ponmani Murugaiyan]

Hi Sandra, 

Thanks for contacting Syncfusion support. 

Query: How to show pre-select some items of the list ? 

We can set the pre-select value to the MultiSelect component using the value property based on the mapped value field. Please refer the below code example. 

<ejs-multiselect id="multiselect" :dataSource="sportsData" :fields="fields" placeholder="Select a game" :value="preValue"></ejs-multiselect> 

 

export default Vue.extend({ 

    data: function () { 

        return { 

        sportsData: [ 

            { Id: "game1", Game: "Badminton" }, 

            { Id: "game2", Game: "Football" }, 

            { Id: "game3", Game: "Tennis" }, 

            { Id: "game4", Game: "Hockey" }, 

            { Id: "game5", Game: "Cricket" }, 

            { Id: "game6", Game: "Basketball" }, 

        ], 

        fields: { text: "Game", value: "Id" }, 

        preValue: ["game3", "game2"], 

        }; 

    }, 

}); 

Sample: https://codesandbox.io/s/syncufsion-v18-dropdown-forked-rpkjs?file=/src/App.vue 

Regards, 

Ponmani M 

[Sandra Bordier]

Thank you for your answer.

This works perfectly as long as I don't add a v-model.

This code works : 

<ejs-multiselect

id='multiselectlistUpdateUserType'

ref='multiselectlistUpdateUserType'

floatLabelType="Auto"

:dataSource="this.getRefUserTypeList"

:fields="fieldsUserType"

placeholder='Qui peut voir le planning ? *'

:value="preValueUserType"

/>

But this one does not work : 

<ejs-multiselect

id='multiselectlistUpdateUserType'

ref='multiselectlistUpdateUserType'

floatLabelType="Auto"

:dataSource="this.getRefUserTypeList"

:fields="fieldsUserType"

placeholder='Qui peut voir le planning ? *'

:value="preValueUserType"

v-model="form.ref_user_types"

/>

How can I do, because I need to bind the multiselect in my form and preselect value at the sal?

Moreover, I need to populate dynamically the preValue.
In my example I had to hardcode in order to test

preValueUserType: [1, 3],

How can I do to populate preValueUserType with dynamic datas ?

Here is my file.

Attachment: code_89a17b30.zip

[Deepak Ramakrishnan]

Hi Sandra ,  

 

Sorry for the inconvenience caused.  

 

We will check and update the details in two business days (20^th July 2021). We appreciate your patience until then.  

 

Regards,  

Deepak R. 

[Deepak Ramakrishnan]

Hi Sandra, 

 

 

Thanks for your patience. 

 

Query : How can I do to populate preValueUserType with dynamic datas ? 

   

Yes we can bind the prevalue dynamically by  using ‘v-model’ also. Kindly refer the below highlighted code and sample for your reference. 

 

[Template] : 

<ejs-multiselect id="multiselect" 

                     :dataSource="sportsData" 

                     :fields="fields" 

                     placeholder="Select a game" 

                     v-model="form.ref_agenda_type_id"></ejs-multiselect> 

 

[methods]: 

 

 methods: { 

        updateValue: function (event) { 

            this.form.ref_agenda_type_id = ["game1", "game2"]; 

        } 

 

 

 

 

 

Sample : https://codesandbox.io/s/syncufsion-v18-dropdown-forked-l8gwp?file=/src/App.vue 

 

 

Thanks, 

Deepak R.