Reproducible below, expected results is that after editing the decimal field you'll get the data under the grid. Actual: either it does not get updated, or the value is always 0.
@using Telerik.Blazor.Components.Grid<TelerikGrid Data=@MyData EditMode="incell" Pageable="true" Height="500px"> <TelerikGridEvents> <EventsManager OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler"></EventsManager> </TelerikGridEvents> <TelerikGridToolBar> <TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton> </TelerikGridToolBar> <TelerikGridColumns> <TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" /> <TelerikGridColumn Field=@nameof(SampleData.Name) Title="Name" /> <TelerikGridColumn Field=@nameof(SampleData.SomeDecimal) Title="Some Decimal" /> <TelerikGridCommandColumn> <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton> <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton> </TelerikGridCommandColumn> </TelerikGridColumns></TelerikGrid>@lastUpdateOnDecimal@code { public void EditHandler(GridCommandEventArgs args) { SampleData item = (SampleData)args.Item; Console.WriteLine("Edit event is fired for column " + args.Field); } string lastUpdateOnDecimal; public void UpdateHandler(GridCommandEventArgs args) { string fieldName = args.Field; object newVal = args.Value; //you can cast this, if necessary, according to your model SampleData item = (SampleData)args.Item;//you can also use the entire model //perform actual data source operation here //if you have a context added through an @inject statement, you could call its SaveChanges() method //myContext.SaveChanges(); if (fieldName == "SomeDecimal") { lastUpdateOnDecimal = $"decimal for {item.ID} updated to {newVal} on {DateTime.Now}"; } var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID); if (matchingItem != null) { matchingItem.Name = item.Name; } Console.WriteLine("Update event is fired for " + args.Field + " with value " + args.Value); } public void CreateHandler(GridCommandEventArgs args) { SampleData item = (SampleData)args.Item; //perform actual data source operation here item.ID = MyData.Count; MyData.Add(item); Console.WriteLine("Create event is fired."); } public void DeleteHandler(GridCommandEventArgs args) { SampleData item = (SampleData)args.Item; //perform actual data source operation here //if you have a context added through an @inject statement, you could call its SaveChanges() method //myContext.SaveChanges(); MyData.Remove(item); Console.WriteLine("Delete event is fired."); } //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example public class SampleData { public int ID { get; set; } public string Name { get; set; } public decimal SomeDecimal { get; set; } } public List<SampleData> MyData { get; set; } protected override void OnInit() { MyData = new List<SampleData>(); for (int i = 0; i < 50; i++) { MyData.Add(new SampleData() { ID = i, Name = "Name " + i.ToString(), SomeDecimal = i }); } }}
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
how to use Multiple Column Header in grid?
thanks
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.
If the grid has Filterable=true, at the moment, all columns must have a Field defined. If a column does not have a Field, an exception similar to this one will be thrown:
Error: System.ArgumentNullException: Value cannot be null.
Parameter name: name
at System.Type.GetProperty(String name, BindingFlags bindingAttr)
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropInfo()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropType()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropTypeName()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.ResetFilterText()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.OnInit()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Instead, when no Field is provided, filtering, sorting and other operations that require a model field must be disabled internally without an exception.
For the time being, a workaround is to set Filterable=false to the desired column.
Here is an example where the workaround is highlighted
@using Telerik.Blazor.Components.Grid@using Telerik.Blazor.Components.Button<TelerikGrid data="@Histories" height="600px" Pageable="true" PageSize="20" Sortable="true" Filterable="true"> <TelerikGridColumns> <TelerikGridColumn Field="Casecode" /> <TelerikGridColumn Field="Historytext" /> <TelerikGridColumn Field="Createdate" Title="Create Date" /> <TelerikGridColumn Filterable="false"> <Template> @{ var CurrentRecord = context as CaseHistory; if (CurrentRecord.Blobid > 0) { <TelerikButton OnClick="@(() => MyCustomCommand(CurrentRecord))">Open</TelerikButton> } } </Template> </TelerikGridColumn> </TelerikGridColumns></TelerikGrid>@result@functions { public class CaseHistory { public int Id { get; set; } public int Casecode { get; set; } public string Historytext { get; set; } public DateTime Createdate { get; set; } public int Blobid { get; set; } } IEnumerable<CaseHistory> Histories = Enumerable.Range(1, 50).Select(x => new CaseHistory { Id = x, Casecode = x, Historytext = "text " + x, Createdate = DateTime.Now.AddDays(-x), Blobid = (x % 3 == 0) ? x : -x }); string result { get; set; } void MyCustomCommand(CaseHistory itm) { result = $"custom command fired for {itm.Id} on {DateTime.Now}"; StateHasChanged(); }}
When you have page numbers that go to 4 digits (>1000), the numbers get cramped up together and it is hard to tell which page you really are on.
Workaround - the CSS at the beginning of the snippet below.
Reproducible - go to the last page on this sample and you will see the results attached below, if you have removed the workaround.
<style> /* The workaround */ .k-pager-wrap.k-grid-pager .k-link, .k-pager-wrap.k-grid-pager .k-state-selected { min-width: calc(10px + 1.4285714286em); width: auto; }</style>@*The MCVE*@@using Telerik.Blazor.Components.Grid<TelerikGrid Data="@MyData" Height="300px" Pageable="true" PageSize="2" Sortable="true"> <TelerikGridColumns> <TelerikGridColumn Field="@(nameof(SampleData.Id))" /> <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" /> <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" /> </TelerikGridColumns></TelerikGrid>@functions { public IEnumerable<SampleData> MyData = Enumerable.Range(1, 5000).Select(x => new SampleData { Id = x, Name = "name " + x, HireDate = DateTime.Now.AddDays(-x) }); public class SampleData { public int Id { get; set; } public string Name { get; set; } public DateTime HireDate { get; set; } } //in a real case, consider fetching the data in an appropriate event like OnInitAsync //also, consider keeping the models in dedicated locations like a shared library //this is just an example that is easy to copy and run}
In my particular scenario we have an existing system which is very flexible and has user created entities. We already have the idea of "view definitions" which are used to define how a list of entities (for example companies or contacts) is displayed in a grid format. This view definition contains our own version of sort descriptors to tell us what the initial sorting should be.
I am getting the data using our existing API in the ReadItems method. Because I already have the view definition I can pass our sort descriptor to our API and it returns the data pre-sorted (it also handles paging). I would then like to be able to tell the grid which columns I have sorted by so it could be represented in the UI with the arrow. The grid doesn't actually have to sort the data.
Here is a more detailed description of the case: https://www.telerik.com/forums/grid-questions-07d1fe846889#RgZmmE2avUaSOsIcprdOMg.
In the TelerikGrid-control there seems to be a miss-alignment of the gridcell compared to their respective columnheaders.
This behavior is present on touch devices and Mac.
example of correct alignment in non-mobile browser:
example of incorrekt alignment in mobile browser (simulated via F12 tools, but same on real android device):
It looks like it maybe caused by the column where the vertical scrollbar is placed (far right). If i change the padding-right from 16px to 0px it aligns correctly again.
Hello,
I want to have the TelerikGrid's "Add" command display a popup for the new record's details, in the same way that the "Edit" functionality does. However with:
<TelerikGrid EditMode="popup">
<TelerikGridToolBar>
<TelerikGridCommandButton Command="Add" Icon="add">Add</TelerikGridCommandButton>
When I click "Add", the new blank row is shown within the grid identical to EditMode="inline", not as a popup. Is the "Add" functionality meant to work in popup mode?
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
At the moment the numeric and date filters keep the filter button visible even on narrow columns. This must be implemented for the string filter as well - it has a set width at the moment.
The "clear filter" button must always be visible as well (when there is a filter applied, of course).
Ideally, the filter elements will also have a common container with an accessible class so, for example, you can set its max-width to 50% or 100px to match desired UI easily without hacking through several different layouts and selectors.
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; } }}