Related
I have an "actions" column in my grid and it's set to display the edit dialog when the edit icon is clicked. The form comes up fine, however, there doesn't seem to be a way to pass in options for the dialog box itself. When it comes up, it always has the scroll bars, default button text, etc. I have my ondblClickRow event also pulling up the edit dialog, but it allows me to set the height, width, modal, etc properties of the box. Ideally, I could wire up the ondblClickRow and the edit button click to a function, but that doesn't seem to be an option either.
colModel: [ { name: 'fx',
index: 'fx',
width: 60,
formatter: 'actions',
formatoptions: { editformbutton: true },
sortable: false,
sorttype: 'int',
summaryType: 'count', summaryTpl: '({0}) total' },
ondblClickRow: function(){
var gr = $("#mygrid").jqGrid('getGridParam', 'selrow');
$("#mygrid").jqGrid('editGridRow',
gr,
{height: 200,
width: 500,
modal: true,
resize: false,
reloadAfterSubmit: false,
bSubmit: 'Save',
recreateForm: false
});
}
Any ideas?
You can use formatoptions to specify any options of the editing. If you use formatter: 'actions' with formatoptions: { editformbutton: true } then form editing will be used. All other properties of form editing you can specify by delOptions and editOptions properties of formatoptions. If you starts editGridRow directly with some options I would recommend you to share the same options. The most easy way will be to save the options in a variable and to use it in both cases:
var myEditOptions = {
height: 200,
width: 500,
modal: true,
resize: false,
reloadAfterSubmit: false,
bSubmit: 'Save',
recreateForm: true,
closeAfterAdd: true,
closeAfterEdit: true
},
myDeleteOptions = {
// just an example of delGridRow options
reloadAfterSubmit: false,
closeOnEscape: true
};
$("#gridId").jqGrid({
colModel: [
{ name: 'fx', width: 60, formatter: 'actions', sortable: false,
formatoptions: {
editformbutton: true,
editOptions: myEditOptions,
delOptions: myDeleteOptions
}
},
...
],
...
ondblClickRow: function (rowid) {
$(this).jqGrid('editGridRow', rowid, myEditOptions);
}
});
I noticed if there's no records to be returned then shouldn't the Paging footer say "0 of 0" instead of "1 of 0"??
Also, shouldn't the Paging textbox be disabled as well.
This is the JSON response I sent back to jqGrid
{ "total":0, "page":0, "records":0, "rows":[] }
I'm using jqGrid version 4.5.0
Thanks...
P.S. Source Code below...
$('#'+jqgridSpreadsheetId).jqGrid({
url: '../websrvc/JqGrid.ashx',
datatype: 'json',
mtype: 'POST',
postData: { WhichJqgridTemplate: '<%=JqqridTools.Template.MyInventory%>', WhichAction: '<%=JqqridTools.Action.Display%>', WebpageQuickQuoteSalePrice: '<%=postQuickQuoteSalePrice%>' },
colNames: ['Id', 'Stock Number', 'VIN', 'Year', 'Make', 'Model', 'Trim', 'Mileage', 'Purchase Price', 'Stock Date', 'Repair Cost', 'Total Cost', 'Days In Inventory', 'Hidden-Inventory-Tracker-Location-Id', 'Inventory Tracker Location', 'Links'], //Display Text in Column Header...
colModel: [
//In this case, use "sorttype" property in "colModel" for it to work when "loadonce" is set to true...
//formatter doc --> "http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter&s[]=cell&s[]=formatter"...
//formatter hyperlink --> Stackoverflow posting was said to use formatter's function declaration instead of formatter's "showlink" followed by "formatoptions"...
// --> (Old Link) - http://stackoverflow.com/questions/5010761/linking-from-a-column-value-in-jqgrid-to-a-new-page-using-get...
// --> (New Link) - http://stackoverflow.com/questions/14529358/jqgrid-need-hyperlink-need-to-capture-value-through-jquery/14537512#14537512...
// --> (New Link) - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter...
// --> Reasons are --> 1) far simpiler to use formatter for reading/writing and 2) much quicker and better performance...
{ name: 'Id', index: 'Id', sorttype: 'int', width: 0, align: 'left', hidden: true, hidedlg: true }, //"hidedlg" is use to hide the hidden column in "Column Chooser"...
{ name: 'StockNumber', index: 'StockNumber', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Vin', index: 'Vin', sorttype: 'text', width: 140, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Year', index: 'Year', sorttype: 'int', width: 50, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Make', index: 'Make', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Model', index: 'Model', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Trim', index: 'Trim', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Mileage', index: 'Mileage', sorttype: 'int', width: 60, align: 'center', formatter: 'number', formatoptions: {decimalSeparator:'',thousandsSeparator:',',decimalPlaces:0,defaultValue:'0'} },
{ name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: {decimalSeparator:'.',thousandsSeparator:',',decimalPlaces:2,defaultValue:'0.00',prefix:'$',suffix:''} },
{ name: 'StockDate', index: 'StockDate', sorttype: 'date', width: 90, align: 'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } }, //"formatter" and "formatoptions" is required for date sorting to works properly...
{ name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{ name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{ name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', width: 65, align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '1' } },
{ name: 'InventoryTrackerLocationId', index: 'InventoryTrackerLocationId', sorttype: 'int', width: 0, align: 'left', hidden: true, hidedlg: true }, //"hidedlg" is use to hide the hidden column in "Column Chooser"...
{ name: 'InventoryTrackerLocation', index: 'InventoryTrackerLocation', sorttype: 'text', width: 120, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
//Links is not present in json data from the website, so we customize it here...
{ name: 'Links', index: 'Links', sorttype: 'text', width: 80, align: 'center', formatter: function (cellValue, options, rowObject) { return "<span style='text-decoration:underline;cursor:pointer;'>Links</span>" }, search: false } //"search" is use to hide the field in search dialog...
],
beforeSelectRow: function (rowid, e) {
//http://stackoverflow.com/questions/16592547/how-to-have-custom-formatter-built-in-function-to-call-a-non-jqgrid-seperate-fun
//http://stackoverflow.com/questions/16592547/how-to-have-custom-formatter-built-in-function-to-call-a-non-jqgrid-seperate-fun
//http://stackoverflow.com/questions/14529358/jqgrid-need-hyperlink-need-to-capture-value-through-jquery/14537512#14537512
//http://stackoverflow.com/questions/13761222/how-to-fire-loadcomplete-after-new-row-is-added-in-jqgrid/13765086#13765086
//To attached javascript function to a clickable "Links" cell...
if (this.p.colModel[$.jgrid.getCellIndex($(e.target).closest("td")[0])].name === jqgridColumnNameLinks) {
jqgridPopupDialogLinkOptions(
$(this).getCell(rowid, jqgridColumnIdStockNumber), //Use $(this) instead for less overhead - It's what Oleg at jqGrid said....
$(this).getCell(rowid, jqgridColumnIdVin), //Use $(this) instead for less overhead - It's what Oleg at jqGrid said....
$(this).getCell(rowid, jqgridColumnIdInventoryTrackerLocationId) //Use $(this) instead for less overhead - It's what Oleg at jqGrid said....
);
return false;
}
},
pager: '#'+jqgridPagerId,
rowNum: 10,
rowList: [5, 10, 20, 50], //Drop-down selection in footer - To show how many rows per page...
//This "sortname"/"sortorder" tag must be specified for "getGridParam"'s 'datatype'/'sortname'/'sortorder' (column sorting) to work. (Some kind of jqGrid bug or feature which we need to hack to do a workaround with)...
<%if(postQuickQuoteSalePrice.Length > 0) {%>
sortname: 'TotalCost', sortorder: 'desc', //When coming from Quick-Quote webpage...
<%} else {%>
sortname: 'StockDate', sortorder: 'desc', //When coming from any webpages, especially the Product webpage...
<%}%>
viewrecords: true,
//gridview: true,
//imgpath: '',
caption: 'My Inventory',
width: 1022,
shrinkToFit: false,
height: 400,
sortable: true, /* This allows both 1) Moving columns sideway to other location fields and 2) for jqGrid Column Chooser Plugin / JQuery Multiselect Plugin to work... */
grouping: true, /* This allows row data to be group into row grouping... */
loadonce: true, //In this case, use "sorttype" property in "colModel" for it to work when "loadonce" is set to true...
emptyrecords: "No records to display",
loadError: function (xhr, st, err) {
alert("An error had occurred, please try again or notify webmaster of this error");
},
loadComplete: function () {
//http://stackoverflow.com/questions/16639339/how-do-i-get-a-column-to-be-sort-in-descending-order-upon-loading...
//=========================================================================================
// the code will be executed only at the first loading because jqGrid
// changes datatype to "local" after the first loading if we use
// loadonce option. We use setTimeout to allows jqGrid to make the first
// loading till the end and reload it AFTER that
//=========================================================================================
var $self = $(this); //This is needed as seperate objects to seperate itself from the binding jqGrid or $(this) objects for it to work. It wouldn't work if binded to itself...
if ($self.jqGrid('getGridParam', 'datatype') === 'json') { //This the value when loading webpage then the value of "datatype" option will become "local" afterward...
//$self.getGridParam({ sortname: 'TotalCost', sortorder: 'desc' }); //When coming from Quick-Quote webpage...
//$self.getGridParam({ sortname: 'StockDate', sortorder: 'desc' }); //When coming from any webpages, especially the Product webpage...
//$(this).triggerHandler('reloadGrid', [{ sortname: 'Year', sortorder: 'desc' }]);
setTimeout(function () {
//$('#' + jqgridSpreadsheetId).triggerHandler('reloadGrid', [{ sortname: 'Year', sortorder: 'desc' }]);
$self.triggerHandler("reloadGrid");
}, 50);
}
//=========================================================================================
jqgridSummarySpreadsheetDisplay();
}
});
Here's the snapshot using Firefox firebug. As you can see the json result is what you asked me to do, use "page":"0" instead of "page":0 . The jqGrid in the webpage showed 1 instead of 0.
I think the problem is in the line of jqGrid source code
ts.p.page = $.jgrid.getAccessor(data,dReader.page) || ts.p.page || 0;
You should change integer value of page to the string value:
{ "total":0, "page":"0", "records":0, "rows":[] }
or
{ "total":"0", "page":"0", "records":"0", "rows":[] }
which mostly exact corresponds to the format described in the documentation.
UPDATED: The demo reproduce your problem and another demo uses the fixed JSON data ("page":"0" instead of "page":0). How you can see the fix work.
UPDATED 2: I see now that the problem is in usage of loadonce: true. To fix the problem one can use
localReader: {
page: function (obj) {
return obj.page !== undefined ? obj.page : "0";
}
}
see one more demo.
UPDATED 3: I posted the full request which would fix the problems. The fix is already merged (see here) to the main code of jqGrid on the github.
How can i have greater than or lesser than in the Searchbox?
below is my search code:
{multipleSearch:true}
Searchbox is showing only this
Is there a settings that i need to set for jgGrid to recognize the field date as Date? it appears that it was being read as text.
below is my colModel for date
{name:'date', index:'date', width:90, editable:false, align:"center", editrules:{required:true}}
The behavior which you described exists since introduction of the new filter module in jqGrid. The default behavior is just a little too complex to be described in the "Default" column of the table from the options of searching.
If you examine the source code of jqGrid you will find the following two lines:
numopts : ['eq','ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'],
stropts : ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc', 'nu', 'nn', 'in', 'ni'],
So if you have defined sopt property in the searchoptions for some column of jqGrid you will see the corresponding compare operations. You can set default
If you would define any sorttype value other as default 'string' the numerical options will be used as the compare operations. Only for undefined sorttype, undefined searchoptions.sopt and undefined options of searching options prmSearch of navGrid the behavior which you described will be used.
So you can use for example navGrid in the form
$('#grid').jqGrid('navGrid', '#pager',
{refreshstate: 'current', add: false, edit: false, del: false}, {}, {}, {},
{sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'bn', 'ew', 'en', 'cn', 'nc', 'nu', 'nn', 'in', 'ni']}
);
Another possibility is to define the searchoptions.sopt directly for the 'date' column:
{name: 'date', index: 'date', width: 90, align: "center", editrules: {required: true},
searchoptions: {sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge']}}
You can include all operation which you want to have for the corresponding column depend on the type of the data inside.
What I really recommend you to do is to use column templates. In the projects which I developed for the customers I define in one JavaScript file which I include in all pages different templates for different types of data. For example
var initDate = function (elem) {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
dateTemplate = {width: 80, align: 'center', sorttype: 'date',
formatter: 'date', formatoptions: { newformat: 'm/d/Y' }, datefmt: 'm/d/Y',
editoptions: {date: true, dataInit: initDate },
searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDate }};
If you have defined the dateTemplate variable you can use it like
{name:'date', index:'date', editrules: {required: true}, template: dateTemplate }
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']} };
I am trying to add the search bar with jquery.jqgrid.js after trying several methods this method was the only one that did not give me an error but neither does it show my search toolbar, can someone have a look and see if I missing anything??
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['Edit', 'AlertId', 'Policy', 'PolicyRule', 'Alert Status',
'Alert Code', 'Message', 'Category'],
colModel: [
{ name: 'Edit', edittype: 'select', formatter: 'showlink' },
{ name: 'AlertId', index: 'AlertId', sortable: true, sorttype: 'int',
autoFit: true, align: 'left', hidden: true },
{ name: 'Policy', index: 'Policy.Name', sortable: true, sorttype: 'text',
autoFit: true, searchoptions: { sopt: ['eq', 'ne', 'cn'] },
align: 'left' },
{ name: 'Policy Rule', index: 'PolicyRule', sortable: true,
sorttype: 'text', autoFit: true, sorttype: 'text',
searchoptions: { sopt: ['eq', 'ne', 'cn'] }, align: 'left' },
{ name: 'Alert Status', index: 'AlertStatus.status', sortable: true,
sorttype: 'text', searchoptions: { sopt: ['eq', 'ne', 'cn'] },
autoFit: true, align: 'left' },
{ name: 'Alert Code', index: 'Code', sortable: true, sorttype: 'text',
align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn'] },
autoFit: true },
{ name: 'Message', index: 'Message', sortable: true, sorttype: 'text',
align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn'] },
autoFit: true },
{ name: 'Category', index: 'Category.name', sortable: true,
sorttype: 'text', align: 'left', autoFit: true,
searchoptions: { sopt: ['eq', 'ne', 'cn'] }}],
pager: $("#pager"),
rowNum: 10,
rowList: [10, 60, 100],
scroll: true,
sortname: 'AlertId',
sortorder: 'asc',
viewrecords: true,
imgpath: '/scripts/themes/basic/images',
caption: 'my name',
gridComplete: function() {
var objRows = $("#list tr");
var objHeader = $("#list.jqgfirstrow td");
if (objRows.length > 1) {
var objFirstRowColumns = $(objRows[1]).children("td");
for (i = 0; i < objFirstRowColumns.length; i++) {
$(objFirstRowColumns[i]).css("width",
$(objHeader[i]).css("width"));
}
}
}
});
});
$("#list").jqGrid('navGrid','#pager',
{edit:true,add:true,del:true,search:true,refresh:true});
$("#list").jqGrid('navButtonAdd',"#pager",
{caption:"Toggle",title:"Toggle Search Toolbar",
buttonicon :'ui-icon-pin-s',
onClickButton:function() {
$("#list")[0].toggleToolbar()
} });
$("#list").jqGrid('navButtonAdd',"#pager",
{ caption: "Clear", title: "Clear Search",
buttonicon :'ui-icon-refresh',
onClickButton:function(){
$("#list")[0].clearToolbar()
} });
jQuery("#list").jqGrid('filterToolbar');
After the improving of the format of your code one can see your main error: you call navGrid, navButtonAdd and filterToolbar outside of jQuery(document).ready. If you move it inside the jQuery(document).ready you will see immediately the searching toolbar: see here.
You code has other small problems:
variable i inside gridComplete should be declared to be local and not global variable.
You should remove deprecated parameter imgpath.
You use many options of colModel parameters with default values like sortable:true, sorttype: 'text', align: 'left' and so on. It makes only the code longer, slowly and more difficult to read. I recommend you to look in the part of documentation which describes colModel parameters and remove default properties.
The sorttype property which you use will not work in case of usage datatype: 'json' without loadonce:true. So you should decide either you use server based sorting, paging and filtering/searching and you should better remove in the case sorttype properties or you should use loadonce:true, but the grid contain should be loaded at once at the first request to the server.
There are no autoFit column property.