Telerik Blazor Grid: GridAutoGeneratedColumns set the width of a column in the model using Data annotation

Question

I am using Telerik Blazor Grid and GridAutoGeneratedColumns feature to generate a grid and its columns regarding the properties of the model.

here's the question: I remember I saw something like adding a Data annotation to the model's property which defines the ColumnWidth for instance to indicate a specific width for a column. But I cannot find it anymore. So, generally, is there any way to define a specific column width for a property in the model so the auto generated columns can render it automatically and dynamically?

Have a look on the code so it'll be more clear:

@page "/test"    
@using System.ComponentModel.DataAnnotations;

<TelerikGrid Data=@GridData
             AutoGenerateColumns="true"
             Pageable="true"
             Sortable="true"
             Groupable="true"
             OnUpdate="@UpdateItem"
             OnDelete="@DeleteItem"
             OnCreate="@CreateItem">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
    </GridToolBar>
    <GridColumns>

        <GridColumn Field="@nameof(Employee.EmployeeId)" Title="Employee Id" Width="120px" Editable="false" />

        <GridAutoGeneratedColumns />

        <GridCommandColumn>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public class Employee
    {
        public Employee()
        {
            HireDate = MeetingDate = DateTime.Now;
        }

        [Display(AutoGenerateField = false, Name = "Employee #")]
        public int? EmployeeId { get; set; }

        [Editable(false)]
        [Display(Name = "Employee Name")]
        public string Name { get; set; }

        [Display(Name = "Age In Years")]
        public int? AgeInYears { get; set; }

        [Display(Name = "Graduate Grade")]
        public decimal? GraduateGrade { get; set; }

        [Display(Name = "HireDate")]
        public DateTime HireDate { get; set; }

        [Display(AutoGenerateField = false, Name = "Meeting Date")]
        public DateTime MeetingDate { get; set; }
    }

    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();

        for (int i = 0; i < 100; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                AgeInYears = rand.Next(10, 80),
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)),
                MeetingDate = DateTime.Now.Date.AddDays(rand.Next(20, 40)),
                GraduateGrade = i % 4 + 3
            });
        }
    }

    private void CreateItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Employee;

        argsItem.EmployeeId = GridData.Count + 1;
        argsItem.Name = "Employee " + argsItem.EmployeeId;

        GridData.Insert(0, argsItem);
    }

    private void DeleteItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Employee;

        GridData.Remove(argsItem);
    }

    private void UpdateItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Employee;
        var index = GridData.FindIndex(i => i.EmployeeId == argsItem.EmployeeId);
        if (index != -1)
        {
            GridData[index] = argsItem;
        }
    }
}

And the result is something like:

And what I expect is setting a specific column width for instance, something like this:

[Editable(false)]
[Display(Name = "Employee Name")]
[ColumnWidth="200px"]
public string Name { get; set; }

Thank you in advance and stay healty and productive.

Answer 1

The column width feature of the autogenerated columns is the ColumnWidth parameter that lets you set the same width for all of them. You can read more about it in the AutoGenerated Columns - Customization section

There is no "column width" attribute out-of-the-box in C# and so it would be strange for the grid to use it. What I can suggest you consider is that you create a custom attribute (see an example here) and use a loop to create the columns in a fashion similar to this example (you can use reflection to get the fields from the model if you don't use an expando object), and then read their attributes and set the Width parameter - essentially, make your own column generation.