No Checked Item in MultiSelect

The MultiSelect control requires a data member to determine whether items are selected. If one is not provided, the control adds a '$checked' property to the data items.

You can prevent this by creating a dedicated itemsSource that contains objects with two properties: the original item and the checked member.

Example: Creates a MultiSelect control with the original item and the checked member:

HTML

<div id="theMultiSelect"></div>

Checked Items:
<p id="checkedItems"></p>

Javascript

import * as input from '@grapecity/wijmo.input';
import { getData } from './data';

function init() {
    var theMultiSelect = new input.MultiSelect('#theMultiSelect', {
        placeholder: 'Devices',
        displayMemberPath: 'item.name',
        checkedMemberPath: 'checked',
        itemsSource: getCheckableData(),
        checkedItemsChanged: (sender) => {
            let checkedItems = sender.checkedItems.map(checkableItem => checkableItem.item);
            document.querySelector('#checkedItems').textContent = checkedItems.length ? JSON.stringify(checkedItems) : '';
        }
    });

    // create a data source with items and an extra checkable member
    function getCheckableData() {
        return getData().map(item => ({ item: item, checked: false }));
    }
}