Questions on UI for Blazor Forum

2 answers

18 views

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

12 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

11 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

13 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

answered on 25 Jun 2025

0 answers

15 views

TypeError: Cannot read properties of null (reading 'addEventListener')

I have this javascript exception when use MultiColumnComboBox (but sometime also with ComboBox / DropDown).

If i continue debugging it go without issue, but it break always on component load.

ComboBox

DropDownList

MultiColumnComboBox

asked on 18 Jun 2025

1 answer

9 views

DockManager flickers when restoring state after navigation

Hi,

I need some help with the DockManager. Is it currently possible to prevent the flickering/loading effect when navigating to a page and restoring the DockManagerState from local storage? Once I pin delegate(with setting state inside directly to args or with SetState method) to OnStateInit (because I want to control Layout state and reapply it when navigating) -> it starts flickering loading. Once I don't pin to OnStateInit(with the same delegate mech I discribed earlier) -> everything works fine, but state can't be saved and recreated.

The behavior looks like a short reload or UI flicker when the state is reapplied.

I followed the setup exactly as shown in the official Demo, but seems like it is working nice only after DockManager is fully rendered and then changing it's state.

Thanks in advance!

DockManager

answered on 18 Jun 2025

1 answer

12 views

treelist paging selection

I have a treelist with a checkbox for selection. However, my list is long so I added pagination. I help the user by pre-selecting a node and I need to display the page that exposes the first selected node. How do I do this?

|

                        <TelerikTreeList @ref=@TreeListRef
                                         Class="gsi-padding-0"
                                         Data="@UserGroups"
                                         SelectedItems="@SelectedGroups"
                                         IdField="Id"
                                         Pageable=true
                                         PageSize="10"
                                         ParentIdField="ParentId"
                                         SelectionMode="TreeListSelectionMode.Single"
                                         OnRowRender="@HandleRowRender"
                                         SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Group> m) => OnGroupSelected(m))">

                            <TreeListColumns>
                                <TreeListCheckboxColumn SelectAll="false"
                                                        SelectChildren="false"
                                                        CheckBoxOnlySelection="true"
                                                        Width="64px" />

                                <TreeListColumn Field="Name" Title="Name" Expandable="true">
                                    <Template>
                                        @{
                                            var item = context as Gsi.Customer.Models.Group;
                                            <img height="32" width="32" src="@item.ImageUrl" />
                                            @item.Name
                                        }
                                    </Template>
                                </TreeListColumn>
                            </TreeListColumns>
                        </TelerikTreeList>

TreeList

answered on 17 Jun 2025

2 answers

25 views

TreeList Expand/Collapse

I copied this example and got it working:

https://www.telerik.com/blazor-ui/documentation/knowledge-base/treelist-expand-nodes-programmatically

Can you tell me how to default my TreeList to have everything expanded when my page loads? It seems running the SetTreeListExpandedItems after loading my data does not expand everything automatically... which is confusing to me.

            <TelerikCard>
                <CardBody Class="gsi-padding-0">
                    <TelerikButton OnClick="@SetTreeListExpandedItems"
                                   Class="gsi-width-100pct">
                        Expand/Collapse Groups
                    </TelerikButton>
                </CardBody>
            </TelerikCard>

            <TelerikTreeList @ref=TreeListRef
                             Data="@Groups"
                             SelectedItems="@SelectedGroups"
                             IdField="@nameof(Gsi.Customer.Models.Group.Id)"
                             ParentIdField="@nameof(Gsi.Customer.Models.Group.ParentId)"
                             OnStateInit="((TreeListStateEventArgs<Gsi.Customer.Models.Group> args) => OnStateInitHandler(args))"
                             Pageable="false"
                             Sortable="false"
                             SelectionMode="TreeListSelectionMode.Single"
                             FilterMode="@TreeListFilterMode.FilterMenu"
                             SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Group> m) => OnGroupSelected(m))">
                <TreeListColumns>
                    <TreeListColumn Field="Name" Title="Group Filter" Expandable="true">
                        <Template>
                            @{
                                var item = context as Gsi.Customer.Models.Group;
                                <img height="32" width="32" src="@item.ImageUrl" />
                                @item.Name
                            }
                        </Template>
                    </TreeListColumn>
                </TreeListColumns>
            </TelerikTreeList>

TreeList

answered on 16 Jun 2025

0 answers

10 views

Grid Grouping initially renders rows without grouping

Hello,
I’m using a GroupDescriptor and have disabled LoadGroupsOnDemand for data sets under 100 records. I’ve noticed a bug where, on first render, all rows appear ungrouped for a brief moment, then “jump” into their correct groups a split-second later.

When I add a debounce to the OnRead event, the issue disappears, which suggests a correlation between a heavily loaded OnRead handler and the delayed grouping.

What could be causing this behavior, and has anyone encountered something similar?

Grid