How do I make RadListView look like ListView

Thread is closed for posting
3 posts, 0 answers
  1. Henrique
    Henrique avatar
    12 posts
    Member since:
    Mar 2017

    Posted 15 Mar 2017 Link to this post

    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. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 16 Mar 2017 Link to this post

    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.
  3. Henrique
    Henrique avatar
    12 posts
    Member since:
    Mar 2017

    Posted 16 Mar 2017 in reply to Nikolay Tsonev Link to this post

    Thank you!

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

Back to Top