Filterable ListView Clears Checkboxs

[Ben]

Hello,

I have a ListView and template defined as follows:

<ul data-role="listview"
id="multiactivity-listview" 
data-bind="source: activityTypeDataSource"
data-template="multiactivity-template"
data-filterable="{field: 'name', operator: 'contains', placeholder: 'Search Activity'}">
</ul>

<script type="text/x-kendo-template" id="multiactivity-template">
  <label>
    <input data-id="${data.id}" type="checkbox" />
    ${data.name}
  </label>
</script>



This works great until the user enters any filter text, and then all the checkboxes get cleared. Is there a recommended approach to solve this? I have tried to data-bind to either the checked binding or doing something within the template using #= # scripts but cannot seem to solve it.

Thanks,

Ben.

[Kiril Nikolov]

Hi Ben,

You can use MVVM bindings in order to preserve the state of the checkboxes inside a Kendo UI Mobile ListView. I have created an example, showing a possible implementation here:

http://jsbin.com/diwuvuqe/1/edit

Regards,
Kiril Nikolov
Telerik

 

 

[Ben]

Thanks Kiril. This works great! I had tried binding before but within the source: data object rather than as an external array plus I hadn't seen the value binding used like that before on a checkbox.

Much better than the cheesy solution I had with checkbox click event handlers and listview data binding event handlers.

[Kiril Nikolov]

Hello Ben,

I am glad to hear that the example helped!

In case you have any further questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik