Telerik Blazor网格：GridAutoGeneratedColumns使用数据注释设置模型中列的宽度

如何解决Telerik Blazor网格：GridAutoGeneratedColumns使用数据注释设置模型中列的宽度

我正在使用Telerik Blazor网格和GridAutoGeneratedColumns功能来生成网格及其有关模型属性的列。

这是问题： 我记得我看到过类似在模型的属性中添加Data批注的内容，该批注定义了ColumnWidth以指示列的特定宽度。但是我找不到了。 因此，一般而言，是否有任何方法可以为模型中的属性定义特定的列宽，以便自动生成的列可以自动动态地呈现它？

看看代码，这样会更清楚：

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

结果是这样的：

我期望设置一个特定的列宽，例如：

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

预先感谢您，保持健康和多产。

解决方法

自动生成的列的列宽功能是ColumnWidth参数，可让您为所有列设置相同的宽度。您可以详细了解in the AutoGenerated Columns - Customization section

在C＃中没有开箱即用的“列宽”属性，因此网格使用它会很奇怪。我可以建议您考虑的是创建一个自定义属性（请参见示例here）并使用循环以类似于this example的方式创建列（您可以使用反射来获取字段如果您不使用expando对象，则可以从模型中获取数据），然后读取其属性并设置Width参数-本质上是生成自己的列。