Filter on grid (in code), not datasource

[Scott Buchanan]

Greetings!  I wish to fill three grids from a single datasource (call to metered API).  The API returns 30 rows, I want rows 1 - 10 in grid1, rows 11-20 in grid2 and rows 21-30 in grid3.

My data source (copied from your web API demo) is 

$(document).ready(function () {
    var MedicareRiskDataSource = new kendo.data.DataSource(
    {
        transport: {
            read: {
                url: "http://apiqa.frankcohengroup.com/ProcedureUtil/1/2013",
                type: "GET",
                dataType: "json",
                beforeSend: function (req) {
                    req.setRequestHeader("FCG-ApiKey", "DA103B60C7A340FFA85532F716FC478D");
                }
            }
        },
        schema: {
            data: function (response) {
                return response.Metrics;
            },
            model: {
                id: "MetricID",
                fields: {
                    MetricID: {
                        type: "number"
                    },
                    MetricDescription: {
                        type: "string"
                    },
                    PhysicianValue: {
                        type: "number"
                    },
                    SpecialtyValue: {
                        type: "number"
                    },
                    VarianceValue: {
                        type: "number"
                    }
                }
            }
        },

I can filter here, with 

filter: { field: "MetricID", operator: "lt", value: 11 }

 or 

filter: {
    logic: "and",
    filters: [
        { field: "MetricID", operator: "gt", value: 10 },
        { field: "MetricID", operator: "lt", value: 21 }
    ]
}

etc.

However, that would require three data sources and thus three calls to the API, which we pay for.

My grids look alike, with different names

$("#allServicesGrid").kendoGrid({
    dataSource: MedicareRiskDataSource,
    scrollable: false,
    columns: [
        {
            field: "MetricDescription",
            title: "Name",
            width: 400
        },
        {
        field: "PhysicianValue",
        title: "Physician",
        width: 100
    },
    {
        field: "SpecialtyValue",
        title: "Specialty",
        width: 100
    },
    {
        field: "VarianceValue",
        title: "Variance",
        width: 100
    }]
});

I've added "filterable" to the grid, but that
    1) enables the icon on the column header which I do not want

2) 

 

 

 

 ​

[Scott Buchanan]

Had some trouble with the backspace and posted the message whilst entering it.

Anyway, adding filterable to the grid 
1) enables the icon on the column header which I do not want
2) did not seem to let me set initial values, which I do want.

Thanks,
Scott

[Rosen]

Hello Scott,

 

I'm afraid that the DataSource does not support simultaneous having multiple views of data. Therefore, it is not possible single instance to be bound to separate widgets displaying different results. However, in this particular scenario, shown in the code you have pasted, you could use 3 separate DataSources which to be populated from the data of a remote one. Here is a test page which demonstrates such implementation.

 

Regards,
Rosen
Telerik

 

 

[Scott Buchanan]

Rosen,

 That's very clever, but still simple.  Great answer.

Scott