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.
Related
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;
}
http://i.stack.imgur.com/MkRvj.jpg
Above link is the image of the table !!!
$grid->setColProperty('KBID', array("width"=>50,"formatter"=>"js:formatKbid"));
$custom0 = <<<CUSTOM0
function formatKbid(cellValue, options, rowData) {
return "<a href='detail.php' style='text-decoration:none;'>
"+cellValue+" </a><a href='www.google.com'><img src=\"../images/task.gif
\"/></a>";}
CUSTOM0;
$grid->setJSCode($custom0);
Actually the problem is, I attached a gif to each entries of one column in the jqGrid but my requirement is I want to attach gif only to the few entries in the jqgrid not to all based on some condition. Which function of jqgrid should i use to format particular entry inside the jqgrid ?
I am using a WebGrid to display a list of items,
I like to set the background color of the rows based on a condition. I want to set the background color of the entire row, not just one cell.
Any example?
thank you
This is an old question, but I just stumbled upon it and have an answer that I don't think is too hacky. The previous answer supplied only works if the value you're using to conditionally change the background color is the value of a table cell.
If that's not the case, you can set a data- attribute for the first cell in your table rows using the Format property of a WebGridColumn. Here, the first column of my table contains hyperlinked IDs. I'm defining it in my code-behind (controller action in MVC) and I've added a data-in-error attribute from the IsInError property of my object. You can set the value of this attribute in whatever way makes sense for your application.
new WebGridColumn
{
ColumnName = "Id",
Header = "ID",
Format = (x) => new HtmlString(String.Format("{1}", x.Value.IsInError, x.Value.Id))
});
Then, using jQuery, I find all of the rows in my table that have an anchor in the first cell of the row, and set the class of that row to 'error'.
$(document).ready(function () {
$('table tbody tr td:first-child a[data-in-error="True"]').each(function () {
$(this).parent().parent().addClass('error');
});
});
Hope this helps.
Is jQuery an option? If so, check out: http://devpinoy.org/blogs/keithrull/archive/2010/06/09/how-to-change-table-cell-color-depending-on-its-value-using-jquery.aspx
I am facing problem in Jqgrid. I have a column with hyperlink and on the click of that hyperlink I want row data. Is this possible using Jqgrid. when I am using "getGridParam" I am getting row id as null.
There are two possibilities you can try here:
1) You can use a custom formatter to create the hyperlink, and have a custom attribute on the link where you put in the rowid (prefix the custom attribute name with 'data-' to keep it html5 compatible). Alternatively you could call a javascript function explicitly passing the row id.
2) Instead of the hyperlink's event itself, try using the onCellSelect event of jqGrid where you get the row and column id of the clicked cell, even if its a hyperlink. But this would trigger the event even if the user clicks anywhere inside the cell, not just on the link!.
I'm sure you found the answer to this by now but for some of you using ASP.NET WebForm here is what I used.
Create the Custom Formatter and add it to the column where you want the link to appear:
My columns are from a database I use a Select statement as so:
switch (jqGrdCol.DataField)
{
case "xxx":
CustomFormatter hypLinkxxx = new CustomFormatter();
hypLinkxxx.FormatFunction = "xxxformatOperations"; --> **JavaScript Function**
jqGrdCol.Formatter.Add(hypLinkxxx);
break;
}
Then in the Javascript function:
function xxxformatOperations(cellvalue, options, rowObject) {
return "<a href=somefile.aspx?xxx=" + rowObject[0] >" + cellvalue + "</font></a>"
}
I get the value of the column as a hyperlink.
I had a similar issue and was did look into your question to figure out a solution and I have found out a solution to this.
The solution is by using onCellSelect: function(rowid, index, contents, event)
this gives the rowid and contents ie the content of the cell you have clicked or selected
therfore you can get the entire row of contents which includes your hyperlink as well
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.