Nativescript-ui-feedback: Cannot get RadListView to work "inside" the drawer of a RadSideDrawer

[zurie]

Angular Nativescript + UI Components

Tell us about the problem

I can get a RadListView inside my home component (main page) no problems... But when I try the simplest of lists using a RadListView in the sidebar contents of a RadSideDrawer it hangs and the simulator never refreshes.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

    "nativescript-ui-listview": "^5.1.0",
    "nativescript-ui-sidedrawer": "~5.1.0",

• CLI: 5.1.0
• Cross-platform modules: 5.1.0
• Runtime(s): 5.1.1

Please tell us how to recreate the issue in as much detail as possible.

Create a new nativescript app using the sidebar starter.
Add a RadListView into the home view
Add a RadListView into the sidebar contents

cannot get it to go, the sidebar causes my app to just hang indefinetally and not build, the second i stop using the RadListView in the side drawer and instead use a ListView it works. yet I am able to use a RadListView in the main home component. I have modules installed on both nav.module.ts and home.module.ts so i know the steps I need to make it run, yet it fails to run.

[tsonevn]

Hi @zurie
I tested your case in a sample project, however, was unable to recreate the issue. For your convenience, I am attaching a sample project. In the demo, I am setting up the RadListView inside the SideDrawer menu.

Let me know if I am missing something.
Archive.zip

[zurie]

Thanks @tsonevn I was super excited to open it up and check it out!!! Until I realized that its a stock nativescript project and I am using Angular version of nativescript.

I tried last night to make a simple angular starter with the sidebar and then do the list and it crashed for me. I will try again and look in your code to see if there is anything special but perhaps its an angular problem.. thanks for the try anyway..

edit: i see my question didn't really mention angular so sorry for that confusion.

[zurie]

in fact, I am now noticing that its not limited to RadListView, but also icon font directive... Am I missing something obvious in Angular when using RadSideDrawer? fonticons don't work, yet I can put them anywhere else, they work. RadListView doesn't work.. yet i put it anywhere else, it works.. but inside that RadSideDrawer (using the built in stock angular sidedrawer template from the tns cli) and it just doesn't work... Do i need to tell the SideDrawer something for these custom plugins to work inside of it?? I have the plugins loaded correctly in the corresponding modules ( and they work everywhere else I try to make them work).

for example:

Using:
nativescript-ngx-fonticon │ ^4.2.0 nativescript-ngx-fonticon │ ^4.2.0

[zurie]

As soon as i Add the RadListView back into my RadSideDrawer and hit save I get the logs below

Successfully transferred nav.component.html on device 542d319c06529a4d822268027d1bf96b7ec6a8eb.
Refreshing application on device 542d319c06529a4d822268027d1bf96b7ec6a8eb...
Successfully synced application org.nativescript.NPCMobile on device 542d319c06529a4d822268027d1bf96b7ec6a8eb.
success removing entry for host <private> config 0x28397fa40
TIC TCP Conn Cancel [1:0x280ca1980]
[C1 Hostname#eabc1cce:443 tcp, url hash: 9b1d1d2b, tls] cancel
[C1 Hostname#eabc1cce:443 tcp, url hash: 9b1d1d2b, tls] cancelled
[C1.1 <private> 192.168.1.16:53319<->IPv4#46592119:443]
Connected Path: satisfied (Path is satisfied), interface: en0, ipv4, dns
Duration: 241.142s, DNS @0.000s took 0.050s, TCP @0.051s took 0.025s, TLS took 0.057s
bytes in/out: 7743511/1768, packets in/out: 5471/27, rtt: 0.027s, retransmitted packets: 0, out-of-order packets: 545
0.000s [C1 <private> Hostname#eabc1cce:443 resolver] path:start
0.000s [C1 <private> Hostname#eabc1cce:443 resolver] path:satisfied
0.000s [C1 <private> Hostname#eabc1cce:443 resolver] resolver:start_dns
0.050s [C1 <private> Hostname#eabc1cce:443 resolver] resolver:receive_dns
0.050s [C1.1 <private> 192.168.1.16:53319<->IPv4#46592119:443 channel-flow] path:start
0.050s [C1.1 <private> 192.168.1.16:53319<->IPv4#46592119:443 channel-flow] path:satisfied
0.050s [C1.1 <private> 192.168.1.16:53319<->IPv4#46592119:443 channel-flow] flow:start_nexus
0.050s [C1.1 <private> 192.168.1.16:53319<->IPv4#46592119:443 channel-flow] flow:receive_nexus
0.051s [C1.1 <private> 192.168.1.16:53319<->IPv4#46592119:443 channel-flow] flow:start_connect
0.076s [C1.1 <private> 192.168.1.16:53319<->IPv4#46592119:443 channel-flow] flow:finish_transport
0.076s [C1 <private> Hostname#eabc1cce:443 resolver] flow:finish_transport
0.133s [C1.1 <private> 192.168.1.16:53319<->IPv4#46592119:443 channel-flow] flow:finish_connect
0.133s [C1 <private> Hostname#eabc1cce:443 resolver] flow:finish_connect
0.133s [C1.1 <private> 192.168.1.16:53319<->IPv4#46592119:443 channel-flow] flow:changed_viability
0.133s [C1 <private> Hostname#eabc1cce:443 resolver] flow:changed_viability
241.142s [C1] path:cancel
nw_protocol_tcp_log_summary [C1.1:3]
[<private> <private>:53319<-><private>:443]
Init: 1, Conn_Time: 24.840ms, Syn's: 1, WR_T: 0/0, RD_T: 0/0, TFO: 0/0/0, ECN: 0/0/0, TS: 0
RTT_Cache: kernel, rtt_upd: 16, rtt: 27.343ms, rtt_var: 5.062ms rtt_nc: 27.093ms, rtt_var_nc: 5.000ms
nw_endpoint_flow_protocol_disconnected [C1.1 IPv4#46592119:443 cancelled channel-flow (null)] Output protocol disconnected
nw_connection_report_state_with_handler_locked [C1] reporting state cancelled
nw_protocol_boringssl_get_output_frames(1301) <private>[0x10c374860] get output frames failed, state 8196
nw_protocol_boringssl_get_output_frames(1301) <private>[0x10c374860] get output frames failed, state 8196
TIC TCP Conn Destroyed [1:0x280ca1980]
TIC Read Status [1:0x0]: 1:57
TIC Read Status [1:0x0]: 1:57
NPCMobile[8764] () used 144.00s of CPU over 148.22 seconds (averaging 97%), violating a CPU usage limit of 144.00s over 180 seconds.

[tsonevn]

Hi @zurie,
Can you send us the project, that you are using for testing? If I understand, correctly the issue happens only if you use the functionality provided by nativescript-ngx-fonticon in the RadSideDrawer component. Is that correct?

[zurie]

No. RadListDrawer RadListView inside the drawer. Angular Nativescript.

If we can figure out how to make a RadListView work inside the contents of the drawer, then I can figure out other modules / directives.

I am just saying that its not JUST the RadListView that doesn’t work inside the drawer, but other directives..

I went

TNS CREATE TEST

selected “angular with side drawer”

and made a RadListView in the side drawer.

in angular.

and it doesn’t work..
Angular_RadSideDrawer_RadListView.zip

Steps to reproduce...

1) open the ZIP file included.
2) goto src/app/nav/nav.component.html and uncomment the RADLISTVIEW
run the app.. doesn't work...
recomment the RadListView. starts working...

its setup with a RadListView in the main view (works) and a ListView and RadListView on the RadSideDrawer (sidebar) but uncommenting the RadListView in the sidebar stops the app from working.

make sure to run it in iOS

[zurie]

Any luck? Radlistview in radsidedrawer. Angular iOS? I added a zip file for you above.

[tsonevn]

Hi @zurie,
I was able to recreate the problem with the RadSideDrawer and RadListView component. I will mark the issue as a bug, and we will investigate it further. Meanwhile, I would suggest to set up the width and height to the RadListView. For example:
nav.component.html

<GridLayout>
  <RadListView width="280" height="280" [items]="spice">
    <ng-template tkListItemTemplate let-spice="item">
      <StackLayout>
        <Label [text]="spice"></Label>
      </StackLayout>
    </ng-template>
  </RadListView>
</GridLayout>

[zurie]

Thanks @tsonevn I set the height of the RadListView using CSS height:100%; and then in the html code i wrote width="280" height="auto" and that seemed to let my list go 100% of my view. Odd that it works on android without the height and width, but thanks for narrowing it down for me

[maxim-sermin]

Thanks @tsonevn @zurie you saved my life! I had a slightly different scenario where I wanted to put RadListView into the content of RadSideDrawer and it was just not showing up on iOS. Merely adding height:100%; to the RadListView solved it for me.