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;
}
Related
How can I change the color of the currency in my kendo numeric textbox in jquery? I used the standard code in creating a numeric textbox in kendo.
$("#currency").kendoNumericTextBox({
format: "c",
});
For example I have $12.00 as value in my input element.
I just want to change the color of the $. Not the 12.00.
How can I achieve this?
Apply css for "k-formatted-value" class textbox i.e. Currency value
Try something like this..
var widget = $("#numeric").kendoNumericTextBox().data("kendoNumericTextBox");
widget.wrapper.find("input.k-formatted-value").css("color", "red");
Refer this link to achieve
http://docs.telerik.com/kendo-ui/controls/editors/numerictextbox/how-to/change-text-color
Updated:
We can do some tricks to change currency format colour change.
I did for normal textbox.
Refer JSfiddle.
For your requirement try something like this.
steps:
1. Create one span element
Create onchange event for the input
$("#salary").kendoNumericTextBox({
change: onChange,
});
Define the style change functionalities.
function onChange() {
ChangeColorFormat($('.k-formatted-value'));
}
function ChangeColorFormat(inp) {
inp.style.color = 'transparent';
var span = document.getElementById('back');
span.innerHTML = inp.value.substr(0, 1) +
"" +
inp.value.substr(1, 1) +
"" +
inp.value.substr(2);
}
Found the solution. Because its kendo, it was simply setting a ClientTemplate before loading it.
I am using kendo ui grid to display data. I want to set title for the grid.Is there any way to set it.
Also I want to set some additional/custom property for grid which will help to identify the grid uniquely. Any custom property I can set to grid so I can get its value when required.
So in case if there are more instances on grid this will help.
Please suggest on this.
Iterating through all your tables can be done using:
$.each($(".k-grid"), function (idx, grid) {
// Do whatever you want to do with "grid"
...
});
If you want to add a title, might be something like:
$.each($(".k-grid"), function (idx, grid) {
$(grid).data("kendoGrid").wrapper.prepend('<div class="k-grid-header"><table><thead><tr><th class="k-header">Title</th></tr></thead></table></div>');
});
For setting a click event to the HTML img elements, you can do:
$("tr", ".k-grid").on("click", "img:first", function () {
// Here "this" is the "img" on which you clicked, finding the grid is:
var grid = $(this).closest(".k-grid").data("kendoGrid");
console.log("grid", grid);
// If you want to access the "id"
console.log("id", grid.element.attr("id"));
});
Once you click on the first image of each row what I do in the event handler is finding the closest HTML element with k-grid class (the grid): this is the HTML containing the grid.
If you want to get Kendo UI grid element the you need to use data("kendoGrid").
Simple and elegant.
In this JSFiddle: http://jsfiddle.net/OnaBai/2qpT3/2/, if you click on "Add Titles" button you add a title to each table and if you click on "Add Handlers" and then in an image, you will get an alert with the id of the table that the image belongs to.
EDIT: If you want to iterate on every image that is in the first column, of every KendoUI grid on your document, you should do:
$.each($("td:first > img", ".k-grid table tbody > tr"), function (idx, elem) {
// "elem" is the image
console.log(idx, elem);
// associate event
$(elem).on("click", fnHandler);
});
I prefer to change the title like this:
$("#grid th[data-field=Field]").html("Title");
Just after editing a row (mode inline) I try to change some css properties of cells according the new value.
Typically : After editing of one row all cell of this row that contains the letter "D" I update the cell with a new css property : background-color: grey (using setCell method)
For that I use inline editing :
grid.jqGrid('navGrid',"#pager",{edit:false, add:false, del:false});
grid.jqGrid('inlineNav',"#pager",{edit:true, add:false, del:false, editParams: myEditParam});
For change the background after editing I use the method aftersavefunc
myEditParam :
...
aftersavefunc: function(rowId, dataFromServer)
{
var rowData = $("#list").jqGrid("getRowData", rowId);
for (var key in rowData)
{
if (rowData[key] == "D")
{
key++;
$("#list").jqGrid("setCell",rowId, key, "", {"background-color": "#ECECEC"} );
}
}
},
...
This code works but unfortunatly, when I sort one column of the grid the setCell method is not perserved ! (the cell lost it's background-color: grey)
Does it exist a better method for change the background after editing in function of the new value ?
Thx for your help ;)
I would suggest removing the Style from that event and rather move it to the more general function below. If the style isn't applied you can always trigger a refresh on the jqGrid as part of your after edit code.
The following function will examine each column cell value and if the TestValue is matching add the class to the row.
rowattr: function (rd) {
if (rd.ColumnName == TestValue) { return {"class": "RowBoldClass"}; }//if
},
and the matching class
RowBoldClass { font-weight:bold; .....
My answer from Making a row bold, changing background color - dwr
If you really need to change the format/color/style of the cell in the column which can the value "D" then you should use cellattr (see the answer or this one).
If you need to change the format/color/style of the row then you should use rowattr (see the answer).
One thing is important to understand: neither cellattr nor rowattr will be called at the end of row editing. So you will still have to use aftersavefunc callback.
The current code of aftersavefunc seems me a little strange. First of all I never had requirements to mark the value in any column of the grid based on the value ("D" in your case). Typically one need to test only specific column or columns for the value and then mark the cell or mark some other cell in the row.
In any way one need typically not just add the class in the value will be "D", but remove the class if the value is not "D".
I modified the demo from the answer to support inline editing (one should use double-click to start editing and press Enter to stop editing). The modified demo uses the following code of aftersavefunc additionally to cellattr used in the old demo:
aftersavefunc: function (rowId) {
var closed = $(this).jqGrid("getCell", rowId, "closed"), indexOfColumn;
if (closed === "Yes") {
// add CSS classes to the cell used to mark
$(this).jqGrid("setCell", rowId, "name", "",
"ui-state-error ui-state-error-text");
} else {
// remove CSS classes from the cell used to mark
indexOfColumn = getColumnIndexByName.call(this, "name");
$(this.rows.namedItem(rowId).cells[indexOfColumn])
.removeClass("ui-state-error ui-state-error-text");
}
}
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});
}
}
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.