Here are two different tables #Oleg made:
On the first one, when clicking a single cell - the entire row is picked.
On the second one, only the clicked cell is picked.
This is being controlled with cellEdit: true.
I'd like to have a logic that will set cellEdit to false, but only for certain rows (under some condition, which for simplicity let's say this will happen when a cell's value is under 100).
How can this be achieved?
To allow to edit data in some column one have to specify editable property in the column. Free jqGrid allows to use callback function as the value of editable property. The callback should return boolean value, which informs jqGrid, whether the cell is editable or not. The wiki article describes the feature more detailed. For example, the following callback in some column colModel allows editing of the cells only if the value in amount column is less as 100:
editable: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
if (item.amount < 100) {
return false;
}
return true;
}
Related
I've just started using jqGrid and am having a problem trying to get the value of an edited cell when it loses focus. I have a two-column grid with only the first column editable. Eventually my aim is that when the user clicks out of a cell in this column, it will make an Ajax call to the server to populate the second column with a value. Right now, I'm testing by just having the value of the cell displayed in a div on the page. I find the event model very unclear and have tried all the events related to cell editing (beforeEditCell, afterEditCell, beforeSubmitCell, onSubmitCell, etc.) Only the beforeSubmitCell and onSubmitCell events actually return the value. The problem in my test is that when I first edit a cell, the correct value is shown, but when I edit other cells it keeps showing the value and row ID from the first edited cell. Here is my test page: http://www.galcott.com/jqgrid.html where you can see this happening and look at the code.
You have a lot of errors in your code and setup, which causes unexpected behavior.
1.You do not have included one of the important file - the language file. If you have include it you will see where is the problem.
2.You do not have include css framework file, which will cause sometime unexpected behavior.
3.You save a error in the grid parameter cellsubmit - in your code it is cellSubmit, while the working option is cellsubmit - JavaScript is case sensitive
4.At last the event onSubmitCell as I say in my comment should return true or false i.e
onSubmitCell: function(rowid, cellname, value, iRow, iCol) {
$('#celldata').html(iRow + ' ' + value);
if(some condition) {
return false;
}
return true;
}
In your code do:
$("#tbl1").jqGrid({
width: 400,
height: 400,
cellsubmit: 'clientArray',
editurl: 'clientArray',
...
and it will work
So what I'm trying to accomplish is when the grid is fully loaded, I loop over a certain column that contains checkboxes. Depending on the value of the checkbox I should be able to disable it.
Problem is that I can't access the html element that's there. Am i doing something wrong or overlooking something?
What i've tried:
loadComplete: function() {
// Fetch all the ID's of the rows
var rows = $("#table").getDataIDs();
// Loop over the rows
if(rows.length != 0){
for(i=0; i < rows.length; i++) {
// Get the data so we test on a certain condition
var row = $("#table").jqGrid("getRowData", rows[i]);
if (row.gridCheckbox == 1) {
//disable the element
row.prop("disabled", "disabled");
}
}
}
}
It's important to understand that changing one element on the page follow in the most cases to web browser reflow: validation whether some property (position for example) need be changed in all other elements on the page. If you do changes in the loop then your JavaScript code can be really slow.
Thus it's strictly recommended to reduce the number of changes of the DOM. Especially to reduce the number of changes jqGrid provides rowattr, cellattr and custom formatters. If you need for example to set disabled attribute on some rows then you should now do this in loadComplete, but to use rowattr instead to inform jqGrid that some additional attributes (disabled="disabled") should be set on some rows. jqGrid collect first the string representation of the whole table body and it use one assignment of innerHTML to fill the whole body of the grid in one DOM operation. It improves essentially the performance. See code example in the old answer.
Is there any way i can hide HOT columns from javascript?
The requirement is such that the column to hide will come as a parameter in javascript and based on that the respective column will show hide accordingly.
The HOT has rowHeaders and colHeaders and the data with 20 columns.
Please advise.
OUTDATED SOLUTION
Ok I founnd a possible solution. I tested it out on my own system but it's actually quite simple.
You should be using a customRenderer in your columns option. Read up about this if you aren't already. The idea is that you're giving each cell its own renderer. In this custom function, you can do something like this:
var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns
function getCustomRenderer() {
return function(instance, td, row, col, prop, value, cellProperties) {
if (colsToHide.indexOf(col) > -1) {
td.hidden = true;
} else {
td.hidden = false;
}
}
}
What this renderer does is hide the cells that the var colsToHide specify. All you do now is add a DOM element that lets the user pick which and so every time the table gets rendered (which happens basically after any change, or manually triggered need be), the cells in the columns specified will be hidden, keeping the data array intact like you described. And when not in colsToHide they are re-rendered so make sure you get that working as well.
Here I implemented it with very basic functionality. Just enter the index of a column into the input fields and watch the magic happen.
http://jsfiddle.net/zekedroid/LkLkd405/2/
Better Solution: handsontable: hide some columns without changing data array/object
I would like to override the td property title that jqgrid generates with a value from a hidden column from the colmodel. I can see how to turn it off completely but not how to change it.
The best way for setting of custom tooltips on the cells of some column is usage of cellattr in the definition of the column in colModel. The cellattr callback allows to define any attribute which will be assigned to <td> elements in the corresponding column. Typically one uses the callback to set style, class, title, data-someName, ... attributes. In the simplest form the function can be defined as
cellattr: function () { return ' title="the tooltip text"'; }
The function cellattr should return the string in the form attributeName=AttributeValue. Some old versions of jqGrid appended the resulting string directly to <td> without the space required mostly between attributes. The last version of jqGrid don't have such problem. Nevertheless I place starting space at the beginning of the returned string to make the code which works in all versions of jqGrid.
The callback cellattr will be called with 5 arguments and the value of this will be initialized to DOM of the grid (the main table element):
cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
...
}
In the most cases rawObject (3-d parameter) is the parameter which is the mostly interesting. It represent the input data for the row of the grid. The only problem that the format of the parameters depends on the format of input data and from the usage of loadonce parameter (in case of loading the data from the server per Ajax). The answer and this one shows how you can use the option in case of different format of input data.
I have created at a table using jqGrid. In that I have a comboBox. I want the values of the combobox such that It is not used in the previous row.
But, once my first row displayed, then I am unable to change the values of comboBoc in the second row.
Ex: In my combobox, there are three values .. one, two, three. I have selected value "two" in the first row. Then the combo box of the second must have two values: one and three.
I have tried the following code:
$("#listData").setColProp('denomination',
{editoptions:{value:getDenominationList('addOperation').toString()}});
Here:
getDenominationList('addOperation') will return a String "1:one;3:three"
But this is not working.
I hope I understand correct your question and you want to change the value parameter of editoptions every time depend on the current row id or other grid contain. You can do this inside your custom dataInit event handler (see editoptions):
dataInit: function (elem) {
var v = $(elem).val();
var rowId = $(e.target).closest('tr.jqgrow').attr('id');
var newValue = getDenominationList('addOperation').toString();
$("#listData").setColProp('denomination', { editoptions: { value:newValue} });
}
The function getDenominationList used in your question don't has the rowid parameter which you probably will need. To simplified it I included in the code above the line which show how the id of the row can be got.
I recommend you to look inside the another answer which I recently answered. It showed how the initial values of value property can be reseted in case of inline editing. It you use form editing you should do this inside of onClose event handler. Moreover in case of form editing you must use recreateForm:true which will force that dataInit event handler will be called not once, but on every row editing.