Kendo UI Grid grouping - how to set group Title

Question

I have a Kendo UI Grid with grouping on RoleName property. I am trying to set title on the grouped property and can't seem to figure out how to do that.

The view model is below.

public class UserMembershipViewModel
{
    [Display(Name = "Username")]
    [UIHint("UsersDropdown")]
    public string UserId { get; set; }

    [Display(Name = "Group")]
    [UIHint("RolesDropdown")]
    public string RoleId { get; set; }

    [Display(Name = "Group")]
    public string RoleName { get; set; }

    [HiddenInput(DisplayValue = false)]
    [Display(Name = "Username")]
    public string UserName { get; set; }

    [HiddenInput(DisplayValue = false)]
    [Display(Name = "Email")]
    public string Email { get; set; }
}

The Kendo Grid is set up as follows.

Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.UserName);
        columns.Bound(p => p.Email);
        columns.Command(command =>
        {
            command.Destroy();
        }).Title("Actions").Width(200);
    })
    .Editable(editable => editable
                .Mode(GridEditMode.PopUp)
                .Window(window => window
                    .Title("Add Group Member")
                    .Draggable(true)))
    .ToolBar(toolbar => toolbar.Create().Text("Add Group Member"))
    .Pageable()
    .Sortable()
    .Groupable()
    .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                model.Id(user => user.UserId);
                model.Field(user => user.UserId).Editable(false);
            })
            .Events(events => events
                .Sync("sync_handler"))
            .Group(group => group.Add(model => model.RoleName))
            .Create(create => create.Action("MembershipCreate", "UserManagement"))
            .Read(read => read.Action("MembershipRead", "UserManagement"))
            .Destroy(destroy => destroy.Action("MembershipDestroy", "UserManagement"))
    )

And the result is this..

The RoleName property in view model has Display attribute on it. This attribute does work for setting title on column headers (you can see the Username column header in the image), but does not work on Group headers.

So the RoleName in the image should be Group. Any ideas on how to set the group title?

Gene R Gene R · Accepted Answer · 2015-11-20T16:13:53

add group field as hidden column with ClientGroupHeaderTemplate:

columns.Bound(p => p.RoleName).ClientGroupHeaderTemplate("#=value#").Hidden();

Kendo UI Grid grouping - how to set group Title

1 Answers