Unplanned
Last Updated:
21 Nov 2025 11:12
by ADMIN
Daniel
Created on:
18 Nov 2025 17:58
Category:
TimePicker
Type:
Bug Report
TimePicker within a ListView on mobile issues
We recently came across a unique situation where if you try to use a TimePicker within a ListView on a mobile view, the user is unable to change the time.
Issue: User is unable to switch time from the current value. If you try to select a different hour, minute, second, or AM/PM it snaps back to the current value and will never bind to a new value. If you switch out of mobile view the Adaptive Mode takes it out of full screen and it works.
Recreation Steps:
Work-Around: We replaced the ListView with some simple divs and then everything works as intended. Additionally you can also just remove the Adaptive Mode and it will work within a ListView but you no longer get the fullscreen view.
Example Code:
Issue: User is unable to switch time from the current value. If you try to select a different hour, minute, second, or AM/PM it snaps back to the current value and will never bind to a new value. If you switch out of mobile view the Adaptive Mode takes it out of full screen and it works.
Recreation Steps:
- Create a ListView
- Create a TimePicker within the ListView
- Set the Adaptive Mode on the TimePicker to Auto (This is key, if this property is removed it works)
- Run the page and switch to a mobile view format within the browse
Work-Around: We replaced the ListView with some simple divs and then everything works as intended. Additionally you can also just remove the Adaptive Mode and it will work within a ListView but you no longer get the fullscreen view.
Example Code:
@page "/test-timepicker-listview"
<h3>TimePicker in ListView Test</h3>
<TelerikListView Data="@TestItems" Width="100%">
<HeaderTemplate>
<div style="padding: 10px; background-color: #f0f0f0; font-weight: bold;">
Time Entry Items
</div>
</HeaderTemplate>
<Template>
<div style="padding: 15px; border-bottom: 1px solid #ddd;">
<div style="margin-bottom: 10px;">
<strong>Item:</strong> @context.Name
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<label>Start Time:</label>
<TelerikTimePicker @bind-Value="@context.StartTime" Format="hh:mm tt" Width="150px"
AdaptiveMode="AdaptiveMode.Auto" />
</div>
<div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
<label>End Time:</label>
<TelerikTimePicker @bind-Value="@context.EndTime" Format="hh:mm tt" Width="150px"
AdaptiveMode="AdaptiveMode.Auto" />
</div>
</div>
</Template>
</TelerikListView>
@code {
private List<TimeEntryItem> TestItems { get; set; } = new();
protected override void OnInitialized()
{
// Initialize with some test data
TestItems = new List<TimeEntryItem>
{
new TimeEntryItem { Id = 1, Name = "Morning Shift", StartTime = new DateTime(2025, 11, 18, 8, 0, 0), EndTime = new
DateTime(2025, 11, 18, 12, 0, 0) },
};
}
public class TimeEntryItem
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}
}
1 comment
ADMIN
Dimo
Posted on:
21 Nov 2025 11:12