jqgrid change pointer to hand - jqgrid

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.

Related

How to freeze column header in KendoMVC Grid?

I have kendo MVC Grid and I have to set my page size to 50, so I need to freeze the column header while scrolling.
The question is : How can I freeze the column header while scrolling ?
When you create the Grid you should define the height in pixels as well as define scrollable as true.
Example:
var grid = $("#grid").kendoGrid({
dataSource: ds,
scrollable: true,
height : "150px",
columns : [
...
]
});
See this working here : http://jsfiddle.net/OnaBai/uuPW5/
Maybe this is something you were looking for:
https://github.com/jmosbech/StickyTableHeaders
Works quite well and you don't have to have scrollbars in your grid which makes it easier to work with.
You simply link provided script to your view and call this method on load:
$('#grid').stickyTableHeaders({
cacheHeaderHeight: true,
leftOffset: 1,
fixedOffset: ...
});
Parameters are optional but cacheHeaderHeight improves performance and I had to add leftOffset because of custom grid header borders and fixedOffset because of other sticky elements.
Just set the css of the grid header like this :
.k-grid-header {
position: sticky;
top: 0;
}
This answer has already been given for kendo UI, but here is how it's implemented for kendo MVC:
.Scrollable(scr => scr.Height(400))
It will give you a vertical scroll bar, allowing the user to scroll through the data while constantly seeing both the header and footer of the table. You can read more about it here: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/overview.
Trouble with this solution, however, is that the grid will be 400px tall, even when there is only one row of data. You can solve this like so
.Scrollable(scr =>
{
if (data.Count() < 10)
{
scr.Height("auto");
}
else
{
scr.Height(400);
}
})

SlickGrid in Custom Formatter Function find out if row selected?

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;
}

How do you hide a column for a hidden field within a webgrid using ASP.Net MVC3?

How would I hide a column that should be hidden from view. I handled this by hiding the object, but the column still shows in the UI as a skinny column with nothing in the rows. Is there way to prevent the item from being drawn?
grid.Column(null, null, format: #<input type="hidden" name="RevisionId" value="#item.LatestRevisionId"/>)
Thanks.
The WebGrid helper allows you to apply a CSS class to individual columns using the style property. Unfortunately while this will allow you to hide the column inside the tbody section you cannot apply different styles to column headers. You can apply the same style to all columns which makes it pretty useless. So one possibility is to use CSS:
table th:first-child, table td:first-child {
display: none;
}
This assumes that you want to hide the first column and that the client browser supports the :first-child pseudo selector which might not be the case with legacy browsers.
So in case you need to support legacy browsers you could use jQuery to apply a hidden style to the header and the rows of the first column or to simply hide them directly:
$(function () {
$('table th:first-child, table td:first-child').hide();
});
If you want to have more control I would recommend you checking out the MvcContrib Grid or Telerik Grid.
*strong text*Solution from Darin is only partial as the "table th:first-child" will also hide the "canPage:true" grid footer (used for paging).
Solution is to add additional styling.
In the "head" section of your (or alternatively in the CSS file if you want to apply it on all tables):
<style type="text/css">
.nodisplay {display: none;}
</style>
In the Webgrid section:
footerStyle : "table-footer",
...
grid.Column(null, null, style:"nodisplay", ...
In the CSS file:
.table-footer {
display: normal
}

jqGrid Custom Formatter Set Cell wont work with options.rowId

Ive been through all the posts, finally got setCell to work with hardcoded values, but not using the options.rowId.
function StatusFormatter(cellvalue, options, rowObject) {
if (cellvalue == 'C'){
jQuery("#list").setCell(options.rowId , 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell("[2.000]", 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell('[2.000]', 'SOREQDATE', '', { color: 'red' });
jQuery("#list").setCell(options.rowId, 'SOPRICE', '', { color: 'red' });
}
return cellvalue;
};
The FIRST and LAST lines dont work, but the 2 with the hardcoded rowId DO work. I inspected what comes back in the option.rowId and they are the same as the hardcoded values, (just different depending on the row of course. What am I missing? Please help. I dont see any difference between the lines, or values.
EDITED-
I tried the answer, and it seems to be what I need. I tried the following
{ name: 'SOORDLINE', index: 'SOORDLINE', width: 25, search: false ,celattr: function () { return ' style="color: red"'; }
},
To aleast make them all red before I dove into the logic, and it didnt do anything for me.
Sorry, but you use custom formatter in absolute wrong way. The goal of the custom formatter to to provide HTML fragment to fill the content of the cells in the corresponding column. So the StatusFormatter will be called before the row with the id equal to options.rowId will be created. Moreover for performance purpose one use typically gridview: true. in the case the whole content of the grid (the whole body of the grid) will be constructed first as string and only after that will be placed in the grid body in one operation. It improve the performance because after placing of any element web browser have to recalculate position of all other elements on the page.
If you want to set text color on the SOORDLINE cell you should cellattr instead:
celattr: function () { return ' style="color: red"'; }
The celattr can be used also in the form celattr: function (rowId, cellValue, rawObject) {...} and you can test the property of rawObject which represent of the values for any column and return the cell style based on the cell value.
Alternatively you can enumerate the rows inside of loadComplete and set the style on <tr> element instead of setting the same styles for every row. See the answer as an example.

External Tooltip plug-in on Jqgrid

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});
}
}

Resources