Telerik UI Nativescript - RadListView ripple effect

Question

I'm using RadListView telerik ui component for NativeScript in may NativeScript Angular 2 application.

When I set the event itemTap and/or itemHold they work very well but without the usual tap effect (ripple) on the list row.

Is there a way to add this effect?

Thanks all in advance :)

You could use nativescript-ripple plugin, which provides this functionality. You could also review the demo in the plugin's repo , where has been shown how to use it in your app - github.com/bradmartin/nativescript-ripple/tree/master/demo. — Nikolay Tsonev
@NikolayTsonev I tried the plugin but it blocks the listview's itemTap event from firing. :( — Androidian

Nikolay Tsonev Nikolay Tsonev · Accepted Answer · 2016-10-28T13:42:12

In my opinion this is something related with the plugin. As a solution you could set tap event to the Ripple component and to get the element id, which will help you to distinguish selected item. I am attaching sample code.

main-page.xml

<Page xmlns:RL="nativescript-ripple" xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
 <GridLayout>
  <ListView items="{{ source }}"  loaded="onLoaded">
      <ListView.itemTemplate>
        <RL:Ripple rippleColor="#d50000" id="{{index}}" tap="onTap2">
            <StackLayout  >
                  <Label text="{{title}}" textWrap="true" />
            </StackLayout>
          </RL:Ripple>
      </ListView.itemTemplate>
  </ListView>

 </GridLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import {StackLayout} from "ui/layouts/stack-layout"

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
  // Get the event sender
  let page = <Page>args.object;
  var array=[];
  for(var i=0;i<100; i++)
  {
    array.push({index:""+i,title:"title "+i});
  }
  page.bindingContext = {"source":array};
}

export function onTap2(args){
  console.log("sample");
  var layouts = args.object;
  var id = layouts.get("id");
  console.log(id);
}

Telerik UI Nativescript - RadListView ripple effect

2 Answers