如何在层次结构网格中过滤嵌套Kendo UI数据源的数据 以下是数据源:
Obj1{"Name":"abc","id":1 ,Obj2 {{"Name":"A1","oid":1},{"Name":"A2","oid":2}}
我需要搜索出现在详细网格中的Obj2 Name。 请帮忙。
答案 0 :(得分:0)
使用您的数据准备viewModel和datasource
$(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,而tutorial教会我如何做到这一点
编辑:我在每个细节网格的顶部添加一个下拉列表,以便您可以从那里过滤它们,这是jsfiddle
答案 1 :(得分:0)
我遇到了同样的问题,无法在子网格中应用过滤器。
以下是解决方案:
我的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.Row而不是GridFilterModel.menu。
希望这会有所帮助!