Questions on UI for Blazor Forum

1 answer

161 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

151 views

[Solved] 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

463 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

138 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

131 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

1 answer

107 views

Set the value attribute for a Submit ButtonType

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>

I want to convert this to using a TelerikButton but I cannnot figure out how to set the value attribute when doing that.

Button

answered on 13 Nov 2024

1 answer

267 views

Is it possible to customize the telerikchart column y-axis values in blazor

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?

Charts

answered on 13 Nov 2024

1 answer

327 views

[Solved] Placing a second Grid Command Button to the right of the Grid Toolbar Template?

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?

Grid

answered on 13 Nov 2024

1 answer

162 views

[Solved] Grid Selected Row highlight

UPD: Found a solution already, there was a bug in my code, everything is working ok, can i somehow delete this question post?

Grid

answered on 13 Nov 2024

1 answer

363 views

fieldset disabled for Telerik drop downs

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:

<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.

DropDownList

answered on 12 Nov 2024