Telerik UI for Blazor

XMarksTheSport

You've reached the next stop on the .NET Conf Treasure Hunt!

Telerik UI for Blazor

A Treasure Trove of 25+ Native Blazor Components

 

Try now

Your Clue

The Telerik UI for Blazor Grid control offers support for checkbox column row selection.
Find what you need to add to the TelerikGridColumn to use it and whisper it to the Twitch bot.

 

 

Grid Default
@using Telerik.Blazor.Components.Grid

<TelerikGrid Data=@GridData EditMode="inline"
             Pageable="true" PageSize=@PageSize>
    <TelerikGridToolBar>
        <TelerikGridCommandButton Command="Create" Icon="add">Add Product</TelerikGridCommandButton>
    </TelerikGridToolBar>
    <TelerikGridColumns>
        <TelerikGridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
        <TelerikGridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
            <Template>
                @(String.Format("{0:C2}", (context as Product).UnitPrice))
            </Template>
        </TelerikGridColumn>
        <TelerikGridColumn Field=@nameof(Product.UnitsInStock) Title="Units In Stock" />
        <TelerikGridCommandColumn>
            <TelerikGridCommandButton Command="Edit" Icon="edit" OnClick="TriggerEdit">Edit</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true" OnClick="UpdateItem">Update</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true" OnClick="CancelItem">Cancel</TelerikGridCommandButton>
        </TelerikGridCommandColumn>
    </TelerikGridColumns>
</TelerikGrid>

@functions {
    public IEnumerable<Product> GridData { get; set; }
    public Product ProductToEdit { get; set; }
    int PageSize = 15;

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

    private void TriggerEdit(GridCommandEventArgs args)
    {
        var product = (args.Item as Product);

        if (product.ProductName == "Product1")
        {
            args.IsCancelled = true;
        }
    }
    private void UpdateItem(GridCommandEventArgs args)
    {
    }
    private void CancelItem(GridCommandEventArgs args)
    {
    }
}
@using Telerik.Blazor.Components.Chart
@using Telerik.Blazor

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

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

        <TelerikChartCategoryAxes>
            <TelerikChartCategoryAxis Categories="@Categories"></TelerikChartCategoryAxis>
        </TelerikChartCategoryAxes>
    </TelerikChart>
</div>

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

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

@functions {
    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 Telerik.Blazor.Components.Calendar
@using Telerik.Blazor

<TelerikCalendar SelectionMode="@CalendarSelectionMode.Single" Date="@startDate" View="@CalendarView.Year" BottomView="@CalendarView.Year">
</TelerikCalendar>
<TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple" Date="@startDate">
</TelerikCalendar>

@functions {
    private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar
}
@using System.ComponentModel.DataAnnotations
@using Telerik.Blazor.Components.DropDownList

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

    <TelerikDropDownList Data="@DropDownListData" bind-Value=@SelectedValue Height="40" PopupHeight="170" DefaultItem="@DefaultItem" ValueField="ProductId" TextField="ProductName">
    </TelerikDropDownList>
    <TelerikDropDownList bind-Value="@employee.EmployeeId" Height="40" DefaultItem="@DefaultEmployeeItem" Data="@EmployeeData" ValueField="EmployeeId" TextField="Name">
    </TelerikDropDownList>

    <button class="k-button" type="submit">Submit</button>
</EditForm>

@functions  {
    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;

    IEnumerable<DropDownValidationModel> EmployeeData { get; set; }

    DropDownValidationModel employee { get; set; } = new DropDownValidationModel();

    DropDownValidationModel DefaultEmployeeItem { get; set; } = new DropDownValidationModel()
    {
        Name = "Choose an employee"
    };

    protected override void OnInit()
    {
        DropDownListData = new List<Product>();
        for (int i = 0; i < 5; i++)
        {
            DropDownListData.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product" + i.ToString(),
                SupplierId = i,
                UnitPrice = (decimal)(i * 3.14),
                UnitsInStock = (short)(i * 1),
            });
        }

        EmployeeData = new List<DropDownValidationModel>();
        for (int i = 0; i < 10; i++)
        {
            EmployeeData.Add(new DropDownValidationModel()
            {
                Name = "John " + i.ToString(),
                EmployeeId = i
            });
        }

        base.OnInit();
    }

    class DropDownValidationModel
    {
        [Required(ErrorMessage = "Choose an employee")]
        public int? EmployeeId { get; set; }

        public string Name { get; set; }
    }

    string SuccessMessage = string.Empty;

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

Are you ready to revolutionize your development process?

  • Don’t reinvent the wheel – get 25+ native components off the shelf

  • Style your UI as you wish – theme for Twitter Bootstrap, Google Material, Telerik Default or your own

  • Native components all the way – we built the components natively, so you enjoy all Blazor’s features as they were intended to

  • Enhanced user experience - with our Telerik UI for Blazor Grid templates you can customize the look and feel of your data

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

  • 25+ (and growing) UI components to match various app scenarios

  • An SDK designed and built for Blazor, with zero dependencies

  • Our legendary support, with 95% customer satisfaction rating

Try now