Getting the selected items count in a kendoMultiSelect footerTemplate

Question

Is it possible to get the selected items count in the kendoMultiSelect's footerTemplate?

I created a DOJO example with an attemp to use instance.dataItems().length but for some reason, the value is always 0.

$("#customers").kendoMultiSelect({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  footerTemplate: '#: instance.dataItems().length # item(s) selected'
});

Answer 1

EDIT:

due @Aleksandar comment where he points out

Calling setOptions in an event handler or the respective widget is not recommended and can cause an endless loop or a JavaScript error.

I take his suggestion into account and add his solution as an answer.

footerTemplate: '<span id="total">#:instance.value().length#</span> item(s) selected',
change:function(e){
  var itmsSelected = e.sender.value().length;
  $("#total").html(itmsSelected);
}

OBSOLETE:

Guess it's not in an observable object. One of the possible solutions is to change footerTemplate

every time a change happens on multiSelect:

var multi = $("#customers").kendoMultiSelect({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  change: function() {
    this.setOptions({"footerTemplate": this.value().length +" item(s) selected"});
  },
  dataTextField: "name",
  dataValueField: "id",
  footerTemplate: '0 item(s) selected'
}).getKendoMultiSelect();

Example: Footer template update