alyssamichelle

Telerik Blazor Grid

Use the Kendo Grid when displaying structured tabular data. Requires general Blazor setup (TelerikRootComponent, AddTelerikBlazor, theme). See skills-blazor.md for setup.

Common use cases:

• Admin dashboards
• CRUD management tables
• Financial or reporting tables
• Large datasets requiring sorting, filtering, or paging

alyssamichelle

Telerik UI for Blazor

Use when building or modifying Blazor applications that use Telerik UI for Blazor components (Grid, Charts, DropDownList, Scheduler, DatePicker, etc.).

---

Prerequisites

• Interactive render mode required – Telerik components do not work in static SSR. Use Global Interactivity (recommended) or Per page/component interactivity.
• .NET 8+ for Blazor Web App; supports Blazor Server, Blazor WebAssembly, Blazor Hybrid.

alyssamichelle

<kendo-buttongroup [selection]="'single'">
    <button kendoButton routerLink="/stocks" routerLinkActive="k-state-active">
        Result List
    </button>
    <button kendoButton routerLink="/heatmap" routerLinkActive="k-state-active">
        Heatmap View
    </button>
    <button kendoButton routerLink="/real-time" routerLinkActive="k-state-active">
        Data Virtualization
    </button>

alyssamichelle

<kendo-dropdownlist
    class="dropdown-list-selection interval"
    [style.width.px]="135"
    [style.marginRight.px]="8"
    [data]="intervals"
    [iconClass]="'k-i-arrow-chevron-down'"
    [textField]="'name'"
    [valueField]="'interval'"
    [(value)]="selectedInterval"
    [itemDisabled]="disableIncompatibleIntervals">

alyssamichelle

<kendo-daterange>
  <kendo-dateinput
      kendoDateRangeStartInput
      [autoCorrectOn]="'change'"
      [min]="calendarMin"
      [max]="calendarMax"
      [(ngModel)]="range.start"
      (valueChange)="handleRangeChange($event, range.end)">
  </kendo-dateinput>
  <kendo-dateinput

alyssamichelle

<kendo-stockchart
    class="stock-chart"
    [transitions]="true"
    [renderAs]="'svg'"
    (navigatorFilter)="configureVolumeValueAxisHeight()"
>
    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item
            [crosshair]="{ visible: true }"
            [maxDivisions]="20"

alyssamichelle

<div class="container">
    <div class="row py-4 d-flex justify-content-between align-items-center">
        <div class="col col-4 d-flex daterange-input-wrap">
            <kendo-daterange>
                <kendo-dateinput
                    kendoDateRangeStartInput
                    [autoCorrectOn]="'change'"
                    [min]="calendarMin"
                    [max]="calendarMax"
                    [(ngModel)]="range.start"

alyssamichelle

    <kendo-grid-column field="day_change" title="Change" media="(min-width: 768px)">
        <ng-template kendoGridCellTemplate let-dataItem>
            <span [ngClass]="{ 'grid-cell-positive' : dataItem.day_change > 0, 'grid-cell-negative' : dataItem.day_change < 0 }">
                {{ dataItem.day_change > 0 ? ('+' + dataItem.day_change) : dataItem.day_change }}
            </span>
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="change_pct" title="%Change" media="(min-width: 768px)">
        <ng-template kendoGridCellTemplate let-dataItem>

alyssamichelle

MouseEvent {
  isTrusted: true,
  screenX: 431,
  screenY: 443,
  clientX: 431,
  clientY: 309,
  ctrlKey: false,
  shiftKey: false,
  altKey: false,
  metaKey: false,

alyssamichelle