New to Telerik UI for Blazor? Download free 30-day trial

Carousel - Refresh Data

The most common reason you would use an ObservableCollection is to make a component (like a grid, treeview, treelist, dropdown) change or react when you change that collection.

When you want to refresh the component data source like that, there are two important framework behaviors you need to be aware of - when ObservableCollection instances fire events, and how to refresh the data of a component when it is not an observable collection.

In this article:

Observable Data

Databound components can benefit from live data - when the data source collection changes, the components should update to reflect that change. Most data-bound components in the Telerik UI for Blazor suite implement such functionality.

When the Data of the component is a collection that implements the INotifyCollectionChanged interface (such as ObservableCollection), the Telerik components subscribe to its CollectionChanged event to update. This means that adding items, removing items, or clearing the collection updates the components (its .Add(), .Remove() and .Clear() methods).

The Observable collections fire the CollectionChanged event only when their Add, Remove and Clear methods are called. They do not fire it when you change the value of a field of one of their elements.

Observable data is not supported with manual data operations via the OnRead event.

Bind the Carousel component to an ObservableCollection, so it can react to collection changes.

@* Add/remove an item to see how the Carousel reacts to that change. *@

@using System.Collections.ObjectModel

<TelerikButton OnClick="@AddItem">Add item</TelerikButton>

<TelerikButton OnClick="@RemoveItem">Remove item</TelerikButton>

<TelerikCarousel Data="@CarouselData"
                 Width="400px" Height="200px">
    <Template>
        <div class="item">ID @(context.ID) : @(context.Text)</div>
    </Template>
</TelerikCarousel>

@code {

    void AddItem()
    {
        CarouselData.Add(
            new CarouselModel()
            {
                ID = 4,
                Text = "Text 4"
            });        
    }

    void RemoveItem()
    {
        CarouselData.RemoveAt(CarouselData.Count() - 1);
    }

    public ObservableCollection<CarouselModel> CarouselData = new ObservableCollection<CarouselModel>
    {
        new CarouselModel { ID = 1, Text = "Text 1" },
        new CarouselModel { ID = 2, Text = "Text 2" },
        new CarouselModel { ID = 3, Text = "Text 3" }
    };

    public class CarouselModel
    {
        public int ID { get; set; }
        public string Text { get; set; }
    }
}

<style>
    .item {
        background: #3d57d8;
        color: #fff;
        font: 36px/200px sans-serif;
        text-align: center;
    }
</style>

New Collection Reference

In Blazor, the framework will fire the OnParametersSet event of a child component (which is how child components can react to outside changes) only when it can detect a change in the object it receives through the corresponding parameter (like Data for the data sources of Telerik components). This detection works as follows:

  • For primitive types (such as numbers, strings), this happens when their value changes.

  • For complex types (such as data collections like List, or any IEnumerable, and application-specific models/objects), this happens when the object reference changes.

    Thus, you would usually need to create a new reference for the view-model field (such as TreeViewData = new List<MyTreeViewItem>(theUpdatedDataCollection);) when you want the component to update.

Create new collection reference to refresh the Carousel data.

@* Add/remove an item ot change the data to see how the Carousel reacts to that change. *@

<TelerikButton OnClick="@AddItem">Add item</TelerikButton>

<TelerikButton OnClick="@RemoveItem">Remove item</TelerikButton>

<TelerikButton OnClick="@LoadNew">Load New Items</TelerikButton>

<TelerikCarousel Data="@CarouselData"
                 Width="400px" Height="200px">
    <Template>
        <div class="item">ID @(context.ID) : @(context.Text)</div>
    </Template>
</TelerikCarousel>

@code {

    void AddItem()
    {
        CarouselData.Add(
            new CarouselModel()
            {
                ID = 4,
                Text = "Text 4"
            });

        CarouselData = new List<CarouselModel>(CarouselData);
    }

    void RemoveItem()
    {
        CarouselData.RemoveAt(CarouselData.Count() - 1);

        CarouselData = new List<CarouselModel>(CarouselData);
    }

    void LoadNew()
    {
        CarouselData = new List<CarouselModel>
    {
        new CarouselModel { ID = 4, Text = "New Item 4" },
        new CarouselModel { ID = 5, Text = "New Item 5" },
        new CarouselModel { ID = 6, Text = "New Item 6" }
    };
    }

    public List<CarouselModel> CarouselData = new List<CarouselModel>
{
        new CarouselModel { ID = 1, Text = "Text 1" },
        new CarouselModel { ID = 2, Text = "Text 2" },
        new CarouselModel { ID = 3, Text = "Text 3" }
    };

    public class CarouselModel
    {
        public int ID { get; set; }
        public string Text { get; set; }
    }
}

<style>
    .item {
        background: #3d57d8;
        color: #fff;
        font: 36px/200px sans-serif;
        text-align: center;
    }
</style>

See Also

In this article
Not finding the help you need? Improve this article