<div class="filterField">
    <label for="filterTags">Tags</label><br/>
    <div class="filterFieldBody">
        <input id="filterTags"/>
    </div>
</div>
 
$( document ).ready( function ()
{
$( "#filterTags" ).kendoMultiSelect( {
    placeholder: "Select Tag(s)",
    autoClose: false,
    dataTextField: "text",
    dataValueField: "value",
    autoBind: false,
    dataSource: [
        { text: 'Summery Love Campaign', value: '1' },
        { text: 'Melbourne Cup', value: '2' },
        { text: '2018 Formals', value: '3' },
        { text: '2018 Schoolies Dance Club', value: '4' },
        { text: '2018 Schoolies Beach Fun', value: '5' },
        { text: 'Bridesmaids', value: '6' },
        { text: 'Wedding', value: '7' }
    ],
    //value: [], without value set to an empty array kendo ui assumes value:[''] but with an array count of 0
    // which causes all kinds of issues most especially when deleting
    change: function ( e )
    {
      tagIds = this.value();
      alert(JSON.stringify(tagIds));
    }
} );

} );