Skip to content

Commit 6da1fcb

Browse files
authored
docs(ComboBox): Revamp Rebind example (#3168)
* docs(ComboBox): Revamp Rebind example * Update components/combobox/refresh-data.md * Update components/combobox/refresh-data.md
1 parent 24df32e commit 6da1fcb

File tree

1 file changed

+37
-42
lines changed

1 file changed

+37
-42
lines changed

components/combobox/refresh-data.md

Lines changed: 37 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -24,67 +24,62 @@ In this article:
2424
To refresh the ComboBox data when using [`OnRead`](slug:components/combobox/events#onread), call the `Rebind` method of the TelerikComboBox reference. This will fire the `OnRead` event and execute the business logic in the handler.
2525

2626
````RAZOR
27-
@* Clicking on the Rebind button will delete the first option from the dropdown and refresh the data *@
28-
2927
@using Telerik.DataSource.Extensions
3028
31-
<TelerikButton OnClick="@RebindComboBox">Rebind</TelerikButton>
29+
<TelerikButton OnClick="@RebindComboBox">Remove First Data Item and Rebind</TelerikButton>
30+
3231
<TelerikComboBox @ref="@ComboBoxRef"
33-
TItem="Product" TValue="int"
34-
OnRead="@ReadItems"
35-
ValueField="@nameof(Product.ProductId)"
36-
TextField="@nameof(Product.ProductName)"
37-
Filterable="true"
38-
Placeholder="Find what you seek by typing"
39-
@bind-Value="@SelectedValue">
32+
@bind-Value="@ComboBoxValue"
33+
OnRead="@OnComboBoxRead"
34+
TItem="ListItem"
35+
TValue="int"
36+
ValueField="@nameof(ListItem.Id)"
37+
TextField="@nameof(ListItem.Text)"
38+
Width="200px">
4039
</TelerikComboBox>
4140
4241
@code{
43-
public int SelectedValue { get; set; }
44-
List<Product> AllData { get; set; } = new List<Product>();
45-
public TelerikComboBox<Product, int> ComboBoxRef { get; set; }
46-
47-
async Task ReadItems(ComboBoxReadEventArgs args)
48-
{
49-
await Task.Delay(1000);
50-
args.Data = AllData.ToDataSourceResult(args.Request).Data;
51-
}
42+
public TelerikComboBox<ListItem, int>? ComboBoxRef { get; set; }
43+
private List<ListItem> AllData { get; set; } = new();
44+
private int ComboBoxValue { get; set; }
5245
53-
protected override void OnInitialized()
46+
private void RebindComboBox()
5447
{
55-
List<Product> products = new List<Product>();
56-
for (int i = 0; i < 200; i++)
48+
if (AllData.Count > 1)
5749
{
58-
products.Add(new Product()
59-
{
60-
ProductId = i,
61-
ProductName = "Product" + i.ToString(),
62-
SupplierId = i,
63-
UnitPrice = (decimal)(i * 3.14),
64-
UnitsInStock = (short)(i * 1),
65-
});
50+
AllData.RemoveAt(0);
6651
}
6752
68-
AllData = products;
53+
ComboBoxValue = AllData.FirstOrDefault()?.Id ?? default;
54+
55+
ComboBoxRef?.Rebind();
6956
}
7057
71-
public class Product
58+
private async Task OnComboBoxRead(ComboBoxReadEventArgs args)
7259
{
73-
public int ProductId { get; set; }
74-
public string ProductName { get; set; }
75-
public int SupplierId { get; set; }
76-
public decimal UnitPrice { get; set; }
77-
public short UnitsInStock { get; set; }
60+
var result = await AllData.ToDataSourceResultAsync(args.Request);
61+
args.Data = result.Data;
62+
args.Total = result.Total;
7863
}
7964
80-
private void RebindComboBox()
65+
protected override void OnInitialized()
8166
{
82-
if (AllData.Count > 0)
67+
for (int i = 1; i <= 5; i++)
8368
{
84-
AllData.RemoveAt(0);
69+
AllData.Add(new ListItem()
70+
{
71+
Id = i,
72+
Text = $"ListItem {i}"
73+
});
8574
}
8675
87-
ComboBoxRef.Rebind();
76+
ComboBoxValue = AllData.First().Id;
77+
}
78+
79+
public class ListItem
80+
{
81+
public int Id { get; set; }
82+
public string Text { get; set; } = string.Empty;
8883
}
8984
}
9085
````
@@ -232,4 +227,4 @@ To refresh the ComboBox data when using [`OnRead`](slug:components/combobox/even
232227

233228
* [ObservableCollection](slug:common-features-observable-data)
234229
* [INotifyCollectionChanged Interface](https://docs.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=netframework-4.8)
235-
* [Live Demos](https://demos.telerik.com/blazor-ui)
230+
* [Live Demos](https://demos.telerik.com/blazor-ui)

0 commit comments

Comments
 (0)