How to close form jqgrid after submit?

Leave a comment

Form in JqgridPada awalnya settingan atau pengaturan form yang disediakan jqgrid tidak menutup form apabila telah di submit, dari sana saya mulai mencari agar pengguna / user dapat lebih efisien dalam menggunakan jqgrid. Saya mulai mencari, dan akhirnya saya temukan. Berikut ini adalah langkah, cara dan contohnya,

Pada script pembuatan Grid, seperti pada contoh di bawah ini,

jQuery(“#Transaksi”).jqGrid({
height: 100,
width: 800,
colNames:[‘Destination’,’Currency’,’Amount’],
colModel:[{
name:’acctId’,
index:’acctId’,
width:150,
editable:true
},{
name:’currency’,
index:’currency’,
width:150,
editable:true
},{
name:’amount’,
index:’amount’,
formatter:’currency’,
width:150,
editable:true
}],
rowNum:500,
rowList:[100,500,1000],
pager: ‘#rowsTransaksi’,
sortname: ‘acctId’,
viewrecords: true,
sortorder: “desc”,
caption:”Transaksi”,
cellEdit: false,
editurl:”./noabjad.json”,
});
jQuery(“#Transaksi”).jqGrid(‘navGrid’,’#rowsTransaksi’,{
add:true,
del:true,
search:false,
edit:true,
delfunc: function(id) {
jQuery(“#Transaksi”).jqGrid(‘delRowData’, id);
}
},{//start edit param
reloadAfterSubmit: false,
url: “./noabjad.json”,
closeOnEscape:true,
        closeAfterEdit:true,
        closeAfterSubmit:true
}, // end edit param
{  // start add param
height:’auto’,
width:’auto’,
reloadAfterSubmit: false,
closeOnEscape:true,
        closeAfterSubmit:true,
        closeAfterAdd:true
}, // end add param
{  //start del param
caption: “Hapus”,
msg: “Hapus?”,
bSubmit: “Hapus”,
bCancel: “Batal”,
reloadAfterSubmit: false
}, //end del param
{}, // search param
{} // view param
);

Pada script standart / Default jqgrid, biasanya tidak diterapkan untuk pengisian atau bahkan pencatuman parameter tombol navigasi. Namun jika kita mempunyai keinginan untuk mengatur tombol navigasi pada jqgrid, bisa kita lakukan dengan menambahkan parameter seperti pada contoh script diatas.

Urutan penempatan parameter navigasi adalah dimulai dari Edit,Add,Delete,Search,dan View, seperti yang terlihat pada contoh script grid diatas.

Untuk dapat menutup form Add / Edit setelah melakukan Submit, teman-teman bisa menambahkan parameter closeAfterSubmit:true, dan closeAfterAdd:true / closeAfterEdit:true pada masing-masing parameter. Seperti yang terlihat pada contoh Script diatas.

Semoga postingan ini bermanfaat.

Trims, Sukhran,

Wassalam

How to hide border header layer grid in jqGrid?

Leave a comment

Bagaimana cara menghilangkan garis border pada header layer grid jqgrid?

Mengapa saya menghilangkan border pada grid? Mungkin pertanyaan itu yang ada dalam benak anda saat membaca postingan ini.

Saya menghilangkan border pada header layer karena ingin menghasilkan tampilan grid yang simple tanpa ada garis pada header maupun pada body layer grid. Nah, untuk menghilangkan border pada header layer grid jqgrid adalah sebagai berikut.

Sebelum memulai ada baiknya anda melihat tampilan grid sebelum diubah dan sesudah diubah.

More

Grid Description (JqGrid)

Leave a comment

Pengenalan JqGrid,

JqGrid adalah plugin dari Jquery yang digunakan untuk manipulasi data, pencarian data dll. Dan biasa di pakai dalam framework jquery.

Jqgrid memiliki banyak fungsi manipulasi data diantaranya Add (Menambahkan data), Edit (Mengubah data), Delete (Menghapus data) adapula Pencarian data yaitu Searching data dan masih banyak lagi kemampuan yang dimiliki oleh jqGrid.

Dalam hal ini, JqGrid memiliki banyak tampilan atau theme, jadi tampilan data akan menjadi lebih menarik.

(Grid) dalam JqGrid memiliki beberapa bagian / komponen pembentuk grid itu sendiri .

JqGrid Description

Caption layer, atau Keterangan Grid, biasanya berisi Judul grid / nama grid.
Header layer, atau yang umum dikenal dengan Judul kolom yang terdapat pada isi grid
Body layer, atau tempat dimana isi data / data row ditampilkan.
Navigation layer, ini adalah bagian navigasi yang biasa berisi informasi total data yang di tampilkan dan berapa page / halaman yang ada , umumnya juga digunakan untuk menambahkan tombol untuk memanipulasi data, contohnya membuat tombol add,edit,delete dll.

Semoga bermanfaat dan mohon koreksinya jika ada yang keliru dari informasi ini. =)

Wassalam.

How to hide Row Border in jqGrid

2 Comments

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 =) More

WordPress.com News

The latest news on WordPress.com and the WordPress community.