Search is not working in JqGrid - jqgrid

Question

Not sure why the search is not working in the grid. Click Find just no response. But it can pop out the search form.
See the image.
My code:
<script>
$(document).ready(function () {
function styleSearchForm(form) {
var dialog = form.closest('.ui-jqdialog');
var buttons = dialog.find('.EditTable');
buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
}
function styleSearchFilters(form) {
form.find('.delete-rule').val('X');
form.find('.add-rule').addClass('btn btn-xs btn-primary');
form.find('.add-group').addClass('btn btn-xs btn-success');
form.find('.delete-group').addClass('btn btn-xs btn-danger');
}
jQuery(gridSelector).jqGrid({
url: API_URL + 'GetVendors',
datatype: 'json',
mtype: 'GET',
height: 'auto',
colNames: ['pkey', 'Company', 'ContactName', 'ContactPhone', 'UserName', 'UserKey', 'Active', 'FacilityId', 'ClientId', 'PhotoURL', 'PushToGP'],
colModel: [
{
key:true,
name: 'pkey', index: 'pkey', width: 50, hidden: true,
formatter: 'integer'
},
{ name: 'Company', width: 120 },
{ name: 'ContactName', width: 110 },
{ name: 'ContactPhone', width: 120 },
{ name: 'UserName', align: "right", width: 90 },
{ name: 'UserKey', align: "right", width: 120, hidden: true },
{ name: 'Active', width: 50, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch },
{ name: 'FacilityId', align: "right", width: 100, formatter: "integer" },
{ name: 'ClientID', align: "right", width: 100, formatter: "integer" },
{ name: 'PhotoURL', align: "right", width: 80 },
{ name: 'PushToGP', align: "right", width: 80, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch }
],
cmTemplate: { autoResizable: true, editable: true },
rowNum: 10,
rowList: [10, 20, 30],
pager: pagerSelector,
sortname: 'company',
sortorder: "asc",
viewrecords: true,
jsonreader: {
root: "rows",
page: "page",
total: "total",
records: "records"
},
caption: "Vendor Managerment"
});
$(gridSelector).jqGrid('navGrid', pagerSelector,
{
//navbar options
edit: true,
editicon: 'ace-icon fa fa-pencil blue',
add: true,
addicon: 'ace-icon fa fa-plus-circle purple',
del: true,
delicon: 'ace-icon fa fa-trash-o red',
search: true,
searchicon: 'ace-icon fa fa-search orange',
refresh: true,
refreshicon: 'ace-icon fa fa-refresh green',
view: true,
viewicon: 'ace-icon fa fa-search-plus grey'
},
{
//search form
recreateForm: true,
afterShowSearch: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
styleSearchForm(form);
},
afterRedraw: function () {
styleSearchFilters($(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" />');
}
}
);
jQuery(gridSelector).jqGrid('inlineNav', pagerSelector, {search:true, edit: true, add: true, del: true });
});
}
</script>
EDIT:
Server side code:
public dynamic GetVendors(string sidx, string sortOrder, int page, int rows, int pkey)
{
var vendors = _vendorRespository.GetAllVendors().AsQueryable();
var pageIndex = Convert.ToInt32(page) - 1;
var pageSize = rows;
var totalRecords = vendors.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
if (sidx != null)
{
vendors = sortOrder == "asc" ? vendors.OrderBy(sidx) : vendors.OrderBy(sidx + " descending");
}
else
{
vendors = vendors.OrderBy(x => x.pkey);
}
vendors = vendors.Skip(pageIndex * pageSize).Take(pageSize);
return new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (from vendor in vendors
select new
{
cell = new string[]
{
vendor.pkey.ToString(),
vendor.Company,
vendor.ContactName,
vendor.ContactPhone,
vendor.UserName,
Encoding.UTF8.GetString(vendor.UserKey),
vendor.Active.ToString(),
vendor.FacilityId.ToString(),
vendor.ClientID.ToString(),
vendor.PhotoURL,
vendor.PushToGP.ToString()
}
}).ToArray()
};
}
Am I missing something?

Answer 1

If your have about 120 total number of items which needed be displayed in the grid, then I would recommend you to use client-side sorting, paging and filtering. The reason of the choice: local sorting, paging and filtering will be typically more quickly as the round-trip to the server. Thus if you even have supper powered server then the sending of the data still be slowly as working with 120 rows in JavaScript.
To implement client-side sorting, paging and filtering you need do two things:
modify (simplify) your server code (url: API_URL + 'GetVendors') to return all data at once. Typical code will consist from one line if you have implemented already the repository which access the data. The format of returned data could be just array of all items.
add loadonce: true and forceClientSorting: true options of jqGrid. The last option exist only in free jqGrid. It force sorting initial loaded data before displaying on the first page.