如何在网格列的下拉编辑器中显示默认值

Question

这是我的网格：

var grid = Html.Kendo().Grid<UserVM>()
    .Name("Grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("gridError"))
        .PageSize(10)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(e => e.Id);
            model.Field(e => e.Role).DefaultValue((RoleVM)ViewData["DefaultRole"]);
        })
        .Read("Read", "GeneralInformation")
        .Create("Read", "GeneralInformation")
        .Update("Update", "GeneralInformation")
        .Destroy("Delete", "GeneralInformation")
    )
    .Columns(columns =>
    {
        columns.Bound(e => e.FullName).Title(_userLocalizer["Full name"]);
        columns.Bound(e => e.Role.Name).Title(_userLocalizer["Role"]).EditorTemplateName("RoleEditor");
        columns.Bound(e => e.Position).Title(_userLocalizer["Position"]);
        columns.Bound(e => e.PhoneNumber).Title(_userLocalizer["Phone number"]);
        columns.Bound(e => e.Email).Title(_userLocalizer["Email"]);
    })
    .Editable(GridEditMode.InLine)
    .Sortable()
    .Pageable(pager => pager
        .Input(true)
        .PageSizes(true)
    )
    .Scrollable(scroll => scroll
        .Virtual(GridVirtualizationMode.RowsAndColumns)
    );

我使用编辑器来选择角色。如您所见，我尝试在 Datasource Model 上指定默认值，但它不起作用。

RoleVM:

public class RoleVM
{
    public string Name { get; set; }
    public string Value { get; set; }

    public RoleVM(string name, string value)
    {
        Name = name;
        Value = value;
    }
}

RoleEditor:

@(Html.Kendo().DropDownList()
    .Name("Employee")
    .DataTextField("Name")
    .DataValueField("Value")
    .BindTo((IEnumerable<RoleVM>) ViewData["Roles"])
    )

UserVM:

public class UserVM
{
    public int? Id { get; set; }
    public List<ApplicationVM> Applications { get; set; }

    [Required(ErrorMessage = "Full name required")]
    public string FullName { get; set; }

    [Required(ErrorMessage = "Role required")]
    public RoleVM Role { get; set; }

    [Required(ErrorMessage = "Position required")]
    public string Position { get; set; }

    [Required(ErrorMessage = "Phone number required")]
    [Phone]
    public string PhoneNumber { get; set; }

    [Required(ErrorMessage = "Email required")]
    [EmailAddress(ErrorMessage = "Email invalid")]
    public string Email { get; set; }
}

控制器动作填充数据：

public IActionResult Index()
{
    var roles = Static.Roles.Select(role => new RoleVM(_staticLocalizer[role].Value, role));
    ViewData["Roles"] = roles;
    ViewData["DefaultRole"] = roles.Last();
    return View();
}

Answer 1

您可以将列绑定到 Role 对象而不是它的名称属性并添加一个 ClientTemplate 来显示名称：

columns.Bound(e => e.Role).Title(_userLocalizer["Role"]).ClientTemplate("#=Role.Name#").EditorTemplateName("RoleEditor");

然后更新角色编辑器：

@model RoleVM

@(Html.Kendo().DropDownListFor(m=>m)
.DataTextField("Name")
.DataValueField("Value")
.BindTo((IEnumerable<RoleVM>) ViewData["Roles"])
)

如果您需要保持 out-of-the-box 过滤器正常工作，您还可以使用 MVVM 来配置绑定。保持您已经定义的列配置：

columns.Bound(e => e.Role.Name).Title(_userLocalizer["Role"]).EditorTemplateName("RoleEditor");

并通过 data-bind 属性将编辑器模板绑定到整个对象：

@(Html.Kendo().DropDownList()
.Name("Employee")
.DataTextField("Name")
.DataValueField("Value")
.BindTo((IEnumerable<RoleVM>) ViewData["Roles"])
.HtmlAttributes(new {data_bind="value:Role"})
)

Answer 2

@Aleksandar 回答的补充。添加过滤的正确方法是：

.Search(c => { c.Field(e => e.Role.Name, "startswith"); })

并且列需要绑定到 Role:

columns.Bound(e => e.Role)

有了这个，data-bind 属性就没用了。

如何在网格列的下拉编辑器中显示默认值

How to display default value in dropdown editor for grid column

kendo-ui

asp.net-core