Styling listview items

[steve]

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

[Kiril Nikolov]

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

 

 

[steve]

Hi Kiril

Thanks for your response. I had not seen that demo - it's useful, but still the ticks are not persistent. I'm sure I can apply the ticks manually, but I'm still after a cleaner solution.

Is there any hope of getting style-binding working for each listview item?

Alternatively, can the ticks be bound to something in the view model? I've seen things along this line, but haven't been able to get anything working. 

Regards, 
Steve

[steve]

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

 

[Kiril Nikolov]

Hello Steve,

Please check the following example that I created which still keeps the check-boxes after filtering and another view navigation and let me know if it helps:

http://dojo.telerik.com/etiHe

Regards,
Kiril Nikolov
Telerik

 

 

[steve]

Hi Kiril

this is exactly what I was after. I had somehow missed the extremely useful source-binding concept - perhaps it should be mentioned in the Framework and Utilities/Templates documentation section. Now even the style-binding works using this.

As a side note, I could not get the click event working on the checkbox as you outlined (would it be fired when clicking on the label?), but it worked fine when attached to the main listview element. I don't actually need it anymore, now that the data is updated with the ticks.

Thanks for your help on this, it's greatly appreciated.
Regards,
Steve.

[Kiril Nikolov]

Hi Steve,

I am happy to hear that the problem is resolved now.

As for the source binding - it is explained here:

http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/source

Regards,
Kiril Nikolov
Telerik