@model KendoUIMvcApplication1.Models.UserList_ViewModel
@{
    ViewBag.Title = "UserList";
}
<h2>@Model.SomeString</h2>

@(Html.Kendo().Grid<KendoUIMvcApplication1.Models.User>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.FirstName).Groupable(false).Width(140);
        columns.Bound(p => p.SecondName).Groupable(false).Width(140);
        columns.Bound(p => p.Id)
            .HtmlAttributes(new { style = "text-align: right" })
            .Width(80);
        columns.Command(command =>
        {
            command.Custom("ViewUserDetails").Click("showDetails");
        });
    })
    .Pageable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("Users_Read", "Home"))
     )
)
@(Html.Kendo().Window().Name("Details")
    .Title("User Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)
<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= FirstName # #= SecondName #</h2>
        <em>#= Id #</em>
    </div>
</script>

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());

    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
</script>
