We Keep Coding

jqGrid searchOperator displays wrong operator after clearing the toolbar

I am now using jqGrid(version: jqGrid 4.14.1-pre, free jqGrid), with a column which have searchOperators.
The problem occurs when I clear the toolbar. My default operator is "<= (less or equal)". When I change the operator to other and clear the toolbar by x button of the column or the refresh button of navGrid, the searchOperator displays what I chose before, but filters as "<=", the default value. When I click the operator to show the drop-down popup, it highlights the default value, even though the display is different operator like below image.
This is demo that I refered and it does not reset to the default value unlike my case. But I did not find any special difference between it and mine. (I don't think that custom searchOperator might matter.. does it?)
What I found was clearToolbar(), but it seems it only reset the textbox values.
I do not mind what kind of operator is left after the clear, but only thing I want is displaying the correct one. Could you please help me?
The following is the grid and toolbar codes.
tbLockedPartiesHistoryArea.jqGrid({
url: '/LockedObjects/GetLockedParties',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
emptyrecords: "There is no locked parties currently.",
colModel: [
{label: 'LockedBy', name: 'LockedBy', sorttype: 'text', searchoptions: {clearSearch: true}},
{label: 'LockedDate', name: 'LockedDate', sorttype: 'date', searchoptions: {clearSearch: true},
sortable: true,
resizable: false,
hidden: false,
search: true,
formatter: 'date',
formatoptions: {srcformat: 'm/d/Y h:i:s A', newformat: 'm/d/Y h:i:s A'},
searchrules: {date: true},
searchoptions: {
sopt: ["dle", "deq", "ge"],
dataInit: function (element) {
var self = this;
$(element).datepicker({
dateFormat: 'mm/dd/yy',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
onSelect: function () {
setTimeout(function () {
self.triggerToolbar();
}, 0);
}
});
}
}
}],
rowNum: 20,
rowList: [20, 30, 50],
prmNames: {
page: 'defaultPageNumber',
rows: 'rowsPerPage'
},
customSortOperations: {
deq: {}, //I will just cut this since the code gets too long
dle: {},
},
forceClientSorting: true,
rownumbers: true,
viewrecords: true,
loadonce: true,
multiselect: true,
multiPageSelection: false,
pager: true,
searching: {
searchOperators: true,
defaultSearch: 'cn',
closeOnEscape: true,
searchOnEnter: false,
multipleSearch: true
}
});
tbLockedPartiesHistoryArea.jqGrid('filterToolbar', {
ignoreCase: true,
searchOperators: true,
enableClear: false
});
tbLockedPartiesHistoryArea.jqGrid('navGrid', {
edit: false,
add: false,
del: false,
refresh: true,
refreshtext: "Clear Filter",
refreshtitle: "Clear Filter"
});
};

Thank you for the bug report! The problem exist in case of usage customSortOperations (described here).
I posted the commit just now. Please get the latest sources of free jqGrid from GitHub. The problem should be solved now.

jqGrid - How can i disable column draggable but can sortable columns

I want to disable reordering by dragging the column but jqGrid works sorting columns.
OR, I want to enable reordering by dragging the column and having column chooser.
This code is occured error by dragging the column.
$(function () {
jQuery("#search_datagrid").jqGrid("GridUnload").jqGrid({
url: '/Search/SearchDataGrid/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'POST',
postData: {
search_word: search_word,
baseLang: baseLang,
targetLang: targetLang,
products: products
},
rowNum: 20,
rowList: [10, 20, 30, 50],
colNames: columnNames,
colModel: columnModels,
shrinkToFit: true,
height:'auto',
autowidth: true,
pager: "#search_pager",
viewrecords: true,
caption: "Result",
subGrid: true,
sortable: true,
loadonce: true,
gridview: true,
subGridOptions: {
"plusicon": "ui-icon-triangle-1-e",
"minusicon": "ui-icon-triangle-1-s",
"openicon": "ui-icon-arrowreturn-1-e"
},
})
.jqGrid('navGrid', '#search_pager', { add: false, edit: false, del: false, search: false, refresh: false })
.jqGrid('navButtonAdd', '#search_pager', {
caption: "Select Columns",
title: "Select Columns",
buttonicon: "ui-icon-calculator",
onClickButton: function () {
jQuery("#search_datagrid").jqGrid('columnChooser');
}
})
.jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{ startColumnName: '' + baseLang, numberOfColumns: 2, titleText: 'Language' },
]
})
});
$(window).resize(function () {
$("#search_datagrid").setGridWidth($(this).width() - $(this).width() / 10);
});

The grid option sortable: true, which you use, is responsible for resorting (reordering) of columns with respect of drag and drop of column headers. On the other side sortable: false property of colModel can be used to prevent sorting of data in the column by click on the column header. Reordering of columns with respect of columnChooser is independent from the above options and properties, but one can use hidedlg: true property in colModel to prevent displaying some columns in Column Chooser dialog.
Thus, if I correctly understand your problem, you should just remove sortable: true of the grid and not specify any sortable property inside of colModel (the default value of sortable property is true, which allows sorting of data).

Subgrid not getting populated in free jqGrid

I am trying to add subgrid to every row of main grid. The main grid populates fine but when i click on the expand icon of a row subgrid is not populated. Only subgrid column headers appear.
The json data is a single nested data structure which is fetched only once when grid loads first time. So when i click on the grid expand icon i expect subgrid to be populated from the data that was fetched while displaying the parent grid.
The empty subgrid is displayed when i use - datatype: "local".
If i set datatype: "json" then a server side call is made to fetch data if i click on expand icon.
So how can i display subgrid using the single json data that was already fetched. Thanks
Please find sample code below,
$(document).ready(function () {
"use strict";
var dataGrid = $('#itemList');
var firstClick = true;
$('#action').click(function () {
if (!firstClick) {
$("#itemList").setGridParam({datatype:'json'}).trigger("reloadGrid");
}
firstClick = false;
$("#itemList").jqGrid({
url: "${pageContext.request.contextPath}/billing/items",
datatype: "json",
mtype: "POST",
autowidth: true,
loadBeforeSend: function(jqXHR) {
jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
},
colNames: ["Id", "Item Type", "Item Code"],
colModel: [
{ name: "id", width: 35, sorttype:"int", search: false, editable: false, key: true, hidden: true},
{ name: "itemType", width: 100},
{ name: "itemCode", width: 120}
],
maxHeight: 400,
cmTemplate: {editable: true},
pager: true,
rowNum: 50,
rowList: [50, 100, 150, 200],
rownumbers: true,
rownumWidth: 25,
sortname: "itemType",
sortorder: "asc",
forceClientSorting: true,
viewrecords: true,
height: '100%',
loadonce: true,
//gridview: true,
autoencode: true,
editurl: "${pageContext.request.contextPath}/billing/saveItem",
caption: "Item List",
subGrid: true,
subGridRowExpanded: function (subgridId, rowid) {
var subgridTableId = subgridId + "_t";
$("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
$("#" + subgridTableId).jqGrid({
datatype: "local",
data: $(this).jqGrid("getLocalRow", rowid).itemDetails,
colNames: ["Id", "Unit", "Stock", "Batch No.", "Expiry Date", "Quantity Per Unit", "Price"],
colModel: [
{ name: "id", width: 35, sorttype:"int", search: false, editable: false, key: true, hidden: true},
{ name: "unit", width: 70, search: false},
{ name: "availableQuantity", width: 55, search: false, formatter: "number",},
{ name: "batchNumber", width: 80, search: false},
{ name: "expiryDate", width: 80, search: false, sorttype: "date", formatoptions: {srcformat:'d/m/Y', newformat:'d/m/Y'}},
{ name: "quantityPerUnit", width: 80, search: false, formatter: "number"},
{ name: "price", width: 55, search: false, formatter: "number"}
],
height: "100%",
rowNum: 10,
idPrefix: "s_" + rowid + "_",
cmTemplate: {editable: true},
editurl: "${pageContext.request.contextPath}/billing/saveItem"
});
}
}).navGrid({add:false,edit:false,del:true});
$("#itemList").jqGrid('filterToolbar', {autoSearch: true, stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
$("#itemList").jqGrid('gridResize', { minWidth: 450, minHeight: 150 });
});
The sample json data:-
[{"id":1,"itemCode":"Omez","itemType":"Medicine","itemDesc":"Omez for acidity","itemDetails":[{"id":1,"batchNumber":"batch1","expiryDate":"01/06/2018","unit":"bottle","subUnit":"tablet","availableQuantity":120.0,"quantityPerUnit":60.0,"price":122.0}]}]

First of all it's important to understand that the data, returned from url will be read and saved locally in case of usage loadonce: true option of jqGrid. By default it read only the data for the columns of the grid and the property id (can be configured by id property of prmNames parameter). Free jqGrid allows to read and save any other additional properties. To specify the properties one can use additionalProperties. The simplest for of the usage would be
additionalProperties: ["itemDetails"]
It informs jqGrid to read and save locally itemDetails property of every item. After that $(this).jqGrid("getLocalRow", rowid).itemDetails will work.
Additionally you can remove the column id from colModel. jqGrid set id attribute of the rows based on the value of id property of input data (returned from the server). Thus you don't need to hold the duplicate information in hidden <td> cell of every row. You can remove the id column from both main grid and the subgrid.
If you want to set search: false for all columns of subgrid then you can use cmTemplate: {search: false} option of subgrid and remove search: false from all columns. In the same way you can include in cmTemplate the property width: 80 (cmTemplate: {search: false, width: 80}) to change the default value 150 for the width property to 80. After that you can remove width: 80 from tree columns of subdrid too.
You can remove sortorder: "asc" and height: '100%' properties, because there are default for free jqGrid. You can use
searching: {
stringResult: true,
searchOnEnter: false,
defaultSearch: 'cn'
}
The property autosearch: true (not autoSearch: true) are default. After that you can use filterToolbar without additional parameters.
I would recommend you to use additional option of navGrid: reloadGridOptions: { fromServer: true } which informs to reload the data from the server (by restoring original value of datatype) if the user clicks on Refresh button of navigator bar.

How can I drag edit form properly in jqgrid?

When I drag a edit form, the position of the form is not valid.
Always it starts from position (0,0) to the window.
Its position is not relative to mouse cursor position.
How can I fix this?
These are my code.
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
$("#jqGrid").jqGrid({
url: url,
mtype: "GET",
postData: data,
datatype: "jsonp",
colModel: [
{ label: 'd_id', name: 'd_id', width: 15, key: true, hidden: true},
{ label: 'driver', name: 'd_name', width: 30, align:"center", editable: true, editoptions: {size: 40} },
{ label: 'phone', name: 'd_phone', width: 30, align:"center", editable: true, editoptions: {size: 40} },
{ label: '', name: '' }
],
viewrecords: true,
autowidth: true,
height: '100%',
rownumbers: true,
rownumWidth: 25,
rowNum: 20,
editurl: g_base_url + 'driver/edit',
pager: "#jqGridPager",
loadError : function(xhr,st,err) {
},
loadComplete: function () {
},
onCellSelect: function(rowid, iCol, cellcontent, e) {
}
});
and my jqgrid version is 4.8, jquery version is jquery-1.11.2 and jquery-ui version is 1.11.4.
please visit jqgrid demo and click edit button ("+" symbol in the page bar) and drag edit form serveral times. You can find its position always starts at pos (0,0).
demo link is http://www.guriddo.net/demo/guriddojs/edit_add_delete/edit_template/index.html

jqGrid does not display search button

I'm using a jqGrid to display my data, but it does not display the search button. Why is that? Code is below.
$("#grdOpenItems").jqGrid({
url: 'api/matchingservicewebapi/GetAllMatchItemForClient',
datatype: 'json',
mtype: 'GET',
caption: 'Open Items',
jsonReader: { root: "rows", repeatitems: false, id : "0"},
colNames: ['Id', 'Account', 'Amount', 'Ref'],
colModel: [
{ name: 'Amount', index: 'Amount', width: 200 },
{ name: 'Account', index: 'Account', width: 300 },
{ name: 'Amount', index: 'Amount', width: 300 },
{ name: 'Ref', index: 'Ref', width: 300 }
],
rowNum: 5,
rowList: [5, 10, 15],
multiselect: true,
pager: '#pagerOpenItems',
viewrecoreds: true,
sortname: 'Id',
sortorder: "desc",
imgpath: 'Themes/images'
}).navGrid(pager, {
edit: true, add: true, del: true, refresh: true, search: true,
searchtext: "Search" });
But it displays the page navigation buttons with images, but not the search and reload button.

One problem:
viewrecoreds: true
should be
viewrecords: true
I don't believe the searching functionality in jqGrid is magical, meaning you have to wire up actual search code. Take a look at the documentation for search.