Styling listview items

7 posts, 1 answers
  1. steve
    steve avatar
    7 posts
    Member since:
    Oct 2014

    Posted 13 Nov 2014 Link to this post

    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

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 17 Nov 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. steve
    steve avatar
    7 posts
    Member since:
    Oct 2014

    Posted 17 Nov 2014 in reply to Kiril Nikolov Link to this post

    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
  5. steve
    steve avatar
    7 posts
    Member since:
    Oct 2014

    Posted 18 Nov 2014 in reply to steve Link to this post

    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

     

  6. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. steve
    steve avatar
    7 posts
    Member since:
    Oct 2014

    Posted 19 Nov 2014 in reply to Kiril Nikolov Link to this post

    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.
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 20 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready