Mengatur Dialog Bawaan jqGrid Yang Tertimpa


jqGrid selain dapat menampilkan tabel, juga dilengkapi berbagai fitur seperti fitur untuk edit dan pencarian.   Terkadang dialog bawaan jqGrid saat ditampilkan terlihat tertimpa oleh hasil rancangan kita, seperti pada gambar berikut ini:

Dialog jqGrid Yang Tertimpa

Dialog jqGrid Yang Tertimpa

Hal ini terjadi karena pengaturan property z-index yang tidak tepat. z-index adalah salah satu property CSS yang dipakai untuk menentukan elemen mana yang akan ditampilkan bila dua atau lebih elemen saling menimpa.  Elemen dengan nilai z-index yang lebih besar akan menimpa elemen dengan nilai z-index yang lebih kecil.

Lalu, bagaimana caranya mengatur z-index untuk dialog jqGrid?   Saya dapat memberikan nilai property zIndex saat melakukan inisialisasi navigasi jqGrid.   Sebagai contoh, saya tidak memakai fitur untuk add, edit dan delete melalui jqGrid, tetapi saya meminjam dialog search jqGrid, sehingga untuk mengatur z-index di dialog pencarian, inisialisasi jqGrid saya akan terlihat seperti berikut ini:

grid.jqGrid(parameter).navGrid("#pager",
  {add: false, edit: false, del: false}, {}, {}, {},
  {closeAfterSearch: true, zIndex: 1000}, {}
);

Setelah menambahkan parameter zIndex menjadi 1000,  maka dialog pencarian jqGrid tidak terlihat tertimpa lagi, seperti pada gambar berikut ini:

Dialog Pencarian Dengan Parameter zIndex = 1000

Dialog Pencarian Dengan Parameter zIndex = 1000

 

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: