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.
Related
I am using Kendo Numeric text box to display decimal values.I want to change the font color based on the user input.How to achieve this?
You Can do this in JQuery easily by changing the style on the change and spin event of the input:
On your numeric text box add the events:
$("#numerictextbox").kendoNumericTextBox(
{
change: onChangeOrSpin,
spin: onChangeOrSpin
});
Then in the event handler call:
function onChangeOrSpin()
{
var val = this.value();
changeFontColour(val);
}
function changeFontColour(val)
{
if(val < 5)
{
$("#numerictextbox, .k-input").css('font-family','Arial');
$("#numerictextbox, .k-input").css('font-style','italic');
$("#numerictextbox, .k-input").css('font-weight','bold');
$("#numerictextbox, .k-input").css('color','blue');
}
else
{
$("#numerictextbox, .k-input").css('font-family','Times New Roman');
$("#numerictextbox, .k-input").css('font-style','normal');
$("#numerictextbox, .k-input").css('font-weight','normal');
$("#numerictextbox, .k-input").css('color','black');
}
}
Here is a working fiddle: http://jsfiddle.net/loanburger/nwsw4yeq/
Update:
For multiple numeric inputs on the same page, use classes and add a different class to each input so you can distinguish between then when you need to change the colour. Then use a data attribute to find the correct one to change.
You cannot use the id because there are two parts to how kendo creates the widget:
The first part is the input for editing the value. This is the
one the user interacts with. This input will be given the class:
numerictextbox numericOne k-input
There is a second input of interest which is the one used to display the value after the widget looses focus this one gets the classes: k-formatted-value numerictextbox numericOne k-input
Neither of these inputs get an id and you don't want to use the native Kendo classes either so using a distinct class on each of your numeric widget controls, you can identify which colours to change since that class will get added to both inputs in the widget.
See here: https://jsfiddle.net/loanburger/4evy3tcg/
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");
I need to set background color of cells in slick grid based on the data being rendered to the grid. Looking at the other posts in stack overflow, I figured out that we can use a custom formatter to do the same by returning a div. I want to accomplish this without returning another div. I did try using rowCssClass and column cssClass property but no luck. Could someone please help me out?
Thanks
You can use grid.setCellCssStyles as follows,
var row = // row Number
var rowObject = { };
rowObject[row] = { property1: "cssClass", property2: "cssClass" };
grid.setCellCssStyles(row, rowObject);
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;
}
jqGrid contains image column defined using colmodel below. image id is passed in cell value from server in json.
grid shows images properly if not in edit modes.
Inline and form edit mode show wrong image since editoptions src property contains fixed id 1
How to show image from editable row id in edit mode ? How to pass cell value to editoptions src property like in formatter function?
name:"Image",
edittype:"image",
editoptions:{ src: "GetImage?id=1"},
formatter:function(cell,options,row) {
return "<img src='GetImage?id=" + cell + "'/>"
}
I can suggest you to change the value of the src property of the editoptions immediately before staring editing. Look at the answer for details. In case of form editing you can use beforeInitData to modify src:
beforeInitData: function () {
var cm = grid.jqGrid('getColProp', 'flag'),
selRowId = grid.jqGrid('getGridParam', 'selrow');
cm.editoptions.src = 'http://www.ok-soft-gmbh.com/img/flag_' + selRowId + '.gif';
}
So you will receive the edit form like
for the grid
See the corresponding demo here.