Questions on UI for Blazor Forum

2 answers

255 views

Unhandled exception in telerik-blazor.js when DropDownList collection is empty

I came across this when I was loading a collection bound to a DropDownList from an API and when I clicked the drop down before the API call had completed I received the exception below in telerik-blazor.js:

I then created a new project from the stand alone blazor app template, pulled in the Telerik nuget package and added a drop down list which was bound to an empty collection. As soon as I click the drop down I get the same exception. The obvious workaround is to initialize the list with a blank item so at least there's something there before the API completes, but it seems like this is an issue that should be handled better as it took me a fair amount of time to figure out what was going on. Shouldn't a drop down be allowed to have no items?

Here's the code but I've also attached the project as a zip file:

<TelerikDropDownList Data="@DropDownListData" @bind-Value="DropDownListValue" />

@code {
private List<string> DropDownListData = new List<string>();// { "first", "second", "third" };

private string DropDownListValue { get; set; } = string.Empty;

}

DropDownList

answered on 22 Nov 2024

1 answer

51 views

Keyboard issues with linked ListBox components

I've run into some keyboard issues when using 2 list box components. Here are my concerns:

1. There should be a consistent tab order. Right now, it is inconsistent. Going to the Repl below illustrates what I mean. Basically, starting with focus on the left box, I would expect that hitting tab would set focus to the toolbar associated with the left listbox. Instead it sets focus to the toolbar associated with the right listbox. Hitting tab again, then focuses the right listbox. Essentially, for me to access the left listbox's tool bar, I need to hit shift-tab when on the left listbox. There is also an inconsistency where sometimes, if I shift-tab too far back, and then tab back again, it bypasses the toolbars altogether and just switches focus from the left listbox to the right listbox. I think this behavior may occur if the right listbox doesn't have a selected item yet, but it is very inconsistent as to tabbing behavior.

2. The keyboard shortcut for transfer from the left listbox to the right listbox is fine using ctrl-right arrow. This is intuitive. However, in order for me to move something back, I need to set focus to the right listbox, then select the item, then set focus back to the left listbox, and then hit ctrl-left arrow. I would have expected that I would be able to just set focus to the right listbox, select the correct item to transfer back, and then hit ctrl-left arrow, to move it back. The current method is not very intuitive, nor very accessible, since it adds more keystrokes to the process. It doesn't really make sense to have to set focus back to the box that will receive the transfer.

Here a repl illustrating both issues: https://blazorrepl.telerik.com/wIbPmOOl37nH3xJC51

Please let me know if there are any workarounds for either of these issues.

Accessibility

ListBox

answered on 22 Nov 2024

1 answer

54 views

CSP compliance of Telerik Blazor Components

Hi All,

Are all the Telerik components compliant to CSP? This includes no inline JavaScript nor CSS used in the component libraries. I dont want to use unsafe-inline tag in content security policy.

Thanks in Advance,

Rayson

Accessibility

answered on 21 Nov 2024

1 answer

135 views

Can't bind data to TelerikTextBox in EditForm

I'm trying to get Telerik working in a simple login form and I can't get the binding to work. This is a .NET 8 Blazor Web Assembly app. To narrow it down, I followed the instructions outlined here. I selected "Individual Accounts" for authentication and WebAssembly for Interactive render mode (and Global for Interactivity location as suggested in the article). I also included the sample pages and changed the email field in the login page to:

When I submit the form, it says the Email field is required. It works fine with a standard InputText. I thought maybe it has to do with the control in an EditForm on the server since the click event works fine on a client page but I've seen other examples where it's supposed to work in an EditForm as well.

TextBox

answered on 20 Nov 2024

1 answer

35 views

Request for customization of <GridCheckboxColumn>

Dear support team,

I am very satisfied with the functionality of <GridCheckboxColumn>.

Is there a way to easily replace the “Check” icon with a “Radio” icon when the GridSelectionMode.Single is set?

This would make it immediately clear to users that only one row can be selected in the grid.

Thank you very much for your support!

Grid

answered on 19 Nov 2024

1 answer

39 views

Reorder tiles programmatically or with keyboard

Is there a way to programmatically reorder the tiles in a tile layout? For accessibility, I'd like to provide an alternative method for a user to use the keyboard to reorder the tiles instead of just drag and drop. Your documentation provides an example to do this with resizing of the tiles, but not reordering.

Accessibility

TileLayout

answered on 19 Nov 2024

1 answer

58 views

Enable/Disable DateTime picker inside a popup

I need to toggle the Enabled state of a TelerikDateTimePicker which resides inside a TelerikPopup based on the checked state of a TelerikCheckBox. This works great outside of a popup, but once in a popup, the Enabled state no longer changes.

Here is a REPL: https://blazorrepl.telerik.com/cIlvvWbC29lZInK522

<div style="padding: 12px;">
    <p>Outside popup, toggling checkbox toggles enabled state:</p>
    <TelerikDateTimePicker @bind-Value="@SelectedTime"
                           Format="MM/dd/yyyy hh:mm tt"
                           ShowWeekNumbers="true"
                           Id="selected-date" Width="250px" Enabled="@(!chkNowSelected)">
    </TelerikDateTimePicker>

    <TelerikCheckBox Id="chkNow" @bind-Value="@chkNowSelected"    />
    <label for="chkNow">Now</label>
</div>

<div style="padding: 12px;">
<p>Inside popup, toggling checkbox does nottoggle enabled state:</p>
<TelerikPopup @ref="@PopupRef"
              AnchorSelector=".popup1"
              AnimationType="@AnimationType.SlideDown"
              AnimationDuration="300"
              Width="260px">
    <div style="padding: 20px;">
            <TelerikDateTimePicker @bind-Value="@SelectedTime"
                           Format="MM/dd/yyyy hh:mm tt"
                           ShowWeekNumbers="true"
                           Id="selected-date"  Enabled="@(!chkNowSelected)">
            </TelerikDateTimePicker>

            <TelerikCheckBox Id="chkNow" @bind-Value="@chkNowSelected"    />
            <label for="chkNow">Now</label>
    </div>
</TelerikPopup>
<TelerikButton OnClick="@OpenPopup" Class="popup1">
    Open Popup
</TelerikButton>

</div>

@code {
    #nullable enable

    private DateTime? SelectedTime = DateTime.Now;
    private bool chkNowSelected { get; set; } = true;
    private bool EndTimeEnabled { get; set; } = false;
    private TelerikPopup? PopupRef { get; set; }

    private void OpenPopup()
    {
        PopupRef?.Show();
    }
}

DateTimePicker

Popup

answered on 18 Nov 2024

1 answer

226 views

TreeView Disposing/Error

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:

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)

TreeView

updated answer on 15 Nov 2024

1 answer

37 views

Telerik Grid Groups sort

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?

Grid

answered on 15 Nov 2024

1 answer

57 views

How to Increase the width of telerik nested grid collapsible column?

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>

Grid

answered on 14 Nov 2024