Default Filter dengan Kendo Grid

Kasus yang sering diminta adalah munculkan data per waktu ini saja dulu, nanti user bisa lakukan filter berdasarkan waktu yang kita sediain. Di Kendo Grid, kita bisa setting default filter ketika load pertama kali. Caranya mudah kita tinggal menyisipkan filter ketika kendo grid ini load.

Kondisi nya seperti, saya ingin menampilkan data untuk transaksi hari ini saja dari 2 tanggal yang bisa diubah-ubah oleh user.

Masukan filter default pada datasourcenya.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
  var urlx_income = main_url + '/get_all_income_list';
    var ds_income = new kendo.data.DataSource({
        transport: {
            read: {
                type: 'get',
                url: urlx_income,
                dataType: 'json'
            }
        },
        error: function(e) {
            alert(e.status + ':' +e.errorThrown);
        },
        schema: {
            data: function(data){
                return data.Result;
            },
            total: function(data){
                return data.CResult;
            }
        },
        filter: {
            logic:"and",
            filters: [
                {
                    field: 'fulldate',
                    operator: "filter2date",
                    value:$('#to_date_income').val()
                },
                {
                    field: 'fulldate',
                    operator: "filter2date",
                    value:$('#from_date_income').val()
                }
            ]
        },
        pageSize: limit,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });

Terlihat pada kode diatas, saya memasukan default filter di kode ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
filter: {
    logic:"and",
    filters: [
        {
            field: 'fulldate',
            operator: "filter2date",
            value:$('#to_date_income').val()
        },
        {
            field: 'fulldate',
            operator: "filter2date",
            value:$('#from_date_income').val()
        }
    ]
},

Terlihat, saya masukan field sebagai nama field label, operator sebagai label operator di controller saja, dan value adalah nilai default dari grid yang ingin kita setting.

Setelah datasource kita setting, tinggal kita panggil deh grid dengan datasource yang diatas. Kode sample ini seperti dibawah.

1
2
3
$("#incomes_list").kendoGrid({
        dataSource: ds_income,
  // bla bla dan seterusnya.

Untuk mengambil data filter default itu kita bisa panggil POST atau GET sesuai settingan kendo grid kita dengan name “filter”.

Semoga bisa bermanfaat šŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.