How to display default value in dropdown editor for grid column

Question

This is my grid:

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)
    );

I use editor for choosing a role. As you can see, I tried to specify the default value on Datasource Model, but it doesn't work.

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

Controller's action filling data:

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

You can bind the column to the Role object rather than it's Name property and add a ClientTemplate to display the Name:

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

Then update the RoleEditor:

@model RoleVM

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

If you need to keep the out-of-the-box filter working you can also use MVVM to configure the binding. Keep the column configuration as you already have it defined:

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

and bind the editor template to the whole object via the data-bind attribute:

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

Answer 2

Addition to the @Aleksandar answer. The correct way to add filtering is:

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

And column need to be bounded to Role:

columns.Bound(e => e.Role)

And with this, data-bind attribute is useless.