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 ?
Related
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 use jqGrid v4.4.5 and I want to create it with dynamic columns.
It is filled by "jqGridHandler.ashx" file .
I want send all information(column name,data,...) by JSON .
I search for it in Google but can not find a good answer.
By Click on each node(child) change whole grid(actions and columns...).For example by click on node3 the grid has three columns 'A' and 'B' and 'actions' but by click on node2 grid has columns 'C' and 'D' and 'actions'.
One can use jqGrid to create many different grids, tree grids, subgrids and so on. It's very important to understand whether you want to display grid with 10 rows or with 100000 rows. If you have 100000 rows (or some other large number of rows) you will have to implement server side paging and sorting of data. So if the user would click on the "next page" button the next rows should be loaded from the server. Why you would need to send all colModel data on paging or sorting? So you should clear understand that in server side scenario one need create all structures of grid only once and then one need refresh only the body of grid. So it would be bad choice to send all information (column name, column model, data,... at once).
Only if you have some hundreds or some thousand of rows in the grid and you can use loadonce: true option them you can load once all information (column name, column model, data, ...) per separate jQuery.ajax call and then create jqGrid with datatype: "local" and using data parameter which contains all grid data.
UPDATED: If you need change
// in the example below the grid with id="list" will be created
// with column having name: "c4" in colModel
var $grid = $("#list"), columnName = "c4";
...
var $colHeader = $("#jqgh_" + $.jgrid.jqID($grid[0].id) + "_" + $.jgrid.jqID(columnName)),
$sortingIcons = $colHeader.find(">span.s-ico");
// change the text displayed in the column
$taxHeader.text("New header text");
// append sorting icons to the new text
$taxHeader.append($sortingIcons);
Before your initialize the jqGrid you will need to have the information for your colNames and colModel properties of the jqGrid.
So in short, you will request the information from your server, once you have successfully retrieved that information you can then build the jqGrid and then the jqGrid can go and fetch it's data.
The following post has some example code on the client side:
jqGrid and dynamic column binding
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
how to get a value of a (hidden) column, from the selected row. that is, the cell value needs to be from the cell identied by colName, and the selected row (not using multi select). From the API i see the method getGridParam("selrow") for reading the row, may be able to combine with other methods.. but, any convenient method available? a code snippet would save lot of time... \
thanks.
You should use getCell function to read the value from the cell identified by row id. So if you need a data from the column 'MyColName' of selected row you can do this with the following code:
var grid = jQuery('#list');
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var myCellData = grid.jqGrid('getCell', sel_id, 'MyColName');
If you need read full data of a row you can use getRowData instead of getCell. More about methods supported by jqGrid you can read in the documentation (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).