This is a migrated thread and some comments may be shown as answers.

How do you style the components in the grid editor?

1 Answer 381 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Kenny asked on 12 May 2019, 04:45 PM

I would like to style the drop down list in the editor template and maybe the checkbox elements in a grid.  Is this possible at the moment?




1 Answer, 1 is accepted

Sort by
Marin Bratanov
Telerik team
answered on 13 May 2019, 05:17 AM
Hello Kenny,

You can cascade through the grid classes. Here follows an example I made for you with the key points highlighted. It showcases:

  • how you can use specific classes of your own inside custom editors to tweak their appearance
  • how you can cascade through the grid's classes to reach elements in it

Note that browsers tend to disallow styling of checkboxes so most rules you put for them will be ignored.


@using Telerik.Blazor.Components.Grid
    .specialEditorsAppearance .myOwnClass {
        border: 1px solid red;
    .specialEditorsAppearance .k-grid-table input[type='checkbox'],
    .specialEditorsAppearance .k-grid-table select {
        margin: 50px !important;
<TelerikGrid Data=@MyData EditMode="inline" Pageable="true" Class="specialEditorsAppearance">
        <TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" />
        <TelerikGridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <TelerikGridColumn Field=@nameof(SampleData.OnLeave) Title="On Leave?" />
        <TelerikGridColumn Field=@nameof(SampleData.Role) Title="Position">
                    CurrentlyEditedEmployee = context as SampleData;
                    <select class="myOwnClass" bind=@CurrentlyEditedEmployee.Role>
                        @foreach (string item in Roles)
                            <option value=@item>@item</option>
            <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
        <EventsManager OnUpdate="@UpdateHandler"></EventsManager>
@functions {
    public SampleData CurrentlyEditedEmployee { get; set; }
    public void UpdateHandler(GridCommandEventArgs args)
        SampleData item = (SampleData)args.Item;
        //perform actual data source operations here
        //if you have a context added through an @inject statement, you could call its SaveChanges() method
        var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID);
        if (matchingItem != null)
            matchingItem.Name = item.Name;
            matchingItem.Role = item.Role;
    protected override void OnInit()
        MyData = new List<SampleData>();
        for (int i = 0; i < 50; i++)
            MyData.Add(new SampleData()
                ID = i,
                Name = "name " + i,
                Role = Roles[i % Roles.Count]
    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
        public int ID { get; set; }
        public string Name { get; set; }
        public bool OnLeave { get; set; }
        public string Role { get; set; }
    public List<SampleData> MyData { get; set; }
    public static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };

Marin Bratanov
Progress Telerik UI for Blazor
General Discussions
Asked by
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Share this question