I am working in a Jqgrid and have encountered a problem. I have looked at many examples and read alot of documentation but can't seem to determine why only 1 search option appears in the column header as opposed to the others such as "ge" "le" "eq" etc?
This is my code:
jQuery("#jQGridDemo").jqGrid({
url: 'http://localhost:58404/JQGridHandler.ashx',
datatype: "json",
colNames: ['Property ID', 'Property Ref', 'Short Address', 'Scheme Code', 'Scheme Name', 'Property Type', 'Tenure Type', 'Status'],
colModel: [
{ name: 'PropertyID', index: 'PropertyID', width: 70, align: "left", searchoptions: {sopt: ["ge","le","eq"]}, sortable: true},
{ name: 'PropertyRef', index: 'PropertyRef', width: 75, align: "left", stype: 'text', sortable: true},
{ name: 'ShortAddress', index: 'ShortAddress', width: 200, align: "center", search:true, stype: 'text', searchoptions: {sopt: ["cn","ge","le","eq"]}, sortable: true},
{ name: 'SchemeCode', index: 'SchemeCode', width: 80, align: "center", sortable: true },
{ name: 'SchemeName', index: 'SchemeName', width: 80, align: "center", stype: 'text', sortable: true },
{name: 'PropertyType',width: 80, align: "center",},
{ name: 'TenureType', index: 'TenureType', width: 80, align: "center", sortable: true },
{ name: 'Status', index: 'Status', width: 75, align: "center", sortable: true },
],
beforeProcessing: function (data) {
//Create the filters
getDropDownValues(data, 'PropertyType')
getDropDownValues(data, 'TenureType')
getDropDownValues(data, 'Status')
$(this).jqGrid('destroyFilterToolbar')
.jqGrid('filterToolbar', {
stringResult: true,
searchOperators: true
});
},
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#jQGridDemo').jqGrid('restoreRow',lastsel2);
jQuery('#jQGridDemo').jqGrid('editRow',id,true);
lastsel2=id;
}
},
height: 'auto',
width: 'auto',
rowNum: 30,
editable: true,
mtype: 'GET',
loadonce: true,
rowList: [30, 40, 50],
pager: '#jQGridDemoPager',
sortname: 'PropertyId',
viewrecords: true,
sortorder: 'desc',
caption: "Property Details",
editurl: 'http://localhost:58404/JQGridHandler.ashx'
});
Related
Experts,
I need horizontal scrollbar in my JQgrid. The scrollbar is visible but it does not work as the columns are getting wrapped. I do not want wrapping and allow user to scroll horizontally. I tried everything found on google but in vain. Going forward the number of columns would increase. Please help.
$("#test1").jqGrid({
url: hostPath + '/test/test',
postData: {
modelDataRequest: window.ModelPart
},
datatype: 'json',
mtype: 'Post',
height: 'auto',
colNames: ['Col1', 'Col2','col3','col4','col5', 'col6', 'col7','col8', 'col9', 'col10', 'col11', 'col12'],
colModel: [
{name: 'col1', index: 'col1', width: '150px', search: true, align: 'left'},
{name: 'col2', index: 'col2', width: '150px', search: true, align: 'left'},
{name: 'col3', index: 'col3', width: '150px', search: true, align: 'left'},
{name: 'col4', index: 'col4', width: '150px', search: true, align: 'left'},
{name: 'col5', index: 'col5', width: '150px', search: true, align: 'left'},
{name: 'col6', index: 'col6', width: '150px', search: true, align: 'left'},
{name: 'col7', index: 'col7', width: '150px', search: true, align: 'left'},
{name: 'col8', index: 'col8', width: '150px', search: true, align: 'left'},
{name: 'col9', index: 'col9', width: '150px', search: true, align: 'left'},
{name: 'col10', index: 'col10', width: '150px', search: true, align: 'left'},
{name: 'col11', index: 'col11', width: '150px', search: true, align: 'left'},
{name: 'col12', index: 'col12', width: '150px', search: true, align: 'left'},
],
gridview: true,
loadOnce: true,
sortable: true,
shrinkToFit: false,
//search: true,
pager: '#Pager',
jsonReader: { cell: "" },
rowNum: 50,
rowList: [10, 20, 50, 100, 500, 1000],
viewrecords: true,
emptyrecords: 'No record(s) to display',
caption: "Search Results",
altRows: true,
altclass: 'jqGridAltRow',
loadComplete: function () {
if ($(this).getGridParam("records") == 0) {
$(this).parents('div.ui-jqgrid-div').css("max-height", "0px");
$(this).html("<div style='padding:6px;background:#D8D8D8'>No records found</div>");
}
else {
$(this).parents('div.ui-jqgrid-div').css("max-height", "450px");
}
$(this).parents('div.ui-jqgrid-div').css("max-width", "100%");
},
gridComplete: function () {
$('#recordsCount').text($('#test1').getGridParam('records'));
},
},
{
closeOnEscape: true, closeAfterSearch: true, ignoreCase: true, multipleSearch: true, multipleGroup: true, showQuery: true,
sopt: ['cn', 'eq'],
defaultSearch: 'cn'
})
I am new to jqgrid. I need to show a tooltip for "Select All" checkbox in the column header so that the tooltip shows up when users hover mouse over the "Select All" checkbox. Please help. Here is the code that generate my grid.
jQuery("#ListContacts").jqGrid({
data: jqgrid_data,
datatype: "local",
height: '700',
width:'700',
colNames: ['ContactID', 'Contact Name', 'Cell', 'Office', 'Email', 'Address'],
colModel: [
{ name: 'ContactID', index: 'ContactID', hidden: true },
{ name: 'ContactName', index: 'Contact Name', width: 120, cellattr: Soars.JQGridHelper.wrapContents },
{ name: 'Cell', index: 'Cell', align: "right", width: 400 },
{ name: 'Office', index: 'Office', align: "right", width: 40 },
{ name: 'Email', index: 'Email', align: "right", align: "center", width: 50 },
{ name: 'Address', index: 'Address', width: 60, datefmt: 'm/d/y', formatter: Soars.JQGridHelper.dateFormat, unformat: Soars.JQGridHelper.dateUnFormat }],
rowNum: 25,
rowList: [25, 50, 75, 100],
altRows: true,
pager: '#pager_ListContacts',
pagerpos: 'left',
recordpos: 'right',
sortname: 'ContactID',
viewrecords: true,
emptyrecords: "No records to view",
sortorder: "asc",
multiselect: true,
multiselectWidth: 16,
headertitles:true
});
You need just set the title attribute of the checkbox. The id of the chechbox is build based on the id of the grid, but with "cb_" prefix. If the id of the grid is "list", for example, then the code
$("#cb_list").attr("title", "Select All");
executed after the grid will created the tooltip.
I load jqgrid with drop down values using onchange event.
But when i again choose some other value in drop down i need the jqgrid to show the corresponding values.
Here s how i load the jqgrid
function getGrid() {
var mOptometrist = $('#optOptometristList').val();// Drop down value
alert(mOptometrist);
//jQuery("#list").jqGrid().setGridParam({ url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '' }).trigger("reloadGrid");
jQuery("#jQGridDemo").jqGrid({
url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '',
datatype: "json",
colNames: ['Id', 'Day', 'Start Time', 'End Time', 'Interval', 'Session', "Patient", 'Slots', 'Room Number'],
colModel: [
{ name: 'SlNo', index: '_id', width: 20, stype: 'text', editable: true, editoptions: { disabled: true} },
{ name: 'DayOfWeek', index: 'Day', width: 150, stype: 'text', sortable: true, editable: true, edittype: "select", formatter: 'select', editoptions: { value: getAllSelectOptions()} },
{ name: 'StartTime', index: 'StartTime', width: 150, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
{ name: 'EndTime', index: 'EndTime', width: 60, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
{ name: 'Interval', index: 'Interval', width: 80, align: "right", editable: true },
{ name: 'Session', index: 'Session', width: 40, align: "right", editable: true },
{ name: 'PatientsPerSlot', index: 'Patient', width: 80, align: "right", editable: true },
{ name: 'Slots', index: 'Slots', width: 150, sortable: false, editable: true },
{ name: 'RoomID', index: 'RoomNumber', width: 100, sortable: false, editable: true }
],
rowNum: 10,
mtype: 'GET',
loadonce: false,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
sortname: '_id',
viewrecords: true,
sortorder: 'desc',
caption: "List Employee Details",
editurl: 'Schedule.ashx?mOptometristId= ' + mOptometrist,
loadComplete: function () {
$("#jQGridDemo").setColProp('Day', { editoptions: { value: "1:Sunday;2:Monday;3:Tuesday"} });
}
});
You can use
url: "",
postData: {
mOptometristId: function () {
return $('#optOptometristList').val();
}
}
instead of
url: 'Schedule.ashx?mOptometristId=' + mOptometrist + ''
Inside of onchange event you need just call $("#jQGridDemo").trigger("reloadGrid");. See the answer for more details.
The first click on editing a row works great, but after closing the dialog and clicking on another row edit button, it throws an exception (in subject).
When debugging I saw in jquery.min.js "#" sign crashes, my guess it somehow gets this invalid character. code:
$("#jqgrid").jqGrid({
datatype: "local",
mtype: 'GET',
colNames: ['Pic', 'Category', 'Order', 'Name', 'Description', 'Full Price', 'Price', 'Is Pack', 'Is Active', 'Is Shipment', 'Is Pack Only', 'Attributes', 'Sites', 'Call Centers', ''],
colModel: [
{ name: 'PictureUrl', index: 'PictureUrl', width: 40, formatter: imageFormatter, align: 'center' },
{ name: 'CategoryID', index: 'CategoryID', width: 60, editable: true, editoptions: { size: 30, value: getProductCategories }, edittype: "select" },
{ name: '', index: 'ProductID', width: 40, editable: true, editoptions: { size: 30} },
{ name: 'ProductName', index: 'ProductName', width: 40, editable: true, editoptions: { size: 30} },
{ name: 'ProductDesription', index: 'ProductDesription', width: 40, editable: true, editoptions: { size: 30} },
{ name: 'FullPrice', index: 'FullPrice', width: 40 },
{ name: 'ActualPrice', index: 'ActualPrice', width: 40 },
{ name: 'IsPackage', index: 'IsPackage', width: 40, editable: true, editoptions: { size: 30, value: "Yes:No" }, edittype: "checkbox" },
{ name: 'IsActive', index: 'IsActive', width: 40, editable: true, editoptions: { size: 30, value: "Yes:No" }, edittype: "checkbox" },
{ name: 'IsShipment', index: 'IsShipment', width: 40, editable: true, editoptions: { size: 30, value: "Yes:No" }, edittype: "checkbox" },
{ name: 'IsPackageOnly', index: 'IsPackageOnly', width: 40, editable: true, editoptions: { size: 30, value: "Yes:No" }, edittype: "checkbox" },
{ name: '', index: '', width: 40 }, //attributes
{name: 'ProductInSites', index: 'ProductInSites', width: 40, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "35"} },
{ name: ' ', index: '', width: 40, align: 'center', editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "35"} }, //callcentre
{ name: ' ', index: '', width: 40, align: 'center', formatter: updatebutton }, //button
],
rowNum: 20,
rowList: [10, 20, 30],
pager: '#jqpager',
sortname: 'OrderDate',
viewrecords: true,
sortorder: "desc",
caption: "Shipment Report",
autowidth: true,
height: "100%",
loadtext: "Loading...",
editurl: "ProductsList.ashx?actiontype=3"
});
You use name: '' and name: ' ' in the definition of some columns in colModel. It is wrong. The name property must be unique name having no blanks or special characters.
For some reason (unknown to me) the event 'formatCell' doesn't fire (no alert message shown). see code below:
$("#jqgrid").jqGrid({
datatype: "json",
colNames: ['CurrecncyID', 'Currency', 'Value', 'Calculated', 'Value', '%', 'Calculated'],
colModel: [
{ name: 'CurrecncyID', index: 'CurrecncyID', hidden: true, width: 40 },
{ name: 'CurrencyName', index: 'CurrencyName', width: 150 },
{ name: 'FullPrice', index: 'FullPrice', width: 100, editrules: { custom: true, custom_func: priceCheck }, editable: true, align: 'right', formatter: priceFormatter },
{ name: 'CalcFullPrice', index: 'CalcFullPrice', width: 100, align: 'right', formatter: priceFormatter },
{ name: 'ActualPrice', index: 'ActualPrice', width: 100, editrules: { custom: true, custom_func: priceCheck }, editable: true, align: 'right', formatter: priceFormatter },
{ name: 'Precent', index: 'Precent', width: 100, align: 'right', formatter: 'integer', formatoptions: { prefix: "% "} },
{ name: 'CalcActualPrice', index: 'CalcActualPrice', width: 100, align: 'right', formatter: priceFormatter },
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#jqgrid').restoreRow(lastsel);
jQuery('#jqgrid').editRow(id, true);
lastsel = id;
}
},
formatCell: function (rowid, cellname, value, iRow, iCol) {
alert("before edit");
},
jsonReader: {
repeatitems: false
},
rowNum: 20,
rowList: [10, 20, 30],
pager: '#jqpager',
sortname: 'CurrecncyID',
viewrecords: true,
sortorder: "desc",
caption: "Prices List",
autowidth: true,
height: "100%",
loadtext: "Loading...",
editurl: "/handlers/myurl.ashx"
});`
There are three main editing modes used in jqGrid. The formatCell event is a part of the cell editing mode. It will be not fire in case of usage of editRow and restoreRow are the part of the inline editing mode. Probably you need use custom editable element in case of the usage of the inline editing mode.