how to clear the radlistview item gray line ?

[License]

Hi,

 I use the radlistview to show some selectors，android is show correct ,but ios bring some gray line in the item,how can i clear the gray line ?

the ui as attach file .

Thanks a lot .

[License]

follow my code 

my html

<GridLayout>
                <RadListView [items]="dataItems" row="0" (itemTap)="onItemTap($event)" class="selector-list-group">
                    <template tkListItemTemplate let-item="item" class="m-t-20">
                        <GridLayout class="">
                            <Label [class]="item.isSelected ? 'h4 list-selected':'h4 list-normal'" text="{{item.name}}"></Label>
                        </GridLayout>
                    </template>
                    <ListViewGridLayout tkListViewLayout  spanCount="5"></ListViewGridLayout>
                </RadListView>
            </GridLayout>

 

my css 

 

.selector-list-group {
    .selector-list-group-item {
        text-align: center;
        vertical-align: middle;
        padding: 5;
        font-size: 14;
    }
}

.list-normal {
    color: $btn-color;
    background-color: transparent;
    border-color: $btn-color;
    border-width: 1;
    border-radius: 10;
    padding: 3 1;
    text-align: center;
    margin: 0 3;
}

.list-selected {
    color: $white;
    background-color: $btn-color;
    border-color: $btn-color;
    border-width: 1;
    border-radius: 10;
    text-align: center;
    padding: 3 1;
    margin: 0 3;
}

[Nikolay Tsonev]

Hi License,

Thank you for reporting your problem and for the given code.

I try to recreate your problem, I was unable to reproduce this while using the code sample. For your I am attaching the sample project, where I test the given scenario. that you could verify, whether you have set in your CSS file border-width and border-color for the GridLayout
Let me know whether this helps. If you still experience problems please give me some more info about the problem or sample project, be debugged locally. Thus I will do my best to provide to-the-point fix.
app.component.html

<GridLayout>
                <RadListView [items]="dataItems" row="0"  class="selector-list-group">
                    <template tkListItemTemplate let-item="item" class="m-t-20">
                        <GridLayout class="gridLayoutStyle">
                            <Label [class]="item.isSelected ? 'h4 list-selected':'h4 list-normal'" [text]="item.name"></Label>
                        </GridLayout>
                    </template>
                    <ListViewGridLayout tkListViewLayout  spanCount="5"></ListViewGridLayout>
                </RadListView>
</GridLayout>

app.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public dataItems:Array<any>;

    constructor(){
        this.dataItems=[];
        this.dataItems.push({
            name:"Name1",
            isSelected:true
        });
        this.dataItems.push({
            name:"Name2",
            isSelected:true
        });
        this.dataItems.push({
            name:"Name3",
            isSelected:true
        })
    }
}

app.css

.selector-list-group-item {

        text-align: center;

        vertical-align: middle;

        padding: 5;

        font-size: 14;

}

 

  

.list-normal {

    color: red;

    background-color: transparent;

    border-color: green;

    border-width: 1;

    border-radius: 10;

    padding: 3 1;

    text-align: center;

    margin: 0 3;

}

  

.list-selected {

    color: white;

    background-color: green;

    border-color: blue;

    border-width: 1;

    border-radius: 10;

    text-align: center;

    padding: 3 1;

    margin: 0 3;

}


Thank you in advance for your cooperation.

Regards,
nikolay.tsonev
Telerik by Progress

[License]

Hi nikolay.tsonev,

     According to your method I set up the border-width & border-color , the gray line still is showing , as attach file look like.

and i set up a sample with the related code on github here ,but when the load app.componet.html has an error

file:///app/tns_modules/@angular/compiler/bundles/compiler.umd.js:16951:103: JS ERROR Error: Could not compile 'TKListViewItemDirective' because it is not a component.

 

please help me check it.

thanks a lot ~

[Nikolay Tsonev]

Hi,
The error has been caused due to that you have `LISTVIEW_DIRECTIVES` in bootstrap  instead of `declarations`. Your main.ts file should look like this:

import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { LISTVIEW_DIRECTIVES } from 'nativescript-telerik-ui/listview/angular';

@NgModule({
    declarations: [AppComponent, LISTVIEW_DIRECTIVES],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
})
class AppComponentModule {}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

This should resolve the problem with app build. About the second problem, I am still unable to recreate the problem with right gray border. It could be something related  plugin,  there are some missing resources. If you still experience problems please send me the missing CSS files, or update the project in your repo, which will allow  further your application.

Hope this helps.
Regards,
nikolay.tsonev
Telerik by Progress