kendo grid shared data source

Question

This is my main grid. In action i go to the database and get all data. I want to put an another grid that will use same data type. And this grid will use same data source with filter that i specified. I don't want to go database again. For example Grid1: show all data Grid2: show 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");   
                           })        
    )

Please note that the model-view-controller tag is for questions about the pattern. There is a specific tag for the ASP.NET-MVC implementation. — , Nov 14 '16 at 10:20

score 1 · Accepted Answer · answered Nov 18 '16 at 06:26

I tried a different way in below and it works also.

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

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

Your main answer is here :

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

But for your case which you need to do filtering as well you can use this:

Add your second grid in CSHTML:

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

Use the following 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
});

edited May 23 '17 at 11:59

Community

1
1

answered Nov 18 '16 at 02:47

Ali Tahouri

85
11

For the first part of the answer I wanted to put comment on the question but I don't have enough Reputation to comment on the questions yet. – Ali Tahouri Nov 18 '16 at 03:10

kendo grid shared data source

2 Answers2