It would be nice if I could specify an item in the inline editor (or any other for that matter) to get focus when the editor is activated.
Is this possible?
Thanks,
Kenny
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; } }}
Binding a date input or a date picker to a nullable value causes a build-time error
error CS1503: Argument 1: cannot convert from 'System.DateTime?' to 'System.DateTime'
Sample:
@using Telerik.Blazor.Components.Button@using Telerik.Blazor.Components.DateInput
<TelerikDateInput bind-Value="@StartDate" Format="MM/dd/yyyy HH:mm:ss"></TelerikDateInput>
@functions {
[Parameter]
private DateTime? StartDate { get; set; } = new DateTime(2020, 1, 1);
}
Expected: a date gets selected, and updated in the markup
Actual: an error is thrown and the date does not get selected.
blazor.server.js:8 Uncaught Error: The current dispatcher does not support synchronous calls from JS to .NET. Use invokeMethodAsync instead.
at u (blazor.server.js:8)
at e.invokeMethod (blazor.server.js:8)
at telerik-blazor.min.js:16
@using Telerik.Blazor.Components.DatePicker
<TelerikDatePicker Min="@Min" Max="@Max" bind-Value="@CurrSelection"></TelerikDatePicker>
@CurrSelection
@functions {
public DateTime Max = new DateTime(2050, 12, 31);
public DateTime Min = new DateTime(1950, 1, 1);
public DateTime CurrSelection { get; set; }
}
When I click TelerikGridCommandButton and inside OnClick event calling method uriHelper.NavigateTo("/xxx"); application hangs.
Using latest VS 2019 version and Blazor Preview 4
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.
Right now when a DropDownList has PopupHeight="Auto" the popup gets the height necesaary to display its items properly.
But when there are many items the popup also displays all items without a vertical scrollbar (maybe over the entire page and beyond), which is not good.
My suggestion would be to add a property for specifyig a "MaxPopupHeight" to limit the growth of the popup.
Also if "PopupHeight" is not specified it should take "Auto" as the default value instead of a static height in px, instead give the new "MaxPopupHeight" a limiting default value.
This will allow the dropdown to be large enough to fit a reasonable number of items without a scrollbar. Alternatively, you could limit it through a pixel value you can set, or through the MaxPopupHeight property if it gets implemented: https://feedback.telerik.com/blazor/1412653-maxpopupheight.
When the Value you bind to the DropDownList is null (for example, because it is a model that is not filled in by the user yet, and you need to perform validation), the component throws a null reference exception.
This does not happen for a nullable integer (example here)
Reproducible:
@using System.ComponentModel.DataAnnotations@using Telerik.Blazor.Components.DropDownList <EditForm Model="@PageData" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> @PageData.QuoteState <TelerikDropDownList bind-Value="@PageData.QuoteState" DefaultItem="@Hint" Width="300px" Data="@states" TextField="stateName" ValueField="stateID"> </TelerikDropDownList> <ValidationMessage For="@(() => PageData.QuoteState)"></ValidationMessage> <button type="submit">Submit</button> </EditForm>@functions { public MyViewModel PageData { get; set; } = new MyViewModel(); public statesModel Hint { get; set; } = new statesModel { stateID = null, stateName = "Not Selected" }; public class statesModel { public string stateID { get; set; } public string stateName { get; set; } } public class MyViewModel { [Required(ErrorMessage = "State is mandatory.")]//the value field in the dropdown model must be null in the default item public string QuoteState { get; set; } } public IEnumerable<statesModel> states = new List<statesModel> { new statesModel { stateID = "ACT", stateName = "ACT" }, new statesModel { stateID = "NSW", stateName = "NSW" }, new statesModel { stateID = "NT", stateName = "NT" }, new statesModel { stateID = "QLD", stateName = "QLD" }, new statesModel { stateID = "SA", stateName = "SA" }, new statesModel { stateID = "TAS", stateName = "TAS" }, new statesModel { stateID = "VIC", stateName = "VIC" }, new statesModel { stateID = "WA", stateName = "WA" } }; void HandleValidSubmit() { Console.WriteLine("OnValidSubmit"); }}
The idea is to ensure labels don't render on top of each other. If series values are close to each other, labels start overlapping. Having tooltips will let me remove the labels.
Example:
It does show the un-minimize icon and when clicking on it restores the content within the window.
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(); }}
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.