Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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