The CSS classes used by Blazor UI are not documented. (I haven't looked outside the Blazor area, so maybe it's somewhere else in the docs? My team has no need for other Telerik products.) On a similar note, the Themes page in the documentation explains how to reference alternate themes like Bootstrap, but it doesn't explain how to actually use the classes, or how it integrates with the real Bootstrap CSS, which have many various useful, well-known utilities like margin and padding settings, which don't seem to be part of the Telerik theme support. (I'm an architect at a very large corporation, we do have one of those includes-everything DevCraft licenses, I just can't log in with that account.)
Simple Repro
@using Telerik.Blazor.Components.TreeView<button class="btn btn-primary" @onclick="@(() => ChangeTreeData(false))">Change tree data</button><TelerikTreeView Data="@FlatData"> <TelerikTreeViewBindings> <TelerikTreeViewBinding ParentIdField="Parent" ExpandedField="IsExpanded"></TelerikTreeViewBinding> </TelerikTreeViewBindings></TelerikTreeView>@code { public List<TreeItem> FlatData { get; set; } = new List<TreeItem>(); public class TreeItem //most fields use the default names and will bind automatically in this example { public int Id { get; set; } public string Text { get; set; } public int? Parent { get; set; } //this is a non-default field name public bool HasChildren { get; set; } public bool IsExpanded { get; set; } //this is a non-default field name } protected override void OnInit() { ChangeTreeData(true); } int currIndex { get; set; } = 0; void ChangeTreeData(bool expandItems) { currIndex++; FlatData.Clear(); List<TreeItem> data = new List<TreeItem>(); data.Add(new TreeItem { Id = currIndex, HasChildren = true, IsExpanded = expandItems, Parent = null, Text = $"root {currIndex}" }); data.Add(new TreeItem { Id = currIndex + 1, HasChildren = false, IsExpanded = expandItems, Parent = currIndex, Text = $"root {currIndex}: child one" }); FlatData.AddRange(data); }}
If a chart is too narrow and x-axis labels overlap, the user can zoom out and refresh the charts to allow the labels to fit. This feature request is to allow the charts to reformat themselves as the zoom level is changed (without having to refresh the page). Steps to reproduce:
- Make browser narrow (say half screen)
- Change zoom to 500%
- Go to https://demos.telerik.com/blazor-ui/chart/line-chart
- See line chart is squished with overlapping x-axis labels
- Zoom out to 100%
- See line chart remains squished with overlapping x-axis labels even though there is a lot more room
- Now refresh the page
- See line chart is no longer squished with x-axis labels visible
You may get an exception like
InvalidOperationException: The current thread is not associated with the Dispatcher. Use Invoke() or InvokeAsync() to switch execution to the Dispatcher when triggering rendering or modifying any state accessed during rendering.
or you may get components that simply don't work (for example, a Window does not show, a treeview does not expand).
The solution is to revert to the RenderComponentAsync method in your _Hosts.cshtml file.
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:
Add the following Razor component and run. Click around tree, especially from disclosure icon to node to 'plus' icon. Error will occur.
=====================================
@page "/poopy"@using Microsoft.AspNetCore.Components
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.Blazor.Components.Button
<style>
.k-mid:hover .showme {
display: block;
}
.showme {
display: none;
margin-left: 10px;
}
.showhim:hover .showme {
display: block;
}
</style>
@using Telerik.Blazor.Components.TreeView
<TelerikTreeView Data="@TreeData">
<TelerikTreeViewBindings>
<TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
<ItemTemplate>
<div @onclick="@(_ => NodeClicked((context as TreeItem).Text))" style="cursor: pointer">@((context as TreeItem).Text)</div>
<div class="showme" @onclick="SayHelloHandler" style="cursor: pointer">
<TelerikIcon IconName="@IconName.Plus" />
</div>
</ItemTemplate>
</TelerikTreeViewBinding>
</TelerikTreeViewBindings>
</TelerikTreeView>
@helloString
@code {
MarkupString helloString;
void NodeClicked(string node)
{
helloString = new MarkupString(node);
}
void SayHelloHandler()
{
string msg = $"Hello from <strong>Telerik Blazor</strong> at {DateTime.Now}.<br /> Now you can use C# to write front-end!";
helloString = new MarkupString(msg);
}
public class TreeItem
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentIdValue { get; set; }
public bool HasChildren { get; set; }
public bool Expanded { get; set; }
}
public IEnumerable<TreeItem> TreeData { get; set; }
protected override void OnInitialized()
{
LoadTreeData();
}
private void LoadTreeData()
{
List<TreeItem> items = new List<TreeItem>();
items.Add(new TreeItem()
{
Id = 1,
Text = "Project",
ParentIdValue = null,
HasChildren = true,
Expanded = true
});
items.Add(new TreeItem()
{
Id = 2,
Text = "Design",
ParentIdValue = 1,
HasChildren = false,
Expanded = true
});
items.Add(new TreeItem()
{
Id = 3,
Text = "Implementation",
ParentIdValue = 1,
HasChildren = false,
Expanded = true
});
TreeData = items;
}
}
======================================
Microsoft.JSInterop.JSException
HResult=0x80131500Message=Cannot read property 'scrollHeight' of null
TypeError: Cannot read property 'scrollHeight' of null
at Object.r (https://localhost:44326/_content/telerik.ui.for.blazor.trial/js/telerik-blazor.js:1:1433)
at https://localhost:44326/_framework/blazor.server.js:8:28347
at new Promise (<anonymous>)
at e.beginInvokeJSFromDotNet (https://localhost:44326/_framework/blazor.server.js:8:28316)
at https://localhost:44326/_framework/blazor.server.js:1:19148
at Array.forEach (<anonymous>)
at e.invokeClientMethod (https://localhost:44326/_framework/blazor.server.js:1:19119)
at e.processIncomingData (https://localhost:44326/_framework/blazor.server.js:1:17165)
at e.connection.onreceive (https://localhost:44326/_framework/blazor.server.js:1:10276)
at WebSocket.i.onmessage (https://localhost:44326/_framework/blazor.server.js:1:38027)
Source=System.Private.CoreLib
StackTrace:
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
at Microsoft.JSInterop.JSRuntimeBase.<InvokeWithDefaultCancellation>d__13`1.MoveNext()
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
at Telerik.Blazor.Components.TelerikAnimationContainerBase.<GetContentHeight>d__57.MoveNext()
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Telerik.Blazor.Components.TelerikAnimationContainerBase.<SetMaxHeight>d__56.MoveNext()
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_1(Object state)
at System.Threading.QueueUserWorkItemCallback.<>c.<.cctor>b__6_0(QueueUserWorkItemCallback quwi)
at System.Threading.ExecutionContext.RunForThreadPoolUnsafe[TState](ExecutionContext executionContext, Action`1 callback, TState& state)
at System.Threading.QueueUserWorkItemCallback.Execute()
at System.Threading.ThreadPoolWorkQueue.Dispatch()
A basic Menu control is one of the most fundamental common controls .... Why was it not included in the first release of UI for Blazor???
How about a basic fundamental Menu control in the UI for Blazor? If not now, when?
Hi,
We tried making the name property of our TelerikChartSeries dynamic by binding it to a string value. This however seems to completely crash startup, the browser tab freezes and the console doesn't show any errors. If we just put in a simple string in the Name property the application runs without a problem.
<TelerikChartSeries Type="ChartSeriesType.Column" Name="@Team1Name" Data="@Results" Field="@nameof(ChartViewModel.Team1Score)" CategoryField="@nameof(ChartViewModel.CategoryName)">
<TelerikChartSeriesLabels Visible="true" />
</TelerikChartSeries>As you can see in this example we're binding the Name property to Team1Name which can be changed whenever another team is selected from a dropdownlist.
Thank you in advance.
If filtering is enabled, the error may prevent the view from rendering similar to NotImplementedException: Unexpected frame type during RemoveOldFrame: None.
Without filtering, an exception is thrown when you attempt to edit a field, similar to Error: System.InvalidCastException: Unable to cast object of type 'System.String' to type 'System.Nullable`1[System.Int64]'.
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; } }}
@using Telerik.Blazor.Components.DatePicker
<TelerikDatePicker Enabled="false" @bind-Value="@HireDate" Format="MMMM/dd/yyyy"></TelerikDatePicker>
@HireDate
<br/>
<TelerikDatePicker @bind-Value="@MeetingDate" Format="MM/dd/yyyy HH:mm:ss"></TelerikDatePicker>
@MeetingDate
@code {
DateTime HireDate { get; set; } = new DateTime(2018, 5, 6);
DateTime MeetingDate { get; set; } = new DateTime(2019, 3, 4, 15, 0, 0);
}
Use it quite often with SPAs
Hello,
I'm trying the grid component and I'm able to add a row to the grid using the embbed editor. But I wanted to add an item externally to the list:
<button @onclick="@MyClick">Add item</button>
void MyClick()
{
MyData.Add(new SampleData() { ID = 46, Name = "from click" });
StateHasChanged();
}The new line does not appear on the grid but if I add a second item through the embbed editor then I get the 2 items!
I also try to replace the List<MyData> by an ObservableCollection<MyData> unsuccessfully.
Thanks & regards,