How can i bind a list of items into kendo grid

Question

I have a kendo grid which i want to bind the column data. On my model am returning a list which then get populated to the dropdown. Now i want to bind the description to the grid column. How can i bind the userName column to the grid.

I want to be display userName on the grid but am not getting it.

Model

public class usersModel
{
    public int userId { get; set; }
    public string userName { get; set; }

    public List<usersModel> usersList;
}

Controller

    public ActionResult GetUsers()
    {
        usersModel md = new usersModel();
        string r = ApiBaseUrl + "/GetAllusers" ;
        string resp = JsonGET(r);
        List<usersModel> users = Deserialise<List<usersModel>>.Deserialise(r);

        md.listUsers = users;
        return View(md);

    }

View

    @(Html.Kendo().Grid<usersModel>()
                                 .Name("Grid")
                                 .Columns(columns =>
                                 {
                                     columns.Bound(cl => cl.usersList.userName).Title("User Name");
                                 })
                                 .Sortable()
                                 .Pageable()
                                 .Scrollable()
                                 .DataSource(data => data
                                 .Ajax()
                                 .PageSize(1)
                                .ServerOperation(false))
                                )

Answer 1

To bind a list to a column you can use the ClientTemplate. You can create a JavaScript function:

function displayUserList(data) {
    return $.map(data.usersList, function (e) { return e.userName; }).join(", ");
}

And call it in the column ClientTemplate :

columns.Bound(cl => cl.usersList).ClientTemplate("#= displayUserList(data) #").Title("User Name");