I have added the jqGrid on bootstrap modal and shown users list in the jqgrid. On click of a button I am opening modal and the data is displayed. Till this its working fine. But whenever I am trying to use jqGrid Search functionality its not working. The search textbox, search parameters all are disabled and not able to search. But when I have added the jgGrid on regular page/view, there search is working fine.
Below is my jqGrid
jQuery("#jqgrid1").jqGrid({
url: '@Url.Action("GetUserList", "Class")',
datatype: "Json",
height: 'auto',
colNames: ['Id', '@objLocalizer["Class_FirstName_GridCol"]', '@objLocalizer["Class_LastName_GridCol"]', '@objLocalizer["Class_Email_GridCol"]'],
colModel: [{
name: 'Id',
index: 'Id',
sortable: false,
hidden: true
},
{
name: 'FirstName',
index: 'FirstName',
sortable: true,
sorttype: 'text',
},
{
name: 'LastName',
index: 'LastName',
sortable: true,
sorttype: 'text',
},
{
name: 'Email',
index: 'Email',
sortable: true,
sorttype: 'text',
}],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pjqgrid1',
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
search: true,
refresh: true,
loadonce: true,
ignoreCase: true,
gridComplete: function () {
var ids = jQuery("#jqgrid1").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<button class='btn btn-xs btn-default' data-original-title='Edit Row' onclick=\"jQuery('#jqgrid1').editRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
se = "<button class='btn btn-xs btn-default' data-original-title='Save Row' onclick=\"jQuery('#jqgrid1').saveRow('" + cl + "');\"><i class='fa fa-save'></i></button>";
ca = "<button class='btn btn-xs btn-default' data-original-title='Cancel' onclick=\"jQuery('#jqgrid1').restoreRow('" + cl + "');\"><i class='fa fa-times'></i></button>";
jQuery("#jqgrid1").jqGrid('setRowData', ids[i], {
act: be + se + ca
});
}
},
editurl: "",
caption: '@objLocalizer["Class_Users_GridHeader"]',
multiselect: true,
autowidth: true,
multipleSearch: true,
multipleGroup: true,
showQuery: true,
onSelectRow: updateIdsOfSelectedRows,
onSelectAll: function (aRowids, isSelected) {
var i, count, id;
for (i = 0, count = aRowids.length; i < count; i++) {
id = aRowids[i];
updateIdsOfSelectedRows(id, isSelected);
}
},
loadComplete: function () {
var $this = $(this), i, count;
for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
$this.jqGrid('setSelection', idsOfSelectedRows[i], false);
}
}
});
jQuery("#jqgrid1").jqGrid('navGrid', "#pjqgrid1", {
edit: false,
add: false,
del: true
});
jQuery('#jqgrid1').jqGrid('setGridWidth', '582');
// remove classes
$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
$(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
$(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
$(".ui-jqgrid-pager").removeClass("ui-state-default");
$(".ui-jqgrid").removeClass("ui-widget-content");
// add classes
$(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
$(".ui-jqgrid-btable").addClass("table table-bordered table-striped");
$(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
//$(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
$(".ui-icon.ui-icon-pencil").removeClass().removeClass("fa fa-pencil");
$(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
$(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
$(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
$(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
$(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");
$(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");
$(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");
$(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");
$(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");
var bottomPagerDiv = $("div#pjqgrid1")[0];
//$("#refresh_jqgrid1", bottomPagerDiv).remove();
$("#jqgrid1_ilcancel", bottomPagerDiv).remove();
$("#jqgrid1_ilsave", bottomPagerDiv).remove();
$("#del_jqgrid1", bottomPagerDiv).remove();
$("#jqgrid1_iledit", bottomPagerDiv).remove();
$("#jqgrid1_ilsave", bottomPagerDiv).remove();
//$("#search_jqgrid1", bottomPagerDiv).remove();
$('#refresh_jqgrid1').attr('title', '@objLocalizer["refreshModal_jqgrid"]');
$('#search_jqgrid1').attr('title', '@objLocalizer["searchModal_jqgrid"]');
The grid binding is done in document.Ready function.
Any help on this appreciated !
