Kendo Grid Export Excel dengan PHPExcel di Codeigniter

Trik cara export excel dari kendo grid dengan PHPExcel di Codeigniter ini sebenernya dibuat karena ketidakefesienan melihat kode yang dibuat teman saya. Dia melakukan query ulang untuk mendapatkan data, lalu export. Saya berpikir, kenapa harus query ulang? bukannya dari grid kendo ini kita bisa dapatkan datanya lalu kita lempar saja ke PHPExcel ya?

Penasaran, saya coba ikutin sedikit kodingan teman saya ini. Tapi data tidak saya query ulang tapi mengambil dari grid milik kendo yang sudah kita query sebelumnya.

Mengambil data dari kendo grid

Cara mengambil data dari kendo grid sangat mudah. caranya cukup dengan mengambil object grid milik kendo, lalu ambil datanya.

1
2
var grid = $('#list').data('kendoGrid'); // ambil data object kendo grid, "list" adalah ID dari kendo grid
var listData = grid.dataSource.view(); // ambil data dari grid tersebut

Dari kode diatas ini, pada variable listData ini akan mendapatkan data dari list grid tersebut. Biasa saya console.log untuk mengecek format data yang didapat.

Mengambil data header dari kendo grid

Header dari kendo grid ini adalah data nama header untuk keluaran excel yang kita mau. Misalnya format excel yang kita mau itu ada header name dan dibawahnya secara berurutan adalah data dari header name yang dimaksud.

Untuk mengambil header dari kendo grid ini, kita cukup dengan memanggil kode

1
var columns = grid.columns;

Menggabungkan data header dengan data value kendo grid

Nah, jika data header dan data value dari kendo grid ini udah didapet, dan formatnya pun sudah kita lihat. Kita langsung aja tembak ke PHPExcelnya. Ets, jangan sembarang tembak, kita ikuti aturan Codeigniter, lewat Controller dulu, lalu kita panggil PHPExcel-nya.

Cara menggabungkan ini saya buat format dulu agar mudah dilempar dan diformatnya dengan PHPExcel.

Saya buat format dengan kode dibawah ini.

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
  kendo_grid_export: function( data, column ) {
    var data_value = [];
    for( var j=0; j<data.length; j++ ) {
      var data_item = [];
      for(var i=0; i<column.length; i++) {
        var current_field = column[i].field;
       
        var obj = {
          field: column[i].field,
          value: data[j][current_field]
        }
        data_item.push(obj);
        console.log(obj);
      }
      data_value.push(data_item);
    }

    var data_header = [];
    for(var i=0; i<column.length; i++) {
      data_header.push(column[i].title);
    }
    var data_return = {
      'data_header': data_header,
      'data_value': data_value
    }
    return data_return;
  }

Saya buat fungsi untuk menggabungkan data header dan data value dari kendo grid. Cara panggilnya mudah, cukup dengan menempelkan parameter data header dan value nya saja.

1
var data_return = lighthouseApp.kendo_grid_export(listData,columns);

LighthouseApp adalah object project saya dengan kendo_grid_export adalah fungsi yang dituliskan diatas tadi. Parameternya, terlihat listData dan columns ya 🙂

Proses tembak ke controller

Proses tembak ke controller ini masih keitung mudah. Saya gabungkan proses-proses diatas dalam 1 fungsi event click salah satu tombol seperti dibawah ini.

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
        $("#export_to_excel").on('click',function(event)
        {
            var grid = $('#list').data('kendoGrid');
            var listData = grid.dataSource.view();
            var columns = grid.columns;
            var data_return = lighthouseApp.kendo_grid_export(listData,columns);
           
            var data = { grid: JSON.stringify(data_return) };
            var urlString = main_url + '/export_to_excel';
            var notif;
            $('.notif').html('');
            lighthouseApp.doAjax(
                urlString,
                data,
                function(data){ // on success

                    if(data.name != "") {
                        lighthouseApp.goUrl(urlString+'/'+data.name);
                    }else {
                        // test
                    }
                   
                },
                function(data) { // on fail
                    var text = 'contact programmer !';
                    notif = lighthouseApp.create_notif(text,'error');
                    $('.notif').append(notif);
                }
            );

            return false;
        });
    });
  1. lighthouseApp.doAjax adalah fungsi custom ajax yang saya buat sendiri
  2. lighthouseApp.goUrl adalah fungsi redirection url
  3. lighthouseApp.create_notif adalah fungsi untuk show result dari ajax di no.1 saja.
  4. main_url biasanya saya pasang base_url() + nama controller yang active di halaman ini.

Terlihat pada variable data ini, saya post dalam bentuk stringify JSON yang nanti akan ditangkap oleh controller dalam bentuk string dan kita convert menjadi sebuah multiple array 🙂

Penangkapan di Controller

Yup, kita liat gemana si Controller ini menangkap si JSON yang dikirim dari View didepan, proses diatas tadi. Kalau dilihat, proses tembak controller diatas itu memanggil fungsi export_to_excel. Fungsi itu seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    public function export_to_excel($name='') {
        if($name != '') {
            $full_path = FCPATH . UPLOAD_REAL_PATH . $name;
                                                                 
            $data = file_get_contents($full_path); // Read the file's contents

            $this->load->helper('download');
            force_download($name, $data);
        } else {
            $this->load->library('exportexcel');
           
            $grid = json_decode($this->input->post('grid'),true);
            $this->firephp->log($grid);

            $result = $this->exportexcel->export_to_excel($grid);

            echo json_encode(array('name'=>$result));
        }
    }

Terlihat pada kode diatas, saya sengaja buat 2 kondisi. Kondisi pertama jika memanggil dengan parameter nama dan kondisi kedua jika memanggil tanpa parameter nama.

Apa bedanya? Bedanya yang kedua adalah proses pembuatan excel file dari data yang kita lempar. Sedangkan kondisi pertama adalah proses download dari hasil excel file di kondisi kedua.

Pembuatan File Excel dengan Libraries PHPExcel

Saat proses tembak controller ini, saya arahkan ke proses kedua dengan pemanggilan libraries exportexcel yang saya buat seperti kode dibawah ini.

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
41
42
43
44
45
46
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Exportexcel {
 
  function __construct()
  {
    $this->object =& get_instance();
        $this->object->load->library(array('PHPExcel', 'PHPExcel/IOFactory'));
  }

  public function export_to_excel($grid) {
        $objPHPExcel = new PHPExcel();

        // Set properties
        $objPHPExcel->getProperties()->setCreator("WBS")->setTitle("grid");

        $objset = $objPHPExcel->setActiveSheetIndex(0); //inisiasi set object
        $objget = $objPHPExcel->getActiveSheet();  //inisiasi get object

        $cols = array("A","B", "C", "D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","AA","AB","AC","AD","AE","AF","AG","AH","AI","AJ","AK","AL","AM","AN","AO","AP","AQ","AR","AS","AT","AU","AV","AW","AX","AY","AZ");

        $data_header = $grid['data_header'];
        $data_value = $grid['data_value'];

        $r=1;
        for($i=0; $i<count($data_header); $i++) {
            $objset->setCellValue($cols[$i].$r, $data_header[$i]);
        }
        $r++;
       
        for($i=0; $i<count($data_value); $i++) {
            for($a=0; $a<count($data_value[$i]); $a++) {
                $item = $data_value[$i][$a];
                $objset->setCellValue($cols[$a].$r, $item['value']);
                $objset->getColumnDimension($cols[$a])->setAutoSize(true);
            }
            $r++;
        }

        $name = 'export_'.date('ymd_his').'.xls';
        $objWriter = IOFactory::createWriter($objPHPExcel, 'Excel5');
        $objWriter->save( FCPATH . UPLOAD_REAL_PATH . $name );

        return $name;
    }
}

Setelah terlihat libraries untuk create excel nya ini. Di fungsi ini ada proses untuk save ke salah satu folder penyimpanan file excel ini yang nanti akan digunakan untuk kondisi pertama tadi setelah proses ajax ini di return di kondisi kedua.

*Maaf untuk proses install PHPExcel dengan Codeigniter silahkan searching cara pakainya dan pasangnya sendiri ya*

Dari kode ini, ada beberapa yang mesti diperbaiki lagi seperti pembuatan auto column di variable php $cols di libraries dan yang lainnya.

Intinya, proses ini mengurangi proses query ulang untuk mendapatkan data dari kendo grid 🙂

Semoga bisa membantu ya 😀

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.