ListView separator line

7 posts, 2 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 12 Mar 2015 Link to this post

    Hi,
    In a previous Insiders forum post I asked if it was possible to change or remove the thin separator line that appears below each item in a ListView. You suggested I could use the following for an iOS device:

    if (listView.ios) {
        listView.ios.separatorStyle = UITableViewCellSeparatorStyle.UITableViewCellSeparatorStyleNone;
    }

    I used that approach successfully in the NS 0.42 release by adding the suggested code in the Loaded event for the ListView as follows:

    XML
    <ListView loaded="listViewLoaded">

    Event handler
    function listViewLoaded(args) {
        var listView = args.object;    
        if (listView.ios) {
            listView.ios.separatorStyle = UITableViewCellSeparatorStyle.UITableViewCellSeparatorStyleNone;
        }
    }
    exports.listViewLoaded = listViewLoaded;

    In the 0.9 beta release this same approach appears to corrupt certain items in the ListView Always the first item and, if you've got more than 12 items, either the 11th or 12th as well. Strange.

    My question: Should the code that changes the separator line be placed somewhere other than the loaded event for the ListView?

    Regards, Ian
  2. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 13 Mar 2015 Link to this post

    Hi,
    As a postscript to my original post above, I tried adding identical code to the NS Master-Detail demo app and I noticed a similar corruption of items in the ListView. Instead of displaying 20 items (Item 0 through 19), only ten were displayed (Item 8 to 17).

    I guess changing the separator line properties in the ListView loaded event isn't the correct place to do it or there's a bug somewhere?

    Best regards, Ian
  3. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 17 Mar 2015 Link to this post

    Hello Ian,

    I've tried your code and everything worked as expected on my end (screenshot attached). What is your iOS version? In the next release  you will be able to specify separatorColor="white" to achieve your goal without special code for loaded event.

    Regards,
    Vlad
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  4. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 17 Mar 2015 Link to this post

    Hi Vlad,
    I'm running iOS 8.1.2 (12B440). I checked again and if I comment out the lines shown in bold below in the ListView Loaded event, the Master-Detail app works fine and I get all twenty items listed as in your screenshot.

    function listViewLoaded(args) {
        var listView = args.object;    
        if (listView.ios) {
            listView.ios.separatorStyle = UITableViewCellSeparatorStyle.UITableViewCellSeparatorStyleNone;
        }

    }
    exports.listViewLoaded = listViewLoaded;

    As soon as I uncomment those lines, I only get items 8 - 17 listed. See my attached screenshot.

    As you're providing a NS method to change the separator color I'm happy to wait for that. Instead of being able to specify the colour of the separator line, however, will you be able to specify separatorColor="none" to indicate that you don't want a line at all. I've implemented 'striping' for ListView items in my application and being able to remove the separator line completely would ensure the 'stripes' are always the same height.

    Best regards, Ian 
  5. Answer
    Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 17 Mar 2015 Link to this post

    Hi Ian,

    I've just added support for transparent color. You will be able to specify it like this:

     <ListView items="{{ items }}" itemTap="listViewItemTap" row="1" separatorColor="transparent">
          <ListView.itemTemplate>
            <Label text="{{ title }}" cssClass="listItem" />
          </ListView.itemTemplate>
        </ListView>

    Regards,
    Vlad
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 17 Mar 2015 in reply to Vlad Link to this post

    Hi Vlad,
    Thanks - that sounds like it could work.

    Just to confirm, if separatorColor="transparent", will the background-color of the ListView item show through or will it be the background-color of the page that will be seen?

    Best regards, Ian
  7. Answer
    Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 23 Mar 2015 Link to this post

    Hello Ian,

    Indeed this will be the background of the ListView (we will set separatorColor property of UITableView in iOS).

    Regards,
    Vlad
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top