Dari segi kemampuan dari flexigrid tentu masih kalah jauh bila dibandingkan dengan jqgrid yang lebih lengkap akan tetapi saya masih suka kutak - kutik flexigrid untuk beberapa website yang saya buat. Adapun 1 kekurangan dari flexigrid tidak adanya fungsi render untuk tiap-tiap baris, tentu ini akan membuat sedikit kecewa beberapa pengguna flexigrid.

Contoh :

Pada Extjs :

function rdNama(val, x, store){
     return store.data.fname + ' ' + store.data.lname;
}

var colomMember = new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        }
        ,singleSelect: true,
        columns: [      
              { header: 'NAMA',width: 150,sortable: true,dataIndex: 'uname' , renderer : rdNama, hidden : true}
            , { header: 'EMAIL',width: 200,sortable: true,dataIndex: 'email' }
            , { header: 'ALAMAT',width: 200,sortable: true,dataIndex: 'alamat' }
            , { header: 'KELAMIN,width: 200,sortable: true,dataIndex: 'kelamin' }
            , { header: 'TYPE',width: 200,sortable: true,dataIndex: 'type_member' }
        ]
    });

Lihat yang saya warnai renderer akan memanggil fungsi fungsi rdNama yang isinya gabungan antara First Name dan Last Name.

Saya belum coba di jqgrid Heee jadi tidak tahu....

 

OK kalian sudah dapat gambaran dengan contoh diatas, Kali ini kita coba untuk sedikit memodifikasi flexigrid agar mempunyai fungsi yang hampir sama dengan extjs.

kita mulai :

1. Buka file Flexigid.js

2. Pada Baris ke 359

td.innerHTML = row.cell[p.colModel[idx].name];

Ganti dengan

if (p.colModel[idx].render) {
   td.innerHTML = p.colModel[idx].render(row.cell[p.colModel[idx].name]);
}else {
   td.innerHTML = row.cell[p.colModel[idx].name];
}

3. Setelah itu tambahkan render: nama_fungsi

Contoh : 

function images(cel){
        var img;
        if(cel == '1'){
            img = "<img src=\"path_image.jpg\" alt=\"aktif\" />";
        }else{
            img = "<img src=\"path_image.jpg\" alt=\"non_aktif\" />";
        }
        return img;
    }

colModel : [
        {display: 'Name', name : 'NAMA', width : 200, sortable : true, align: 'left', process: getDetail},
        {display: 'Email', name : 'EMAIL', width : 250, sortable : true, align: 'left', process: getDetail},
        {display: 'Tanggal', name : 'TGL', width : 100, sortable : true, align: 'left', process: getDetail},
        {display: 'Status', name : 'STATUS', width : 50, sortable : true, align: 'center', process: getDetail, render:images}
        ],

Bagaimana? seru bukan!  fungsi images akan menampilkan status dari aktif maupun tidak dengan gambar yang disesuaikan.

Artikel ini merupakan kelanjutan dari Artikel sebelumnya yaitu Flexigrid Masterdetail.

 

Untuk Full Source silahkan download di bawah

DOWNLOAD