Kendo UI grid data-source triggers extra ajax request on filter

Question

I'm using Kendo UI grid in my project to build a orders list, it has a data-source that loads all the orders immediately with an ajax request and it works on them (filtering, ordering, paging) locally with no additional requests.

This is the code i've used to set it up:

$("#layby-list").kendoGrid({
    columns: [
        {
            title: "Order date",
            field: 'order_d',
            filterable: {cell: {operator: "eq", showOperators: false}},
            format: "{0:dd/MM/yyyy}"
        },
        {
            title: "Order number",
            field: 'order_n',
            filterable: {cell: {operator: "eq", showOperators: false}},
        },
        {
            title: "Customer",
            field: 'customer',
            filterable: {cell: {operator: "startswith", showOperators: false}}
        }
    ],
    filterable: {
        mode: "row"
    },
    selectable: "row",
    sortable: true,
    resizable: true,
    navigatable: true,
    pageable: {
        pageSize: 10
    },
    groupable: true,
    dataSource: {
        transport: {
            read: {
                url: baseUrl,
                dataType: "json",
                type: "POST",
                data: {
                    action: 'loadOrders'
                }
            }
        },
        schema: {
            data: "data",
            total: "total",
            type: "json",
            model: {
                fields: {
                    order_d: {type: 'date'},
                    order_n: {type: 'number'},
                    customer: {type: 'string'}
                }
            }
        }
    }
});

This works very good except when i try to filter the "customer" column, since that filter is an autocomplete it performs exactly the same request executed to load the grid to show all the options, so the question is: is it possible to avoid that request by sharing data between the grid and its filters?

score 1 · Accepted Answer · answered Dec 09 '15 at 09:59

1

You can provide dataSource (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.cell.dataSource) to 'Customer' column filter:

{
    title: "Customer",
    field: 'customer',
    filterable: {
        cell: {
            operator: "startswith",
            showOperators: false,
            dataSource: new kendo.data.DataSource({
                data: [
                    { customer: "...." },
                    { customer: "...." },
                    { customer: "...." }
                ]
            }),
        }
    }
}

answered Dec 09 '15 at 09:59

Gene R

3,684
2
17
27

I don't have a fixed array of customers, they are taken from the grid data-source – mck89 Dec 09 '15 at 10:03
@mck89 you can update them in grid dataBound event, or set `transport.read` which will make ajax call to get data for autocomplete – Gene R Dec 09 '15 at 10:05
Ok i understand what you are saying, but really there isn't a way to make that process automatic? i mean, i've read something about shared data-sources and this is exactly that case since data is the same for grid and filters – mck89 Dec 09 '15 at 10:09
@mck89 since your grid is using paging, its dataSource may have only data corresponding to current page – Gene R Dec 09 '15 at 10:11
Data-source contains the complete list of orders that's why i haven't used serverPaging because i want client-side pagination / filtering / sorting on server provided data, but i start to think that this behaviour is not handled correctly by Kendo – mck89 Dec 09 '15 at 10:36
@mck89 By default grid autocomplete filter is using grid's dataSource. So u need to have custom separate dataSource for autocomplete or your grid dataSource must be static: `dataSource = new kendo.data.DataSource({data: [... ]});` – Gene R Dec 09 '15 at 10:39
Ok, i still can't understand why the data of the data-source is not mantained between grid and filters (i've made some tests and data-source is empty when i write something in the filter that's why it makes another ajax request), but i think that your solution is the only way to make it work. Thanks. – mck89 Dec 09 '15 at 11:06

score 1 · Answer 2 · edited Apr 08 '16 at 14:46

1

I had the same problem and solved changing the

filterable: {
    mode: "row"
},

to

filterable: {
    mode: "menu"
},

edited Apr 08 '16 at 14:46

ManoDestra

6,325
6
26
50

answered Apr 08 '16 at 14:36

Ernesto

11
1

Kendo UI grid data-source triggers extra ajax request on filter

2 Answers2