Styling listview items in Kendo UI for jQuery

This is a migrated thread and some comments may be shown as answers.

Styling listview items

6 Answers 48 Views

This is a migrated thread and some comments may be shown as answers.

steve asked on 14 Nov 2014, 05:53 AM

Hi,
Using (trialling) Kendo UI v2014.2.1008

I'm wondering about how to implement a multi-select listview. I understand the web component has this capability, but it seems unsuitable when I read the listed caveats (no view transitions etc).

I was trying to use an template with a style binding together with the click event, so that when an item is clicked the row color/icon can be changed. I've tried variations of the following:

<div data-bind="style: {color: selectAnimalsViewModel.rowColor}">#= text #</div>

where rowColor is simply a variable like this (for now - later to be a function): rowColor: '#0000ff'
Nothing I do with the style binding seems able to affect the listview item style though.

I've seen other posts where something like this was suggested:

e.item.find('.km-icon').removeClass('km-trash').addClass('km-add');

- this works, but it's not persistent, such then when I return to the page from elsewhere, the icon/style has reverted to the original one. I realize I can set this up manually when navigating to the page, but I was hoping for a more 'automatic' method.

Is what I'm trying possible? Is there a better method? You advice is greatly appreciated, thanks.

Additional info: the listview is being initialized in the view's init() method. Apologies for not having a more complete example.

Regards,
Steve

6 Answers, 1 is accepted

answered on 17 Nov 2014, 09:25 AM

Hi Steve,

Currently the Kendo UI Mobile ListView does not support selection, so it is normal for the styles not to be persisted when the views are changed or the listview is refreshed. I am afraid that we do not have an example that shows the functionality that you are looking for just because is not supported.

You can also take a look at the following example that uses checkboxes for multi-row selection:

http://demos.telerik.com/kendo-ui/mobile-forms/checkboxes

It might be helpful.

Regards,
Kiril Nikolov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 19 Nov 2014, 12:12 AM

Hi again

following the listview/checkbox demo you referred to, I've tried binding the listview item checkboxes as shown
in Binding a list of checkboxes to array.

This is the template:

<script id="myTemplate" type="text/x-kendo-template">

<label><input type="checkbox" value="#:uniqueId#" data-bind="checked:isSelected"/>#:text#</label>

</script>

with isSelected being an array in the view-model.

This works - the isSelected array is modified correctly as listview items are checked & unchecked, and if I pre-populate the isSelected array, the correct listview item is checked when first navigating to the view.

However, it does not work when:
1) The listview's data source is filtered - the isSelected array seems to be not used at all, either initially, or when items are checked/unchecked.
2) I navigate away from the listview page, then return to it - the isSelected array is still correctly storing the relevant uniqueId values, but no listview items are ticked. Checking/unchecking listview items no longer modifies the isSelected array.

Is there anything that can be done about these 2 issues, so that the listview always honors the isSelected array?

Regards,
Steve

Accepted