-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added new kb article grid-add-new-row-navigate-last-page
- Loading branch information
KB Bot
committed
Oct 18, 2024
1 parent
25637f8
commit e106ca8
Showing
1 changed file
with
106 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
--- | ||
title: Add a New Row and Navigate to the Last Page | ||
description: Learn how to add a new row to the Grid for Blazor using an external button and navigate to the last page where the new row is inserted. | ||
type: how-to | ||
page_title: Programmatically Add New Rows and Navigate to the Last Page in Telerik Blazor Grid | ||
slug: grid-add-new-row-navigate-last-page | ||
tags: grid, blazor, add, row, navigate, page, programmatically, last | ||
res_type: kb | ||
ticketid: 1667656 | ||
--- | ||
|
||
## Environment | ||
|
||
<table> | ||
<tbody> | ||
<tr> | ||
<td>Product</td> | ||
<td>Grid for Blazor</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
|
||
## Description | ||
|
||
I want to programmatically add a new row to the Grid at the end of the data and navigate to the last page to view the added row. | ||
|
||
## Solution | ||
|
||
To add a new row at the end of the Grid and navigate to the last page: | ||
1. Add an external button that triggers the addition of a new item to your data collection. | ||
2. Calculate the page number required to display the newly added item (based on the total number of items and the page size). | ||
3. Programmatically set the Grid's page to the calculated page number to navigate to the last page. | ||
|
||
Below is an example demonstrating this approach: | ||
|
||
````CSHTML | ||
@* Add/remove employee to see how the Grid reacts to that change. *@ | ||
<TelerikButton OnClick="@AddEmployee">Add employee</TelerikButton> | ||
<TelerikButton OnClick="@RemoveEmployee">Remove last employee</TelerikButton> | ||
<TelerikGrid Data="@MyData" | ||
Height="400px" | ||
Pageable="true" | ||
Sortable="true" | ||
Page="@currentPage" | ||
PageSize="@pageSize"> | ||
<GridColumns> | ||
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" /> | ||
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" /> | ||
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" /> | ||
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" /> | ||
</GridColumns> | ||
</TelerikGrid> | ||
@code { | ||
private int currentPage = 1; | ||
private int pageSize = 10; | ||
private void AddEmployee() | ||
{ | ||
var x = MyData.Count + 1; | ||
MyData.Add(new SampleData | ||
{ | ||
Id = x, | ||
Name = "name " + x, | ||
Team = "team " + x % 5, | ||
HireDate = DateTime.Now.AddDays(-x).Date | ||
}); | ||
MyData = new List<SampleData>(MyData); | ||
currentPage = (int)Math.Ceiling((double)MyData.Count / pageSize); | ||
} | ||
private void RemoveEmployee() | ||
{ | ||
if (MyData.Count > 0) | ||
{ | ||
MyData.RemoveAt(MyData.Count - 1); | ||
MyData = new List<SampleData>(MyData); | ||
} | ||
} | ||
private List<SampleData> MyData = Enumerable.Range(1, 5).Select(x => new SampleData | ||
{ | ||
Id = x, | ||
Name = "name " + x, | ||
Team = "team " + x % 5, | ||
HireDate = DateTime.Now.AddDays(-x).Date | ||
}).ToList(); | ||
public class SampleData | ||
{ | ||
public int Id { get; set; } | ||
public string Name { get; set; } | ||
public string Team { get; set; } | ||
public DateTime HireDate { get; set; } | ||
} | ||
} | ||
```` | ||
|
||
## See Also | ||
|
||
- [Grid Overview](https://docs.telerik.com/blazor-ui/components/grid/overview) | ||
- [Grid Paging](https://docs.telerik.com/blazor-ui/components/grid/paging) |