Preselect items using key/value pairs

[Julien Hoffmann]

Hello Support,

I have a hard time initializing my multiselect component with values from the database.

  :fields="{ text: 'name', value:
'id'}" placeholder='Choose categories'>

The component gets the list of values from a list called categoriesList – it gets populated fine:

[

                {
                                "id":1,
                                "name":"cat1"
                },
                {
                                "id":2,
                                "name":"cat2"
                },
                {
                                "id":3,
                                "name":"cat3"
                },
                {
                                "id":4,
                                "name":"cat4"
                }
]

The component gets the list of already selected items from my form’s data – those values do not appear:

{
                "id":6,
                "reference":"117000B000340",
                "Categories":[
                                {
                                                "id":1,
                                                "name":"cat1",
                                },
                                {
                                                "id":2,
                                                "name":"cat2",
                                }
                ]
}

1. How do I make values from my form’s data appear as already selected in the component ?
2. How do I read the selected key/value pairs ?

Thanks for your help !

Julien

[Berly Christopher]

Hi Julien, 

Greetings from Syncfusion support. 

Query 1: 

How do I make values from my form’s data appear as already selected in the component ? 

Response: 

We can achieve the requested requirement with help of value property as mentioned below code example. 

var data = { 

  id: 6, 

  reference: "117000B000340", 

  Categories: [ 

    { 

      id: 1, 

      name: "cat1", 

    }, 

    { 

      id: 2, 

      name: "cat2", 

    }, 

  ], 

}; 

export default { 

  data() { 

    return { 

      sportsData: [ 

        { 

          id: 1, 

          name: "cat1", 

        }, 

        { 

          id: 2, 

          name: "cat2", 

        }, 

        { 

          id: 3, 

          name: "cat3", 

        }, 

        { 

          id: 4, 

          name: "cat4", 

        }, 

      ], 

      fields: { text: "name", value: "id" }, 

      value: [data.Categories[0].id, data.Categories[1].id], 

    }; 

  }, 

Screenshot: 

 

Query 2: 

How do I read the selected key/value pairs ? 

Response: 

We can get the key/value pair of selected value from the selected event argument as mentioned below. 

   <ejs-multiselect 

        ref="multiObj" 

        :select="OnSelect" 

        id="multiselect" 

        :value="value" 

        :dataSource="sportsData" 

        :fields="fields" 

        placeholder="Select a game" 

      ></ejs-multiselect> 

methods: { 

    OnSelect: function (args) { 

      console.log(args.itemData); 

    }, 

For your convenience, we have prepared the sample and attached it below. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart303374926  

Regards, 

Berly B.C  

[Julien Hoffmann]

Hello,

Thanks for your help, I am getting closer.

In your sample, now suppose the 'data' and the 'sportsData' both come from an API call.

My goal is to have something like this :

<ejs-multiselect ref="ms" id="ms" v-model="data.Categories" :dataSource="sportsData" :fields="{ text: 'name', value: 'id'}" placeholder="Choose categories"></ejs-multiselect>

Possible ?

What would be the order for databinding ? first datasource, then value ?

Thank you again

Julien

[Ponmani Murugaiyan]

Hi Julien, 

Thanks for the update. 

Yes, possible and you are correct that the datasource has to be updated first then only preselected items should be given to value property. 

Please get back us if you need further assistance. 

Regards, 

Ponmani M