How do you style the components in the grid editor?

[Kenny]

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?

 

Thanks,

Kenny

[Marin Bratanov]

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.

Example:

@using Telerik.Blazor.Components.Grid

<style>
    .specialEditorsAppearance .myOwnClass {
        border: 1px solid red;
    }

    .specialEditorsAppearance .k-grid-table input[type='checkbox'],
    .specialEditorsAppearance .k-grid-table select {
        margin: 50px !important;
    }
</style>

<TelerikGrid Data=@MyData EditMode="inline" Pageable="true" Class="specialEditorsAppearance">
    <TelerikGridColumns>
        <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">
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as SampleData;
                    <select class="myOwnClass" bind=@CurrentlyEditedEmployee.Role>
                        @foreach (string item in Roles)
                        {
                            <option value=@item>@item</option>
                        }
                    </select>
                }
            </EditorTemplate>
        </TelerikGridColumn>
        <TelerikGridCommandColumn>
            <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
        </TelerikGridCommandColumn>
    </TelerikGridColumns>
    <TelerikGridEvents>
        <EventsManager OnUpdate="@UpdateHandler"></EventsManager>
    </TelerikGridEvents>
</TelerikGrid>

@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
        //myContext.SaveChanges();

        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" };
}

Regards,
Marin Bratanov
Progress Telerik UI for Blazor