$(document).ready(function(){
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
jQuery(grid_selector).jqGrid({
url: 'ajax_blok/data.php',
datatype: "json",
height: "auto",
mtype: "GET",
colNames: ['ID','Nama ','Action'],
colModel: [
{name:'id', key:true,fixed:true, search:true,index:'id',editable:false,editrules:{required:true}},
{name:'nama',index:'namab',fixed:true,search:true,editable:true,editrules:{required:true}},
{name: 'myac', width:80, fixed:true, sortable:false, search:false, align:'center', viewable: false, resizable: false, resize:false, formatter:'actions',
formatoptions:{
keys:true,editbutton: true, delbutton: true,
}
},
],
pager: jQuery('#grid-pager'),
rownumbers:true,
rowNum:10,
width:'auto',
height:200,
gridview: true,
multiselect: true,
sortorder:'desc',
rowList:[10,20,30],
multiboxonly: true,
loadonce: true,
autoencode: true,
editurl: "ajax_blok/crud.php",
viewrecords: true,
sortname: "idblok",
caption: "Record Test",
});


jQuery(grid_selector).jqGrid('filterToolbar',{stringResult: false,searchOnEnter : false, defaultSearch: 'cn', ignoreCase: true});
jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
function aceSwitch( cellvalue, options, cell ) {
setTimeout(function(){
$(cell) .find('input[type=checkbox]')
.wrap('<label class="inline" />')
.addClass('ace ace-switch ace-switch-5')
.after('<span class="lbl"></span>');
}, 0);
}

//enable datepicker
function pickDate( cellvalue, options, cell ) {
setTimeout(function(){
$(cell) .find('input[type=text]')
.datepicker({format:'yyyy-mm-dd' , autoclose:true});
}, 0);
}


//navButtons
jQuery(grid_selector).jqGrid('navGrid',pager_selector,
{ //navbar options
edit: true,
editicon : 'icon-pencil blue',
add: true,
addicon : 'icon-plus-sign purple',
del: true,
delicon : 'icon-trash red',
search: true,
searchicon : 'icon-search orange',
refresh: true,
refreshicon : 'icon-refresh green',
view: true,
viewicon : 'icon-zoom-in grey',
},
{
//edit record form
//closeAfterEdit: true,
recreateForm: true,
beforeShowForm : function(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
}
},
{
//new record form
closeAfterAdd: true,
recreateForm: true,
viewPagerButtons: false,
beforeShowForm : function(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
}
},
{
//delete record form
recreateForm: true,
beforeShowForm : function(e) {
var form = $(e[0]);
if(form.data('styled')) return false;

form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_delete_form(form);

form.data('styled', true);
},
onClick : function(e) {
alert(1);
}
},
{
//search form
recreateForm: true,
afterShowSearch: function(e){
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
style_search_form(form);
},
afterRedraw: function(){
style_search_filters($(this));
}
,
multipleSearch: true,
/**
multipleGroup:true,
showQuery: true
*/
},
{
//view record form
recreateForm: true,
beforeShowForm: function(e){
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
}
}
)



function style_edit_form(form) {
//enable datepicker on "sdate" field and switches for "stock" field
form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
.end().find('input[name=stock]')
.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

//update buttons classes
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-small').find('[class*="-icon"]').remove();//ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
buttons.eq(1).prepend('<i class="icon-remove"></i>')

buttons = form.next().find('.navButton a');
buttons.find('.ui-icon').remove();
buttons.eq(0).append('<i class="icon-chevron-left"></i>');
buttons.eq(1).append('<i class="icon-chevron-right"></i>');
}

function style_delete_form(form) {
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-small').find('[class*="-icon"]').remove();//ui-icon, s-icon
buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
buttons.eq(1).prepend('<i class="icon-remove"></i>')
}

function style_search_filters(form) {
form.find('.delete-rule').val('X');
form.find('.add-rule').addClass('btn btn-small btn-primary');
form.find('.add-group').addClass('btn btn-small btn-success');
form.find('.delete-group').addClass('btn btn-small btn-danger');
}
function style_search_form(form) {
var dialog = form.closest('.ui-jqdialog');
var buttons = dialog.find('.EditTable')
buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-small btn-info').find('.ui-icon').attr('class', 'icon-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-small btn-inverse').find('.ui-icon').attr('class', 'iconS E N S O Rment-alt');
buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-small btn-purple').find('.ui-icon').attr('class', 'icon-search');
}

function beforeDeleteCallback(e) {
var form = $(e[0]);
if(form.data('styled')) return false;

form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_delete_form(form);

form.data('styled', true);
}

function beforeEditCallback(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
}
});
[removed]