Setting Theme Flexigrid pada Grocery Crud

Contoh Kasus:

Saya kesulitan memasukkan hasil dari grocery crud ke dalam template codeigniter saya, dan setelah melakukan beberapa percobaan, akhirnya saya berhasil memasukkan grocery crud ke dalam template saya seperti terlihat pada gambar dibawah ini:

Pertanyaan:

Bagaimana caranya … ?

Jawaban:

Peletakan metode render() Dalam Controller

Dalam Controller saya membuat satu fungsi bernama groups seperti terlihat dibawah ini:

function groups(){ 

$this->load->library(‘grocery_Exceptions’);

try{

$crud = new grocery_CRUD();

$crud->set_theme(‘flexigrid’);

$crud->set_table(‘groups’);

$crud->set_subject(‘User Group’);

$crud->required_fields(‘id’);

$crud->columns(‘id’,’name’,’description’);

$this->load->view(‘admin/header’);

$this->load->view(‘admin/sidebar’);

$crud->render();

$this->load->view(‘admin/footer’);

}

catch(Exception $e){

$this->grocery_exceptions->show_error($e->getMessage(), $e->getTraceAsString());

}

}

Keterangan:

  • Lihat bahwa $crud->render() itu terletak diantara $this->load->view() dan inilah cara satu-satunya untuk memasukkan grocery crud ke dalam template kita.

Pertanyaan:

Bagaimana kalau saya kirim data dari metode render() ke file View seperti kode berikut ini:

$data[‘crud’]=$crud->render(); 

$this->load->view(‘admin/template’, $data);

Jawaban:

  • Kode diatas akan menyebabkan error.

Merubah Lebar Tabel Flexigrid

Defaultnya lebar tabel dari flexigrid adalah 100% sehingga akan tampil selebar browser, untuk merubah lebarnya maka bukalah file public/grocery_crud/themes/flexigrid/list_template.php  dan carilah kode dibawah ini:

<div style=’width:100%;’>

Rubahlah widthnya sesuai ukuranmu, misalnya saya rubah  menjadi 80% seperti kode dibawah ini:

<div style=’width:80%;’>

Merubah letak Flexigrid

Agar flexigrid dan sidebar berdampingan maka keduanya harus diberi prperty float.

Untuk sidebar, saya beri property float seperti berikut ini:

#sidebar {

float:left;

}

Untuk flexigrid maka bukalah file public/grocery_crud/themes/flexigrid/css/flexigrid.css dan carilah kode dibawah ini:

.flexigrid { 

font-family:Arial,Helvetica,sans-serif;

font-size:11px;

position:relative;

border:0px solid #eee;

overflow:hidden;

color:#000;

}

Lalu tambahkan property float:left; pada kode diatas sehingga menjadi seperti dibawah ini:

.flexigrid { 

font-family:Arial,Helvetica,sans-serif;

font-size:11px;

position:relative;

border:0px solid #eee;

overflow:hidden;

color:#000;

float:left;

}

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

Leave a Reply

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