Questions on UI for Blazor Forum

1 answer

20 views

Rowclick trigger OnStateChangeHanlder Prevent from calling function

I'm using the Blazor TelerikGrid component with SelectionMode="GridSelectionMode.Multiple".

I have an OnRowClick handler to manually toggle selection (see below), and I bind the selected items via SelectedItems="@SearchState.SelectedItems".

<TelerikGrid @ref="SearchGrid"
             TItem="@ChargeUIResult"
             SelectionMode="GridSelectionMode.Multiple"
             SelectedItems="@SearchState.SelectedItems"
             SelectedItemsChanged="@((IEnumerable<ChargeUIResult> args) => SetSelectedItem(args))"
             OnRowClick="@OnRowClickHandler"
             ...>
</TelerikGrid>

void OnRowClickHandler(GridRowClickEventArgs args)
{
    var currItem = args.Item as ChargeUIResult;

    if (SearchState.SelectedItems.Any(x => x.Id == currItem?.Id))
    {
        SearchState.SelectedItems = SearchState.SelectedItems.Where(x => x.Id != currItem?.Id);
    }
    else
    {
        SearchState.SelectedItems = SearchState.SelectedItems.Concat(new[] { currItem });
    }

    SelectedItem = currItem;
    ShouldRenderSelectedItem = true;
    args.ShouldRender = false;
}

What I want to achieve is:

When a checkbox is clicked (i.e., selection happens),

I want to get the first selected item from SearchState.SelectedItems and bind or use it immediately (e.g., assign it to SelectedItem or update the UI).

💬 My questions are:

Is there a built-in event for detecting checkbox selection (apart from OnRowClick)?

What's the recommended way to access the first selected item when selection changes via the checkbox — not just row clicks?

Can SelectedItemsChanged help with this, and if so, how should I modify the SetSelectedItem logic?

Grid

answered on 30 Jun 2025

1 answer

12 views

Can the TelerikMenu generate anchor tags instead of spans?

As of right now, the TelerikMenu generates a menu where each menu item is a span with an onclick handler that navigates to the page. It looks like this:

<li data-id="..." tabindex="0" class="k-item k-menu-item k-first" role="menuitem" aria-live="polite">
<span class="k-link k-menu-link ">
<span class="k-menu-link-text">
Page Title
</span>
</span>
</li>

However, because they are only spans, when right clicking on a menu item, there is no option to open the link in a new tab. In addition, middle clicking the menu item doesn't work either. Can these be changed to anchor tags so menu items can be opened in a new tab? I know there is an ItemContext that can be added to the TelerikMenu, but I would like to keep all the styling of the default TelerikMenu.

Menu

Styling

answered on 30 Jun 2025

1 answer

13 views

Room for Animation Container

Can you tell me how to force the Grid Layout to allow space for my TelerikAnimationContainer? It gets chopped off when the 3rd row is "short". I don't want the scroll bar to accommodate the height. I want to see the entire filter.

Fully opened (When data extends the Grid):

Short Closed:

Short Open

            <TelerikGridLayout Class="grid-layout">
                <GridLayoutRows>
                    <GridLayoutRow Height="28px" />
                    <GridLayoutRow />
                    <GridLayoutRow />
                </GridLayoutRows>
                <GridLayoutItems>
                    <GridLayoutItem Row="1">
                        @if (Groups?.Count > 0)
                        {
                            <TelerikButton OnClick="@OnCreate"
                                           Class="gsi-width-100pct gsi-padding-0">
                                Create New
                            </TelerikButton>
                        }
                    </GridLayoutItem>
                    <GridLayoutItem Row="2">
                        <div>
                            <div class="gsi-background-color-light" style="height: 41px; display:flex;justify-content:space-between;">

                                <div class="align-self-center gsi-font-kendo gsi-margin-0">
                                    Patient Filters
                                </div>
                                <TelerikButton FillMode="Clear"
                                               Class="gsi-border-width-0 gsi-border-color-white gsi-padding-8"
                                               Icon="@(Telerik.SvgIcons.SvgIcon.Filter)"
                                               OnClick="@GridFilterExpandCollapse" />

                            </div>

                            <TelerikAnimationContainer @ref="@FilterContainer"
                                                       Class="gsi-background-color-light gsi-margin-5 k-rounded-0"
                                                       Width="100%"
                                                       Height="100vm">

                                <TelerikStackLayout Spacing="1px" Class="gsi-margin-5">
                                    <TelerikCard Width="33vh">
                                        <CardBody>

                                            @if (SessionOption1Items?.Count > 0)
                                            {
                                                <div class="form-group-short gsi-max-width-250">
                                                    <label class="col-form-label">@SessionOption1Template.Name</label><br />
                                                    <TelerikDropDownList Data="@SessionOption1Items"
                                                                         @bind-Value="@SessionOptionIndex1"
                                                                         TextField="Name" ValueField="Id" />
                                                </div>

                                                @if (SessionOption2Items?.Count > 0)
                                                {
                                                    <div class="form-group-short gsi-max-width-250">
                                                        <label class="col-form-label">@SessionOption2Template.Name</label><br />
                                                        <TelerikDropDownList Data="@SessionOption2Items"
                                                                             @bind-Value="@SessionOptionIndex2"
                                                                             TextField="Name" ValueField="Id" />
                                                    </div>
                                                }
                                            }
                                            else
                                            {
                                                <small>No Defined Filter</small>
                                            }

                                        </CardBody>
                                    </TelerikCard>
                                    <TelerikCard Width="33vh">
                                        <CardBody>

                                            <div class="form-group-short gsi-max-width-250">
                                                <label class="col-form-label">Date Range</label><br />
                                                <TelerikDropDownList Data="@DateRangeOptions"
                                                                     @bind-Value="@DateRangeIndex"
                                                                     TextField="Name" ValueField="Id" />
                                            </div>

                                            <div class="form-group-short gsi-max-width-250">
                                                <label class="col-form-label">Group Behavior</label><br />
                                                <TelerikDropDownList Data="@GroupFilterOptions"
                                                                     @bind-Value="@GroupFilterIndex"
                                                                     TextField="Name" ValueField="Id" />
                                            </div>

                                        </CardBody>
                                    </TelerikCard>
                                    <TelerikCard Width="34vh">
                                        <CardBody>

                                            <div class="form-group-short gsi-max-width-250">
                                                <label class="col-form-label">Status</label><br />
                                                <TelerikDropDownList Data="@IsActiveFilterOptions"
                                                                     @bind-Value="@IsActiveIndex"
                                                                     TextField="Name" ValueField="Id" />
                                            </div>

                                            <div class="form-group-short align-bottom">
                                                <label class="col-form-label gsi-color-white">Apply Filter</label><br />
                                                <TelerikButton OnClick="OnFilterChanged"
                                                               Class="gsi-background-color gsi-color-white gsi-width-100pct">
                                                    Apply Filter
                                                </TelerikButton>
                                            </div>
                                        </CardBody>
                                    </TelerikCard>
                                </TelerikStackLayout>

                            </TelerikAnimationContainer>
                        </div>
                    </GridLayoutItem>
                    <GridLayoutItem Row="3">
                        <TelerikGrid Data=@Sessions
...

answered on 30 Jun 2025

1 answer

21 views

How to prevent adding and removing columns in the spreadsheet component

I need to lock down the spreadsheet and prevent the user from adding or removing columns. I'd like to hide the highlighted items in the context menu below. How can I accomplish this?

Spreadsheet

answered on 29 Jun 2025

1 answer

15 views

Clear PdfViewer of Loaded PDF (Blazor serverside)

I have a page where users select a row in a grid to change the document that should be loaded into the PdfViewer component (Blazor serverside). They will not have the ability to use the open document button or select document button provided by the component.

When I select a row in the grid, the PdfViewer component shows the corresponding pdf properly. However, if the page gets in a state where there are no rows in that grid, I want the PdfViewer component to revert to an empty state. It should not be showing the previously selected PDF.

I have tried the following based on a previous post (https://www.telerik.com/forums/how-do-i-clear-the-pdfviewer):

-setting the byte array to []

-setting the byte array to null

-calling Rebind on the PdfViewer component

-calling StateHasChanged

-having the method changing the byte array be synchronous and asynchronous

Setting the byte array to [] just flashes the loading indicator briefly but the component still shows the previous pdf. Setting the byte array to null just keeps the loading indicator displayed indefinitely with the previously displayed pdf underneath. The other suggestions had no other effect.

How do I unload the PDF from the PdfViewer component?

PDFViewer

answered on 29 Jun 2025

2 answers

21 views

Predictable stack layout heights

Can you tell me how to get a consistent height for my huge "Create New" button? I expected it to just use the space it needed instead of being 5X the size it is.

.gsi-height-32px{
    height: 32px !important;
}

<TelerikStackLayout Height="100%"
                    Width="100%"
                    Orientation="StackLayoutOrientation.Vertical">

    <TelerikButton OnClick="@OnCreate"
                   Class="gsi-width-100pct gsi-height-32px">
        Create New
    </TelerikButton>

    <TelerikGrid Data=@Patients
                 SelectedItems="SelectedPatients"
                 Pageable=true
                 PageSize="20"
                 Height="100%"
                 SelectionMode=GridSelectionMode.Single
                 SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Person> m) => OnPatientSelected(m))">

        <GridColumns>
            <GridColumn Field=@nameof(Person.FirstName) Title="First Name" />
            <GridColumn Field=@nameof(Person.LastName) Title="Last Name" />
            <GridColumn Field=@($"{nameof(Patient)}.{nameof(Patient.DateOfBirthDisplay)}") Title="Date of Birth" Width="125px" />
            <GridColumn Field=@($"{nameof(Patient)}.{nameof(Patient.GenderDisplay)}") Title="Sex" Width="100px" />
            <GridColumn Field=@nameof(Person.LastSessionTimestampDisplay) Title="Last Session" />
        </GridColumns>
    </TelerikGrid>
</TelerikStackLayout>

Button

Grid

StackLayout

answered on 27 Jun 2025

1 answer

16 views

How to display a full custom component below each row while keeping standard columns visible in TelerikGrid

Hello,

I’m working with the TelerikGrid for Blazor and I have a specific layout need.

I would like to display a full custom component (for example, a "MailCard" or a detail panel) under each row of the grid, while still keeping the standard grid columns (like name, date, etc.) visible as usual.

I explored the DetailTemplate, which allows me to show custom content per row, but it requires a manual click on the expand (+) button, and I haven't found any official way to auto-expand all rows by default — especially across pages.

So my two questions are:

Is there a way to embed a full custom component directly within a row, without using the DetailTemplate, while still keeping the columns aligned above?
If not, is there a supported method to auto-expand all rows' DetailTemplate by default, even when paging is enabled?

Thanks in advance for your help or suggestions.

Best regards,

Kenzi

Filter

Grid

GridLayout

answered on 26 Jun 2025

0 answers

13 views

How to display a full custom component below each row while keeping standard columns visible in TelerikGrid

Hello,

I’m working with the TelerikGrid for Blazor and I have a specific layout need.

I would like to display a full custom component (for example, a "MailCard" or a detail panel) under each row of the grid, while still keeping the standard grid columns (like name, date, etc.) visible as usual.

I explored the DetailTemplate, which allows me to show custom content per row, but it requires a manual click on the expand (+) button, and I haven't found any official way to auto-expand all rows by default — especially across pages.

So my two questions are:

Is there a way to embed a full custom component directly within a row, without using the DetailTemplate, while still keeping the columns aligned above?
If not, is there a supported method to auto-expand all rows' DetailTemplate by default, even when paging is enabled?

Thanks in advance for your help or suggestions.

Best regards,
Kenzi

General Discussions

Grid

asked on 25 Jun 2025

1 answer

14 views

Right Align a TelerikNumericTextBox

I have tried and tried to get a TelerikNumericTextBox aligned right. Honestly, for a numeric text box, this should just be a property on the component. Crazy.

Anyway, here is what I've tried and have been through all the forums, etc.

CSS

/* Right-align input in TelerikNumericTextBox for this component */
.p21-numerictextbox-right .k-numerictextbox .k-input-inner {
text-align: right !important;
}

Markup

This does not work. Any thoughts?

Thank you!

NumericTextBox