CODEWITHSUNDEEP
kendo-uigriddatasource
amlelanu
amlelanu

Reputation: 43

kendo grid shared data source

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

Upvotes: 1

Views: 805

Answers (2)

amlelanu
amlelanu

Reputation: 43

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

Upvotes: 1

Ali Tahouri
Ali Tahouri

Reputation: 85

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

Upvotes: 0

Related Questions