在多级Kendo Razor Grid中添加复选框withTabStrip detailtemplate和另一个网格

时间:2014-12-18 18:53:39

标签: html asp.net-mvc razor kendo-grid kendo-asp.net-mvc

我遵循了剑道的C#MVC(razor)http://demos.telerik.com/aspnet-mvc/grid/detailtemplate的例子 用于构建嵌套的'grid-tabstrip-grid'。这正是我的意思:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(120);
        columns.Bound(e => e.LastName).Width(120);
        columns.Bound(e => e.Country).Width(120);
        columns.Bound(e => e.City).Width(120);
        columns.Bound(e => e.Title);
    })
    .Sortable()
    .Pageable()
    .Scrollable()
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
    )
    .Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("tabStrip_#=EmployeeID#")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Orders").Content(@<text>
                    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
                        .Name("grid_#=EmployeeID#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.OrderID).Title("ID").Width(56);
                            columns.Bound(o => o.ShipCountry).Width(110);
                            columns.Bound(o => o.ShipAddress);
                            columns.Bound(o => o.ShipName).Width(190);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
                </text>                        
                );
                items.Add().Text("Contact Information").Content(
                    "<div class='employee-details'>" +
                        "<ul>" +
                            "<li><label>Country:</label>#= Country #</li>" +
                            "<li><label>City:</label>#= City #</li>" +
                            "<li><label>Address:</label>#= Address #</li>" +
                            "<li><label>Home Phone:</label>#= HomePhone #</li>" +
                        "</ul>" +
                    "</div>"
                );                
            })
            .ToClientTemplate())
</script>

<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

<style scoped="scoped">
    .k-detail-cell .k-tabstrip .k-content {
        padding: 0.2em;
    }
    .employee-details ul
    {
        list-style:none;
        font-style:italic;
        margin: 15px;
        padding: 0;
    }
    .employee-details ul li
    {
        margin: 0;
        line-height: 1.7em;
    }

    .employee-details label
    {
        display:inline-block;
        width:90px;
        padding-right: 10px;
        text-align: right;
        font-style:normal;
        font-weight:bold;
    }
</style>

我的问题是当我尝试在第二个(最深)网格中为我的一个布尔值添加一个复选框时(参见上面的.Name(“grid _#= EmployeeID#”)网格)。它不会接受我发现的常见答案。我该怎么做:

columns.Bound(o => o.ShortListedFlag).Title("Short Listed").ClientTemplate("<input type='checkbox' #= ShortListedFlag ? checked='checked': '' # class='chkbx' />");

0 个答案:

没有答案