I write the following code
beforeSelectRow: function (rowid, e) {
}
return true;
}
});
I Want, When I click in Coulmn 9 Get Al
I am not sure that I correct understand your question, but I suppose that you can just use getRowData method which get the data from the row in for of an object. The property of the object has the same names as the name property of the colModel:
beforeSelectRow: function (rowid, e) {
var rowData = $(this).jqGrid('getRowData', rowid);
...
return true;
}
Related
afterSaveCell: function (rowid, name, val, iRow, iCol) {
var grid = $("#" + subgrid_table_id);
if (parseFloat(val) > 0) {
//alert(val + ' ' + rowid);
//$(this.rows[rowid]).attr("aria-selected", true);
//$(this.rows[rowid]).addClass("ui-state-highlight");
grid.jqGrid('setSelection', rowid, false);
grid.jqGrid('setCell', rowid, 'Review', "True");
}
}
It should mark the row checked if editable cell value is greater than zero. Which it does first time but when I try to edit same cell it doesn't keep checkbox checked
You can try to resetSelection, before to do a set
I am using jqgrid in my project.I have requirement that when user select row and click on edit button of inline toolbar control and modify any data in cell after that instead of click on Save button of inline toolbar control user click(select) any other row at that time.I want to show user message like
Wants to save/discard the modified data
if user click on Save button of message dialog then save the data otherwise discard the data.So please let me know how can I implement it.Till user don’t click on save or discard button don’t select the next row on which user click.
First of all you should use restoreAfterSelect: false option of inlineNav (if you use inlineNav). Seconds you can use beforeSelectRow to implement the required behavior and to call saveRow or restoreRow depend on the user choice.
The simplest implementation of beforeSelectRow could be the following:
beforeSelectRow: function (rowid) {
var $self = $(this),
savedRowInfos = $self.jqGrid("getGridParam", "savedRow"),
editingRowId = savedRowInfos == null || savedRowInfos.length < 1 ?
null : savedRowInfos[0].id;
if (editingRowId != null && editingRowId !== rowid) {
if (confirm("Do you want to save the changes?")) {
$self.jqGrid("saveRow", editingRowId);
} else {
$self.jqGrid("restoreRow", editingRowId);
}
}
}
I used confirm method above. You can see the working code on the demo.
Alternatively one can create asynchronous dialog using jQuery UI dialog for example. Then the code of beforeSelectRow could be the following:
beforeSelectRow: function (rowid) {
var $self = $(this),
savedRowInfos = $self.jqGrid("getGridParam", "savedRow"),
editingRowId = savedRowInfos == null || savedRowInfos.length < 1 ?
null : savedRowInfos[0].id;
if (editingRowId == null || editingRowId === rowid) {
return true; // allow selection
}
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 650,
modal: true,
buttons: {
"Save the changes": function () {
$(this).dialog("close");
$self.jqGrid("saveRow", editingRowId);
$self.jqGrid("setSelection", rowid);
},
"Discard the changes": function () {
$(this).dialog("close");
$self.jqGrid("restoreRow", editingRowId);
$self.jqGrid("setSelection", rowid);
},
"Continue editing": function () {
var tr = $self.jqGrid("getGridRowById", editingRowId);
$(this).dialog("close");
setTimeout(function () {
$(tr).find("input,textarea,select,button,object,*[tabindex]")
.filter(":input:visible:not(:disabled)")
.first()
.focus();
}, 50);
}
}
});
return false; // prevent selection
}
The corresponding demo is here.
I want to use several jqGrids on one page. All grids will have specific functionality. For this reason I want to extend jqgrid
$.jgrid.extend({
cVal: false,
cSetVal: function(value) {
var $t = this;
$t.cVal = value;
console.log('Setting cVal');
return this;
},
cGetVal: function(value) {
var $t = this;
console.log('Getting cVal');
return $t.cVal;
},
});
After loading of page, I use Firefox console to test
>>> $('#some-selector').jqGrid.cVal;
false
So jqGrid returns default value;
>>> $('#some-selector').jqGrid('cSetVal', 'abc');
Setting cVal //console.log returns
Object[table#some-selector.some-class]
When I browse to Object cVal is 'abc'
But
>>> $('#some-selector').jqGrid('cGetVal', 'abc');
Getting cVal //console.log returns
false
now get defaul value again :(
How could I get value which was set in cSetVal method?
Sorry, but I don't full understand the goal of "extending of jqGrid". If you need to hold some additional information with jqGrid you can just use additional parameters which is not in the list of standard jqGrid parameters. For example if you would create the grid using
$('#some-selector').jqGrid({
url: "someUrl",
datatype: "json",
... // other standard jqGrid parameters
cVal: false,
cSetVal: function(value) {
console.log('cSetVal');
}
);
you will be able to access to the parameters using $('#some-selector').jqGrid('getGridParam', 'cVal'); and $('#some-selector').jqGrid('getGridParam', 'cSetVal'); or just using $('#some-selector')[0].p.cVal and $('#some-selector')[0].p.cSetVal. I think that you don't really need any cSetVal or cGetVal functions and can use getGridParam and setGridParam instead.
To change the value of cVal option if it's defined in the abave way you can use
$('#some-selector').jqGrid('setGridParam', {cVal: true});
or just use
$('#some-selector')[0].p.cVal = true;
Alternatively you can use jQuery.data to store any data associated with $('#some-selector').
$.jgrid.extend is helpful if you need to have new methods which you need call in the form $('#some-selector').jqGrid('cSetVal',value);. The answer shows an example of such implementation and discuss a little advantages and disadvantages of the approach.
UPDATED: So if you really need to use the syntax like $('#some-selector').jqGrid('cSetVal',value); then you should modify your code to
$.jgrid.extend({
cSetVal: function(value) {
console.log('Setting cVal');
$(this).jqGrid('setGridParam', {cVal: value});
return this;
},
cGetVal: function(value) {
console.log('Getting cVal');
return $(this).jqGrid('getGridParam', 'cVal');
}
});
If you need initialize some cVal value for the grid you need just include cVal in the list of option of jqGrid during creating of it:
$('#some-selector').jqGrid({
url: "someUrl",
datatype: "json",
... // other standard jqGrid parameters
cVal: true // HERE
);
UPDATED 2: If you defines methods like I suggested in the first part of my answer you should use the methods in the following way:
var $grid = $('#some-selector');
// create the grid
$grid.jqGrid({
url: "someUrl",
datatype: "json",
... // other standard jqGrid parameters
cVal: false,
cSetVal: function(value) {
console.log('in cSetVal()');
//this.p.cVal = value;
$(this).jqGrid('setGridParam', {cVal: value});
},
cGetVal: function() {
console.log('in cGetVal()');
//return this.p.cVal;
return $(this).jqGrid('getGridParam', 'cVal');
}
);
// now we can use cVal, cSetVal and cGetVal
var cSetVal = $grid.jqGrid("getGridParam", "cSetVal"),
cGetVal = $grid.jqGrid("getGridParam", "cGetVal"),
cVal = $grid.jqGrid("getGridParam", "cVal"); // get cVal value
cSetVal.call($grid[0], true); // change cVal value
cVal = $grid.jqGrid("getGridParam", "cVal");// get modified cVal value
cSetVal.call($grid[0], false);// change cVal value
cVal = cGetVal.call($grid[0]);// get modified cVal value
I'm trying to use jQuery UI Autocomplete inside a jqGrid in the dataInit. I'm doing it like this:
{ name:'ac_fin_g', index:'ac_fin_g', width:75, editable: true, edittype: 'text',
editoptions: {
dataInit: function (elem) {
$(elem).autocomplete({
source: 'autocomplete.php',
select: function (event, ui) {
#('ac_fin_g').val(ui.item.value);
}
});
}
}}
And in the function ondblClickRow I'm passing select like a parameter:
ondblClickRow: function (id, select) {
if (id) {
if (id !== lastSel) {
$('#list').restoreRow (lastSel);
$('#list').editRow (id, true, select);
lastSel = id;
} else {
$('#list').restoreRow (lastSel);
lastSel = "";
}
}
}
This is working but just for the first row.
I think that the main reason of your problem is wrong usage of ondblClickRow callback. The second parameter of ondblClickRow callback is the index of the row in the grid. There are other option which you can use. The most full prototype of ondblClickRow callback contains 4 parameters:
// one can use ondblClickRow: function (id) { below because iRow, iCol, e are not used
ondblClickRow: function (id, iRow, iCol, e) {
var $self = $(this);
if (id !== lastSel) {
$self.jqGrid("restoreRow", lastSel);
lastSel = id;
}
$self.jqGrid("editRow", id, true);
}
The third parameter of editRow is oneditfunc callback. The usage of iRow number as oneditfunc callback is wrong.
I have a jqGrid. I would like to highlight a particular cell from a row, ondbClickRow. This would make the task of copying the value of a cell onto clipboard, easy for users. Can someone guide me on how to do this? Thanks!
In general it would be possible, but you should probably switch off row selection to see highlighting immediately. So the code will be about the following:
beforeSelectRow: function () {
return false;
},
ondblClickRow: function (rowid, iRow, iCol, e) {
$(e.target).toggleClass('ui-state-highlight');
}
As the result you can have the grid like
see the corresponding demo here
UPDATED: If you need select the text in the grid cell you can use the idea described here. In case of usage inside of jqGrid the code could be the following:
var selectText = function (element) {
var doc = element.ownerDocument, selection, range;
if (doc.body.createTextRange) { // ms
range = doc.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
if (selection.setBaseAndExtent) { // webkit
selection.setBaseAndExtent(element, 0, element, 1);
} else { // moz, opera
range = doc.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
}
};
$("#list").jqGrid({
// ... jqGrid options
ondblClickRow: function (rowid, iRow, iCol, e) {
selectText(e.target);
}
});
The next demo demonstrate this: