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

How do I make RadListView look like ListView

2 Answers 187 Views
ListView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Henrique
Top achievements
Rank 1
Henrique asked on 15 Mar 2017, 09:53 PM

When using ListView, the default list shows items, with a border between the rows, like a classic IOS UITableView. When changing to a RadListView, there's no border. I'm sure this can be achieved, and I'm thinking via CSS, but I tried the border color/width, on the listview and on the item.template, but no success. 

What is the best strategy to make this happen? 

 

Thank you

2 Answers, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 16 Mar 2017, 08:44 AM
Hi,
Thank you for your interest in UI for NativeScript.

This is the default behavior for the RadListView and the item will be shown without a bottom separator.

However, this could be achieved by setting up borderColor and borderBottomWidth for the Layout container in the template. For your help, I am also attaching sample code
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:lv="nativescript-telerik-ui-pro/listview" navigatingTo="navigatingTo" class="page">
 
    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
 
    <GridLayout>
 
        <lv:RadListView items="{{ source }}" >
        <lv:RadListView.listViewLayout>
            <lv:ListViewGridLayout scrollDirection="Vertical" itemHeight="200" spanCount="1"/>
        </lv:RadListView.listViewLayout>
        <lv:RadListView.itemTemplate>
            <GridLayout class="stylelayout">
                <StackLayout >
                    <Label fontSize="20" text="{{ title }}"/>
                </StackLayout>
                 
            </GridLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
    </GridLayout>
</Page>

app.css
.stylelayout{
    border-bottom-width: 1;
    border-color: black;
}

main-page.ts
import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
 
 
export function navigatingTo(args: EventData) {
 
    let page = <Page>args.object;
    var array =[{title:"title1"}, {title:"title2"}, {title:"title3"}]
 
    page.bindingContext = {source:array};
}

Hope this helps

Regards,
nikolay.tsonev
Telerik by Progress
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
Henrique
Top achievements
Rank 1
answered on 17 Mar 2017, 12:17 AM

Thank you!

I'll have to buy you beers at some point! 

Tags
ListView
Asked by
Henrique
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
Henrique
Top achievements
Rank 1
Share this question
or