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.
Related
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'
});
I am using JQGrid and I want an option for multiple selection of rows. I used " multiselect: true," but it is not working. Yes I have got an column in the grid that have checkbox in each row but if I select top checkbox which is in header , it just selects first row from grid
Even single selection of row is not working properly. If checked at one checkbox, it selects and then if I check another box in the another row, it unchecks the first checked checkbox.
Here is my grid Code.
$(document).ready(function () {
$("#btnGetdetails").click(function () {
bindReports();
});
var bindReports = function () {
$('#list1').jqGrid('GridUnload');
$("#list1").jqGrid({
url: "GetNotesReportDetails",
postData: { startDate: $('#startDate').val(), endDate: $('#endDate').val(), ins_Type: $("#InsuranceType").val(), ass_Clincian: $("#ddlAssignedClician").val() },
datatype: "json",
mtype: "POST",
colNames: ["ID", "#", "First Name", "Last Name", "Date Of Birth", "Date of Visit", "Insurance Type", "Insurance ID","Clinician" ,"Procedure Code", "Fee Schedule"],
colModel: [
{ name: "ID", index: "ID", hidden: true, key: true },
{ name: "SNo", index: "SNo", width: 10, align: "left" },
{ name: "FirstName", index: "FirstName", width: 40, align: "left", sortable: true, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } },
{ name: "LastName", index: "LastName", width: 40, align: "left", sortable: true, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } },
{ name: "DateofBirth", index: "DateofBirth", width: 40, align: "left", formatter: 'date', sorttype: "date", sortable: true },
{ name: "DateofVisit", index: "DateofVisit", width: 40, align: "left", formatter: 'date', sorttype: "date", sortable: true },
{ name: "PageType", index: "PageType", width: 40, align: "left", sortable: true },
{ name: "InsuranceID", index: "InsuranceID", width: 50, align: "left", sortable: true },
{ name: "Clinician", index: "Clinician", width: 50, align: "left", sortable: true },
{ name: "ProcedureCode", index: "ProcedureCode", width: 50, align: "left", sortable: true },
{ name: "CodeFee", index: "CodeFee", width: 50, align: "left", sortable: true }],
// Grid total width and height
multiselect: true,
rowNum: 20,
rowList: [5, 10, 15, 20],
width: 900,
height: "100%",
// Paging
pager: $("#pager1"),
viewrecords: true,
// Default sorting
//sortname: "FirstName",
sortorder: "asc",
sortable: true,
loadonce: true,
hidegrid: false,
// Grid caption
caption: "Reports List"
}).navGrid("#pager1", { refresh: false, excel: true, add: false, edit: false, del: false }, {}, // settings for edit
{}, // settings for add
{}, // settings for delete
{ sopt: ["cn"] } // Search options. Some options can be set on column level
).jqGrid('navButtonAdd', '#pager1', {
caption: "Export to Excel",
buttonicon: "ui-icon-bookmark",
onClickButton: genGraph,
position: "last"
});
}
});
Probably you have problem in your data. You used key: true for the column ID. It means that jqGrid will assign the value of id attribute of every row (id of <tr> element) with the value from ID column. If you would have the same values in ID column instead of providing unique values you would have exact the same behavior like you described in your question. If jqGrid will need to select or unselect an row then it will search the row by id. It will find the first row with the id if one have more as one row with the id. So it will select/unselect the first row in the grid in many cases.
I have a grid that is loaded inside a jquery dialog. I have done row editing and row saving within onSelectRow event. When a row is edited and saved and then another row is clicked, previous row remains in the edited form. I am not able to save and remove the edited form.
Id of my table on which I want to load the grid is MultiCount.
And I have binded the grid inside a function bindShapesGrid(), below is the code.
I have hardcoded a XML String and used it as the data.
function bindShapesgrid() {
var xmlstring = "<root><rows><row><cell>Shortnamevalue</cell><cell>does not equal</cell><cell>and</cell><cell>sad</cell><cell></cell><cell></cell></row><row><cell></cell><cell></cell><cell></cell><cell></cell><cell></cell><cell></cell></row></rows></root>"
var lastsel2;
jQuery("#MultiCount").jqGrid({
datatype: 'xmlstring',
datastr: xmlstring,
colNames: ['ShortName', 'Operand 1', 'Value 1', 'AndOr', 'Operand 2', 'Value 2'],
colModel: [{ name: 'ShortName', index: 'ShortName', align: 'center', width: 80, editable: true, edittype: "select" },
{ name: 'Operand1', index: 'Operand1', align: 'center', width: 90, editable: true, edittype: "select", editoptions: { value: RetrievegridOperandList() } },
{ name: 'Value1', index: 'Value1', align: 'center', width: 40, editable: true },
{ name: 'AndOr', index: 'Refer', align: 'center', width: 80, editable: true, edittype: "select", editoptions: { value: "AND:And;OR:Or" } },
{ name: 'Operand2', index: 'Operand2', align: 'center', width: 80, edittype: "select", editable: true, editoptions: { value: RetrievegridOperandList() } },
{ name: 'Value2', index: 'Value2', align: 'center', width: 40, editable: true }],
root: 'rows',
row: 'row',
celledit: true,
sortname: 'ShortName',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: "100%",
rowNum: 10,
onSelectRow: function (id) {
if (id && id !== lastsel2) {
jQuery('#MultiCount').jqGrid('editRow', id, true);
jQuery("#MultiCount").jqGrid('saveRow', lastsel2, true);
lastsel2 = id;
}
}
});
}
IE 9 displays a horizontal scrollbar on jqgrid which is not the case when rendered in chrome or mozilla.
following are the default configurations that i set when i create my jqgrid
datatype: "local",
colNames: ['Name', 'Note Type', 'Based On', 'Version', 'Status', 'Description', 'Id', 'Tags', 'TemplateId', 'TemplateVersionId', 'IsLocked'],
colModel: [
{ name: 'Name', index: 'Name', title: false, resizable: false, width: 175, classes: 'grid-pointer' },
{ name: 'NoteType', index: 'NoteType', width: 100, title: false, resizable: false, classes: 'grid-pointer', cellattr: function () { return 'style="white-space: normal";"height:auto";"vertical-align:text-top;"'; } },
{ name: 'BasedOn', index: 'BasedOn', width: 100, title: false, resizable: false, classes: 'grid-pointer', cellattr: function () { return 'style="white-space: normal";"height:auto";"vertical-align:text-top;"'; } },
{ name: 'Version', index: 'Version', classes: 'grid-pointer', align: "right", width: 50, title: false, resizable: false },
{ name: 'Status', index: 'Status', width: 80, classes: 'grid-pointer', title: false, resizable: false },
{ name: 'Description', index: 'Description', title: false, resizable: false, width: 135, formatter: self.trimDescription, classes: 'grid-pointer' },
{ name: 'id', index: 'id', hidden: true, title: false },
{ name: 'Tags', index: 'Tags', hidden: true },
{ name: 'TemplateId', index: 'TemplateId', hidden: true },
{ name: 'TemplateVersionId', index: 'TemplateVersionId', hidden: true },
{ name: 'IsLocked', index: 'IsLocked', hidden: true}],
sortname: 'Name',
rowNum: 10,
sortorder: 'asc',
loadonce: true,
viewrecords: true,
multiselect: false,
autowidth:true,
height: 'auto',
rowList: [10, 20, 30],
pager: '#template-grid-pager',
noRecordText: "No records to view",
I had the same issue so I just disabled the overflow by calling the following function. In my case I am only doing it if the grid uses force fit, as all columns should fit then, however if you do not use force fit you can omit the conditional statement.
function jqGridDisableHScroll() {
//if columns are force fit all columns will always fit on screen.
if ($('#yourgrid').jqGrid('getGridParam', 'forceFit')) {
var gridview = $('#gview_yourgrid');
$('.ui-jqgrid-bdiv', gridview).css({ 'overflow-x': 'hidden' });
}
}
Note: The reverse would need to be done though if column resizing is allowed and force fit is not on. Also you could just do this via css if it will be always the case for your grids
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.