Nativescript-ui-feedback: [RadListView] capability to show custom message when items are empty with pullToRefresh

[Liooo]

Did you verify this is a real problem by searching the NativeScript Forum?

_Yes_

Tell us about the problem

I want to do both of the following at the same time using RadListView, which should be quite basic:

• show a custom message when the items are empty
• pullToRefresh to fetch the latest data no matter what the current items count is (empty or not)

is this achievable with current RadListView implementation?

Which platform(s) does your issue occur on?

_Both_

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

• Progress NativeScript UI version: 3.4.1
• Cross-platform modules: 4.3.0-2018-08-02-06
• Runtime(s): ios: 4.1.0 android: 4.1.3

[tsonevn]

HI @Liooo,
About your first question, you can use a GridLayout with a Label and RadListView. When there are no items in the ListView, the Label can be displayed. After the component is populated with items, you can hide the Label. For example:

<GridLayout orientation="vertical" rows="auto, *">
     <!-- >> listview-pull-to-refresh-xml -->

        <lv:RadListView items="{{ dataItems }}" pullToRefresh="true" row="1" pullToRefreshInitiated="{{onPullToRefreshInitiated}}">
     <!-- << listview-pull-to-refresh-xml -->
            <lv:RadListView.itemTemplate>
              <StackLayout orientation="vertical" padding="5 10 5 10"  style="background-color: #7fff7f;">
                <StackLayout orientation="horizontal" padding="10" style="background-color: #65a565;">
                    <Image src="{{ image + '.jpg'}}" stretch="aspectFit" height="100" width="100"/>
                   <StackLayout orientation="vertical" marginLeft="15">
                    <Label fontSize="20" text="{{ name }}" marginBottom="8"/>
                    <Label fontSize="14" text="{{ title }}" style="font-weight: bold;" textWrap="true"/>
                    <Label fontSize="12" text="{{ text }}" color="White" textWrap="true"/>
                </StackLayout>
                </StackLayout>
                </StackLayout>
            </lv:RadListView.itemTemplate>
            <lv:RadListView.pullToRefreshStyle>
                <lv:PullToRefreshStyle indicatorColor="red" indicatorBackgroundColor="blue"/>
            </lv:RadListView.pullToRefreshStyle>
        </lv:RadListView>
        <Label visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}" text="{{'No Date'+isItemVisible}}" row="0" textWrap="true" />
    </GridLayout>

Regarding the second question. I tested the scenario, where the Empty ListView is used, and the pull to refresh functionality is set up, with our sample project. It seems that the pull to refresh will work as expected and will populate the component with items event if it is empty on the initial time.

[Liooo]

@tsonevn
Thanks for the answer

About your first question, you can use a GridLayout with a Label and RadListView

I've tried this but pull to refresh won't work this way when there's no item because RadListView itself is hidden. I've also tried using RadListView's header and footer but wasn't able to accomplish what's written above.

It seems that the pull to refresh will work as expected and will populate the component with items event if it is empty on the initial time.

Yes, I've confirmed this behavior as well.

[fpaaske]

@Liooo I know it's late, and you probably have found a solution, but in case someone else is looking for one, I used the tkListViewFooter to achieve this:

<RadListView>
    ...
    <ng-template tkListViewFooter>️️️
        <StackLayout>
            <Label *ngIf="listData.length === 0" text="🤷‍♀️"></Label>
        </StackLayout>
    </ng-template>
</RadListView>

[jscti]

@Liooo I know it's late, and you probably have found a solution, but in case someone else is looking for one, I used the tkListViewFooter to achieve this:

<RadListView>
  ...
  <ng-template tkListViewFooter>️️️
      <StackLayout>
          <Label *ngIf="listData.length === 0" text="🤷‍♀️"></Label>
      </StackLayout>
  </ng-template>
</RadListView>

Nop it doesn't work. Fun fact : it worked only with tkListViewHeader -_-