When you change the data source of the grid, it must re-render the data again.
For example, when you use a custom edit form, you add/edit the data with your own code and not through the grid. This is useful, for example, when you only want to show a few columns in the grid, but the model has many more editable fields. Or, when you want a customized layout/behavior of the edit form.
Minimum repro:
@using Telerik.Blazor.Components.Grid@using Telerik.Blazor.Components.Button<TelerikButton OnClick="@ChangeProduct">Works: Change an existing product</TelerikButton><TelerikButton OnClick="@AddProduct">Does not work: Add a new product</TelerikButton><TelerikButton OnClick="@RemoveProduct">Does not work: Remove an existing product</TelerikButton><TelerikGrid Data=@GridData Pageable="true"> <TelerikGridColumns> <TelerikGridColumn Field=@nameof(Product.ProductName) Title="Product Name" /> <TelerikGridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price"> </TelerikGridColumn> </TelerikGridColumns></TelerikGrid>@functions { public List<Product> GridData { get; set; } void AddProduct() { GridData.Insert(0, new Product() { ProductId = DateTime.Now.Millisecond, ProductName = "some product name", UnitPrice = DateTime.Now.Second }); //after updating the data, the grid should show the item at the top of the first page. //at the moment, you need to page, for example, for the data to be updated } protected void ChangeProduct() { GridData.Where(p => p.ProductId == 2).First().ProductName = "changed at " + DateTime.Now; } protected void RemoveProduct() { GridData.RemoveAt(4); //after updating the data, the grid should remove the fourth item immediately //at the moment, you need to page, for example, for the data to be updated } protected override void OnInit() { GridData = new List<Product>(); for (int i = 0; i < 25; i++) { GridData.Add(new Product() { ProductId = i, ProductName = "Product" + i.ToString(), UnitPrice = (decimal)(i * 3.14), }); } } public class Product { public string ProductName { get; set; } public decimal UnitPrice { get; set; } public int ProductId { get; set; } }}
Repro steps:
- Go to https://demos.telerik.com/blazor-ui/grid/editing-inline
- Click Add
- Enter some data in all editable fields
- Click Update
- Go to the last page
Actual: The "Name" field is blank
Expected: All fields have the appropriate data
Dear Telerik,
i have a TelerikGrid with a TelerikGridColumn bound to a Decimal field.
The property Editable="true" is set.
I can edit the number , but only 1 number at te time.
If I type one number, the edit-cell is closed immediately.
If I want to input the number 1000 , I habe to click the cell 4 times for each number . I cannot type 1000 in one action.
The problem does not occur with a String column.
Regards,
Gert
Super low priority and super nit picky ... The command buttons on the Blazor Grid have extra space after the icon if you leave the name blank. Either remove the space or center the icon when no name is entered.
When I click TelerikGridCommandButton and inside OnClick event calling method uriHelper.NavigateTo("/xxx"); application hangs.
Using latest VS 2019 version and Blazor Preview 4
The TelerikGrid never loads any data. the app just hangs.
I copied the Telerik sample from the online demo.
The HTML table loads perfectly.
Using VS 2019 16.1.0 Preview 2.0.
Acquired Telerik nuget package directly from Telerik feed.
<TelerikGrid Data=@ViewModel.GetCorePharmacies() Height="300">
<TelerikGridColumns>
<TelerikGridColumn Field="ID" Title="NCPDP#" />
<TelerikGridColumn Field="NPINumber" Title="NPI#" />
<TelerikGridColumn Field="DBAName" Title="Pharmacy" />
<TelerikGridColumn Field="StoreNumber" Title="Store#" />
</TelerikGridColumns>
</TelerikGrid>
@*<table class="table">
<thead>
<tr>
<th>NCPDP</th>
<th>NPI</th>
<th>DBA Name</th>
<th>Store#</th>
</tr>
</thead>
<tbody>
@foreach (var pharmacy in ViewModel.GetCorePharmacies())
{
<tr>
<td>@pharmacy.ID.ToString()</td>
<td>@pharmacy.NPINumber.ToString()</td>
<td>@pharmacy.DBAName</td>
<td>@pharmacy.StoreNumber</td>
</tr>
}
</tbody>
</table>*@
Any thoughts.