Nativescript: In ListView , ItemTap event is not working?

Created on 20 Apr 2016  路  10Comments  路  Source: NativeScript/NativeScript

I tried below this example but itemTap event is not working....

<ListView items="{{ menu }}" row="1" itemTap="listViewItemTap" >
      <ListView.itemTemplate>
        <GridLayout columns="auto, *">
    <Image src="{{ imageURL }}" row="0" cssClass="icon"/>
          <StackLayout col="1">
            <Label text="{{ title }}"  cssClass="name"/>
            <Label text="{{ subtitle }}" cssClass="location"/>
          </StackLayout>
        </GridLayout>
      </ListView.itemTemplate> 
</ListView>
question

Most helpful comment

I have the same issue. It has to do with the iTemTap attribute not working for some reason with ListView and a Layout. iTemTap works when there is no Layout Tag but stops functioning once a layout is added. Please see code below:
LoadedPages.js

function loadMyData (postLink){
    http.getJSON(postLink).then(function(response){
        console.log("GOT DATA");        
        viewModel.set("pageData", response);
        page.bindingContext = viewModel;
    },function(error){
        console.log("Got error");
        console.log("The error is: "+error);
    });
}

exports.loaded = function (args) {
    page = args.object;
    drawer = page.getViewById("drawer");
    loadMyData("http://localhost/homedirctory/abuapp/wp-json/wp/v2/posts?_embed");
};
exports.toggleDrawer = function (){
    drawer.toggleDrawerState();
}
exports.onTap = function (args){
    console.log("To the Blog Page");
    var myview = args.view;
    var navigationEntry = {
        moduleName: "BlogPages/blogPage",
        context: { info: myview.bindingContext}
    }
    frameModule.topmost().navigate(navigationEntry);
}
var itemLoading = function (args) {
    var cell = args.ios;
    if (cell) {
        cell.selectionStyle = UITableViewCellSelectionStyle.UITableViewCellSelectStyleNone;
    }
};
exports.itemLoading = itemLoading;
exports.navigate = function(args) {
  var pageName = args.view.text;
  if(pageName == "Home"){pageLink="main-page";};
  if(pageName == "About"){pageLink="main-page";};
  if(pageName == "Settings"){pageLink="register/register";};
  topmost().navigate(pageLink);
};

LoadedPages.xml


    <drawer:RadSideDrawer.mainContent>
      <StackLayout orientation="vertical">
        <ListView items="{{ pageData }}" row="1" id="pageData" itemTap="onTap"  itemLoading="itemLoading">
            <ListView.itemTemplate>
              <GridLayout columns="*,5*" rows="auto,auto" >
                <StackLayout col="0">
                  <Image src="res://icon"  width="50" height="50" />
                </StackLayout>
                <StackLayout col="1">
                  <Label text="{{ title.rendered }}" textWrap="true" class="h2"/>
                  <HtmlView html="{{ excerpt.rendered }}" textWrap="true" />
                </StackLayout>
              </GridLayout>
              </ListView.itemTemplate>
              </ListView>
      </StackLayout>
    </drawer:RadSideDrawer.mainContent>


    <drawer:RadSideDrawer.drawerContent>
      <GridLayout class="drawer-content">
        <StackLayout>
          <Label text="Home" tap="navigate"/>
          <Label text="About" tap="navigate"/>
          <Label text="Settings" tap="navigate"/>
        </StackLayout>
      </GridLayout>
    </drawer:RadSideDrawer.drawerContent>

  </drawer:RadSideDrawer>

All 10 comments

Hello @katturajam

Your xml looks right - Can you please provide your code-behind in order to help you out with your issue..

In order itemTap to work you should export you listViewItemTap function.
For example :

function listViewItemTap(args) {
    frameModule.topmost().navigate({
        moduleName: "you-item-details-page",
        context: args.view.bindingContext  //  pass your tapped item context to details-page
    });
}

exports.listViewItemTap = listViewItemTap;

@NickIliev
I have added above mentioned export function listViewItemTap before posting issue here.

Hey @katturajam

Based on your xml code I can't provide good instruction - please add more information about your code-behind page , platform and also about the behaviour you are getting when your are tapping on list item.

You may want to try this to see if the itemTap function is triggered

function listViewItemTap(args) {
   console.log("Item tapped");
}

@NickIliev
I have done above mentioned as that i found it is not working.

@katturajam

Have you resolved your issue based on the solution in stackoverflow!?
If you need more help please post more of your code

@NickIliev: Thanks.
Stackoverflow sample is working.
One thing i want to remember, I have integrated pulltorefresh plugin in our project so that i want to check why it was not working?.

Ok @katturajam - let me know if you need assistance for the new tasl.

I have the same issue. It has to do with the iTemTap attribute not working for some reason with ListView and a Layout. iTemTap works when there is no Layout Tag but stops functioning once a layout is added. Please see code below:
LoadedPages.js

function loadMyData (postLink){
    http.getJSON(postLink).then(function(response){
        console.log("GOT DATA");        
        viewModel.set("pageData", response);
        page.bindingContext = viewModel;
    },function(error){
        console.log("Got error");
        console.log("The error is: "+error);
    });
}

exports.loaded = function (args) {
    page = args.object;
    drawer = page.getViewById("drawer");
    loadMyData("http://localhost/homedirctory/abuapp/wp-json/wp/v2/posts?_embed");
};
exports.toggleDrawer = function (){
    drawer.toggleDrawerState();
}
exports.onTap = function (args){
    console.log("To the Blog Page");
    var myview = args.view;
    var navigationEntry = {
        moduleName: "BlogPages/blogPage",
        context: { info: myview.bindingContext}
    }
    frameModule.topmost().navigate(navigationEntry);
}
var itemLoading = function (args) {
    var cell = args.ios;
    if (cell) {
        cell.selectionStyle = UITableViewCellSelectionStyle.UITableViewCellSelectStyleNone;
    }
};
exports.itemLoading = itemLoading;
exports.navigate = function(args) {
  var pageName = args.view.text;
  if(pageName == "Home"){pageLink="main-page";};
  if(pageName == "About"){pageLink="main-page";};
  if(pageName == "Settings"){pageLink="register/register";};
  topmost().navigate(pageLink);
};

LoadedPages.xml


    <drawer:RadSideDrawer.mainContent>
      <StackLayout orientation="vertical">
        <ListView items="{{ pageData }}" row="1" id="pageData" itemTap="onTap"  itemLoading="itemLoading">
            <ListView.itemTemplate>
              <GridLayout columns="*,5*" rows="auto,auto" >
                <StackLayout col="0">
                  <Image src="res://icon"  width="50" height="50" />
                </StackLayout>
                <StackLayout col="1">
                  <Label text="{{ title.rendered }}" textWrap="true" class="h2"/>
                  <HtmlView html="{{ excerpt.rendered }}" textWrap="true" />
                </StackLayout>
              </GridLayout>
              </ListView.itemTemplate>
              </ListView>
      </StackLayout>
    </drawer:RadSideDrawer.mainContent>


    <drawer:RadSideDrawer.drawerContent>
      <GridLayout class="drawer-content">
        <StackLayout>
          <Label text="Home" tap="navigate"/>
          <Label text="About" tap="navigate"/>
          <Label text="Settings" tap="navigate"/>
        </StackLayout>
      </GridLayout>
    </drawer:RadSideDrawer.drawerContent>

  </drawer:RadSideDrawer>

I have the same problem than @inuwas. I want to use a layout within an item but the itemTap event doesn't work when I do that. We should open this issue.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pocesar picture pocesar  路  3Comments

OscarLopezArnaiz picture OscarLopezArnaiz  路  3Comments

Pourya8366 picture Pourya8366  路  3Comments

guillaume-roy picture guillaume-roy  路  3Comments

nirsalon picture nirsalon  路  3Comments