Skip to content

Commit

Permalink
docs(common): Enhance common Rebind() examples (#2698)
Browse files Browse the repository at this point in the history
* docs(common): Enhance common Rebind() example

* Update onread.md
  • Loading branch information
dimodi authored Jan 14, 2025
1 parent a3b02d6 commit 81e2b0b
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 46 deletions.
51 changes: 26 additions & 25 deletions common-features/data-binding/onread.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,13 @@ Also check [how to rebind and refresh a component with a `Timer`](slug://common-
````RAZOR
@using Telerik.DataSource.Extensions
<TelerikDropDownList @ref="@TheDropDown"
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
OnClick="@RebindComponents">Rebind Components</TelerikButton>
<br />
<br />
<TelerikDropDownList @ref="@DropDownListRef"
TItem="@SampleModel"
TValue="@int"
OnRead="@OnDropDownRead"
Expand All @@ -236,13 +242,10 @@ Also check [how to rebind and refresh a component with a `Timer`](slug://common-
</ItemTemplate>
</TelerikDropDownList>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
OnClick="@RebindComponents">Rebind Components</TelerikButton>
<br />
<br />
<TelerikGrid @ref="@TheGrid"
<TelerikGrid @ref="@GridRef"
TItem="@SampleModel"
OnRead="@OnGridRead"
AutoGenerateColumns="true"
Expand All @@ -251,34 +254,34 @@ Also check [how to rebind and refresh a component with a `Timer`](slug://common-
PageSize="5" />
@code {
TelerikGrid<SampleModel> TheGrid { get; set; }
TelerikDropDownList<SampleModel, int> TheDropDown { get; set; }
private TelerikGrid<SampleModel>? GridRef { get; set; }
private TelerikDropDownList<SampleModel, int>? DropDownListRef { get; set; }
List<SampleModel> GridData { get; set; }
List<SampleModel> DropDownData { get; set; }
private List<SampleModel> GridData { get; set; } = new();
private List<SampleModel> DropDownData { get; set; } = new();
int DropDownValue { get; set; } = 1;
private int DropDownValue { get; set; } = 1;
int ItemCounter { get; set; } = 3;
private int ItemCounter { get; set; } = 3;
void RebindComponents()
private void RebindComponents()
{
GenerateData(); // simulate change in the data
GenerateData(); // simulate data change
TheGrid.Rebind();
TheDropDown.Rebind();
GridRef?.Rebind();
DropDownListRef?.Rebind();
}
async Task OnGridRead(GridReadEventArgs args)
private async Task OnGridRead(GridReadEventArgs args)
{
var result = GridData.ToDataSourceResult(args.Request);
var result = await GridData.ToDataSourceResultAsync(args.Request);
args.Data = result.Data;
args.Total = result.Total;
}
async Task OnDropDownRead(DropDownListReadEventArgs args)
private async Task OnDropDownRead(DropDownListReadEventArgs args)
{
var result = DropDownData.ToDataSourceResult(args.Request);
var result = await DropDownData.ToDataSourceResultAsync(args.Request);
args.Data = result.Data;
args.Total = result.Total;
}
Expand All @@ -290,17 +293,15 @@ Also check [how to rebind and refresh a component with a `Timer`](slug://common-
base.OnInitialized();
}
void GenerateData()
private void GenerateData()
{
GridData = new List<SampleModel>();
DropDownData = new List<SampleModel>();
var rnd = new Random();
for (int i = 1; i <= ItemCounter; i++)
{
GridData.Add(new SampleModel() { Id = i, Text = $"Text {rnd.Next(1, 100)}" });
DropDownData.Add(new SampleModel() { Id = i, Text = $"Text {rnd.Next(1, 100)}" });
GridData.Add(new SampleModel() { Id = i, Text = $"Text {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}" });
DropDownData.Add(new SampleModel() { Id = i, Text = $"Text {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}" });
}
ItemCounter++;
Expand All @@ -309,7 +310,7 @@ Also check [how to rebind and refresh a component with a `Timer`](slug://common-
public class SampleModel
{
public int Id { get; set; }
public string Text { get; set; }
public string Text { get; set; } = string.Empty;
}
}
````
Expand Down
46 changes: 25 additions & 21 deletions common-features/data-binding/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,31 +115,36 @@ Thus, you will usually need to create a new reference for `Data` value in order
>caption Call `Rebind()` or create new Data reference
````RAZOR
<p>
<TelerikButton OnClick="@RefreshGridData">Refresh Grid Data</TelerikButton>
</p>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
AutoGenerateColumns="true" />
AutoGenerateColumns="true">
<GridToolBarTemplate>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
OnClick="@RefreshGridData">Modify Grid Data And Refresh</TelerikButton>
</GridToolBarTemplate>
</TelerikGrid>
@code {
TelerikGrid<SampleModel> GridRef { get; set; }
List<SampleModel> GridData { get; set; }
private TelerikGrid<SampleModel>? GridRef { get; set; }
private List<SampleModel> GridData { get; set; } = new();
private int LastId { get; set; }
void RefreshGridData()
private void RefreshGridData()
{
var newId = GridData.Count + 1;
GridData.RemoveAt(0);
GridData.FirstOrDefault().Text = DateTime.Now.Ticks.ToString();
GridData.ElementAt(Random.Shared.Next(0, GridData.Count)).Text = DateTime.Now.Ticks.ToString();
GridData.Add(new SampleModel() {
Id = newId,
Text = "Text " + newId
GridData.Add(new SampleModel()
{
Id = ++LastId,
Text = "Text " + LastId
});
// Call Rebind...
GridRef.Rebind();
GridRef?.Rebind();
// ...OR...
Expand All @@ -152,13 +157,12 @@ Thus, you will usually need to create a new reference for `Data` value in order
protected override void OnInitialized()
{
GridData = new List<SampleModel>();
for (int i = 1; i <= 3; i++)
for (int i = 1; i <= 5; i++)
{
GridData.Add(new SampleModel() {
Id = i,
Text = "Text " + i
GridData.Add(new SampleModel()
{
Id = ++LastId,
Text = $"Text {LastId}"
});
}
Expand All @@ -168,7 +172,7 @@ Thus, you will usually need to create a new reference for `Data` value in order
public class SampleModel
{
public int Id { get; set; }
public string Text { get; set; }
public string Text { get; set; } = string.Empty;
}
}
````
Expand Down

0 comments on commit 81e2b0b

Please sign in to comment.