jQuery, jQuery UI, & jqGrid

Alhamdulillah ada 1 lagi ilmu / trik yang akan saya bagi pada postingan kali ini, yaitu Menyembunyikan / Menghilangkan Border pada grid jquery (jqGrid).

Pada tampilan jqgrid biasanya terdapat border pada gridNya, nah kali ini saya ingin menghilangkan border tersebut. Awalnya memang membingungkan, namun karena rasa tidak sabar, saya menggunakan jalan pintas yaitu dengan masuk pada file bawaan dari jqgrid itu sendiri. Alhasil saya menemukan file CSS-Nya, dan dari sanalah saya meulai mencari dan mengubah-ubah agar border pada grid dapat hilang…hehehe =)

Walau hanya sedikit dan ternilai remeh, semoga ilmu ini bisa bermanfaat bagi pembaca khususnya para teman-teman programer semua. Amien =)

  1. Langkah pertama adalah dengan mencari lokasi file yang bernama “ui.jqgrid.css”, biasanya terletak pada folder css.
  2. Setelah menemukan file ui.jqgri.css, cari class .ui-jqgrid tr.jqgrow td 
  3. Selanjutnya pada .ui-jqgrid tr.jqgrow td terdapat atribut css border-bottom-width:1px;, kemudian ubah nilai 1px; menjadi 0px;
  4. 3 langkah diatas baru bisa menghilangkan border pada bagian bawahnya saja, untuk menghilangkan semua border yang terdapat pada grid, cari class .ui-jqgrid tr.ui-row-ltr td.
  5. Jika sudah menemukan class .ui-jqgrid tr.ui-row-ltr td, kemudian ganti nilai dari border-right-width:1px; menjadi border-right-width:0px;
  6. Dan kemudian silahkan anda lihat hasilnya.

Untuk melihat script yang di ubah pada ui.jqgrid.css lebih lengkapnya bisa di lihat pada bagian bawah ini :

.ui-jqgrid tr.jqgrow td{font-weight:normal;overflow:hidden;white-space:pre;height:22px;padding:0 0px 0 0px;border-bottom-width:0px;border-bottom-color:inherit;border-bottom-style:solid;}

.ui-jqgrid tr.ui-row-ltr td{text-align:left;border-right-width:0px;border-right-color:inherit;border-right-style:solid;}

Berikut ini tampilan grid sebelum mengalami modifikasi pada file ui.jqgrid.css :

Grid sebelum di edit pada CSS File

Grid sebelum di edit pada CSS File

Dan tampilan di bawah ini adalah grid setelah mengalami modifikasi pada file ui.jqgrid.css :

Grid sesudah mengalami edit pada CSS File

Grid sesudah mengalami edit pada CSS File

Semoga dapat bermanfaat bagi semua, mohon maaf apabila masih terdapat banyak kekurangan pada setiap postingan khususnya pada blog ini.

Trims…^_^

Wassalam.