kendo网格共享数据源

Question

这是我的主网格。在行动中，我进入数据库并获取所有数据。我想放置另一个将使用相同数据类型的网格。这个网格将使用与我指定的过滤器相同的数据源。我不想再去数据库了。例如 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");   
                           })        
    )

Answer 1

您的主要答案在这里：

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
});

Answer 2

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

    // 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);

kendo网格共享数据源

kendo grid shared data source

grid

datasource

kendo-ui