Value binding in EJ2 Vue Multi select control

11 Jun 202411 minutes to read

Value binding in the MultiSelect control allows you to associate data values with each list item. This facilitates managing and retrieving selected values efficiently. The MultiSelect component provides flexibility in binding both primitive data types and complex objects.

Primitive Data Types

The MultiSelect Dropdown control provides flexible binding capabilities for primitive data types like strings and numbers. You can effortlessly bind local primitive data arrays, fetch and bind data from remote sources, and even custom data binding to suit specific requirements. Bind the value of primitive data to the value property of the MultiSelect.

Primitive data types include:

  • String
  • Number
  • Boolean
  • Null

The following sample shows the example for preselect values for primitive data type

<template>
    <div id="app">
        <div id="wrapper1">
            <ejs-multiselect id='multiselect' :dataSource='itemData' :value='value' placeholder='e.g Item 1'
                :allowFiltering='false' popupHeight="200px"></ejs-multiselect>
        </div>
    </div>
</template>
<script setup>
import { MultiSelectComponent as EjsMultiselect } from "@syncfusion/ej2-vue-dropdowns";

let records = [];
function dataSource() {
    records = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10", "Item 11", "Item 12", "Item 13", "Item 14", "Item 15"];
}
dataSource();

const itemData = records;
const fields = { value: 'id', text: 'text' };
const allowFiltering = true;
const allowObjectBinding = true;
const value = ["Item 5", "Item 7", "Item 12"];

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";

#wrapper1 {
    min-width: 250px;
    float: left;
    margin-left: 350px;
}

#wrapper2 {
    min-width: 250px;
    float: right;
    margin-right: 100px;
}
</style>
<template>
    <div id="app">
        <div id="wrapper1">
            <ejs-multiselect id='multiselect' :dataSource='itemData' :value='value' placeholder='e.g Item 1'
                :allowFiltering='false' popupHeight="200px"></ejs-multiselect>
        </div>
    </div>
</template>
<script>
import { MultiSelectComponent } from "@syncfusion/ej2-vue-dropdowns";

let records = [];
function dataSource() {
    records = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10", "Item 11", "Item 12", "Item 13", "Item 14", "Item 15"];
}
dataSource();

//Component registeration
export default {
    name: "App",
    components: {
        "ejs-multiselect": MultiSelectComponent
    },
    data() {
        return {
            itemData: records,
            fields: { value: 'id', text: 'text' },
            allowFiltering: true,
            allowObjectBinding: true,
            value: ["Item 5", "Item 7", "Item 12"],
        }
    },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";

#wrapper1 {
    min-width: 250px;
    float: left;
    margin-left: 350px;
}

#wrapper2 {
    min-width: 250px;
    float: right;
    margin-right: 100px;
}
</style>

Object Data Types

In the MultiSelect Dropdown control, object binding allows you to bind to a dataset of objects. When allowObjectBinding is enabled, the value of the control will be an object of the same type as the selected item in the value property. This feature seamlessly binds arrays of objects, whether sourced locally, retrieved from remote endpoints, or customized to suit specific application needs.

The following sample shows the example for preselect values for object data type

<template>
    <div id="app">
        <div id="wrapper1">
            <ejs-multiselect id='multiselect' :dataSource='itemData' :value='value' placeholder='e.g Item 1'
                :fields='fields' :allowFiltering='false' :allowObjectBinding='true'
                popupHeight="200px"></ejs-multiselect>
        </div>
    </div>
</template>
<script setup>
import { MultiSelectComponent as EjsMultiselect } from "@syncfusion/ej2-vue-dropdowns";

let records = [];
function dataSource() {
    for (let i = 1; i <= 150; i++) {
        let item = {
            id: 'id' + i,
            text: "Item " + i,
        };
        records.push(item);
    }
}
dataSource();

const itemData = records;
const fields = { value: 'id', text: 'text' };
const allowFiltering = true;
const allowObjectBinding = true;
const value = [{ id: 'id5', text: 'Item 5' }, { id: 'id7', text: 'Item 7' }, { id: 'id12', text: 'Item 12' }];

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";

#wrapper1 {
    min-width: 250px;
    float: left;
    margin-left: 350px;
}

#wrapper2 {
    min-width: 250px;
    float: right;
    margin-right: 100px;
}
</style>
<template>
    <div id="app">
        <div id="wrapper1">
            <ejs-multiselect id='multiselect' :dataSource='itemData' :value='value' placeholder='e.g Item 1'
                :fields='fields' :allowFiltering='false' :allowObjectBinding='true'
                popupHeight="200px"></ejs-multiselect>
        </div>
    </div>
</template>
<script>
import { MultiSelectComponent } from "@syncfusion/ej2-vue-dropdowns";

let records = [];
function dataSource() {
    for (let i = 1; i <= 150; i++) {
        let item = {
            id: 'id' + i,
            text: "Item " + i,
        };
        records.push(item);
    }
}
dataSource();

//Component registeration
export default {
    name: "App",
    components: {
        "ejs-multiselect": MultiSelectComponent
    },
    data() {
        return {
            itemData: records,
            fields: { value: 'id', text: 'text' },
            allowFiltering: true,
            allowObjectBinding: true,
            value: [{ id: 'id5', text: 'Item 5' }, { id: 'id7', text: 'Item 7' }, { id: 'id12', text: 'Item 12' }],
        }
    },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";

#wrapper1 {
    min-width: 250px;
    float: left;
    margin-left: 350px;
}

#wrapper2 {
    min-width: 250px;
    float: right;
    margin-right: 100px;
}
</style>