I am seeing a different behavior between Blazor UI 8 and 9.
Since upgrading to version 9 the GridToolBarTemplate is getting a k-toolbar-scrollable and the toolbar is getting wrapped in a div with k-toolbar-items k-toolbar-items-scroll classes. This is preventing my toolbar from rendering the way it did in version 8.
I added <GridToolBarSettings OverflowMode="GridToolBarOverflowMode.None" /> as he first element of the template but that had no effect.
How can I prevent the toolbar from getting this new div and classes?
Thanks,
Dave Shine
dshine@caseglide.com
I’m using the Telerik UI for Blazor <TelerikGrid> in a Razor Page. I’ve bound the grid to my view‑model like this:
<TelerikGrid @ref="SearchGrid"
TItem="ChargeUIResult"
Class="cgt-tables__table border-radius-top-zero cgt-charge-preview-grid"
Width="100%"
Pageable="true"
Sortable="false"
ConfirmDelete="true"
Resizable="true"
Groupable="false"
Navigable="false"
Reorderable="true"
EnableLoaderContainer="false"
FilterMode="GridFilterMode.None"
EditMode="GridEditMode.Popup"
SelectionMode="GridSelectionMode.Multiple"
ShowColumnMenu="true"
OnRead="@ReadItems"
SelectedItems="@SearchState.SelectedItems"
@bind-Page="@SearchState.CurrentPage"
@bind-PageSize="@SearchState.PageSize">
</TelerikGrid>
Problem:
User filters a grid but there is no "selected" row/item when filter returns results to the grid.
I'd like to set the selected item for a grid that supports:
SelectionMode="GridSelectionMode.Single" SelectedItems="@_selectedBookings"
I'm not sure what event I need to respond to, there doesn't appear to be a "Filter" button click event so I'm guessing I need to work with the Grid events like, OnUpdate or OnStateChanged?
Idea is to force first row to be selected from the Filter return set (which could be 0, 1, or many):
private void OnBookingGridUpdate(GridCommandEventArgs args)
{
if (_bookingList.Any())
{
var updatedItem = (BookingModel)args.Item;
_selectedBookings.Clear();
_selectedBookings.Add(updatedItem);
}
}
Thoughts?
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;
}
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
...
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:
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
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