kendo网格共享数据源

时间:2016-11-14 08:56:42

标签: kendo-ui grid datasource

这是我的主要网格。在行动中,我转到数据库并获取所有数据。我想放置另一个将使用相同数据类型的网格。此网格将使用与我指定的过滤器相同的数据源。我不想再去数据库了。 例如 Grid1:显示所有数据 Grid2:显示OrderAmount> 100

(Html.Kendo().Grid<CustomerOrder>()
.Name("Orders")
.Events(events => events.DataBound("onDataBound"))
.DataSource(dataSource => dataSource   
    .Ajax()
    .ServerOperation(false)
    .Read(read => read.Action("OrderListAjax", controller))
    .PageSize(Constants.PageSize)
.Columns(columns =>
                           {                                 
                               columns.Bound(p => p.CustomerNumber).Title("CustomerNumber");
                               columns.Bound(p => p.CustomerName).Title("CustomerName");
                               columns.Bound(p => p.OrderAmount).Title("OrderAmount");   
                           })        
    )

2 个答案:

答案 0 :(得分:1)

我在下面尝试了一种不同的方式,它也有效。

    // Take the data source from main grid
    var mainSource = $("#Orders").data("kendoGrid").dataSource.data().toJSON();

   // Prepare your query on main grid source
    var orderAmountQuery = kendo.data.Query.process(mainSource, {
        filter: {
            logic: "and",
            filters: [               
            {
                field: "OrderAmount",
                value: parseInt("100"),
                operator: "gt" // greater than
            }
            ]
        }
    });

    // Create a new datasource for set filtered datasource
    var orderAmountQueryDataSource = new kendo.data.DataSource({
        pageSize: 15,
    });
    orderAmountQueryDataSource.data(orderAmountQuery.data);


    // set grid2's data source with filtered dataSource
    var grid2 = $("#Grid2").data("kendoGrid");
    grid2.setDataSource(orderAmountQueryDataSource);

答案 1 :(得分:0)

你的主要答案在这里:

is it possible to copy a grid datasource to a new datasource, a new datasource that loads all data?

但是对于你需要进行过滤的情况,你也可以使用它:

在CSHTML中添加第二个网格:

<div id="MySecondGrid"></div>

使用以下Javascript:

// Get the first datasource
var ds1 = $("#Orders").data("kendoGrid").dataSource;

// Filter the second datasource
var ds2 = $.grep(ds1._data, function (item) { return item.OrderAmount > 100; });
ds2.serverPaging = false;

// Set the second datasource
$("#MySecondGrid").kendoGrid({
    dataSource: ds2
});