如何在层次网格中为嵌套的剑道UI数据源过滤数据

Obj1{"Name":"abc","id":1 ,Obj2 {{"Name":"A1","oid":1},{"Name":"A2","oid":2}}

用数据准备viewModel和数据源

$(document).ready(function () {
var viewModel = kendo.observable({
    //here define a datasource - i followed your data with improv
    datasource: new kendo.data.DataSource({
        data: [{
            name: 'abc',
            id: 1,
            obj2: [{
                name: 'a1',
                oid: 1
            }, {
                name: 'b1',
                oid: 2
            }, {
                name: 'c1',
                oid: 3
            }]
        }, {
            name: 'def',
            id: 4,
            obj2: [{
                name: 'd1',
                oid: 4
            }, {
                name: 'e1',
                oid: 5
            }]
        }, {
            name: 'ghi',
            id: 3,
            obj2: [{
                name: 'g1',
                oid: 6
            }, {
                name: 'h1',
                oid: 7
            }]
        }]
    }),
    //define the function when we want to click the expand button
    detail: function (e) {
        //bind it now
        kendo.bind(e.detailCell, e.data);
    }
});
//1 st bind container with the kendo observable
kendo.bind('#container', viewModel);
//grab the grid and bind its 'detailInit' event with our 'detail' function
var grid = $('#grid').getKendoGrid();
grid.bind('detailInit', viewModel.detail);

});

和准备html的网格和模板的细节网格

<div id="container">
    <br/>
    <br/>
    <div id="grid" data-role="grid" data-bind="source: datasource" data-detail-template="child-template" data-columns="[
            { field: 'name' },
            { field: 'id' },
        ]"></div>
</div>
<script id="child-template" type="text/x-kendo-template">
    <div data-role = "grid"
    data-bind = "source: obj2"
    data-columns = "[
    { field: 'name' },
    { field: 'oid' }
    ]"> </div>
</script>

最后这是jsfiddle这个教程教我怎么做

编辑:我在每个细节网格的顶部添加了一个下拉菜单，这样你就可以从那里过滤它们，这是jsfiddle

我有同样的问题，不能在子网格中应用过滤器。

下面是这个问题的解决方案:

我的HTML代码:

            <div class="panel-body custom-table" id="divAllCall">
                <div class="row">
                    <div class="col-md-12">
                        @(Html.Kendo().Grid<FW.Model.model>()
                        .Name("gridTest")
        .Columns(col =>
        {
            col.Bound(c => c.Id).Hidden(true);
            col.Bound(c => c.Name).Title("Name").HeaderHtmlAttributes(new { title = "Port" }).Width(100);
            col.Bound(c => c.col1).Title("col1").HeaderHtmlAttributes(new { title = "Upcoming Calls" }).Width(100);
            col.Bound(c => c.col2).Title("col2").HeaderHtmlAttributes(new { title = "Calls In Port" }).Width(100);

        })
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height: 380px" })
        .Pageable(pageable => pageable.Refresh(true)
        .PageSizes(new int[5] { 20, 40, 80, 100, 200 })
        .ButtonCount(5))
                        .ClientDetailTemplateId("TestTemplate")
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
                    .Read(read => read.Action("TestAction", "TestController"))
        )
                        )
                        <script id="TestTemplate" type="text/kendo-tmpl">
                            @(Html.Kendo().Grid<FW.Model.model1>()
                .Name("ChildGrid#=Id#") // template expression, to be evaluated in the master context
.Columns(col =>
{
    col.Bound(o => o.Id).Hidden(true);
    col.Bound(o => o.name).Width(100).ClientTemplate("''#= BuildLink(data,'1') ''#");
    col.Bound(o => o.testName).Width(100).ClientTemplate("''#= BuildLink(data,'2') ''#");
    col.Bound(o => o.TestName1).Width(100).ClientTemplate("''#= BuildLink(data,'3') ''#");       
})
.Filterable(x=>x.Mode(GridFilterMode.Row))
                        .Scrollable()
                .DataSource(dataSource => dataSource
                .Ajax()
                                .Read(read => read.Action("TestAction2", "TestController2", new { Id= "#=Id#", maxCalls = "#=MaxCalls#" }))
                    ).Events(events => events.DataBound("DataBound_AllCallChild"))
            .ToClientTemplate()
                            )
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

查看这里.Filterable(x=>x.Mode(GridFilterMode.Row))我是如何应用过滤器的，我在这里使用了重载函数并使用了GridFilterMode。

希望这对你有帮助!