Questions on UI for Blazor Forum

1 answer

7 views

Customise ContextMenu size

By default, the `ContextMenu` opens a `List` of medium size. Can you add a way to customise it?

ContextMenu

answered on 23 Apr 2025

1 answer

7 views

Run function on mouse hover

Hi,

Is there a way to trigger a method and pass data to it when hovering over a line in a line chart?

Regards,

Omar

Charts

answered on 23 Apr 2025

0 answers

8 views

Form value not rebinding from within Grid Footer

I have a grid footer and am needing to bind the sum value with a NumericTextBox (TotalDailyDeposit) that is outside the grid. Both the Grid and NumericTextBox are inside an EditForm. The sum is being calculated/displayed in the grid successfully on row value update, but the value displayed in TotalDailyDeposit isn't being changed when a new sum is calculated in the grid. There is also a second NumericTextBox (PriorDailyLimit) outside of the grid. After changing a value in a grid row I can click in and out of PriorDailyLimit and the TotalDailyDeposit value will update. This only happens, though, if PriorDailyLimit has an OnChange event handler defined (even if the handler contains no code). TotalDailyDeposit will also rebind when a Grid row's Edit button is subsequently clicked. Not updated, just clicked.

It seems like the page-level bind events aren't firing from within the footer because the context is the Grid at that point, but do fire based on other subsequent events that occur at the page level. Is there any way to cause a rebind of TotalDailyDeposit from within the Grid footer?

Things I've tried:

Binding TotalDailyDeposit to a model property
Binding TotalDailyDeposit to a page variable
Using @bind-Value
Using Value/ValueExpression

<TelerikNumericTextBox id="PriorDailyLimit" class="form-control form-control-sm" @bind-Value="Model!.PriorDailyLimit"
     Format="C" Width="150px" Arrows="false" />

...

                       <FooterTemplate>
                           @{
                               float? total = (float?)context?.Sum;
                               if (total != null)
                               {
                                   Model!.TotalDailyDeposit = (float)total;
                               }
                               else
                               {
                                   total = 0f;
                               }
                           }
                           @(((float)total).ToString("C"))
                       </FooterTemplate>


...
 
<TelerikNumericTextBox @bind-Value="Model!.TotalDailyDeposit" class="form-control form-control-sm" Format="C" ReadOnly="true" />

Grid

asked on 22 Apr 2025

1 answer

6 views

iOS error with TelerikColorPicker

I'm using the TelerikColorPicker in my Maui Blazor hybrid code like this:

<TelerikColorPicker @bind-Value="@_color"
                    View="@Telerik.Blazor.ColorPickerView.Palette"
                    AdaptiveMode="@Telerik.Blazor.AdaptiveMode.Auto"/>
...
@code { private string? _color; }

This works fine in Windows. However, it throws an error in iOS:

null is not an object (evaluating 'this.element.addEventListener')
bindEvents@app://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1063454
@app://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1063348
initPopupNavigationService@app://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1054798
s@app://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1054360
@app://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:23:2177305
@app://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:695018
@app://0.0.0.1/_framework/blazor.webview.js:1:2891
Promise@[native code]
beginInvokeJSFromDotNet@app://0.0.0.1/_framework/blazor.webview.js:1:2859
@app://0.0.0.1/_framework/blazor.webview.js:1:47081
@user-script:1:4:75
forEach@[native code]
@user-script:1:4:45

And also in Android:

[INFO:CONSOLE(1)] "Cannot read properties of null (reading 'addEventListener')
TypeError: Cannot read properties of null (reading 'addEventListener')
at e.NavigationService.bindEvents (https://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1063455)
at new e.NavigationService (https://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1063338)
at s.initPopupNavigationService (https://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1054775)
at new s (https://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1054334)
at e.initComponent (https://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:23:2177300)
at e.initColorPicker (https://0.0.0.1/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:695018)
at https://0.0.0.1/_framework/blazor.webview.js:1:2891
at new Promise (<anonymous>)
at y.beginInvokeJSFromDotNet (https://0.0.0.1/_framework/blazor.webview.js:1:2848)
at External.__callback (https://0.0.0.1/_framework/blazor.webview.js:1:47076)
at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[System.Object, System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
at Telerik.Blazor.Components.TelerikColorPicker.InitColorPicker()
at Telerik.Blazor.Components.TelerikColorPicker.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)", source: https://0.0.0.1/_framework/blazor.webview.js (1)

The error is coming from

async Task TelerikColorPicker.InitColorPicker()

Has anyone seen anything like this?

Thanks

Andrew

ColorPicker

answered on 22 Apr 2025

1 answer

7 views

Is there a way when I focus on TelerikDatePicker field the numeric keypad is automatically displayed

I am working on a mobile app using Blazor Hybrid, I have a TelerikDatePicker field on a page.
Is there a practical way when I focus on that field it automatically shows the numeric keyboard instead of alphanumeric keyboard ? like when using TelerikNumericTextBox.

Thank you.

DatePicker

updated answer on 22 Apr 2025

2 answers

8 views

In TelerikGrid, how to select a cell when the column header is clicked?

I have a TelerikGrid with SelectionMode=Single, so when I click on cell, it becomes selected. Then I click on a header of another column; the header cell gets the focus (and becomes highlighted), but the selected cell does not change. To the user, it looks like there are two selected columns now.

Is there a practical way to select the cell at the current row and the focused column when the user clicks on a column header? Maybe detect when a column header gets the focus (without going through JSInterop)?

If that is diffucult - can I prevent header cells from getting the focus but keep the ability to resize columns? I can change the header styles to make its focus invisible, but that would be a short-term workaround only.

I use Telerik in a Blazor Maui Hybrid application.

Thank you.

Grid

answered on 22 Apr 2025

2 answers

9 views

Show overlapping appointments

How much control do we have for displaying overlapping appointments? Right now, they show side-by-side which makes them hard to read:

Is it possible to lay them out differently so they overlap, giving more space to read the contents. Similar to how Google Calendar does it.

Scheduler

answered on 22 Apr 2025

1 answer

13 views

Renaming a newly created folder, keeps the old folder and creates a new folder with the new name FileManager

Hi Team,

Steps:

1. Click on New folder and create a new folder with name "ABC" (OnCreateHandler method is called to which is attached to OnCreate event)

2. Right click on folder "ABC" and click on rename and rename it as "XYZ"

3. On enter click, it retains the old folder "ABC" and creates a new folder with name "XYZ". (Again OnCreateHandler method is called instead of OnUpdateHandler)

Can you please help me understand if it is a bug with FileManager or is something wrong at my end.

<TelerikFileManager @ref="FileManagerRef"
                    Data="@FileManagerData"
                    @bind-Path="@DirectoryPath"
                    IdField="MyModelId"
                    Height="400px"
                    NameField="Name"
                    PathField="Path"
                    ExtensionField="Extension"
                    IsDirectoryField="IsDirectory"
                    HasDirectoriesField="HasDirectories"
                    DirectoriesField="MyDirectories"
                    ItemsField="Items"
                    SelectedItems="@SelectedItems"
                    SelectedItemsChanged="@((IEnumerable<HierarchicalFileEntry> selectedFiles) => OnSelect(selectedFiles))"
                    OnCreate="@OnCreateHandler"
                    OnUpdate="@OnUpdateHandler"
                    OnDelete="@OnDeleteHandler" />

FileManager

answered on 22 Apr 2025

1 answer

11 views

GridSearchBox show clear button

Hello,

how can I make the clear-value button in the GridSearchBox always visible?
By default, the clear button only appears when the GridSearchBox has a value. I’d like it to always be visible, even when the input is empty.

Thanks

Button

Grid

answered on 17 Apr 2025

1 answer

22 views

How to customise Blazor Grid paging template

We want to customise the controls inside the Grid's pager.

With the following settings it's generating what's in the actual.png. We would like to achieve the template in required.png.

Is it possible to move the controls and change the content inside the pager?

    <GridSettings>
        <GridPagerSettings InputType="PagerInputType.Input"
                           PageSizes="@PageSizes"
                           ButtonCount="5"
                           Adaptive="true"
                           Position="PagerPosition.Bottom">
        </GridPagerSettings>
    </GridSettings>

Grid

Pager

updated question on 17 Apr 2025