I'm trying to create a modal window with a kendo textbox on fly, the text box is added successfully into the form but its validation rules do not work. The source code is available here. Is it possible to resolve this issue?
The container is
<div id="wnd"></div>
The text box is created with the code:
var numeric = $('<input>').kendoNumericTextBox({
min: 0,
max: 32767,
format: "#",
decimals: 0,
value: 10
});
var container = $("<div>").append(numeric);
then its content is is into the kendowindow
var content = $("<div>").append(container ).clone().wrap('<form>').parent().wrap('<p>').parent().html();
wnd.content(content);
wnd.center().open();
Create the kendoNumericTextBox after you used clone(), not before.
http://jsfiddle.net/3rbj9yks/5/
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 have done this and it's not working
$("#txtLowValue").val('');
$("#txtLowValue").val();
and this is the text box
$('#txtLowValue').kendoNumericTextBox({
format: "##",
decimals: 0,
spinners: false,
min: 0,
max: 999998
});
Here is a simple example for you to test.
http://dojo.telerik.com/IQaSE
The important bit is this:
$('#txtLowValue').data("kendoNumericTextBox").value(null);
here is a link to the api documentation: value
I found this on the telerik forums: http://www.telerik.com/forums/can-t-reset-value-of-numerictextbox
Exert from the above link:
There are several things that need to happen to clear the value. If I have a NumericTextBox defined as follows:
var _numeric = $("#numeric").kendoNumericTextBox({
min: 0,
max: 100
}).data("kendoNumericTextBox");
I could clear it with the following lines of code:
_numeric._old = _numeric._value;
_numeric._value = null;
_numeric._text.val(_numeric._value);
_numeric.element.val(_numeric._value);
Another possibility is if you want to use this for any of your NumericTextBox controls, you could extend the NumericTextBox. This would be done after the reference to the kendo javascript library, but before any NumericTextBox's are created. Here would be the code:
$.extend(window.kendo.ui.NumericTextBox.fn, {
clear: function() {
this._old = this._value;
this._value = null;
this._text.val(this._value);
this.element.val(this._value);
}
});
Then, to clear a NumericTextBox, you could call the clear function like this:
_numeric.clear();
I have a Kendo window created using kendoWindow, which is called on a div. This correctly shows this div in a Kendo Window. If at some later point I then try to simply show the div using the show function, to make it appear on the page instead of in a window,
which worked perfectly fine before creating the Kendo
Window, the show doesn't work. How do I get it to show the div?
if (GC.ViewModels.Dashboard.IsSubscriberLoaded()) { // ***CREATES MY KENDO WINDOW
var $kwin = $('#complaint-dashboard-container').kendoWindow({
width: "1400px",
title: "", // ??
modal: true,
actions: ["Close"]
});
$($kwin).data("kendoWindow").center().open();
} else { // *** WON'T SHOW THE div if above has been executed at some point
$('#complaint-dashboard-container').show();
}
Answer : once you bind the div and make a widget it does not act as a normal div , if you need show the content i suggest you to get the html of the content and show in a different div
Ext JS 4. I have a tree.Panel where I want to display custom HTML in each node, generated from that node’s model data. I can do this by setting the node’s text when loading the store, but it is not the model’s job to do markup. So I created a custom Column that renders my HTML.
My problem is: unless I derive from Ext.tree.Column, it doesn’t show up properly (no outline, plus/minus icons etc.). If I do, everything is fine, but Ext.tree.Column is marked as private to Ext JS.
Is there some officially supported API to do what I want?
I have written a blog post about how to customize ExtJS 4 tree panel, I hope it will help:
http://hardtouse.com/blog/?p=24
The idea is to use renderer combined with A LOT OF css magic:
columns : [{
xtype : 'treecolumn',
dataIndex : 'name',
renderer : function(value, record){
return Ext.String.format('<div class="tree-font">{0}</div>', value);
}]
Thanks for your answer above. Here is another example showing a few more options for formatting:
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
// see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer
var tooltipString = "Hello";
metaData.tdAttr = 'data-qtip="' + tooltipString + '"';
return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname);
}
}]
You might also want to add
hideHeaders : true,
to your tree panel config to remove the "grid" header that appears as a result of using a treecolumn.
Murray
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.