Duplicated
Last Updated: 16 Jun 2026 06:01 by ADMIN
Being forced to implement OnRead requires me to deal with filtering and grouping behavior. The kendo.ui component allows me to just pass a sort delegate and not deal with filtering or grouping.
Unplanned
Last Updated: 07 Jul 2026 05:53 by ADMIN

The Telerik UI for Blazor TimePicker currently does not appear to expose an equivalent to the Kendo UI for jQuery TimePicker "focusTime" option.

https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/timepicker.md#focustime-datedefault-null

In Kendo UI for jQuery, focusTime allows the popup to open with a specific time focused without actually setting the selected value. This is useful when the picker has no value yet.

For example, let's say we want the time-picker to open up with the placeholder value of 08:00, how would we achieve this in Telerik UI for Blazor? Currently it defaults the placeholder to the current time.

Thanks

Need More Info
Last Updated: 16 Jul 2026 06:58 by ADMIN
# Telerik UI for Blazor — TabStrip bug report

Two related defects in `TelerikTabStrip` when the tab headers wrap onto multiple rows.
Filed for GLS (Governance & Legislative System), the resolution submission form
(`/submit-resolution`), which has 12 tabs.

## Environment

- **Telerik UI for Blazor:** v14 (please fill in the exact build number from your
  `LegislationApplications` package reference before submitting)
- **.NET:** 10.0
- **Render mode:** Blazor **Server** (Interactive Server), no WebAssembly
- **Browser:** reproduced in Chromium-based browsers on a wide (≥1200px) window
- **Component config (abridged):**
  ```razor
  <TelerikTabStrip @bind-ActiveTabId="ActiveTabId"
                   PersistTabContent="true"
                   OverflowMode="TabStripOverflowMode.None"   @* wide screens *@
                   ScrollButtonsPosition="TabStripScrollButtonsPosition.Split"
                   ScrollButtonsVisibility="TabStripScrollButtonsVisibility.Auto">
      @* 12 TabStripTabs; several use Visible="@boolExpr" (conditionally shown);
         most use a <HeaderTemplate> that renders the title plus an optional indicator icon *@
  </TelerikTabStrip>
  ```
- On a wide window with `OverflowMode="None"`, the 12 tab headers **wrap onto two rows**
  (row 1 ends at "Budget Impact"; row 2 begins at "OGR Consultation").

---

## Bug 1 — Wrapped tabs: activating a tab at the wrap boundary shows the WRONG content panel

### Repro
1. Open a form whose tab headers wrap to two rows (wide window, `OverflowMode="None"`, enough
   tabs to force a second row).
2. Activate the tab that sits at the **end of the first row** (its immediate left neighbour is on
   the same row; its right neighbour is on the next row). In our form: activate **External
   Documents**, then click **Budget Impact** (last tab on row 1).

### Expected
Budget Impact’s content panel is displayed.

### Actual
- The Budget Impact **header** receives focus/active styling, but the **content area still shows
  the previous tab’s panel** (External Documents).
- It is **deterministic** from the left-neighbour: a 2-second pause before clicking does **not**
  help.
- **Workarounds that do make it switch:** double-clicking the tab, or first activating a tab on a
  **different row** (e.g. OGR Consultation) and then clicking Budget Impact once.

### Proof the server/binding side is correct (it is a client-side rendering defect)
We instrumented the `ActiveTabId` setter and component renders. On the failing single click:
```
ActiveTabId 'tab-submitter'          -> 'tab-external-documents'   (click External)
RENDER  activeTab=tab-external-documents
ActiveTabId 'tab-external-documents' -> 'tab-budget-impact'        (click Budget Impact)
RENDER  activeTab=tab-budget-impact
(no further activity)
```
So `ActiveTabIdChanged` fires with the correct id, `ActiveTabId` becomes `tab-budget-impact`, and
the component re-renders exactly once with the correct active tab — yet the browser keeps showing
the External Documents content panel. The subsequent “rescue” clicks that fix the display produce
**no** server activity at all, confirming the mismatch is purely in the component’s client-side
content-panel switching.

### Confirmed trigger: the wrapping
Forcing the tab headers onto a **single row** with CSS (no other change) makes the bug disappear
entirely — every tab activates its correct panel on the first click:
```css
.k-tabstrip-items-wrapper { flex-wrap: nowrap; overflow-x: auto; }
.k-tabstrip-items         { flex-wrap: nowrap; }
```
This is not an acceptable final fix for us (the product requires the wrapped, all-tabs-visible
layout), but it isolates the cause: **`TelerikTabStrip` mismaps the active content panel when its
headers wrap to more than one row.**

---

## Bug 2 — `OverflowMode="Scroll"` throws an exception for this configuration

### Repro
Set `OverflowMode="TabStripOverflowMode.Scroll"` (instead of `None`) on the same TabStrip
(12 tabs, `PersistTabContent="true"`, several tabs with `Visible="@expr"` including one that is
currently `Visible="false"`, and `<HeaderTemplate>`s).

### Actual
The page throws an unhandled exception on load / render (Blazor error UI). Reverting to
`OverflowMode="None"` removes the exception.

> **To complete this section before filing:** capture the exact exception type, message, and the
> top Telerik stack frames from the browser DevTools console or the app’s server log (Aspire
> dashboard → `legislationwebapp` resource) while `OverflowMode="Scroll"` is active. We suspect it
> relates to scroll-width measurement of a `Visible="false"` tab and/or `HeaderTemplate` tabs, but
> the stack trace will confirm.

---

## Why this matters / requested outcome

- Bug 1 forces a poor workaround (users must double-click or approach tabs from a specific
  direction) or a UX compromise (single-row scrolling instead of the required wrapped layout).
- Bug 2 blocks the natural single-row fix (`OverflowMode="Scroll"`).

We would like `TelerikTabStrip` to either (a) correctly map the active content panel when headers
wrap, or (b) provide a supported single-row/wrapping option that does not throw for this
configuration.
In Development
Last Updated: 24 Sep 2026 06:53 by ADMIN
Scheduled for 2026 (Oct)
Component: TabStrip
Version: 14.0.0

Description:

Behavior of TabStripTab is inconsistent when working with Mouse vs Keyboard driven workflow. The  OnStateChanged  event documentation states it fires "on any change to the active tab, tab visibility, pinning, or order." In practice, this only holds true for mouse-click tab activation. Keyboard-driven tab activation (arrow keys, Home, End) changes the active tab and raises  ActiveTabIdChanged , but never raises  OnStateChanged .

This creates an inconsistency for anyone using the documented state-persistence pattern ( OnStateInit / OnStateChanged ) to save and restore the TabStrip's state: tabs selected via keyboard navigation render correctly, but are silently never persisted, since the app only listens to  OnStateChanged . On the next reload/restore, the selection reverts to the last mouse-selected tab.

Root cause (from the TabStrip source):

• Click path —  ActivateTab(TabStripTab tab) :
await SetActiveTabAsync(tab);   // raises ActiveTabIdChanged
InvokeOnStateChanged();          // raises OnStateChanged
• Keyboard path —  HandleActiveTabIdNavigationAsync(...) :
await SetActiveTabAsync(nextActiveTab);   // raises ActiveTabIdChanged only — InvokeOnStateChanged() is never called

Steps to reproduce:

1. Add a  TelerikTabStrip  with  OnStateChanged  bound to a handler that logs/persists the received  TabStripState .
2. Add 3+  TabStripTab s.
3. Click into the tab header area to focus it, then use the arrow keys (or Home/End) to move between tabs.
4. Observe: the active tab panel changes visually, but the  OnStateChanged  handler is never invoked.
5. Now click a tab header directly —  OnStateChanged  fires as expected.

Expected:  OnStateChanged  should fire for every active-tab change, regardless of whether it was triggered by mouse click or keyboard navigation, matching the documented behavior.

Actual:  OnStateChanged  only fires for mouse-click tab activation; keyboard navigation only raises  ActiveTabIdChanged .

Workaround used: Also bind  ActiveTabIdChanged  and merge the received tab id into the previously-captured/persisted state object (rather than relying on  OnStateChanged  alone).