Questions on UI for Blazor Forum

2 answers

15 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

15 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

18 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

14 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

27 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

0 answers

21 views

Invalid operation exception on Telerik Form control

Hello all,

I am getting the following error upon running deployed blazor app on IIS. When running it from local VS 2022 there are no issues.

[2025-04-16T16:55:34.549Z] Error: System.InvalidOperationException: Unable to set property 'columns' on object of type 'Telerik.Blazor.Components.TelerikForm'. The error was: Unable to cast object of type 'System.String' to type 'System.Int32'. ---> System.InvalidCastException: Unable to cast object of type 'System.String' to type 'System.Int32'. at Microsoft.AspNetCore.Components.Reflection.PropertySetter.CallPropertySetter[TTarget,TValue](Action`2 setter, Object target, Object value) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value) --- End of inner exception stack trace --- at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target) at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters) at Telerik.Blazor.Components.TelerikForm.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)

<TelerikForm Columns="3" ColumnSpacing="35px" Model="@FormModel">
<FormItems>

<FormItem>
<Template>
<div>Dropdown 1</div>
<TelerikComboBox Width="350px" Data="@Dropdown1Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown1Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>


<FormItem>
<Template>
<div>Text Field 1</div>
<TelerikTextBox Width="350px" @bind-Value="@FormModel.TextField1" />
</Template>
</FormItem>


<FormItem>
<Template>
<div>Text Field 2</div>
<TelerikTextBox Width="350px" @bind-Value="@FormModel.TextField2" />
</Template>
</FormItem>


<FormItem>
<Template>
<div>Dropdown 2</div>
<TelerikComboBox Width="350px" Data="@Dropdown2Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown2Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>


<FormItem ColSpan="2">
<Template>
<div>Dropdown 3</div>
<TelerikComboBox Width="350px" Data="@Dropdown3Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown3Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>


<FormItem>
<Template>
<div>Dropdown 4</div>
<TelerikComboBox Width="350px" Data="@Dropdown4Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown4Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>


<FormItem>
<Template>
<div>Dropdown 5</div>
<TelerikComboBox Width="350px" Data="@Dropdown5Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown5Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>


<FormItem>
<Template>
<div>Dropdown 6

Form

asked on 16 Apr 2025

0 answers

20 views

For nested folders with the same name, clicking on any folder redirects to the main folder with the same name FileManager

Hi Team,

For nested folders with the same name, clicking on any folder redirects to the main folder with the same name FileManager

For eg.: I have folder path: "C:AppName/Storage/FileStorage/Test/Test/Test/Test/Test/Test"

Now if I click on second last folder with name "Test" from breadcrumb, it redirects to the first folder with name "Test".

Can you help me with this?

FileManager

asked on 16 Apr 2025

0 answers

21 views

Breadcrumb does not display full path if the path is too long FileManager

Hi Team,

Breadcrumb does not display full path if the path is too long FileManager

For eg.: My path is "C:/AppName/Storage/FileStorage/New folder/New folder/New folder/New folder/New folder"

But breadcrumb only displays: "C:/AppName/Storage/FileStorage/New folder/New folder/New folder"

Is it because there is no space to show the complete path?

I have debug my code and checked, the path of FileManager is correct. What may be the issue here?

FileManager

updated question on 16 Apr 2025

2 answers

23 views

TelerikWindow retains state if reopened

Hi,
I'm developing a Blazor web app with:
- .NET9,
- rendering

@rendermode="new InteractiveWebAssemblyRenderMode(prerender: true)

I would like to show data starting from the selected record in a grid in a telerik window, where starting from this data I would populate various fields in a chain.
This data could be modified inside the telerik window and saved using a button.
This use is possible but there is a problem to solve: if I modify the data in the telerik window and then close it, the modified data is maintained if I reopen the telerik window.

I'll give an example:
This is the code available in the telerik Blazor guides:

<TelerikButton OnClick="@OpenWindow">Open Window</TelerikButton>

<TelerikWindow @ref="WindowRef" @bind-Visible="@WindowVisible">
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        <p role="status">Current count: @CurrentCount</p>
        <TelerikButton OnClick="IncrementCount">Increment Count</TelerikButton>
    </WindowContent>
</TelerikWindow>

@code {
    private TelerikWindow? WindowRef { get; set; }

    private bool WindowVisible { get; set; }

    private int CurrentCount { get; set; }

    private void IncrementCount()
    {
        CurrentCount++;

        WindowRef?.Refresh();
    }

    private void OpenWindow()
    {
        WindowVisible = true;
    }
}

If
- I open the telerik window and increase the counter to 5
- I close the window
- I click on the button again, the window does not show me the count at 0 but at 5.

I would like to know if there is a simple way to recreate from scratch the telerik window every time it is called, without keeping the previous state.

P.S.
I would not want to worry about manually resetting the fields every time I open the telerik window

Thanks

Popup

Window

answered on 16 Apr 2025

1 answer

16 views

Focusing Programmatically Resets Textbox Positioning

I have a scenario where I need to shift the position of TelerikTextBox's `k-input-inner` element using the CSS properties`top` and `left`. This works fine until I use FocusAsync() to programmatically focus on the textbox. This causes the textbox to reset its position and disregard the position styling.

Please see the REPL link below. To reproduce, click on the "Focus" button and observe how the placeholder shifts.

https://blazorrepl.telerik.com/wTkelobC56YIRoZL13

To note, the desired view is with the input text position shifted from the original position like so: