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']} };
Related
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.
I am using jqgrid in my page and now I want to prevent submitting it when enter key is pressed form an editable column. Here is my code.
$( '#mygrid' ).jqGrid( {
url: '/Mycontroller/LoadMygrid',
postData: {
bank_ID: function () { return $( '#bank_accountHead_ID' ).val() },
},
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
editurl: 'clientArray',
colNames: ['chkbox', 'Sl.#', 'amount'],
//columns model
colModel: [
{ name: 'chkSelect', index: 'chkSelect', align: "center", editable: true, edittype: 'checkbox', width: '20px', editoptions: { value: "True:False" },
fixed: true, formatoptions: { disabled: false}
},
{ name: 'Sl_No', index: 'Sl_No', align: 'left'},
{ name: 'TotalAmt', index: 'TotalAmt', align: 'right', editable: true, edittype: 'text' }
]
..................
});
I tried setting keys:false in colmodel. Not working. Any other method?
I suppose that you use inline editing close to the form described in the question. I posed the bug report. The UPDATED part of my answer describes the problem more detailed. I recommend you to verify whether your problem will be fixed if you would used fixed version of jquery.jqGrid.src.js which you can download here.
Is there a way to increase the size of the textbox fields in the advanced searching of jqgrid. The final textbox is squished for some reason. I have inserted an image to show this.
Here is the code
grid2 = $('#BillInformation').jqGrid({
...
{ name: 'DOS_From', index: 'DOS_From', width: 150, align: 'center',
searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: function (elem) {
$(elem).datepicker({
showButtonPanel: true, changeMonth: true, changeYear: true,
showAnim: 'drop'
})
}
}
},
...
});
You can define the size attribute of the textbox fields from the Advanced Searching dialog by adding the corresponding property of the searchoptions option of the colModel. For example:
searchoptions: {size: 20}
I'm using a jqgrid with MVC. Here is my markup:
$("#list").jqGrid({
url: '/GstRate/GstRateGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['GstRateLookupId', 'Percentage Rate', 'Start Date', 'End Date', 'CreatedByUserName', 'CreatedDateTime', ''],
colModel: [
{ name: 'GstRateLookupId', index: 'GstRateLookupId', hidden: true, key: true, editable: true, editrules: { required: false }, editoptions: { defaultValue: '0'} },
{ name: 'PercentageRate', index: 'PercentageRate', editable: true, editrules: { required: true} },
{ name: 'StartDate', index: 'StartDate', width: 400, align: 'center', formatter: 'date', editable: true, editrules: { required: true }, formatoptions: { srcformat: 'd/m/y', newformat: 'd-m-y' }, editoptions: { dataInit: function (element) { $(element).datepicker({ dateFormat: 'd-m-y' }) } } },
{ name: 'EndDate', index: 'EndDate', width: 400, align: 'center', editable: true, formatter: 'date', formatoptions: { srcformat: 'd/m/y', newformat: 'd-m-y' }, editoptions: { dataInit: function (element) { $(element).datepicker({ dateFormat: 'd-m-y' }) } } },
{ name: 'CreatedByUserName', index: 'CreatedByUserName', hidden: true, editable: true, editrules: { required: false} },
{ name: 'CreatedDateTime', index: 'CreatedDateTime', hidden: true, editable: true, editrules: { required: false} },
{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: true, delbutton: false} }
],
pager: $('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
viewrecords: true,
imgpath: '',
caption: 'Gst Rates',
editurl: '/GstRate/SaveGstRate/'
});
$("#list").navGrid('#pager', { edit: false, add: true, del: true, search: false }, {}, {}, { url: "/../GstRate/DeleteGstRate" });
This is working fine but I want to enhance it so that when a new entry is added the startdate value is readonly and defaults to the end date value of the last entry in the database.
The only way I can think of doing this is by somehow calling a server side method to populate the start date in the pop up create new dialog box.
I was thinking of using the dataUrl value in the editoptions to do this but this dataUrl only seems to work for when populating a select list. I don't want a select list here just a readonly text box.
Does anyone know how to achieve this?
I see two different solution ways:
You use beforeShowForm callback set input field of 'StartDate' to readonly and then send request to the server manually per $.ajax. Inside of success callback of the requests you can set the data in the input field of 'StartDate' received from the server.
If you fill the grid you use userdata to save additional information in the grid. Inside of dataInit of the 'StartDate' you get the data which you need from internal userData parameter and make the initialization of the input field.
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.