I want to add a custom tooltip on jqgrid column headers.i hover over the column name and i get the tooltip(describes content related to that col)
I don't think there is any built-in way to add custom headers. If you use the headertitles option, it will just use the text as the title attribute.
You'll probably have to set them manually doing something like this:
$("th[role='columnheader']").attr("title", "some description");
You can add that code to one of the callbacks such as gridComplete.
Thanks David for your answer.
we can do one more thing as shown in the code below :
var thd = jQuery("thead:first", grid[0].grid.hDiv)[0];
jQuery("tr.ui-jqgrid-labels th:eq(" + columnnumber + ")", thd).attr("title","This column tells you about people who attended the training but missed the test");
if you want to show custome tooltip for all column you can probably add a loop from first column to last column and have the "text" in an array
var arr=["hello","bla bla","a ","b","c"];
and use this array in the loop
Related
I am trying to make my chart 508 compliant. Hence in order to make it possible to navigate the chart using keyboard, i want to add anchor elements before every bar column. I tried doing :
d3.select("svg").insert("a",".nv-bar").attr("href","");
but it didnt work.
Can anybody suggest a better way of doing it. Thanks !
Here's one way to do it:
d3.selectAll('.nv-bar')
.each(function() {
var el = this;
d3.select(el.parentNode)
.insert('a', function(){return el;})
.attr('href', '');
});
The insert method will add elements to each item in the current selection, regardless of how many elements the "before" parameter matches.
My solution will add an anchor for each bar in the document, and takes advantage that the insert method can accept a selector string or a function that returns an element to insert before. (Although, somewhat frustratingly, it does not accept a DOM node directly)
Edit: Here's a jsfiddle with an example: https://jsfiddle.net/bgp6atzo/
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 have a jqgrid with a subgrid.
I am attempting to apply different colors to master and detail grids. I have two rules: the first one is to alternate odd and pair colors and the other one is to apply specific CSS to the row, based on values of a specific field.
Both master & details grid, contains the following gridComplete functions, where obviously childnodes index varies cause tables contains different fields:
gridComplete: function () {
var _rows = $(".jqgrow");
for (var i = 0; i < _rows.length; i++) {
_rows[i].attributes["class"].value += " " + _rows[i].childNodes[4].textContent;
_rows[i].attributes["class"].value += " " + _rows[i].childNodes[4].innerText;
}
applyZebra("jqTicketgrid");
}
applyZebra function provides to alternate odd/pair colours and has already been tested on another grid which not contains a subgrid.
For the record, I found above solutions in other solved questions of this forum, and both works with "simple" jqgrids (not master/detail).
PROBLEM
The master grid is formatted only when I click to expand the detail rows, while detail subgrid never alternate colours, neither apply format based on cell contents...
Where I am wrong? Pheraps I must intercept another event which is not gridComplete? Otherwise with grid&subgrids it's impossible to use _rows[x] & childNodes[y] attributes?
Please ask for clarifications, if needed, thx.
Thanks in advance!
I suppose the error in your code is that you use $(".jqgrow") instead of $(".jqgrow", this) where this inside of gridComplete will be either DOM element of the <table> of the grid or the subgid (I suppose you use grid as subgrid).
Additionally I would not recommend you to use you current code at all. It's much more effective and simple to to use cellattr. The rawObject parameter allow you access all other cells of the current row. In the answer you will find an example of implementation.
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
in my site , i have a jqgrid table.
by default, the names of the columns (header) is longer than the width for column, because that i set the name with an ellipsis.
however, when resizing the column, the short name with ellipsis stays.
how can i get it work automatic ,
like the ellipsis should disappear and change to the full name when there is enough space, when the user is expanding the column.
thanks
You can add an event handler after the resizing finishes to reset the names. How are you storing / changing the names? If they're in an array, you can add a function like:
var columnNames = ['first', 'second', 'third'];
$("#mygrid").jqGrid({
...
resizeStop: function(newwidth, index){
jQuery("#mygrid").jqGrid('setLabel',index,columnNames[index]);
},
...
});