Questions on UI for Blazor Forum

2 answers

22 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

answered on 30 Apr 2025

1 answer

19 views

Drawer data not binding

I'm having trouble with data binding in the drawer component. In order to help isolate + demonstrate the issue I've created a simple test page containing a drawer component with minimal configuration:-

@layout TelerikLayout
@page "/test"

<TelerikDrawer @bind-SelectedItem="SelectedItem"
               Data="Data">
    <DrawerContent><p>Hello</p></DrawerContent>
</TelerikDrawer>

@code {
    private class DrawerItem
    {
        public FontIcon Icon { get; set; }
        public bool Separator { get; set; }
        public string Text { get; set; }
        public string Url { get; set; }
    }

    private List<DrawerItem> Data { get; set; } = new List<DrawerItem> { new DrawerItem { Icon = FontIcon.CaretTr, Text = "Hello" } };

    private DrawerItem? SelectedItem { get; set; }
}

And here is the resulting markup. The drawer component is rendered and so is the drawer content, but no drawer items:-

<div class="k-drawer-container k-drawer-overlay"><!--!-->
<!--!-->
    <div class="k-drawer telerik-blazor k-drawer-start" data-id="2ccfd37c-d109-485f-80e7-654bf55cb5c7" dir="ltr"><!--!-->

        <!--!--><!--!-->

        <div class="k-drawer-wrapper" style="width: 0; transition-duration: 0ms;"><!--!-->
        </div><!--!-->
    </div><!--!-->
    <div class="k-drawer-content"><!--!-->
<!--!--><p>Hello</p>    </div><!--!-->
</div>

I've tried using IEnumerable instead of List, making SelectedItem not nullable, and removing SelectedItem altogether, and the result is the same. I'm on Telerik UI for Blazor version 8.1.1 and all other components appear to be working fine. Any help would be appreciated.

Drawer

updated answer on 30 Apr 2025

0 answers

13 views

Display scrollbar _only_ for scrollable columns

I have a grid with first three columns frozen and other columns are horizontally scrollable. Somewhat similar to this example Blazor Grid Columns Frozen (Locked) - Telerik UI for Blazor

Is it possible to display the horizontal scrollbar only for the scrollable columns (and do not display for the frozen columns).

Grid

asked on 28 Apr 2025

1 answer

12 views

use Popover in Telerik Map for Blazor

Hi

Please guide me how can I use Popover in the Map instead of showing Tooltip?

Map

updated answer on 27 Apr 2025

1 answer

16 views

spreadsheet component download tool exports xlsx.zip

The xlsx.zip contains some strange files, but why is there no normal .xlsx file..

In the past it did produce a normal .xlsx file in the download tool of the spreasheet.

Is there a setting/option for this?

Spreadsheet

answered on 27 Apr 2025

1 answer

19 views

"Select all" on grouped grid with manual operations

Hi,

I use grouping on a grid with manual operations and want to select all items in the grid. This works for the ungrouped data. But once the data are grouped the checkbox for selecting all items behaves strange.

Is there a way around that?

A sample can be found here: https://blazorrepl.telerik.com/mJYeQIas44WKo5F346

Best regards,

Rayko

Grid

updated answer on 24 Apr 2025

1 answer

12 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

12 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

1 answer

13 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

13 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