Skip to content

Latest commit

 

History

History
226 lines (168 loc) · 6.55 KB

refresh-data.md

File metadata and controls

226 lines (168 loc) · 6.55 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, 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