Skip to content

Latest commit

 

History

History
226 lines (168 loc) · 6.57 KB

refresh-data.md

File metadata and controls

226 lines (168 loc) · 6.57 KB
title page_title description slug tags published position
Refresh Data
Autocomplete Refresh Data
Refresh Autocomplete Data using Observable Data or creating a new Collection reference.
autocomplete-refresh-data
telerik,blazor,autocomplete,observable,data,new,collection
true
30

Autocomplete - Refresh Data

@template

In this article:

Rebind Method

To refresh the AutoComplete data when using [OnRead]({%slug autocomplete-events%}#onread), call the Rebind method of the TelerikAutoComplete reference. This will fire the OnRead event and execute the business logic in the handler.

@* Clicking on the Rebind button will delete the first item from the datasource and refresh the data in the UI *@

@using Telerik.DataSource.Extensions

<TelerikButton OnClick="@RebindAutoComplete">Rebind the AutoComplete</TelerikButton>

<TelerikAutoComplete TItem="@String"
                     @ref="@AutoCompleteRef"
                     OnRead="@ReadItems"
                     @bind-Value="@SelectedValue">
</TelerikAutoComplete>

@code{
    private TelerikAutoComplete<string> AutoCompleteRef { get; set; }

    private void RebindAutoComplete()
    {
        if (Options.Count > 0)
        {
            Options.RemoveAt(0);
        }

        AutoCompleteRef.Rebind();
    }

    public string SelectedValue { get; set; }
    List<string> Options { get; set; } = new List<string>();

    async Task ReadItems(AutoCompleteReadEventArgs args)
    {
        await Task.Delay(1000);
        args.Data = Options.ToDataSourceResult(args.Request).Data;
    }

    protected override async Task OnInitializedAsync()
    {
        Options = new List<string>() { "one", "two", "three" };
    }
}

@template

Observable Data

@template

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

@* Add/remove a suggestion to see how the Autocomplete reacts to the change. *@

@using System.Collections.ObjectModel

<h4>Add suggestion</h4>
<TelerikTextBox @bind-Value="@ValuetoAdd"></TelerikTextBox>

<TelerikButton OnClick="@AddSuggestion">Add suggestion</TelerikButton>
<br />

<h4>Remove the last suggestion</h4>
<TelerikButton OnClick="@RemoveSuggestion">Remove the last suggestion</TelerikButton>
<br />

<h4>Autocomplete suggestions: @Suggestions.Count</h4>
<br />

<TelerikAutoComplete Data="@Suggestions" ValueField="@( nameof(SuggestionsModel.Suggestion) )" @bind-Value="@TheValue" />

@code{
    string TheValue { get; set; }

    string ValuetoAdd { get; set; }

    void AddSuggestion()
    {
        if (!string.IsNullOrWhiteSpace(ValuetoAdd))
        {
            Suggestions.Add(
        new SuggestionsModel { Suggestion = ValuetoAdd, SomeOtherField = Suggestions.Count + 1 }
        );
            ValuetoAdd = string.Empty;
        }
    }

    void RemoveSuggestion()
    {
        if (Suggestions.Count > 0)
        {
        Suggestions.RemoveAt(Suggestions.Count - 1);
        }
    }

    ObservableCollection<SuggestionsModel> Suggestions { get; set; } = new ObservableCollection<SuggestionsModel>
    {
        new SuggestionsModel { Suggestion = "first", SomeOtherField = 1 },
        new SuggestionsModel { Suggestion = "second", SomeOtherField = 2 },
        new SuggestionsModel { Suggestion = "third", SomeOtherField = 3 }
    };

    public class SuggestionsModel
    {
        public string Suggestion { get; set; }//the auto complete needs only the string field
        public int SomeOtherField { get; set; }
    }
}

@template

New Collection Reference

@template

caption Create new collection reference to refresh the Autocomplete data.

@* Add/remove a suggestion to see how the Autocomplete reacts to the change. *@

<h4>Add suggestion</h4>
<TelerikTextBox @bind-Value="@ValuetoAdd"></TelerikTextBox>

<TelerikButton OnClick="@AddSuggestion">Add suggestion</TelerikButton>
<br />

<h4>Remove the last suggestion</h4>
<TelerikButton OnClick="@RemoveSuggestion">Remove the last suggestion</TelerikButton>
<br />

<h4>Load new collection</h4>
<TelerikButton OnClick="@LoadNewData">Load data</TelerikButton>
<br />

<h4>Autocomplete suggestions: @Suggestions.Count</h4>
<br />

<TelerikAutoComplete Data="@Suggestions" ValueField="@( nameof(SuggestionsModel.Suggestion) )" @bind-Value="@TheValue" />

@code{
    string TheValue { get; set; }

    string ValuetoAdd { get; set; }

    void AddSuggestion()
    {
        if (!string.IsNullOrWhiteSpace(ValuetoAdd))
        {
            Suggestions.Add(
        new SuggestionsModel { Suggestion = ValuetoAdd, SomeOtherField = Suggestions.Count + 1 }
        );
            Suggestions = new List<SuggestionsModel>(Suggestions);
            ValuetoAdd = string.Empty;
        }
    }

    void RemoveSuggestion()
    {
        if (Suggestions.Count > 0)
        {
            Suggestions.RemoveAt(Suggestions.Count - 1);
            Suggestions = new List<SuggestionsModel>(Suggestions);
        }
    }

    void LoadNewData()
    {
        var newData = new List<SuggestionsModel>
        {
        new SuggestionsModel { Suggestion = "fourth", SomeOtherField = 4 },
        new SuggestionsModel { Suggestion = "fifth", SomeOtherField = 5 },
        new SuggestionsModel { Suggestion = "sixth", SomeOtherField = 6 }
        };

        Suggestions = new List<SuggestionsModel>(newData);

        Console.WriteLine("New data collection loaded.");
    }

    List<SuggestionsModel> Suggestions { get; set; } = new List<SuggestionsModel>
    {
        new SuggestionsModel { Suggestion = "first", SomeOtherField = 1 },
        new SuggestionsModel { Suggestion = "second", SomeOtherField = 2 },
        new SuggestionsModel { Suggestion = "third", SomeOtherField = 3 }
    };

    public class SuggestionsModel
    {
        public string Suggestion { get; set; }//the auto complete needs only the string field
        public int SomeOtherField { get; set; }
    }
}

See Also