I hava a problem in the filter functionality for a column thats has dropdown values .Below is my code,
{
name: 'statusFlag',
width: 130,
editable:true,
edittype:'select',
formatter : 'select',
searchoptions:{sopt:['cn','eq','ne']},
editoptions:{value:{Y:'Active',N:'Inactive'}}
}
If I perform search with 'y' I am seeing records with column value active, and If I perform search with 'n', I am seeing records with column value inactive. I want the same functionality to work when I enter active and inactive instead of y /n. How should i changed the code. Should i use formatOptions or anything else.
You need add stype: "select" property and extend searchoptions with value:
{
name: 'statusFlag',
width: 130,
editable: true,
edittype: 'select',
formatter: 'select',
searchoptions: { sopt: ['eq', 'ne'], value: ':Any;Y:Active;N:Inactive' } },
editoptions: { value: 'Y:Active;N:Inactive' }
}
The usage of :Any part in searchoptions.value is recommended if you use filterToolbar. If you use only searching dialog then you can remove the value and just use the same value like in editoptions.
My format options are being ignored:
{name:'effectiveDate',
width:'80',
align: 'center',
editable:true,
formatter: 'date',
srcformat:'ISO8601Short',
newformat: 'Y-m-d',
edittype:'date',
editrules:{
required:true
}
}
The backend sends json dates in mm-dd-yyyy format. They are correctly parsed by jqGrid, the values are correct and displayed in the grid with m/d/y format, but I cannot change the formatting, no matter what I input for 'newformat', even if I input garbage it will just ignore it and always display m/d/y. Could it be that I'm missing the Formatter module, or is there another explanation? How can I verify if I have the Formatter module?
The properties srcformat and newformat are the options of formatter. So you should follow the documentation and rewrite the column definition to
{
name:'effectiveDate',
width: 80,
align: 'center',
editable: true,
formatter: 'date',
formatoptions: {
srcformat:'ISO8601Short',
newformat: 'Y-m-d',
},
editrules: {
required:true
}
}
By the way jqGrid don't know edittype: 'date'. See the documentation. The format mm-dd-yyyy is not ISO8601 date format. Correct ISO8601 format is yyyy-mm-dd. I hope the sever use the format in the JSON response.
I would like to use jqGrid for a great many grids that have only a small set of application-specific column types, and I would like to create a way to enforce consistency. For example, I want all my columns that show the compliance status of a row to have a certain format, be aligned a certain way, have specific search options, etc. So instead of having a colmodel entry like this:
{ name: 'ABC', width: 80, align: 'center', stype: "select",
searchoptions: { value: "1:Compliant;0:Not Compliant"} }
I would like to have one like this:
{ name: 'ABC', width: 80, mytype: compliancestatus }
where compliancestatus is a function I would write.
Is this kind of thing possible - without modifying the jqGrid source code? If so, can someone point me to an example of this type of extension?
Since jqGrid 3.8.2 are column templates supported.
You can just define for example
var compliancestatus = {
width: 80,
align: 'center',
stype: "select",
searchoptions: { value: "1:Compliant;0:Not Compliant" }
};
somewhere in the scope of visibility and then just use in colModel
{ name: 'ABC', template: compliancestatus }
In the template you can include any parameters. If the column definition has the same property but with the same value like
{ name: 'ABC', width: 100, template: compliancestatus }
the value from the colModel (width: 100 in the case) will be used.
I suggested the feature some time before and I use it intensively myself. For example I have many grids having many columns with checkboxes. I use the following template in the case:
mySettings.templateCheckbox = {
formatter: 'checkbox', align: 'center', width: 20,
edittype: 'checkbox', editoptions: { value: "1:0" },
stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: ":Any;1:Yes;0:No" }
};
In the same way I defined many other templates which reduce the code of grids and improve managing of the common grid style.
If you want to change some common default settings for all columns you can use cmTemplate parameter of jqGrid. For example
cmTemplate: { align: 'center' }
You can use it as additional parameter of jqGrid or set it like any other default parameter with respect of
$.extend($.jgrid.defaults, {
cmTemplate: { align: 'center' }
});
Read more about the column templates here.
How I can make all the columns of jqgrid not resizable? Currently I think every column I've to specify the property { resizable:false }. Is there anyway I can specify for the entire grid?
Starting with version 3.8.2 jqGrid supports one very useful feature: column templates. (It's probably not quite correct from me to praise the feature because the feature was introduced on my own suggestion :-)). The feature is still not really documented, but it can be used very easily.
I explain it on an example. If you define additional jqGrid parameter
cmTemplate:{resizable:false}
then your problem will be solved.
If you have more properties which are common in all columns of colModel items, for example align:'center' the cmTemplate will help you also (cmTemplate:{resizable:false, align:'center'}). In jqGrid 3.8.2 was small bug in priority of template settings relatively to settings from colModel, but the bug is fixed in jqGrid 4.0.0. So the properties from cmTemplate can be interpret just as default values for colModel items.
One more version of usage jqGrid column template is in the form:
var myDateTemplate = {sorttype:'date', formatter:'date',
formatoptions: {newformat:'m/d/Y'}, datefmt: 'm/d/Y',
align:'center', width:80 }
$("list").jqGrid({
colModel: [
...
{name:'column1': template:myDateTemplate},
{name:'column2': template:myDateTemplate, width:90},
...
]
...
});
In the way you can define some templates (like myDateTemplate) and use there in many places in your grid (or gids). With respect of the feature you can make your code shorter, better readable and easily changeable.
Template works great for me:
{ name: 'quantity_warehouse', index: 'quantity_warehouse', template: intColTemplate, width: '70' },
{ name: 'status', index: 'status', align: 'left', template: stringColTemplate, width: '90' },
{ name: 'snapshot_at', index: 'snapshot_at', template: dateColTemplate },
{ name: 'applied_at', index: 'applied_at', template: dateColTemplate },
JS:
var dateColTemplate = { align: 'left', search: true, stype: 'text', width: '70', datefmt: 'm/d/y', formatter: 'date', formatoptions: { srcformat: 'm/d/y', newformat: 'm/d/Y' }, sorttype: 'date', searchrules: { required: true, date: true }, searchoptions: { sopt: ['eq', 'ge', 'le'],
dataInit: function (el) {
$(el).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true });
}
}
};
var intColTemplate = { align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'ge', 'le']} };
var stringColTemplate = { align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['bw', 'cn']} };
When I set gridview to true (gridview:true) in our jqGrid to increase the performance of jqGrid, the method like afterInsertRow, or other similar methods are not executed.
Following is the code of my jgGrid:
jQuery("#displaylistGrid").jqGrid({
url: contextRoot + '/StandardProxy/displayListService?userRole='+
userRole+'&userName='+userName+'&userId='+userId+
'&duration='+displayDuration+'&wicNo='+wicNo+
'&displayName='+dlDisplayName+'&displayNameArr='+displayNameArr+
'&pointValue='+pValue+'&locationId='+locId+'&locationCode='+
locCode+'&serviceType=forecast',
datatype: 'json',
colNames: ["CM Name", "Display ", "Loc. Pt.","Max. Ben." ,"Display Name",
"Items w/Fcst", "Units", "Sales $", "Profit $", "GP%", "Units",
"Sales $", "Profit $", "GP%","Hidden","Hidden1","Hidden2",
"Start Date and End Date", "Hidden4"],
colModel: [
{ name: "cm_name", index: "cm_name", sorttype: "text", width: 120,
resizable: true },
{ name: "ds_location", index: "ds_location", sorttype: "text", width: 120,
resizable: true },
{ name: "ds_symbol", index: "ds_symbol", sorttype: "text", width: 50,
align: "center", resizable: true },
{ name: "ds_benchMark", index: "ds_benchMark",sorttype: "text", width: 50,
align: "center", resizable: true },
{ name: "ds_name", index: "ds_name", sorttype: "text", width: 230,
resizable: true },
{ name: "ds_ItemFrcst", index: "ds_ItemFrcst",sorttype: "int", width: 60,
align: "center", resizable: true,
unformat: addDemoninatorSortingFormatter },
{ name:"ds_units_promo",index:"ds_units_promo",sorttype:"float",width: 85,
align: "right", unformat : spaceFormatter },
{ name:"ds_sales_promo",index:"ds_sales_promo",sorttype:"float",width: 95,
align: "right", unformat : spaceFormatter },
{ name: "displaylistGrid_ds_profit_promo",
index: "displaylistGrid_ds_profit_promo",
sorttype: "float", width: 95, align: "right",
unformat : spaceFormatter },
{ name:"ds_gp_pct_promo",index:"ds_gp_pct_promo",sorttype:"int",width: 50,
align: "right", unformat : spaceFormatter },
{ name: "ds_units_per_store_week",
index: "ds_units_per_store_week", sorttype:"float",width: 85,
align: "right", unformat : spaceFormatter },
{ name: "ds_sales_per_store_week",
index: "ds_sales_per_store_week",
sorttype: "float", width: 90, align: "right",
unformat : spaceFormatter },
{ name: "ds_profit_per_store_week",
index: "ds_profit_per_store_week",
sorttype: "float", width: 90, align: "right",
unformat : spaceFormatter },
{ name: "ds_gp_pct_per_store_week",
index: "ds_gp_pct_per_store_week",
sorttype: "float", width: 40, align: "right",
unformat : spaceFormatter },
{ name: "hidden1", index: "hidden1", sorttype: "int",
align: "center", hidden: true },
{ name: "hidden2", index: "hidden2", sorttype: "text",
align: "center", hidden: true },
{ name: "hidden3", index: "hidden3", sorttype: "int",
align: "center", hidden: true },
{ name:"forecast_dates",index:"forecast_dates",sorttype: "text",
align: "center", hidden: true },
{ name: "hidden4", index: "hidden4", sorttype: "text",
align: "center", hidden: false }
],
onSelectRow: function(ids){
//checkDisplayDetail();
//setDefaultValuesToTheSortingParams();
var dropDownVal = document.getElementById("displayDetailSelection").value;
var subTabName = document.getElementById("detailSubTabName").value;
if(subTabName=="Active")
dropDownVal = document.getElementById("displayDetailActiveSelection").value;
reLoadDisplayDetailData(ids,'forecast',dropDownVal,subTabName);
},
afterInsertRow : function(ids) { // shows custom tooltip
var customToolTip = jQuery("#displaylistGrid").getCell(ids,'ds_name') +
" -- " + jQuery("#displaylistGrid").getCell(ids,'hidden4');
$("#displaylistGrid").setCell(ids,'ds_name', '','',{title:customToolTip});
},
gridComplete : function(){
if($("#isForecastedSalesGridLoaded").val()=="no"){
$("#jqgh_displaylistGrid_ds_profit_promo").click();
}
else{
$("#isForecastedSalesGridLoaded").val("no");
}
},
onSortCol : function(){
$("#isForecastedSalesGridLoaded").val("yes");
},
width: 983,
rowNum: 999,
height: eval(heightOfDispListGrid()+7),
toolbar: [true, "top"],
viewrecords: true,
treeIcons: {leaf: "ui-icon-document-b"},
treeGrid: true,
treeGridModel: 'nested',
ExpandColumn : 'Description',
ExpandColClick: true,
loadonce:false,
refresh : true,
shrinkToFit: true,
gridview:true,
sortorder:"asc",
sortname:"displaylistGrid_ds_profit_promo"
});
Following is the code of afterInsertRow method:
afterInsertRow : function(ids) { // shows custom tooltip
var customToolTip = jQuery("#displaylistGrid").getCell(ids,'ds_name') + " -- " +
jQuery("#displaylistGrid").getCell(ids,'hidden4') ;
$("#displaylistGrid").setCell(ids,'ds_name', '','',{title:customToolTip});
},
The preceding code is used to show customize tool tip. Please suggest me what I am doing wrong.
Please help me
Thanks,
DISMGMT
The sense of the usage of gridview:true is following. In the "gridview" mode the most grid contain will be created as a string. To be exactly one builds an array of substrings with HTML markup for every grid row, one creates one string from the string array with respect of join('') and only then one creates an DOM object represented the grid. It improves the performance not only because of better working with the long strings (join('')), but because of reducing working with DOM objects which is much slowly as working with strings.
So I recommend you not use afterInsertRow at all. Instead of that you can successfully do the same with respect of the following code
var myGrid = jQuery("#displaylistGrid");
var ids = myGrid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id=ids[i];
var customToolTip = myGrid.jqGrid('getCell',ids,'ds_name') + " -- " +
myGrid.jqGrid('getCell',ids,'hidden4');
myGrid.jqGrid('setCell',ids,'ds_name', '','',{title:customToolTip});
}
which you can include in the gridComplete or loadComplete.
The best performance you will archive using custom formatter for the column ds_name where you want to set the custom tooltip. The implementation is pretty simple because your custom formatter will receive as the rowObject parameter the row of the server data in the same form like it will be received from the server (as array or as an object). The properly hidden4 will be immediately accessible (I recommend you to read this answer for more details).
UPDATED: The answer is very old. jqGrid provides many alternative implementation ways which are much better from the performance point of view. Every change on the page follows browser reflow. So the usage of setCell in the loop is not effective. Much better is the usage of cellattr or rowattr and to continue to use gridview: true which advantages are described in the answer.
The answer demonstrates very effective way to set title on the cell using cellattr instead of setCell used in the current answer. Another answer provide one more common example to use cellattr. To set attributes of the rows of the grid one can use rowattr callback. See the answer for the code example.
Note: this event does not fire if gridview option is set to true
I had similar problem, after reading jqgrid's wiki I thought to give link to document if anyone else faces same problem.