or
1 answer
330 views
In my blazor app I'm seeing the TelerikTreeView is erroring out during garbage collection or disposing when I switching between pages too quickly in my. Is there something I can do to suppress this error or add some nullcheck so this doesnt appear in my logs?
Here is the error I'm getting:
Here is the error I'm getting:
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener') TypeError: Cannot read properties of null (reading 'addEventListener') at c.bindEvents (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1282242) at new c (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1282116) at e.initComponent (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1085487) at e.initTreeView (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1279920) at https://0.0.0.0/_framework/blazor.webview.js:1:3337 at new Promise (<anonymous>) at beginInvokeJSFromDotNet (https://0.0.0.0/_framework/blazor.webview.js:1:3311) at https://0.0.0.0/_framework/blazor.webview.js:1:42795 at EventTarget.<anonymous> (<anonymous>:7:62) at EmbeddedBrowserWebView.<anonymous> (<anonymous>:1:40673)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikTreeView.InitTreeView()
at Telerik.Blazor.Components.TelerikTreeView.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener') TypeError: Cannot read properties of null (reading 'addEventListener') at c.bindEvents (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1282242) at new c (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1282116) at e.initComponent (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1085487) at e.initTreeView (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1279920) at https://0.0.0.0/_framework/blazor.webview.js:1:3337 at new Promise (<anonymous>) at beginInvokeJSFromDotNet (https://0.0.0.0/_framework/blazor.webview.js:1:3311) at https://0.0.0.0/_framework/blazor.webview.js:1:42795 at EventTarget.<anonymous> (<anonymous>:7:62) at EmbeddedBrowserWebView.<anonymous> (<anonymous>:1:40673)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikTreeView.InitTreeView()
at Telerik.Blazor.Components.TelerikTreeView.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
1 answer
74 views
My question is , i want to sort groups in telerik grid , when sorted without group , it works fine and also sorts with group when grouped but the requirement is i want to sort groups by min or max value in the each group , How can this be achieved?
Tsvetomir
Telerik team
answered
on
15 Nov 2024
1 answer
83 views
I want to increase the width of the collapsible column in the telerik nested grid. I’ve tried to do it with CSS and JavaScript, but it hasn't worked. Could someone help me increase the width of this class k-hierarchy-cell?
<TelerikGrid Data="categories" Pageable="true" PageSize="5" Class="custom-nested-grid">
<DetailTemplate Context="categoryItem">
@{
var category = categoryItem as CategoryModel;
<TelerikGrid Data="category.SubItems" Pageable="true" PageSize="3" Class="nested-grid">
<DetailTemplate Context="subItem">
@{
var nestedItem = subItem as SubItemModel;
<TelerikGrid Data="nestedItem.NestedItems" Pageable="true" PageSize="3" Class="nested-grid">
<DetailTemplate Context="nestedSubItem">
@{
// Add a fourth level of nesting here if needed
}
</DetailTemplate>
<GridColumns>
<GridColumn Field="Code" Title="Code"></GridColumn>
<GridColumn Field="Name" Title="Name"></GridColumn>
<GridColumn Field="Description" Title="Description"></GridColumn>
<GridColumn Field="ItemType" Title="Item Type"></GridColumn>
<GridColumn Field="LinkedCategories" Title="Linked Categories"></GridColumn>
</GridColumns>
</TelerikGrid>
}
</DetailTemplate>
<GridColumns>
<GridColumn Field="Code" Title="Code"></GridColumn>
<GridColumn Field="Name" Title="Name"></GridColumn>
<GridColumn Field="Description" Title="Description"></GridColumn>
<GridColumn Field="ItemType" Title="Item Type"></GridColumn>
<GridColumn Field="LinkedCategories" Title="Linked Categories"></GridColumn>
</GridColumns>
</TelerikGrid>
}
</DetailTemplate>
<GridColumns>
<GridColumn Field="Code" Title="Code"></GridColumn>
<GridColumn Field="Name" Title="Name"></GridColumn>
<GridColumn Field="Description" Title="Description"></GridColumn>
<GridColumn Field="ItemType" Title="Item Type"></GridColumn>
<GridColumn Field="LinkedCategories" Title="Linked Categories"></GridColumn>
</GridColumns>
</TelerikGrid>
@code {
// Sample data model classes
public class CategoryModel
{
public string Code { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public string ItemType { get; set; }
public string LinkedCategories { get; set; }
public List<SubItemModel> SubItems { get; set; }
}
public class SubItemModel
{
public string Code { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public string ItemType { get; set; }
public string LinkedCategories { get; set; }
public List<NestedItemModel> NestedItems { get; set; }
}
public class NestedItemModel
{
public string Code { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public string ItemType { get; set; }
public string LinkedCategories { get; set; }
// Add this property to support further nesting
public List<NestedItemModel> NestedItems { get; set; } = new List<NestedItemModel>();
}
private List<CategoryModel> categories = new List<CategoryModel>
{
new CategoryModel
{
Code = "C-1", Name = "Ram Pro Master 2500", Description = "Ambulance parts for ram pro master 2500", ItemType = "Parts", LinkedCategories = "8 Linked categories",
SubItems = new List<SubItemModel>
{
new SubItemModel
{
Code = "C-134", Name = "Electronic Control Unit", Description = "Electric parts for ram pro master 3500", ItemType = "-", LinkedCategories = "4 Linked categories",
NestedItems = new List<NestedItemModel>
{
new NestedItemModel
{
Code = "N-1", Name = "Subcomponent A", Description = "Details for subcomponent A", ItemType = "Electronic", LinkedCategories = "2 Linked categories",
// Next level of data
NestedItems = new List<NestedItemModel>
{
new NestedItemModel { Code = "L-1", Name = "Detail A1", Description = "Details of A1", ItemType = "Part", LinkedCategories = "-",
NestedItems = new List<NestedItemModel>
{
new NestedItemModel { Code = "L-1", Name = "Detail A1", Description = "Details of A1", ItemType = "Part", LinkedCategories = "-" },
new NestedItemModel { Code = "L-2", Name = "Detail A2", Description = "Details of A2", ItemType = "Part", LinkedCategories = "Linked" }
}
},
new NestedItemModel { Code = "L-2", Name = "Detail A2", Description = "Details of A2", ItemType = "Part", LinkedCategories = "Linked" }
}
},
new NestedItemModel
{
Code = "N-2", Name = "Subcomponent B", Description = "Details for subcomponent B", ItemType = "Electronic", LinkedCategories = "1 Linked category",
NestedItems = new List<NestedItemModel>
{
new NestedItemModel { Code = "L-3", Name = "Detail B1", Description = "Details of B1", ItemType = "Part", LinkedCategories = "-" }
}
}
}
}
}
},
new CategoryModel
{
Code = "C-2", Name = "Ram Pro Master 3500", Description = "Electric parts for ram pro master 3500", ItemType = "Parts", LinkedCategories = "5 Linked categories",
SubItems = new List<SubItemModel>
{
new SubItemModel
{
Code = "C-672", Name = "Engine Control Unit", Description = "Engine module for control", ItemType = "-", LinkedCategories = "3 Linked categories",
NestedItems = new List<NestedItemModel>
{
new NestedItemModel
{
Code = "N-3", Name = "Engine Subcomponent A", Description = "Engine details A", ItemType = "Engine Part", LinkedCategories = "-",
NestedItems = new List<NestedItemModel>
{
new NestedItemModel { Code = "L-4", Name = "Detail C1", Description = "Details of C1", ItemType = "Control Unit", LinkedCategories = "-" },
new NestedItemModel { Code = "L-5", Name = "Detail C2", Description = "Details of C2", ItemType = "Control Unit", LinkedCategories = "Linked" }
}
}
}
}
}
}
};
private void ApplyCategory(CategoryModel category)
{
Console.WriteLine($"Applying category: {category.Code}");
}
private void ApplySubItem(CategoryModel category, SubItemModel subItem)
{
Console.WriteLine($"Applying sub-item: {subItem.Code} under category: {category.Code}");
}
private TelerikGrid<CategoryModel> gridRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("setHierarchyCellWidth", 130); // Set the desired width here
}
}
}
<script>
window.setHierarchyCellWidth = function(width) {
document.querySelectorAll(".k-hierarchy-cell").forEach(cell => {
cell.style.width = width + "px";
cell.style.minWidth = width + "px";
cell.style.maxWidth = width + "px";
});
}
</script>
Dimo
Telerik team
answered
on
14 Nov 2024
1 answer
55 views
Is there a way to set the value attribute for a submit button when using the TelerikButton.
For example, this is the button markup I am currently using:
<button type="submit" class="login100-form-btn" name="provider" value="@provider.Name"
title="Log in using your @provider.DisplayName account">
<TelerikSvgIcon Icon="@GetExternalIcon(provider.Name)" Size="@ThemeConstants.SvgIcon.Size.ExtraExtraLarge" Class="me-3" />
Login using @provider.DisplayName
</button>
Nansi
Telerik team
answered
on
13 Nov 2024
1 answer
186 views
I have a column chart with the x-axis representing whole month dates and each data point ranging in value from 0 to 86000. The y-axis now has a default range of 0 to 86000, with intervals of 10,000 each. I need to set the y-axis values to 0, 8000, 9000, 10000, 11000, 12000, 13000, 14000, 15000, 17000, 22000, 26000, 30000, 34000, 43000, 60000, and 86000. There are a total of 16 iterations. Is it possible using TelerikChart in Blazor to adjust the y-axis values as shown above?
Dimo
Telerik team
answered
on
13 Nov 2024
1 answer
215 views
I would like to place a second button on the Grid Toolbar. That button should reside to the right side of the Toolbar so that the GridCommandButton for Add is on the far left and my second button should be on the far right.
What is the best/proper way to do this on the Blazor Grid?
What is the best/proper way to do this on the Blazor Grid?
Hristian Stefanov
Telerik team
answered
on
13 Nov 2024
1 answer
112 views
UPD: Found a solution already, there was a bug in my code, everything is working ok, can i somehow delete this question post?
Hristian Stefanov
Telerik team
answered
on
13 Nov 2024
1 answer
190 views
I have a requirement to conditionally disable all controls in a TelerikForm. There a multiple ways to do that but what seems like the easiest to me is to wrap the form as such:
<fieldset disabled>
<TelerikForm>...
</fieldset>
I have buttons, text boxes, date pickers and drop down lists in my form. All of the controls get disabled except for the drop downs. Is there a simple way to do this so the drop downs will get included? I know I could do this through javascript or whatever but it just struck me as weird that most of the Telerik controls are disabled except for the drop downs.
Thanks.
Nansi
Telerik team
answered
on
12 Nov 2024
1 answer
62 views
I am using the teleriktilelayout component. I have resizing and reordering turned off, but we may have it as a feature in the future. Since they are turned off, I need the tiles to be taken out of the tab order and not be navigable. I know that navigable=false is the default, but all the tiles have tabindex=0 (making them tabbable/navigable). Adding navigable=false to the main component doesn't work (and again, it's supposed to be the default).
How do I change it to tabindex=-1 on the tiles? Is there any other way to remove the tiles from the tab order? Is this a known accessibility issue?
How do I change it to tabindex=-1 on the tiles? Is there any other way to remove the tiles from the tab order? Is this a known accessibility issue?
Dimo
Telerik team
answered
on
12 Nov 2024
7 answers
1.9K+ views
Is there currently a way to access filtered data from the grid? I want users to be able to filter data in the grid and then display it in a chart. The only way I can see to do it is by rolling my own filtering code with the OnRead event.
