or
1 answer
79 views
i am using TelerikDatePicker. I want to use user's timezone based date which i am getting in "OnAfterRenderAsync" but the telerikdatepicker is mixing up between server's date and user's timezone based date.
when i click today instead of selecting user's timezone based date(3 july), it selects the server based date i-e 2 july (which is different). Moreoever, as per in attached image user's timezone based date is 3 july 2025 and server's date is 2 july 2025 and the font of 2 july 2025 is red however the highlighter has moved to 3 july 2025.
I want the datepicker to use user's timezone based date and deal it like it has been dealing with server's date.
this is my razor page
<TelerikDatePicker Format="dd-MMM-yyyy"
@bind-Value="@abc.rcvdDateDW"
Enabled="@isDetailEditable"
OnOpen="OnDatePickerOpenDW"
OnClose="OnDatePickerCloseDW" />
this is how i am setting things up in my razor.cs
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && !_initialized)
{
_initialized = true;
try
{
var userTimeZoneId = await tokenStorage.GetTokenAsync(UserTimeZoneInfokey);
var timeZoneId = string.IsNullOrWhiteSpace(userTimeZoneId) ? "UTC" : userTimeZoneId;
TimeZoneInfo userTimeZone = TimeZoneInfo.FindSystemTimeZoneById(timeZoneId);
userTimeInTimeZone = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, userTimeZone);
}
catch
{
userTimeInTimeZone = DateTime.UtcNow; // fallback
}
await ShowData();
InitializeTabsBasedOnPermissions();
await Tasks();
StateHasChanged();
}}
public async Task OnDatePickerOpenDW(DatePickerOpenEventArgs args)
{
if (abc.rcvdDateDW == null && !isTempDateDWReceived)
{
abc.rcvdDateDW = userTimeInTimeZone;
isTempDateDWReceived = true;
StateHasChanged();
}
}
public async Task OnDatePickerCloseDW(DatePickerCloseEventArgs args)
{
if (isTempDateDWReceived && abc.rcvdDateDW == userTimeInTimeZone)
{
abc.rcvdDateDW = null;
isTempDateDWReceived = false;
StateHasChanged();
}
}
thats the output i am getting
Does telerikdatepicker do support this or not ? if yes kindly guide me how can i achieve this. I have tried many ways but none of them worked. Thanks
when i click today instead of selecting user's timezone based date(3 july), it selects the server based date i-e 2 july (which is different). Moreoever, as per in attached image user's timezone based date is 3 july 2025 and server's date is 2 july 2025 and the font of 2 july 2025 is red however the highlighter has moved to 3 july 2025.
I want the datepicker to use user's timezone based date and deal it like it has been dealing with server's date.
this is my razor page
<TelerikDatePicker Format="dd-MMM-yyyy"
@bind-Value="@abc.rcvdDateDW"
Enabled="@isDetailEditable"
OnOpen="OnDatePickerOpenDW"
OnClose="OnDatePickerCloseDW" />
this is how i am setting things up in my razor.cs
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && !_initialized)
{
_initialized = true;
try
{
var userTimeZoneId = await tokenStorage.GetTokenAsync(UserTimeZoneInfokey);
var timeZoneId = string.IsNullOrWhiteSpace(userTimeZoneId) ? "UTC" : userTimeZoneId;
TimeZoneInfo userTimeZone = TimeZoneInfo.FindSystemTimeZoneById(timeZoneId);
userTimeInTimeZone = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, userTimeZone);
}
catch
{
userTimeInTimeZone = DateTime.UtcNow; // fallback
}
await ShowData();
InitializeTabsBasedOnPermissions();
await Tasks();
StateHasChanged();
}}
public async Task OnDatePickerOpenDW(DatePickerOpenEventArgs args)
{
if (abc.rcvdDateDW == null && !isTempDateDWReceived)
{
abc.rcvdDateDW = userTimeInTimeZone;
isTempDateDWReceived = true;
StateHasChanged();
}
}
public async Task OnDatePickerCloseDW(DatePickerCloseEventArgs args)
{
if (isTempDateDWReceived && abc.rcvdDateDW == userTimeInTimeZone)
{
abc.rcvdDateDW = null;
isTempDateDWReceived = false;
StateHasChanged();
}
}
thats the output i am getting
Does telerikdatepicker do support this or not ? if yes kindly guide me how can i achieve this. I have tried many ways but none of them worked. Thanks
Tsvetomir
Telerik team
answered
on
04 Jul 2025
1 answer
80 views
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
1 answer
57 views
Hi,
How can I remove this?
Meaning that green part of Telerik's Grid header.
Thanks!
Regards,
Bohdan
How can I remove this?
Meaning that green part of Telerik's Grid header.
Thanks!
Regards,
Bohdan
Dimo
Telerik team
answered
on
03 Jul 2025
0 answers
41 views
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>What I have:
- SearchState.SelectedItems is an IList<ChargeUIResult> that tracks checkbox selection automatically.
- Clicking a row currently does nothing to that list.
- When the user clicks a row, add that item to SearchState.SelectedItems (if it isn’t already there).
- When clicking a row again (or unchecking its checkbox), remove it from the list.
- Keep the built‑in checkbox selector in sync with row clicks and vice versa.
1 answer
130 views
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?
1 answer
51 views
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?
Hristian Stefanov
Telerik team
answered
on
30 Jun 2025
1 answer
35 views
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.
1 answer
44 views
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
...
Dimo
Telerik team
answered
on
30 Jun 2025
1 answer
46 views
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?
Ivan Danchev
Telerik team
answered
on
29 Jun 2025
1 answer
90 views
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?
Ivan Danchev
Telerik team
answered
on
29 Jun 2025
