ListView separator line

[Ian]

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

[Ian]

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

[Vlad]

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

 

 

[Ian]

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 

[Vlad]

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

 

 

[Ian]

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

[Vlad]

Hello Ian,

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

Regards,
Vlad
Telerik