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>

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:

1. 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?

2. 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

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:

1. 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?

2. 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

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

<TelerikNumericTextBox @ref="P21NumericTextEditorRef"
                       Class=" p21-numerictextbox-right"
                       @bind-Value="_value"
                       Arrows="false"/>

This does not work.  Any thoughts?

Thank you!

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.

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>

Hy,

is there a way to customize the template visualization of each day in the DatePicker component?

I need to change the style and colors of the days according to different conditions. For examples:

Thanks in advance