Questions on UI for Blazor Forum

1 answer

52 views

Importing and reading Excel file to Workbook with XlsxFormatProvider

I'm trying to read from an existing Excel file that the user will upload via FileSelect. When it gets to the last line trying to set the workbook variable:

workbook = formatProvider.Import(selectedFile.Stream, TimeSpan.FromSeconds(30));

...I get the error, "'System.NotImplementedException' in Telerik.Zip.dll: 'Synchronous actions on the file stream is not supported by the Blazor framework in Blazor Server-side apps due to the SignalR communication between the client and the host. Use the 'ReadAsync' method instead.'"

If I try to copy the stream first like this:

await selectedFile.Stream.CopyToAsync(ms);

It never gets past that line and there is no error.

Here is my stripped code:

@page "/uploadtest"
@using Microsoft.EntityFrameworkCore
@using IGPOSCore.Models
@using Microsoft.IdentityModel.Tokens
@using Telerik.Blazor.Components
@using Telerik.Blazor.Components.FileSelect
@using System.ComponentModel
@using Telerik.Windows.Documents.Spreadsheet.FormatProviders
@using Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx
@using Telerik.Windows.Documents.Spreadsheet.Model

<TelerikFileSelect @ref="fileSelect" OnSelect="@OnFileSelected" Multiple=false />
    <TelerikButton OnClick="@(() => LoadExcelFile())" >
        Upload
    </TelerikButton>

@code {
    private TelerikFileSelect? fileSelect { get; set; }
    private FileSelectFileInfo? selectedFile { get; set; }
    private Workbook? workbook { get; set; }

    private async Task OnFileSelected(FileSelectEventArgs args)
    {
        if (args.Files != null && args.Files.Any())
        {
            selectedFile = args.Files.First();
        }
    }

    public async Task LoadExcelFile()
    {
        Guid submissionId = Guid.NewGuid();

        if (selectedFile != null)
        {
            Console.WriteLine($"Processing file: {selectedFile.Name} - {selectedFile.Size} bytes");

            IWorkbookFormatProvider formatProvider = new XlsxFormatProvider();
            @* var ms = new MemoryStream();
            await selectedFile.Stream.CopyToAsync(ms);
            workbook = formatProvider.Import(ms, TimeSpan.FromSeconds(30)); *@
            workbook = formatProvider.Import(selectedFile.Stream, TimeSpan.FromSeconds(30));
            
        }
    }
}

FileSelect

answered on 14 Feb 2025

1 answer

29 views

Telerik Grid with row virtualization always needs to load items when scrolling upwards.

When using the Data Grid with row virtualization we set a pagesize large enough so with normal usage you almost never see the rows loading when scrolling downwards. However when scrolling upwards rows always need to be loaded. The pagesize only affects the items loaded downwards.

From a user experience this is counterintuitive because the rows are visible when first opening the grid, but after scrolling down and back up the rows now need to be loaded again.

Is there a way to have items preloaded in both directions so we always get a smooth user experience?

Grid

answered on 12 Feb 2025

1 answer

36 views

Gnatt Chart - Timeline Side - How to make the width of the Column Smaller?

Any ideas on how to make the width of the column on the timeline smaller?

I can make the text smaller by updating this css.

.k-gantt .k-table-td

However, I cannot figure out the right combination to adjust for column widths on the time line side.

Gantt

answered on 12 Feb 2025

1 answer

33 views

TelerikGridLayoutRef.GridLayoutRows.Add doesn't exist

How do I add a new row to the GridLayout through code? Then, I'll need to add a new GridLayoutItem to the new row. Then, I need to add a custom component to that GridLayoutItem.

GridLayout

answered on 06 Feb 2025

1 answer

35 views

TelerikCheckBox how to make the checkbox bolder?

On my page I have:

and I put the following at the bottom of the page:

.k-checkbox {
/* Make the border a little darker than the default */
border-color: rgba(0, 0, 0, 0.4) !important;
}

The checkboxes box appears just as i want it.

But I now want that for my whole project. This is were I am having an issue my entry in the app.css seems to be ignored and I am not sure why.

App.css:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<base href="@MyNavigationManager.BaseUri" />

<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

<link rel="stylesheet" href="MarginAnalysis.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="InteractiveServer" />

@* Telerik Stuff *@
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
@* Needed for the Telerik 5.0.0 icons! *@
<link href="https://blazor.cdn.telerik.com/blazor/5.0.0/kendo-font-icons/font-icons.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="app.css" />
</head>

I put the App.ccs at the end. As far as I understand it that should make it work above teleriks theme css.

What am I missing?

Thanks

Deasun.

Checkbox

answered on 06 Feb 2025

0 answers

32 views

Highlight row on rightclick in Treelist

We were using the TelerikTreeList with

SelectionMode="TreeListSelectionMode.Single"
SelectedItems="@SelectedItems"

with a ContextMenu. On Rightclick we wanted to open the ContextMenu but also set the row as Selected.

If a row is selected and we rightclick on another one both will be selected. We don;t know exactly why and did not expect two rows to ever be selected after setting the SelectionMode to single.

this is the code we use for selecting on right click.

private async Task OnContextMenu(TreeListRowClickEventArgs args)
{
    SelectedItems = [(TItem)args.Item];
    await InvokeAsync(StateHasChanged);

Do you have any idea how to fix it?

ContextMenu

TreeList

asked on 03 Feb 2025

1 answer

47 views

Grid RowClick event is fired AFTER CommandButton event in a column?

Grid EditMode = InCell.

Grid SelectionMode="GridSelectionMode.Single"

SelectedItems="mySelectedItems"

I have a command button in one of my Grid columns.

I have OnRowClick handler for the Grid.

I have GridCommandColum with GridCommandButton and a OnClick command handler.

The grid populates with data, no row currently selected. User clicks on the GridCommandButton and that event gets fired BEFORE the OnRowClick event. Logically this is not correct as the button is contained within the parent which is the Grid, so the OnRowClick should fire first before the OnClick for command button ... I have no way to work around this issue?

UPDATE: correction, the OnRowClick event doesn't fire at all if I click on a GridCommandButton.

Grid

answered on 03 Feb 2025

1 answer

31 views

Blazor AnimationContainer relative placement

Our designer has discovered the Telerik for Blazor AnimationContainer and is excited to use it, including in areas of our site that collapse and expand. This makes the absolute placement a bit of a problem. Is there an official workaround to this limitation? A good way to simulate relative placement of the AnimationContainer?

AnimationContainer

answered on 31 Jan 2025

1 answer

24 views

SchedulerPopupEditSettings MaxHeight

When setting:

<SchedulerPopupEditSettings MaxHeight="600px"></SchedulerPopupEditSettings>

The height of the popup is larger than the browser window on a screen where the screen resolution is 3840x1600 and the browser is maximized. Moreover, there is no visible change to the height of the pop-up with or without the setting.

I also attempted to use the TelerikWindow as such:

<TelerikWindow Modal="true" Size="WindowSize.Medium" Visible="@CustomEditFormShown">
    <WindowTitle>Playtest Data</WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" OnClick="@RefreshData" />
    </WindowActions>
    <WindowContent>
        @* This component is in the Pages folder *@
        <PlaytestEditor Playtest="@CurrentPlaytest" OnPlaytestChanged="@RefreshData" />
    </WindowContent>
</TelerikWindow>

Here's the whole thing:

<PageTitle>Playtest | Calendar</PageTitle>

<TelerikScheduler class="text-center mt-5"
                @ref="@SchedulerRef" 
                Data="@Playtests" 
                @bind-Date="@DefaultDate" 
                @bind-View="@DefaultView"
                OnUpdate="@UpdatePlaytests"
                OnCreate="@AddPlaytest"
                OnDelete="@DeletePlaytest"
                OnEdit="@EditHandler"
                ConfirmDelete="true"
                AllowCreate="true"
                AllowDelete="true"
                AllowUpdate="true"
                IdField="@(nameof(SessionModel.ID))"
                RecurrenceRuleField="@(nameof(SessionModel.RecurrencRule))"
                RecurrenceExceptionsField="@(nameof(SessionModel.RecurrenceExceptions))"
                RecurrenceIdField="@(nameof(SessionModel.RecurrenceID))">
    <SchedulerSettings>
        <SchedulerPopupEditSettings MaxHeight="600px"></SchedulerPopupEditSettings>
    </SchedulerSettings>
    <SchedulerViews>
        <SchedulerDayView WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
        <SchedulerWeekView WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
    </SchedulerViews>
</TelerikScheduler>

<TelerikWindow Modal="true" Size="WindowSize.Medium" Visible="@CustomEditFormShown">
    <WindowTitle>Playtest Data</WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" OnClick="@RefreshData" />
    </WindowActions>
    <WindowContent>
        @* This component is in the Pages folder *@
        <PlaytestEditor Playtest="@CurrentPlaytest" OnPlaytestChanged="@RefreshData" />
    </WindowContent>
</TelerikWindow>