40+ Native Blazor UI Components
to Build High-Performing Web Apps

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Height="500px"
             Pageable="true" PageSize=@PageSize
             OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler">
  <GridToolBar>
    <GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton>
  </GridToolBar>
  <GridColumns>
    <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
    <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
      <Template>
        @(String.Format("{0:C2}", (context as Product).UnitPrice))
      </Template>
    </GridColumn>
    <GridColumn Field=@nameof(Product.UnitsInStock) Title="Units In Stock" />
    <GridCommandColumn>
      <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
      <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
      <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
      <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
    </GridCommandColumn>
  </GridColumns>
</TelerikGrid>

@code {
    public List<Product> GridData { get; set; }
    public Product ProductToEdit { get; set; }
    int PageSize = 15;
    int lastId = 0;

    protected override void OnInitialized()
    {
      GridData = new List<Product>();

      for (int i = 1; i <= 100; i++)
      {
        GridData.Add(new Product()
        {
          ProductId = i,
          ProductName = "Product" + i.ToString(),
          SupplierId = i,
          UnitPrice = (decimal)(i * 3.14),
          UnitsInStock = (short)(i * 1),
        });

        lastId = i;
      }
    }

    private void CreateHandler(GridCommandEventArgs args)
    {
      Product product = (Product)args.Item;

      product.ProductId = ++lastId;
      GridData.Insert(0, product);
    }

    private void DeleteHandler(GridCommandEventArgs args)
    {
      GridData.Remove((Product)args.Item);
    }

    private void UpdateHandler(GridCommandEventArgs args)
    {
      Product product = (Product)args.Item;

      var existing = GridData.FirstOrDefault(p => p.ProductId == product.ProductId);

      if (existing != null)
      {
        existing.ProductName = product.ProductName;
        existing.UnitPrice = product.UnitPrice;
        existing.UnitsInStock = product.UnitsInStock;
      }
    }
}

<div style="width:40%; display: inline-block;">
  <TelerikChart>
    <ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
    <ChartLegend Visible="false"></ChartLegend>

    <ChartSeriesItems>
      <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
      <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
      <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)"></ChartSeries>
      <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series4)"></ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
      <ChartCategoryAxis Categories="@Categories"></ChartCategoryAxis>
    </ChartCategoryAxes>
  </TelerikChart>
</div>

<div style="width:50%; display: inline-block; margin-left:10px;">
  <TelerikChart>
    <ChartTitle Text="What is you favourite sport?"></ChartTitle>
    <ChartLegend Visible="true" Position="ChartLegendPosition.Top"></ChartLegend>

    <ChartSeriesItems>
      <ChartSeries Type="ChartSeriesType.Donut" Data="@DataForDonut" Field="@nameof(DonutData.Value)" CategoryField="@nameof(DonutData.Category)">
        <ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
          Visible="true"
          Background="transparent"
          Template="#= dataItem.Category # - #= percentage*100 #%"></ChartSeriesLabels>
      </ChartSeries>
    </ChartSeriesItems>
  </TelerikChart>
</div>

@code {
    public class DonutData
    {
        public string Category { get; set; }
        public Int32 Value { get; set; }
    }

    public List<DonutData> DataForDonut = new List<DonutData>()
    {
        new DonutData()
        {
            Category = "Football",
            Value = 35
        },
        new DonutData()
        {
            Category = "Basketball",
            Value = 25
        },
        new DonutData()
        {
            Category = "Volleyball",
            Value = 20
        },
        new DonutData()
        {
            Category = "Rugby",
            Value = 10
        },
        new DonutData()
        {
            Category = "Tennis",
            Value = 10
        },

    };

    public class ModelData
    {
        public double Series1 { get; set; }
        public double Series2 { get; set; }
        public double Series3 { get; set; }
        public double Series4 { get; set; }
    }

    public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };


    public List<ModelData> Data = new List<ModelData>()
    {
        new ModelData()
        {
            Series1 = 3.907,
            Series2 = 4.743,
            Series3 = 0.01,
            Series4 = 1.988
        },
        new ModelData()
        {
            Series1 = 7.943,
            Series2 = 7.295,
            Series3 = 0.375,
            Series4 = 2.733
        },
        new ModelData()
        {
            Series1 = 7.848,
            Series2 = 7.175,
            Series3 = 1.161,
            Series4 = 3.994
        },
        new ModelData()
        {
            Series1 = 9.284,
            Series2 = 6.376,
            Series3 = 0.684,
            Series4 = 3.464
        },
        new ModelData()
        {
            Series1 = 9.263,
            Series2 = 8.153,
            Series3 = 3.7,
            Series4 = 4.001
        },
        new ModelData()
        {
            Series1 = 9.801,
            Series2 = 8.535,
            Series3 = 3.269,
            Series4 = 3.939
        },
        new ModelData()
        {
            Series1 = 3.89,
            Series2 = 5.247,
            Series3 = 1.083,
            Series4 = 1.333
        },
        new ModelData()
        {
            Series1 = 8.238,
            Series2 = 7.832,
            Series3 = 5.127,
            Series4 = 2.245
        },
        new ModelData()
        {
            Series1 = 9.552,
            Series2 = 4.3,
            Series3 = 3.69,
            Series4 = 4.339
        },
        new ModelData()
        {
            Series1 = 6.855,
            Series2 = 4.3,
            Series3 = 2.995,
            Series4 = 2.727
        }
    };

  }

@using blazor.Data

@inject AppointmentService Service

<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="500px">
  <SchedulerViews>
    <SchedulerDayView StartTime="@DayStart" />
    <SchedulerWeekView StartTime="@DayStart" />
    <SchedulerMultiDayView StartTime="@DayStart" />
  </SchedulerViews>
</TelerikScheduler>

@code {
  List<Appointment> Appointments = new List<Appointment>();
  public DateTime StartDate { get; set; }
  public SchedulerView CurrView { get; set; } = SchedulerView.Week;

  public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);

  protected override async Task OnInitializedAsync()
  {
    StartDate = Service.GetStart();

    Appointments = await Service.GetAppointmentsAsync();
  }

  void UpdateAppointment(SchedulerUpdateEventArgs args)
  {
    Appointment item = (Appointment)args.Item;
    var matchingItem = Appointments.FirstOrDefault(a => a.Id == item.Id);
    if (matchingItem != null)
    {
      matchingItem.Title = item.Title;
      matchingItem.Description = item.Description;
      matchingItem.Start = item.Start;
      matchingItem.End = item.End;
      matchingItem.IsAllDay = item.IsAllDay;
    }
  }

  void AddAppointment(SchedulerCreateEventArgs args)
  {
    Appointment item = args.Item as Appointment;
    Appointments.Add(item);
  }

  void DeleteAppointment(SchedulerDeleteEventArgs args)
  {
    Appointment item = (Appointment)args.Item;
    Appointments.Remove(item);
  }
}

<div class="calendar-wrap">
  <div class="col col-sm">
    <div class="switch-view-wrap">
      <h2>Switch View</h2>

      <ul class="fieldlist">

        @foreach (var possibleCalendarView in Enum.GetValues(typeof(CalendarView)))
        {
          <li>
            <input type="radio" name="calendarView" id="@possibleCalendarView" value="@possibleCalendarView" @onchange="ChangeCalendarView" class="k-radio" checked="@(String.Equals(possibleCalendarView.ToString(), CalendarViewValue.ToString()))" />
            <label class="k-radio-label" for="@possibleCalendarView">@possibleCalendarView View </label>
          </li>
        }
      </ul>
    </div>
  </div>

  <div class="col col-lg">
    <TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
                     Date="@startDate"
                     @bind-View="@CalendarViewValue">
    </TelerikCalendar>
  </div>
</div>

@code {
  private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar

  public CalendarView CalendarViewValue { get; set; } = CalendarView.Month;

  public void ChangeCalendarView(ChangeEventArgs args)
  {
    CalendarViewValue = (CalendarView)Enum.Parse(typeof(CalendarView), args.Value.ToString());
  }
}

<style>
  .calendar-wrap {
    width: 100%;
    height: 340px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
  }
  .calendar-wrap .col {
    padding: 0 30px;
    box-sizing: border-box;
  }
  .calendar-wrap h2 {
    margin-top: 0;
    margin-bottom: 1.5em;
  }
  .col-sm {
    width: 40%;
  }
  .col-lg {
    width: 60%;
  }
  .switch-view-wrap {
    width: 150px;
    margin-left: auto;
  }
  .fieldlist {
    margin-bottom: 0 0 -1em;
  }
  .fieldlist li {
    padding-bottom: 1.5em;
  }
</style>

@using System.ComponentModel.DataAnnotations

<div class="dropdownlist-form">

  <div class="header">
    <h3>Product Details</h3>
  </div>

  <EditForm Model="@category" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary></ValidationSummary>

    <label>Categories</label>
    <TelerikDropDownList Data="@CategoryData" @bind-Value="@category.CategoryId" DefaultItem="@DefaultCategory" ValueField="CategoryId" TextField="CategoryName">
    </TelerikDropDownList>

    <label>Products</label>
    <TelerikDropDownList Data="@DropDownListData" @bind-Value=@SelectedValue PopupHeight="170" DefaultItem="@DefaultItem" ValueField="ProductId" TextField="ProductName">
    </TelerikDropDownList>

    <label>Shipping Address</label>
    <TelerikDropDownList Data="@OrderData" @bind-Value=@order.OrderId PopupHeight="170" DefaultItem="@DefaultOrder" ValueField="OrderId" TextField="OrderName">
    </TelerikDropDownList>

    <div class="submit-btn-wrap">
      <button class="k-button k-primary" type="submit">Submit</button>
    </div>

    @if (SuccessMessage != string.Empty)
    {
      <div class="k-notification k-notification-success">
        @SuccessMessage
      </div>
    }
  </EditForm>
</div>

@code  {

  string[] categoriesList = { "Seafood", "Confections", "Dairy Products", "Meat/Poultry", "Beverages" };
  string[] productsList = { "Boston Crab Meat", "Teatime Chocolate Biscuits", "Tofu", "Mascarpone", "Chai" };
  string[] orderList = { "Marseille", "Rio de Janeiro", "Lyon", "Bern", "Genève" };

  public IEnumerable<Product> DropDownListData { get; set; }
  public Product DefaultItem { get; set; } = new Product()
  {
    ProductId = 0,
    ProductName = "Select a product..."
  };

  public int SelectedValue { get; set; } = 2;

  protected override void OnInitialized()
  {

    List<Product> products = new List<Product>();
    for (int i = 0; i < 5; i++)
    {
      products.Add(new Product()
      {
        ProductId = i,
        ProductName = productsList[i],

      });
    }

    DropDownListData = products.AsQueryable();

    List<DropDownValidationModel> categories = new List<DropDownValidationModel>();
    for (int i = 0; i < 5; i++)
    {
      categories.Add(new DropDownValidationModel()
      {
        CategoryId = i,
        CategoryName = categoriesList[i],
      });
    }

    CategoryData = categories.AsQueryable();

    List<Order> orders = new List<Order>();
    for (int i = 0; i < 5; i++)
    {
      orders.Add(new Order()
      {
        OrderId = i,
        OrderName = orderList[i],
      });
    }

    OrderData = orders.AsQueryable();

    base.OnInitialized();
  }

  class DropDownValidationModel
  {
    [Required(ErrorMessage = "Choose a category")]
    public int? CategoryId { get; set; }

    public string CategoryName { get; set; }
  }

  IEnumerable<DropDownValidationModel> CategoryData { get; set; }
  DropDownValidationModel category { get; set; } = new DropDownValidationModel();
  DropDownValidationModel DefaultCategory { get; set; } = new DropDownValidationModel()
  {
    CategoryName = "Choose a category"
  };

  string SuccessMessage = string.Empty;

  void HandleValidSubmit()
  {
    SuccessMessage = "Form Submitted Successfully!";
  }

  class Order
  {
    public int? OrderId { get; set; }

    public string OrderName { get; set; }
  }

  IEnumerable<Order> OrderData { get; set; }
  Order order { get; set; } = new Order();
  Order DefaultOrder { get; set; } = new Order()
  {
    OrderId = 0,
    OrderName = "Choose a shipping city"
  };

}

<style>
  .dropdownlist-form {
    max-width: 340px;
    padding: 20px 0;
  }
  .dropdownlist-form form {
    padding: 15px 20px;
  }
  .dropdownlist-form h3 {
    color: #454545;
    font-weight: 700;
  }
  .dropdownlist-form .header:before {
    bottom: 12px;
  }
  .dropdownlist-form label {
    font-size: 14px;
  }
  .dropdownlist-form .k-widget {
    margin-bottom: 20px;
  }
  .submit-btn-wrap {
    margin-top: 10px;
    text-align: right;
  }
  .k-notification {
    margin-top: 20px;
  }
  .validation-errors {
    margin-bottom: 20px;
  }
  .validation-message {
    color: #f31700;
  }
</style>