EdCharbeneau

    .masonry {
        display: flex;
        flex-flow: column wrap;
        max-height: 800px;
        margin-left: -8px; /* Adjustment for the gutter */
        width: 100%;
    }

        .masonry > div {
            margin: 0 8px 8px 0; /* Some gutter */

EdCharbeneau

<TelerikDropDownList Data="@ModeList" TextField="Text" ValueField="Value" bind-Value="@selectedValue">
</TelerikDropDownList>

<span>Selected: @((Modes)selectedValue)</span>

@functions {

    int selectedValue { get; set; } = 0;

    public class ModeViewModel

EdCharbeneau

@page "/grid/templates"

@using TelerikBlazor.App.Models
@inject NorthwindContext nwContext

<h4> Row Template </h4>

<KendoGrid Data=@GridData Height="@Height">
    <RowTemplate Context="product">
        @if (selectedId == product.ProductId)

EdCharbeneau

<li aria-selected=@IsActive role="tab" class="@ClassToRender">
  ...
</li>

@functions {
  ...
  protected bool IsActive => ContainerTabSet.ActiveTab == this;
  [Parameter] protected bool Disabled { get; set; }
  [Parameter] protected string Class { get; set; }

EdCharbeneau

public static string SplitUpperCaseToString(this string source) {
  return string.Join(" ", SplitUpperCase(source));
}
 
public static string[] SplitUpperCase(this string source) {
  if (source == null) {
    return new string[] {}; //Return empty array.
  }
  if (source.Length == 0) {
    return new string[] {""};

EdCharbeneau

Microsoft Visual Studio Enterprise 2019 Preview
Version 16.0.0 Preview 2.2
VisualStudio.16.Preview/16.0.0-pre.2.2+28602.52
Microsoft .NET Framework
Version 4.7.03056

Installed Version: Enterprise

Application Insights Tools for Visual Studio Package   9.0.11128.2
Application Insights Tools for Visual Studio

EdCharbeneau

@page "/"

<KendoGrid Data=@Orders Pageable=true Sortable=true>
    <KendoGridColumn Field=@nameof(OrderViewModel.OrderID)>
        <Template>
            @{
                var item = context as OrderViewModel;
                <KendoButton OnButtonClick=@(()=> HandleDelete(item))>Delete</KendoButton>
            }
        </Template>

EdCharbeneau

@functions { 
    public class OrderViewModel
    {
        public int OrderID { get; set; }

        public decimal? Freight { get; set; }

        public DateTime? OrderDate { get; set; }

        public string ShipCity { get; set; }

EdCharbeneau

<!-- Choose one below -->
<!-- <link href="css/kendo-default/dist/all.css" rel="stylesheet" />
<link href="css/kendo-material/dist/all.css" rel="stylesheet" /> -->
<link href="css/kendo-bootstrap/dist/all.css" rel="stylesheet" />

EdCharbeneau

<select onchange=@HandleThemeChange>
    @foreach (var t in themes)
    {
        <option value=@t>@t</option>
    }
</select>

@functions {

    string[] themes = { "Default", "Bootstrap", "Material" };