Elements Wave lBlue Hero

Telerik UI for Blazor

Develop Blazor applications in half the time with a high-performing Grid and
85+ truly native, easy-to-customize UI components to cover any requirement.

NEW

*Includes access to online technical training to speed-up your onboarding.

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.

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>
                        
flows_end_section

Blazor UI Components Key Features

Find truly native Blazor components for every use case

Cut development time and cost in half with the Telerik high-performing Grid and 85+ truly native, easy-to-customize UI components to cover any app scenario. New set of components is added every 6 weeks!

Save months of UI development time with the feature-rich Telerik Grid

100+ features provide flexible data visualization and manipulation, rich API, professional looks and a way to satisfy any design requirement.

“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

Build any type of app with just one set of UI controls

Easy to customize Telerik Blazor controls through multitude of methods, properties and events, as well as professionally styled built-in themes & the Telerik Sass Theme Builder enabling you to build your own.

Get support with 97% satisfaction rates

Outstanding support from the developers who build the product to help you work out all challenges promptly.

Get started fast with our interactive learning materials

Get results within hours by experimenting with our extensive Blazor demos, docs & online technical training to help you get started in no time.

Explore our Native UI Blazor Components

ninja-v1-opt

Working with Designers? We Got You Covered!

It's easy to collaborate with your designers using Telerik UI for Blazor and the Telerik UI kits for Figma. The highly-customizable, identical components on both sides set you off to a running start to craft your own design system.

“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

Latest News, Updates and Resources

Upgrade to Telerik DevCraft Complete

Be Ready for Any Project & Technology

Save up to 50% in development time by getting 1,250+ .NET and JavaScript UI components for building web, desktop and mobile apps.

Get the Best Value for Money

Enjoy Telerik UI for Blazor along with embedded reporting and mocking tools while saving up to 90% from the upgrade price.

What's New with Telerik UI for Blazor

Telerik UI for Blazor Carousel

New Component: Carousel

Scroll through an image gallery or any other rich content with the Telerik UI for Blazor Carousel.

Telerik UI for Blazor Barcode Overview

New Component: Barcode

Generate Barcodes for various industry standards and customize their appearance with ease through a variety of exposed properties.

Telerik UI for Blazor Gantt Component

New Gantt Enhancements

The Telerik UI for Blazor Gantt component lets you plan project start and end dates, visualize task progress, dependencies and milestones and many more.

Industry-Leading Support

Expert and Timely Support

Get answers to your questions directly from the developers who build this UI suite, even during your trial period.

Contact support

Need Evaluation Help?

If you are not a developer or don't have time to evaluate our product, send us your project requirements. We will evaluate your required features and let you know how our products fit your needs.

Send us your project requirements
Background-NextSteps

Ready to Try it Out?

Download Free Trial