Progress Landing Page Hero Banner

85+ Truly Native Blazor UI Components for Any App Scenario

New Blazor components are added every 6 weeks!

Download Free Trial

*no credit card required

trust-radius-badge

Telerik Earns Multiple TrustRadius Best of Development 2021 awards

Telerik has won Best Feature Set and Best Customer Support.

trust-radius-badge

Telerik UI Earns TrustRadius' 2021 Top Rated Award

Progress Telerik UI has earned TrustRadius’ Top Rated Award for Software Components and .NET Development.

See Our Most Popular Blazor Components

Get full support for AngularJS out of the box, or use your favorite JavaScript framework.Get full support for AngularJS out of the box, or use your favorite.

ninja-peeking
<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Height="450px" Width="100%"
             Pageable="true" PageSize="10" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterMenu" Groupable="true"
             Sortable="true" SortMode="@SortMode.Multiple"
             OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton>
        <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
    </GridToolBar>
    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="true" />
    </GridExport>
    <GridColumns>
        <GridColumn Field=@nameof(Product.ProductName) Width="220px" Title="Product Name" />
        <GridColumn Field=@nameof(Product.ListPrice) Title="Price" Width="100px" DisplayFormat="{0:C2}" />
        <GridColumn Field=@nameof(Product.UnitsInStock) Title="In Stock" Width="100px">
            <Template>
                @{
                    bool isInStock = (context as Product).UnitsInStock > 0 ? true : false;

                    if (isInStock)
                    {
                        <span class="k-badge k-badge-md k-badge-solid k-badge-success k-badge-rounded">Available</span>
                    }
                    else
                    {
                        <span class="k-badge k-badge-md k-badge-solid k-badge-error k-badge-rounded">Not Available</span>
                    }
                }
            </Template>
        </GridColumn>
        <GridColumn Field=@nameof(Product.Size) Title="Size" Width="80px"></GridColumn>
        <GridCommandColumn Width="110px" Locked="true" Resizable="false">
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>        

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

    protected override Task OnInitializedAsync()
    {
        GridData = GetProducts();

        return base.OnInitializedAsync();
    }

    private List<Product> GetProducts()
    {
        List<Product> data = new List<Product>();

        data.Add(new Product(1, "HL Road Frame - Black, 58", 1, "Black", 1431.5, "58"));
        data.Add(new Product(2, "HL Road Frame - Red, 58", 1, "Red", 1431.5, "58"));
        data.Add(new Product(3, "Mountain Bike Socks, M", 0, "White", 9.5, "M"));
        data.Add(new Product(4, "Mountain Bike Socks, L", 0, "White", 9.5, "L"));
        data.Add(new Product(5, "Long-Sleeve Logo Jersey, S", 0, "Multi", 49.99, "S"));
        data.Add(new Product(6, "Long-Sleeve Logo Jersey, M", 0, "Multi", 49.99, "M"));
        data.Add(new Product(7, "Long-Sleeve Logo Jersey, L", 0, "Multi", 49.99, "L"));
        data.Add(new Product(8, "Long-Sleeve Logo Jersey, XL", 0, "Multi", 49.99, "XL"));
        data.Add(new Product(9, "HL Road Frame - Red, 62", 1, "Red", 1431.5, "62"));
        data.Add(new Product(10, "HL Road Frame - Red, 44", 1, "Red", 1431.5, "44"));
        data.Add(new Product(11, "HL Road Frame - Red, 48", 1, "Red", 1431.5, "48"));
        data.Add(new Product(12, "HL Road Frame - Red, 52", 1, "Red", 1431.5, "52"));
        data.Add(new Product(13, "HL Road Frame - Red, 56", 1, "Red", 1431.5, "56"));
        data.Add(new Product(14, "LL Road Frame - Black, 58", 1, "Black", 337.22, "58"));
        data.Add(new Product(15, "LL Road Frame - Black, 60", 1, "Black", 337.22, "60"));
        data.Add(new Product(16, "LL Road Frame - Black, 62", 1, "Black", 337.22, "62"));
        data.Add(new Product(17, "LL Road Frame - Red, 44", 1, "Red", 337.22, "44"));
        data.Add(new Product(18, "LL Road Frame - Red, 48", 1, "Red", 337.22, "48"));
        data.Add(new Product(19, "LL Road Frame - Red, 52", 1, "Red", 337.22, "52"));
        data.Add(new Product(20, "LL Road Frame - Red, 58", 1, "Red", 337.22, "58"));
        data.Add(new Product(21, "LL Road Frame - Red, 60", 1, "Red", 337.22, "60"));
        data.Add(new Product(22, "LL Road Frame - Red, 62", 1, "Red", 337.22, "62"));
        data.Add(new Product(23, "ML Road Frame - Red, 44", 1, "Red", 594.83, "44"));
        data.Add(new Product(24, "ML Road Frame - Red, 48", 1, "Red", 594.83, "48"));
        data.Add(new Product(25, "ML Road Frame - Red, 52", 1, "Red", 594.83, "52"));
        data.Add(new Product(26, "ML Road Frame - Red, 58", 1, "Red", 594.83, "58"));
        data.Add(new Product(27, "ML Road Frame - Red, 60", 1, "Red", 594.83, "60"));
        data.Add(new Product(28, "LL Road Frame - Black, 44", 1, "Black", 337.22, "44"));
        data.Add(new Product(29, "LL Road Frame - Black, 48", 1, "Black", 337.22, "48"));
        data.Add(new Product(30, "LL Road Frame - Black, 52", 1, "Black", 337.22, "52"));
        data.Add(new Product(31, "HL Mountain Frame - Silver, 42", 1, "Silver", 1364.5, "42"));
        data.Add(new Product(32, "HL Mountain Frame - Silver, 44", 1, "Silver", 1364.5, "44"));
        data.Add(new Product(33, "HL Mountain Frame - Silver, 48", 1, "Silver", 1364.5, "48"));
        data.Add(new Product(34, "HL Mountain Frame - Silver, 46", 1, "Silver", 1364.5, "46"));
        data.Add(new Product(35, "HL Mountain Frame - Black, 42", 1, "Black", 1349.6, "42"));
        data.Add(new Product(36, "HL Mountain Frame - Black, 44", 1, "Black", 1349.6, "44"));
        data.Add(new Product(37, "HL Mountain Frame - Black, 48", 1, "Black", 1349.6, "48"));
        data.Add(new Product(38, "HL Mountain Frame - Black, 46", 1, "Black", 1349.6, "46"));
        data.Add(new Product(39, "HL Mountain Frame - Silver, 38", 1, "Silver", 1364.5, "38"));
        data.Add(new Product(40, "Road-150 Red, 62", 1, "Red", 3578.27, "62"));
        data.Add(new Product(41, "Road-150 Red, 44", 1, "Red", 3578.27, "44"));
        data.Add(new Product(42, "Road-150 Red, 48", 1, "Red", 3578.27, "48"));
        data.Add(new Product(43, "Road-150 Red, 52", 1, "Red", 3578.27, "52"));
        data.Add(new Product(44, "Road-150 Red, 56", 1, "Red", 3578.27, "56"));
        data.Add(new Product(45, "Road-450 Red, 58", 1, "Red", 1457.99, "58"));
        data.Add(new Product(46, "Road-450 Red, 60", 1, "Red", 1457.99, "60"));
        data.Add(new Product(47, "Road-450 Red, 44", 1, "Red", 1457.99, "44"));
        data.Add(new Product(48, "Road-450 Red, 48", 1, "Red", 1457.99, "48"));
        data.Add(new Product(49, "Road-450 Red, 52", 1, "Red", 1457.99, "52"));
        data.Add(new Product(50, "Road-650 Red, 58", 1, "Red", 782.99, "58"));

        return data;
    }

    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.ListPrice = product.ListPrice;
            existing.UnitsInStock = product.UnitsInStock;
            existing.Color = product.Color;
            existing.Size = product.Size;
        }
    }
}
                        
 <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)" Name="Canada"></ChartSeries>
            <ChartSeries Type="@ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)" Name="USA"></ChartSeries>
            <ChartSeries Type="@ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)" Name="Bulgaria"></ChartSeries>
            <ChartSeries Type="@ChartSeriesType.Line" Data="@Data" Field="@nameof(ModelData.Series4)" Name="Average Trend"></ChartSeries>
        </ChartSeriesItems>

        <ChartCategoryAxes>
            <ChartCategoryAxis Categories="@Categories">
                <ChartCategoryAxisLabels>
                    <ChartCategoryAxisLabelsRotation Angle="45" Align="@ChartAxisLabelsRotationAlignment.Center" />
                </ChartCategoryAxisLabels>
            </ChartCategoryAxis>
        </ChartCategoryAxes>

        <ChartValueAxes>
            <ChartValueAxis>
                <ChartValueAxisTitle Text="Growth, %"></ChartValueAxisTitle>
                <ChartValueAxisLabels Format="{0:N0}%"></ChartValueAxisLabels>
            </ChartValueAxis>
        </ChartValueAxes>

        <ChartTooltip Visible="true" Shared="true"></ChartTooltip>
    </TelerikChart>      
<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)">
            <ChartSeriesTooltip Visible="true">
                <Template>
                    @((context.DataItem as DonutData).Category) - @((context.DataItem as DonutData).Value)%
                </Template>
            </ChartSeriesTooltip>
            <ChartSeriesLabels Position="@ChartSeriesLabelsPosition.OutsideEnd"
                               Visible="true"
                               Background="transparent"
                               Format="{0}%">
            </ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>
  </TelerikChart>                       

@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"
                  Width="100%"
                  IdField="@(nameof(Appointment.Id))"
                  RecurrenceRuleField="@(nameof(Appointment.RecurrenceRule))"
                  RecurrenceExceptionsField="@(nameof(Appointment.RecurrenceExceptions))"
                  RecurrenceIdField="@(nameof(Appointment.RecurrenceId))">
    <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 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-3">
    <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-9">
    <TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
                     @bind-Date="@startDate"
                     @bind-View="@CalendarViewValue"
                     Views="2">
    </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 />
    <TelerikValidationSummary />

    <label>Categories</label>
    <TelerikDropDownList Data="@CategoryData" @bind-Value="@category.CategoryId" PopupHeight="170px"
                         DefaultText="Select Category" ValueField="CategoryId" TextField="CategoryName">
    </TelerikDropDownList>

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

    <label>Shipping Address</label>
    <TelerikDropDownList Data="@OrderData" @bind-Value=@order.OrderId PopupHeight="170px"
                         DefaultText="Select City" ValueField="OrderId" TextField="OrderName">
    </TelerikDropDownList>

    <div class="submit-btn-wrap">
      <TelerikButton Primary="true">Submit</TelerikButton>
    </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>
                        
trust-radius-badge

Kendo UI Earns 2020 TrustRadius Top Rated Award

Progress Kendo UI has earned TrustRadius's Top Rated Award for App Development Platform. The awards are based
entirely on customer satisfaction ratings.

Download Free Trial

*no credit card required

Key Features. Get the Best Value for Money
with Telerik UI for Blazor

Truly native controls with thousands of built-in features to cover all app scenarios

Professionally styled built-in themes & the Telerik SAAS Theme Builder for any design

Feature-rich and fast performing Grid with 100+ features to fit any application

Extensive demos, docs & online technical training to help you get started in no time

Download Free Trial

*no credit card required


inverted-top-curve-darkblue

Telerik UI for Blazor Sample Apps

See our high-performing Grid plus 50 stunning truly native easy-to-customize UI components in action.

 
 
 
9/10 Ease of Use
9.7/10 Quality of Support
9.6/10 Ease of Setup

What Developers Say

For anyone reading this that is not a Progress Telerik customer yet, this (customer support) is why I have been since 2010. Great controls / components but even better service.

Renier Pretorius Owner, Consultlink

An artisan-crafted product out of the box for a developer with less time to do with the UI and other details. Just focus on your logic, the rest is handled very well.

Evlv Digital Dev, Evlv Digital

Telerik UI for Blazor is a great product. It saves time, high performance and Professional Look.

Mahmoud Helmy Senior Data Scientists, Kuwait University

I've been testing Blazor components from a variety of providers and hands-down, the Telerik ones are the best - great UX, fast, easy to extend/implement.

Chris Woodard Technical Consultant, Avisra

Very happy with the current control set, the progress to release new controls and the extending of current functionality. The controls are fast and easy to implement. Support is one of the best I've had to deal with. Friendly response and they always try to help you with examples, custom made for you examples and if what you want/need is not yet possible they try to find a workaround for you.

Jurgen Mangé , SGS Belgium NV

I saw Telerik UI components in YouTube videos and then I loved it. It is going to be a blast using them!

M Imamul Hassan Khan Developer, Xenon Solutions Ltd.

I'm excited to see partners like Telerik creating custom UI controls for Blazor. The Telerik UI controls make building beautiful web apps with lots of rich functionality sooooo easy!

Daniel Roth Program Manager, Microsoft
big-waves-plus-signs_graphic

Get started with Telerik UI for Blazor and live in a JavaScript-free world

Download a 30-day trial and measure how much more productive you can be

  • 85+ (and growing) UI components to match any app scenario

  • A UI component library designed and built for Blazor, with zero dependencies

  • Outstanding support with 97% customer satisfaction rating from the developers who build the product

Download Free Trial

Includes free 30-day dedicated support to help you complete a successful evaluation