Currently i am not using any other plug in for tool tip on mouse hover of grid row. I am using
$("#list").setCell(rowid,'Name','','',{'title':'my custom tooltip on cell'});
Where the Name is the column name where the tool tip will be set and rowid identify the row. For more information read this answer including the references.
Is there any external plug in to achieve the same in better UI effect.
This tool tip does not seems to be good enough to fulfill my requirement
Because in the next version of jQuery UI will be included Tooltip (see demo) I recommend you better to download it now from github and a little play with it.
I prepared the demo which change the tooltip for the second column of the grid and use HTML contain with custom class (I use in demo standard ui-state-highlight class) and custom animation effect (slideUp/slideDown). So you will see about following
I hope the demo will help you to implement your requirements to custom tooltips.
It is also possible to use another approach.
As many "fancy" tooltips are based on class definitions and jquery, you could load the tooltip related class on loadcomplete, e.g.:
$(this).find("td").addClass('gridtip');
I have used a very small and effective tooltip from Alen Gracalic
which I call on hover event, like this:
jQuery("#competencegrid").live('hover',function(e){
gridtip();
});
Additionally, I make sure to remove all previous titles so that the browsers built-in tool-tip function does not show up. This is also done in after loadcomplete:
$('[title]').each(function(){
$this = $(this);
if($this.attr('title').length>1){
$.data(this, 'title', $this.attr('title'));
}
$this.removeAttr('title');
});
(In the original code from Alen Gracalic, the title attribute is removed while showing the tooltip and then restored. This method does not interact very well with jqgrid. Therefore it is better to remove it completely and rely on jquery data.)
The check on title length above is a specific need I have in my application and can be disregarded.
Finally, when loading the tooltip in the javaclass, I am referring to the jquery data rather than the title attribute (as that one now is empty).
this.gridtip = function(){
xOffset = 15;
yOffset = 20;
$(".gridtip").hover(function(e){
this.t = $.data(this, 'title');
if(this.t){
$("body").append("<p id='gridtip'>"+ this.t +"</p>");
$("#gridtip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
}
},
function(){
$("#gridtip").remove();
});
$(".gridtip").mousemove(function(e){
$("#gridtip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
Lastely, but not necessary - this is how my .css class looks like:
#gridtip{
position:absolute;
border:4px solid #adadad;
background:#fefefe;
-moz-border-radius: 5px;
padding:4px 5px;
color:#666;
display:none;
font-size:14px;
font-family:verdana;
text-align:left;
z-index:50;
filter: alpha(opacity=100);
opacity:0.85;
}
In my application, I am not using the main fields text to display as tool-tip.
Instead I am replacing the title contents by text from a hidden column, before loading it into jquery data. The procedure to do it looks something like this:
var numberOfRecords = $("#competencegrid").getGridParam("records");
for(i=1;i<=numberOfRecords;i++){
var rowid = jQuery('#competencegrid tr:eq('+i+')').attr('id');
var description = $("#competencegrid").jqGrid("getCell",rowid,"competenceDescription");
if(description.length>0){
$("#competencegrid").jqGrid('setCell', rowid, "competenceName", '','',{'title':description});
}
}
Related
I have been looking at a way to save off my client side edited grid data automatically when the user changes to another row (just like in access, sql management studio etc). It really seems to be a bit of a challenge to do.
One scheme was to use the data source sync, but this ha the problem of loosing our cell position (it always jumped to cell 0, 0).
I have been shown some clever work arounds (go back to the cell after the case, which by the way is hugely appreciated thanks),
but it after some lengthy testing (by myself and others) seemed to be a little "glitchy" (perhaps I just need to work on this more)
At any rate, I wanted to explore perhaps not using this datasource sync and perhaps just do the server side calls "manually" (which is a bit is a pity, but if that's what we need to do, so be it). If I do this, I would want to reset the cell little red cell "dirty" indicators.
I thought I could use something similar to this scheme (except rather than resetting the flag, I want to unset).
So, as in the above link, I have the following..
var pendingChanges = [];
function gridEdit(e) {
var cellHeader = $("#gridID").find("th[data-field='" + e.field + "']");
if (cellHeader[0] != undefined) {
var pendingChange = new Object();
pendingChange.PropertyName = e.field;
pendingChange.ColumnIndex = cellHeader[0].cellIndex;
pendingChange.uid = e.items[0].uid;
pendingChanges.push(pendingChange);
}
}
where we call gridEdit from the datasource change..
var dataSrc = new kendo.data.DataSource({
change: function (e) {
gridEdit(e);
},
Now assuming we have a callback that detects the row change, I thought I could do the following...
// clear cell property (red indicator)
for (var i = 0; i < pendingChanges.length; i++) {
var row = grid.tbody.find("tr[data-uid='" + pendingChanges[i].uid + "']");
var cell = row.find("td:eq(" + pendingChanges[i].ColumnIndex + ")");
if (cell.hasClass("k-dirty-cell")) {
cell.removeClass("k-dirty-cell");
console.log("removed dirty class");
}
}
pendingChanges.length = 0;
// No good, we loose current cell again! (sigh..)
//grid.refresh();
When this didn't work, I also tried resetting the data source dirty flag..
// clear dirty flag from the database
var dirtyRows = $.grep(vm.gridData.view(),
function (item) {
return item.dirty == true;
})
if (dirtyRows && dirtyRows.length > 0) {
dirtyRows[0].dirty = false;
}
demo here
After none of the above worked, I tried the grid.refresh(), but this has the same problem as the datasource sync (we loose our current cell)
Would anyone have any idea how I can clear this cell indicator, without refreshing the whole grid that seems to totally loose our editing context?
Thanks in advance for any help!
Css :
.k-dirty-clear {
border-width:0;
}
Grid edit event :
edit: function(e) {
$("#grid .k-dirty").addClass("k-dirty-clear"); //Clear indicators
$("#grid .k-dirty").removeClass("k-dirty-clear"); //Show indicators
}
http://jsbin.com/celajewuwe/2/edit
Simple solution for resolve that problem is to override the color of the "flag" to transparent.
just override the ".k-dirty" class (border-color)
just adding the above lines to your css
CSS:
//k-dirty is the class that kendo grid use for mark edited cells that not saved yet.
//we override that class cause we do not want the red flag
.k-dirty {
border-color:transparent transparent transparent transparent;
}
This can also be done by applying the below style,
<style>
.k-dirty{
display: none;
}
</style>
I am currently using nvd3 for charting in my application. I have a problem in that if the div is hidden via display:none before the charts are rendered, the charts will throw an error, and upon "un-hiding" the div, I have to click on the charts to get them to render correctly. Is there any way to pre-render the charts even if the div is hidden? I have tried setting the width and height of the parent svg before calling the chart, but to no avail.
nv.addGraph(function () {
//chart setup code
d3.select("#chart svg").attr("width", 300).attr("height", 500);
d3.select("#chart svg").datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I figured out how to make a previously hidden chart render properly without needing to statically define the dimensions of the chart area:
NVD3 Charts not rendering correctly in hidden tab
This solution also depends on using JS to display the hidden content and at the same time trigger a resize event which forces NVD3 to resize the now visible chart to fill parent. In my case I didn't care about SEO so I used display:none; but visibility:hidden; would work too.
Just add this JavaScript:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
window.dispatchEvent(new Event('resize'));
})
hidden.bs.tab is the event that fires after a new tab is shown as per the Bootstrap docs. This code fires a resize event after each tab change.
You can hide a chart – but still render the graph – using a class like this:
.out-of-sight-and-space{
visibility: hidden !important;
position: absolute !important;
top: 0 !important;
}
You should apply this to the parent of the svg, in your case #chart. When you want to show the chart, remove the class.
One thing I don't understand is how did Minima.pl (http://minima.pl/pl) implement that feature within Isotope library where clicking on a thumbnail opens up a bigger gallery of images (a single clickable image, clicking on it makes it cycle through the rest of the images in a gallery) while resorting the Isotope items?
Here is how far I got -> http://tinyurl.com/cr5kzml
Anyone have any ideas on what I'm missing, how do I get this working?
Well, I am author of minima.pl website ;).
The part which takes care of repositioning of tiles after enlarging clicked one:
$('#mainContent').isotope('reLayout', function(){
$('html, body').animate({scrollTop: item.offset().top - 10}, 400);
});
It also takes care of scrolling browser window to top of clicked tile.
I am triggering the above action after loading clicked tile content (by AJAX). The trick is to trigger it simultaneously with enlarging the clicked tile.
I will be glad to answer any additional questions.
Actually, this is simple to achieve. Normally, a click on an Isotope .item can, for example, maximise it, another click minimises it. If you want interactivity inside a clicked-on Isotope .item, you simply don't attach the minimisation function to it. Instead, clicking on another Isotope .item minimises the previously selected = maximised item. By keeping track of the previously selected .item, clicks inside the maximised .item won't close it. Basic logic for an example that allows maximising and minimising only by clicking on a "header" zone inside each Isotope .item:
$(document).ready(function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 128 // corresponding to .item divs width relationships
}
});
// $container.isotope('shuffle'); // randomise for every new visitor
$items = $('.item'); // to reference methods on all .item divs later
$('.header').click(function () { // instead of registering the entire .item div (default use), only its .header div (child div) receives clicks
var $previousSelected = $('.selected'); // necessary for switching
if ($(this).parent().hasClass('selected')) { // use $(this).parent() (not $(this)), because the .header div is a child of the .item div
$(this).parent().removeClass('selected');
$(this).parent().children('.maximised').hide();
$(this).parent().children('.minimised').show();
$items.find('.minimised, .header').removeClass('overlay'); // returns all .minimised divs to previous state after the .item is closed again
} else {
$previousSelected.removeClass('selected');
$previousSelected.children('.minimised').show();
$previousSelected.children('.maximised').hide();
$(this).parent().addClass('selected');
$(this).parent().children('.minimised').hide();
$(this).parent().children('.maximised').show();
$items.not('.selected').find('.minimised, .header').addClass('overlay'); // adds .overlay on each .item which is not currently .selected
}
$container.isotope('reLayout'); // comment out to mimick old masonry behaviour
});
});
The actual interactivity inside each Isotope .item can then be coded however you like; hardcoded or dynamic...
By click on a thumbnail a ajax function return the same gallery except a bigger replacement for the thumbnail. Then let isotope rearrange the gallery. You can find an example here: http://www.maxmedia.com or http://www.phpdevpad.de (my own site).
Been trying and searching for this one and it's the last piece I need to unlock and my SlickGrid will be complete.
Basically I'm using a custom formatter on a column and inside of the formatter I just create an HTML link which is blue. If the row is selected (CheckBoxSelectionPlugin) I want it to match the link to be the color white. So I'd just use a different class inside that formatter instead of the class mp_dcp_import_blue_link. Anyone know how I can efficiently find out if the cell/row is selected?
Here is my simple formatter:
function PersonSearchFormatter(row, cell, value, columnDef, dataContext) {
return "<div class='mp_dcp_cell_grid_pad'><a class='mp_dcp_import_blue_link mp_dcp_font' title='Launch Patient Chart' onClick='javascript:APPLINK(0,\"Powerchart.exe\",\"/PERSONID=" + dataContext['MATCH_PERSON_ID'] + "\")'>" + value + "</a> </div>";
};
I would think this would be easier to just handle in the css than the formatter, assuming you are using the CheckBox plugin demoed here which adds the selected class to rows that are selected:
.selected .mp_dcp_import_blue_link{
color: white;
}
I want to change the pointer to hand when hovering over jqgrid's rows
Is there an API for that?
This can be done more easily using the classes colModel property as below:
{ name: 'Email', index: 'Email', classes: 'pointer' }
From the wiki:
This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:'class1 class2' will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.
I just add this into my css file
#mygrid .jqgrow{
cursor:pointer;
}
Use a custom formatter on any cell in the grid. For more info on these, see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
Here's how I did it. I wanted the first column in my grid to appear like it is a clickable link (but really it triggers a custom jqgrid event, onCellSelect).
Snippet of my grid object:
colModel :[
{name:'ticket', index:'IMINDT', width:125, formatter: pointercursor},
pointercursor is a function name. The code for it is defined like this:
// Custom formatter for a cell in a jqgrid row.
function pointercursor(cellvalue, options, rowObject)
{
var new_formatted_cellvalue = '<span class="pointer">' + cellvalue + '</span>';
return new_formatted_cellvalue;
}
My CSS class of "pointer" is:
.pointer {
cursor: pointer;
text-decoration: underline;
}
That's it!
in css file put this:
.ui-jqgrid .ui-jqgrid-btable { cursor : pointer; }
It seems to me that you have not a jqgrid question, but pure CSS or javascript question. Look at How to get cursor to change before mouse moves when changing the cursor style dynamically for example. It shows how can one change cursor style of a html element. See also in http://www.quirksmode.org/css/cursor.html, that 'hand' is supported not in all browsers.