Segment bar tab not working properly In Android


#1

I am using segmented bar for tabs … In both android and ios…When i click the tab 2 the data doesn’t come to that 2nd tab area in android only in ios It is working good … Any solution for this …


#2

Can you share some code, what exactly not working - the change event?


#3

Yeah Sure,

Html Page

///////////////////

<NavigationButton ios:visibility=“collapsed” icon=“res://menu” (tap)=“onDrawerButtonTap()”>

<ActionItem icon=“res://navigation/menu” android:visibility=“collapsed” (tap)=“onDrawerButtonTap()” ios.position=“left”>


<SegmentedBar [items]=“requestedItems” selectedIndex=“0” (selectedIndexChange)=“onSelectedIndexChange($event)” class=“m-5”>

    <GridLayout rows="auto,auto" columns="*,*" class="border" *ngFor="let request of organiserReq;">
     
        <Label class="h3 m-10" textWrap="true" row="0" col="0" colSpan="2">
          <FormattedString>
                  <Span [text]="request.eventName  + '&#x000a;'" class="forEventRequest"></Span>
                  <Span [text]="request.name  + '&#x000a;'" class="size"></Span>
                  <Span fontFamily="FontAwesome" [text]="emailIcon" class="icon-style" ></Span>    
                  <Span [text]="' '+request.email  + '&#x000a;'" class="size"></Span>
                  <Span fontFamily="FontAwesome" [text]="locationIcon" class="icon-style" ></Span>    
                  <Span [text]="' '+request.Location  + '&#x000a;'" class="size"></Span>
                  <Span fontFamily="FontAwesome" [text]="timeStampIcon + ' '" class="icon-style"></Span>
                  <Span [text]="request.timestamp|date:'short'" class="size"></Span>

           </FormattedString>
        </Label>
      <Switch class="foriosalignment" checked="false" (checkedChange)="onFirstChecked($event)" row="0" col="2"></Switch>
    </GridLayout> 

</StackLayout >
<!-- ******************Event Request*************--> 

<StackLayout visibility="{{ pending1 ? 'collapsed' : 'visible' }}">
 
  <GridLayout rows="auto auto" columns="* *" class="border" *ngFor="let request of organiserReq;">

      <Label class="h3 m-10" textWrap="true" row="0" col="0" >
        <FormattedString>
                <Span [text]="request.name  + '&#x000a;'" class="size"></Span>
               <Span [text]="request.email  + '&#x000a;'" class="size"></Span>
         </FormattedString>
        </Label>
  <Switch class="foriosalignment" checked="false" (checkedChange)="onFirstChecked($event)" row="0" col="1"></Switch> 
      <GridLayout rows="auto auto" columns="* *" class="border" *ngFor="let request of organiserReq;">
    
          <Label class="h3 m-10" textWrap="true" row="0" col="0" >
            <FormattedString>
                    <Span [text]="request.name  + '&#x000a;'" class="size"></Span>
                   <Span [text]="request.email  + '&#x000a;'" class="size"></Span>
             </FormattedString>
            </Label>
      <Switch class="foriosalignment" checked="false" (checkedChange)="onFirstChecked($event)" row="0" col="1"></Switch> 
   </GridLayout> 

#4

Ts FIle…
/////////////////

import { Component, OnInit } from ‘@angular/core’;
import { RouterExtensions } from “nativescript-angular/router”;
import { SegmentedBar, SegmentedBarItem } from “ui/segmented-bar”;
import { TabView, SelectedIndexChangedEventData } from “ui/tab-view”;
import { StackLayout } from “ui/layouts/stack-layout”;
import { RadSideDrawer } from “nativescript-ui-sidedrawer”;
import * as app from “application”;
import { Switch } from “ui/switch”;
import { DatePipe } from “@angular/common”;
// import { HttpClientModule } from ‘@angular/common/http’;
@Component({
moduleId: module.id,
selector: ‘app-organiser-request’,
templateUrl: ‘./organiser-request.component.html’,
styleUrls: [’./organiser-request.component.scss’],
providers: [DatePipe]
})
export class OrganiserRequestComponent implements OnInit {

public requestedItems: Array;
public selectedIndex = 0;
public eventrequest = true;
public pending = false;
public acceptORrejected = false;
// public rejected = false;
emailIcon = String.fromCharCode(0xf0e0);
timeStampIcon = String.fromCharCode(0xf017);
locationIcon =String.fromCodePoint(0xf041);

tabTitles = [‘Event Request’, ‘Pending’, ‘Accept/Rejected’];
public firstSwitchState = “OFF”;
public secondSwitchState = “ON”;

/************************ */
organiserReq=[{name:“Venkanna”, email:"tvchowdary@gmil.com",timestamp: “2018-07-27T11:18:22.881Z”,eventName: “BloodDonation”, Location: “Vijayawada”},
{name:“Sumanth”,email:“sumanth@gmil.com”,timestamp: “2018-07-25T11:18:22.881Z”,eventName: “Education”, Location: “Vijayawada”},
{name:“Nagesh”,email:“nagesh@gmil.com”,timestamp: “2018-09-26T11:18:22.881Z”,eventName: “AnimalsResuce”, Location: “Vijayawada”},
{name:“Saraswathi”,email:“s@gmil.com”,timestamp: “2018-06-28T11:18:22.881Z”,eventName: “BloodDonation”, Location: “Vijayawada”},
{name:“Ganga”, email:"ganga@gmil.com",timestamp: “2018-08-29T11:18:22.881Z”,eventName: “AnimalsResuce”, Location: “Vijayawada”}];

constructor(private routerExtensions: RouterExtensions, private datepipe: DatePipe) {

this.requestedItems = [];
for (let i = 0; i < this.tabTitles.length; i++) {
  const item = new SegmentedBarItem();
  item.title = this.tabTitles[i];
  this.requestedItems.push(item);
}

}

ngOnInit() { }

public onFirstChecked(args) {
let firstSwitch = args.object;
if (firstSwitch.checked) {
this.firstSwitchState = “ON”;
} else {
this.firstSwitchState = “OFF”;
}
}

onDrawerButtonTap() {
// console.log("===========================================================");
const sideDrawer = app.getRootView();
sideDrawer.showDrawer();

}

public onSelectedIndexChange(args) {
let segmetedBar = args.object;
this.selectedIndex = segmetedBar.selectedIndex;
switch (this.selectedIndex) {

case 0:
console.log("In event request");
console.log(this.selectedIndex);
  this.eventrequest = true;
  this.pending = false;
  this.acceptORrejected = false;
  // this.reject = false;
  break;

case 1:
console.log("In pendind");
console.log(this.selectedIndex);
  this.eventrequest = false;
  this.pending = true;
  this.acceptORrejected = false;
  // this.rejected = false;
  break;

case 2:
console.log("In Accept/Reject");
  this.eventrequest = false;
  this.pending = false;
  this.acceptORrejected = true;
  // this.rejected = false;
  break;
  default:
  break;

}
}

}


#5

May I know where this pending1 is coming from?