70 Truly Native Blazor UI Components for Any App Scenario

<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

<TelerikScheduler @bind-Date="@StartDate"
                  @bind-View="@CurrView"
                  Data="@Appointments"
                  OnUpdate="@UpdateAppointment"
                  OnDelete="@DeleteAppointment"
                  OnCreate="@AddAppointment"
                  AllowUpdate="true"
                  AllowCreate="true"
                  AllowDelete="true"
                  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 = GetStart();

    Appointments = GetAppointments();

    return base.OnInitializedAsync();
  }

  private List<Appointment> GetAppointments()
  {
    List<Appointment> data = new List<Appointment>();
    DateTime baselineTime = GetStart();

    data.Add(new Appointment
    {
        Title = "Vet visit",
        Description = "The cat needs vaccinations and her teeth checked.",
        Start = baselineTime.AddHours(2),
        End = baselineTime.AddHours(2).AddMinutes(30)
    });

    data.Add(new Appointment
    {
        Title = "Trip to Hawaii",
        Description = "An unforgettable holiday!",
        IsAllDay = true,
        Start = baselineTime.AddDays(-10),
        End = baselineTime.AddDays(-2)
    });

    data.Add(new Appointment
    {
        Title = "Jane's birthday party",
        Description = "Make sure to get her fresh flowers in addition to the gift.",
        Start = baselineTime.AddDays(5).AddHours(10),
        End = baselineTime.AddDays(5).AddHours(18),
    });

    data.Add(new Appointment
    {
        Title = "One-on-one with the manager",
        Start = baselineTime.AddDays(2).AddHours(3).AddMinutes(30),
        End = baselineTime.AddDays(2).AddHours(3).AddMinutes(45),
    });

    data.Add(new Appointment
    {
        Title = "Brunch with HR",
        Description = "Performance evaluation of the new recruit.",
        Start = baselineTime.AddDays(3).AddHours(3),
        End = baselineTime.AddDays(3).AddHours(3).AddMinutes(45)
    });

    data.Add(new Appointment
    {
        Title = "Interview with new recruit",
        Description = "See if John will be a suitable match for our team.",
        Start = baselineTime.AddDays(3).AddHours(1).AddMinutes(30),
        End = baselineTime.AddDays(3).AddHours(2).AddMinutes(30)
    });

    data.Add(new Appointment
    {
        Title = "Conference",
        Description = "The big important work conference. Don't forget to practice your presentation.",
        Start = baselineTime.AddDays(6),
        End = baselineTime.AddDays(11),
        IsAllDay = true
    });

    data.Add(new Appointment
    {
        Title = "New Project Kickoff",
        Description = "Everyone assemble! We will also have clients on the call from a later time zone.",
        Start = baselineTime.AddDays(3).AddHours(8).AddMinutes(30),
        End = baselineTime.AddDays(3).AddHours(11).AddMinutes(30)
    });

    data.Add(new Appointment
    {
        Title = "Get photos",
        Description = "Get the printed photos from last week's holiday. It's on the way from the vet to work.",
        Start = baselineTime.AddHours(2).AddMinutes(15),
        End = baselineTime.AddHours(2).AddMinutes(30)
    });


    return data;
  }

  public DateTime GetStart()
  {
      DateTime now = DateTime.Now;
      int diff = (7 + (now.DayOfWeek - DayOfWeek.Monday)) % 7;
      DateTime lastMonday = now.AddDays(-1 * diff);
      //return 8 AM on today's date for better visualization of the demos
      return new DateTime(lastMonday.Year, lastMonday.Month, lastMonday.Day, 8, 0, 0);
  }

  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>