how can i clear the value of the kendo numeric textbox? - kendonumerictextbox

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

Related

How to set Max Length on ag-grid cells

Is there any way to impose a maxLength text allowed in an ag-grid cell, similar to the one on a normal input element?
<input maxlength="220"/>
No relative documentation was found. Also, no particular situations & more details are needed, in my opinion. Thank you!
agGrid's documentation really isn't clear on this, but it is possible.
agGrid MaxLength
In your column definitions, just add something like this:
this.columnDefs = [
{
field: 'Surname',
minWidth: 100,
editable: true,
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: { maxLength: 200 }
}
Yes, you can control the full flow of input data, but you have to create your own cellEditor for that.
So - it shouldn't be hard to make a simple input validation.
and to achieve your requirements you have to take care of one function within the component:
// Gets called once when editing is finished (eg if enter is pressed).
// If you return true, then the result of the edit will be ignored.
isCancelAfterEnd?(): boolean;
isCancelAfterEnd() {
return !this.isValid(this.eInput.value);
}
isValid(value) {
return value.length <= this.maxLength;
}
Demo

Issue with KendoNumericTextbox in KendoWindow

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/

Setting DateTimePicker to show specific time range e.g. working hours only

I am trying to configure my kendoDateTimePicker to show 9am to 6pm only. Is this possible?
I know it's has been a while since this question has been asked. but i will add my response for future reference.
kendo DateTimePicker does not support adding a range to the TimePicker. But you can add your own widget that does that.
(function($) {
var dateTimePicker = kendo.ui.DateTimePicker;
var MyWidget = dateTimePicker.extend({
init: function(element, options) {
dateTimePicker.fn.init.call(this, element, options);
},
startTime: function(startTime) {
var timeViewOptions = this.timeView.options;
timeViewOptions.min = startTime;
this.timeView.setOptions(timeViewOptions);
},
endTime: function(endTime) {
var timeViewOptions = this.timeView.options;
timeViewOptions.max = endTime;
this.timeView.setOptions(timeViewOptions);
},
options: {
name: "CustomDateTimePicker"
}
});
kendo.ui.plugin(MyWidget);
})(jQuery);
Then you can call your CustomDateTimePicker like this :
var datePicker = $("#date-picker").kendoCustomDateTimePicker().data("kendoCustomDateTimePicker");
datePicker.startTime("07:00");
datePicker.endTime("11:00");
jsfiddle demo.
var startDateReference = $('.startDate').kendoDateTimePicker({
format: "dd-MM-yy HH:mm:ss",
value : new Date(),
}).data("kendoDateTimePicker");
startDateReference.timeView.options.min = new Date(2000, 0, 1, 7, 30, 0);
startDateReference.timeView.options.max = new Date(2000, 0, 1, 18, 00, 0);
This is working for me
With Kendo DateTimePicker you can select the min and max dates but not a time range for each day BUT you can do it with TimePicker.
Maybe you can decompose your UI in DatePicker and TimePicker and then choose max and min for conforming your time range.
I just put together this hack, because I felt that Datetime pickers should be used for picking a date and a time instead of having the weird ui of having a datepicker and a timepicker that are used to compose a single value:
$('#NewScheduledDateTime_timeview > li').each(function () {
bool removeTimeCondition = /* code to determine if time should be removed */
if (removeTimeCondition)
$(this).remove();
})
The id of the list will be different. To find it, expand the time list and 'inspect element' of one of the times with your favorite browser's dev tools.
I ought to mention that this is liable to break if the Kendo UI is updated to a newer version. Like I said, it is a hack. But then again, even non-hacky things break when we tried updating the version of Kendo UI. Lessons learned: don't use Kendo UI.

KendoUI grid local paging not working with remote data?

I'm trying to use Kendo-UI to manage a grid on a page, however I'm having a hard time with the following specific set-up:
The data is fetched from a remote source, however, I would like to do paging on the client side, not on the server side.
The whole problem can easily be summarized with the following jsfiddle: http://fiddle.jshell.net/dimodi/4eNu4/
When serverPaging: true, everything works as expected, but when serverPaging: false, no entries are show after the first page.
The problem is that you have defined a dataBound event function that does not return any data.
Define your function as:
function resizeGrid(d) {
var gridElement = $("#grid");
var dataArea = gridElement.find(".k-grid-content");
var newHeight = gridElement.parent().innerHeight() - 2;
var diff = gridElement.innerHeight() - dataArea.innerHeight();
gridElement.height(newHeight);
dataArea.height(newHeight - diff);
return d;
}
I've added an argument d that I return at the end of your processing.
Updated fiddle: http://fiddle.jshell.net/4eNu4/253/
All you really have to do is remove the serverPaging: true config option. Then just set a pageSize: 10 in the schema and then add pageable: true to the config of the grid to allow for client side paging.
Updated your fiddle http://jsfiddle.net/4eNu4/247/ hope this is what you are looking for.

prototype get inner html of multiple classes

I am new to prototype and finding it a lot more difficult than jquery. All i want to do is get the inner html of various classes.
$$('.book').each(function() {
var msg = this.down(".information");
alert(msg.innerHTML);
//new Tip(this, msg.innerHTML, {stem: 'topLeft', hook: { tip: 'topLeft', mouse: true }, offset: { x: 14, y: 14 }});
});
I'm trying to create tooltips for multiple items, but I'm not even getting the alert.
I think you can probably prevent the extra dom work of down() like this:
$$('.book .information').each(function(book) {
alert(book.innerHTML);
});
remember you also have the ability to use advanced CSS2 and CSS3 selectors in prototype like this for example:
$$('.book a[rel]').each(function(el) {
alert(el.rel);
});
see the bottom of this page for more examples http://www.prototypejs.org/api/utility/dollar-dollar
The this variable is not pointing to the element you're iterating over in Prototype, you have to explicitly use a parameter:
$$('.book').each(function(book) {
var msg = book.down(".information");
alert(msg.innerHTML);
});

Resources