Change the "No data" message RadListView

[Milenny]

How to change the "No Data" message that is displayed by default when there are no items to display in the RadListView?

[Lance | Manager Technical Support]

Hi Milenny,

You can find this informaiton in the RadListView Documentation under the Features section. Specifically, there is an article dedictaed to the empty content message here: Empty Content.

I hope this information was helpful. If you have any further questions, please let me know.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[kiran]

Thanks for information. its help me :)

[Louis]

Hi Lance,

I had a look at the Empty Content article and the properties it mentions in there are not visible in the RadListView control in XAML. There are also no examples of how this could be used in the article which would have been useful.

If I go to the RadListView definition in metadata and search for "empty" I get no hits. Has this been removed?

Thanks,
Louis

[Yana]

Hello Louis,

The functionality discussed in this thread is for RadListView for Univeral Windows Platform.  EmptyContent is not available for our ListView for Xamarin control, we actually have it as a feature request, you can cast your vote and follow its status at the link below:

ListView - Forms, EmptyTemplate

As a workaround, you can subscribe to the CollectionChanged event of the ListView ItemsSource and show/hide content over the ListView in case there are no records.

Let me know if I can help with anything else.

Regards,
Yana
Progress Telerik

[Louis]

Thanks for your reply Yana,

My mistake, I didn't notice this thread was in the UWP section.

The RadListView in Forms does display the "no data" text on UWP when the source is empty, if the empty template feature is not written for Forms then why am I seeing "no data"? It seems like it's been half implemented. Your workaround will have to include hiding the list view when it's empty.

[Yana]

Hello Louis,

I see where the confusion comes from.  This happens due to the fact that our Xamarin.Forms RadListView control wraps native ListView implementations and on UWP it wraps our RadListView for UWP, respectively.  This caused some differences across platforms, such as in this case.  

So, although the "No Data" message can be seen on UWP, it is not available on Android and iOS, that's why it is still a missing feature for RadListView for Xamarin.

With the workaround I suggested earlier, you can place additional content (Label, for example) on top of the ListView and show/hide only the label, there's no need to hide the whole ListView.

Regards,
Yana
Progress Telerik

[Lance | Manager Technical Support]

Hi Louis,

Based on what you mentioned to Yana, I think it is beneficial if I pop in here and build a demo with you that shows how just easy and lightweight the solution is. 

Concept

Is summary, subscribe to the CollectionChanged event of the ObservableCollection and update a bool:

// If the items source is
public ObservableCollection<Person> People { get; set; }

// add a bool to hold a value if the list is empty or not
public bool IsListEmpty
{
    get => isListEmpty;
    set => SetProperty(ref isListEmpty, value);
}

// use collectionChanged to update IsListEmpty
private void People_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
   IsListEmpty = !People.Any();
}

In the view, this is all you need:

<ContentPage>
    <Grid>
        <!-- This is your 'no items' content area. -->
        <StackLayout IsVisible="{Binding IsListEmpty}"
                     VerticalOptions="Center"
                     HorizontalOptions="Center"
                     Grid.Row="0">
            <Label Text="🚫😲"
                   FontAttributes="Bold"
                   FontSize="Header"
                   HorizontalOptions="Center" />
            <Label Text="No Items"
                   FontSize="Large"
                   HorizontalOptions="Center" />
        </StackLayout>

        <telerikDataControls:RadListView ItemsSource="{Binding People}"
                                         BackgroundColor="Transparent">
                ...
        </telerikDataControls:RadListView>
</ContentPage>

Complete Runnable Demo

To help you get to a nice user experience that has both a "no items" element and a "busy spinner", I've built you a complete example (find it attached).

Here's a screenshot at runtime (there is also a busy animation in between the changes):

Further Assistance

If you have any further trouble, open a new Support Ticket here and attach the code you're using (XAML, view model, etc). This will allows us to directly get to the issue and provide you with an immediately applicable solution.

Support Tickets carry a guaranteed response time and are private. We try our best to get to the public forum threads in a timely manner, but that can sometimes take a few days depending on the current Support Tickets  workload (i.e. support tickets take priority over everything else).

Regards,
Lance | Manager - Technical Support
Progress Telerik