kendo grid server re filtering the data source

Question

$(document).ready(function () {

    var agenciesData = new kendo.DataToken.DataSource({
        type: 'webapi',
        transport: {
            read: { url: "/api/Agencies/", dataType: "json", data: { activity: getActivity() } },
            create: { url: "/api/Agencies", type: "POST", dataType: "json" },
            destroy: { url: "/api/Agencies/{0}", type: "DELETE" },
            update: { url: "/api/Agencies/{0}", type: "PUT" },
            idField: "ID"
        },
        filter: [{ field: "Activity", operator: "eq", value: getActivity() }],
        pageSize: 15,
        page: 1,
        total: 0,
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        schema: {
            data: "Data",
            total: "Total",
            model: {
                id: "ID",
                fields: {
                    ID: { editable: false, type: "number" },
                    AgencyName: { type: "string" },
                    AgentName: { type: "string" },
                    Address: { type: "string" },
                    City: { type: "string" },
                    Tel1: { type: "string" },
                    Tel2: { type: "string" },
                    Pele: { type: "string" },
                    Activity: { type: "number" },
                    ToDate: { type: "date" }
                }
            }
        }
    });

    $("#agenciesGrid").kendoGrid({
        dataSource: agenciesData,
        toolbar: [{ text: "valid", className: "validAgents" }, { text: "not valid", className: "notValid" }, { text: "all", className: "allAgents" }, { text: "potential", className: "potetial" }],
        editable: false,
        navigatable: true,
        sortable: true,
        autoBind: false,
        height: 430,
        pageable: { refresh: true },
        columns: [
            { field: "ID", hidden: true },
            { field: "AgencyName", title: "agency", width: 150, filterable: { cell: { operator: "contains" } } },
            { field: "AgentName", title: "agent", width: 150, filterable: { cell: { operator: "contains" } } },
            { field: "Address", title: "address", width: 200, template: "#= Address + ' ' + City #", filterable: false },
            { field: "Tel1", title: "phones", width: 300, template: "#= Tel1 + ' : ' + Tel2 + ' : ' + Pele #", filterable: false },
            { field: "Activity", title: "active", width: "90px" },
            { field: "ToDate", title: "end Contract", type: "date", width: 90, format: "{0:dd/MM/yyyy}", parseFormats: ["yyyy-MM-ddThh:mm:ss"] }
        ]
    });


    $(".validAgents").click(function () { //valid
        $("#myActivity").val("1");
        $('#agenciesGrid').data().kendoGrid.dataSource.read({ activity: "1" });
    });

    $(".notValid").click(function () {//notValid
        $("#myActivity").val("2");
        $('#agenciesGrid').data().kendoGrid.dataSource.read({ activity: "2" });
    });

    $(".potetial").click(function () {//potetial
        $("#myActivity").val("3");
        $('#agenciesGrid').data().kendoGrid.dataSource.read({ activity: "3" });
    });
});


function getActivity(){
    var myActivity = $("#myActivity").val();
    return myActivity;
}

When I use kendo grid already filtered by parameter like : $('#someGrid').data().kendoGrid.dataSource.read({ activity: value }); i see the get: https://localhost:44305/api/Agencies/?sort=&page=1&pageSize=15&group=&filter=&activity=1

The grid is filter as expected but, when I want to do paging, sorting, refresh - I get the whole data ignoring the filter that i made. and I see the get: https://localhost:44305/api/Agencies/?sort=&page=1&pageSize=15&group=&filter=

How can I save my filter state to do paging and sorting on the data came from the server side ? even when i used differen approach like "scrollable: { virtual: true }" and when i scroll down - every request is without the filtering...

Thanks

try using the dataSource.filter(filter) method instead of putting the filter in .read(filter). If {activity:value} is not a filter, but additional data to be passed to the server, try putting it in transport.read.data instead — user1102901
how can i paging on the filtered data without destroy the data set ? — AloniSoft
Did you mean to use client side paging and sorting? That way it won't call the server again when you want to page and sort. — user1102901
I did the "filter: [{ field: "Activity", operator: "eq", value: "1" }]" and now i see the paging reqests are like: localhost:44305/api/Agencies/…. i think i missed something becuase i get "405 Method Not Allowed" when data load i see "localhost:44305/api/Agencies/…" should i need to use also the read filter param ? — AloniSoft
yeah it looks like you want {activity:1} to be additional data sent to the server, so try the transport.read.data param — user1102901

M Munir M Munir · Accepted Answer · 2015-08-22T04:33:41

Did you try

var agenciesData = new kendo.DataToken.DataSource({
  filter : function () {
     return object;
  }
});

I mean try using filter as a function and you can do your logic inside the function depending on the situation.

kendo grid server re filtering the data source

1 Answers