I am using a kendo datetimepicker. When user opens the calender and select any date I need to check for some other dates, ie need to run validations if the date is wrong then prevent the new date from filling the date picker and keep the old value, otherwise allow datepicker to change value. I tried with event.preventDeafult , but unfortunatly it is not working..
Is there any way to acheceive this?
Here is the fiddle enter link description here
Any help is appreciated.
Example fiddle here
$("#datePicker").kendoDatePicker({
change:function(event){ alert(1);
// some validations here
event.preventDeafult(); }
});
Go through this answer. May any lines help you to solve your problem. You can simply assign like this.
$("#datepicker").kendoDatePicker({
change: function () {
// some validations here
var i = 0;
var prev = "9/12/2014";
var date = kendo.toString(this.value(), 'd');
if (i == 0) {
$("#datepicker").data("kendoDatePicker").value(prev);
}
},
close: onClose,
open: onOpen
});
Updated Answer :
var date;
$(function () {
date = $("#datepicker").data("kendoDatePicker").value();
$("#datepicker").kendoDatePicker({
change: function () {
// some validations here
var i = 0;
var prev = date;
if (i == 0) {
$("#datepicker").data("kendoDatePicker").value(prev);
}
},
close: onClose,
open: onOpen,
});
})
I've used read only in the past to do this.
var endDate = $("#endDate").data("kendoDatePicker");
endDate.readonly();
Related
My requirement is to bind these two dropdown with fullcalendar and reflect the changes according.
I have already searched lot about binding the custom dropdown to the fullcalendar but not getting success yet!!
So any help is appreciated.
$(document).ready(function() {
var $months = $('#months');
var $calendar = $('#calendar');
$calendar.fullCalendar({
viewRender: function() {
buildMonthList();
}
});
$('#months').on('change', function() {
$calendar.fullCalendar('gotoDate', $(this).val());
});
buildMonthList();
function buildMonthList() {
$('#months').empty();
var month = $calendar.fullCalendar('getDate');
var initial = month.format('YYYY-MM');
month.add(-6, 'month');
for (var i = 0; i < 13; i++) {
var opt = document.createElement('option');
opt.value = month.format('YYYY-MM-01');
opt.text = month.format('MMM YYYY');
opt.selected = initial === month.format('YYYY-MM');
$months.append(opt);
month.add(1, 'month');
}
}
});
Please check this fiddle for month and year dropdown for fullcalendar.
https://jsfiddle.net/L6a5LL5b/
I'm using Kendo MVVM and I have a kendo numerictextbox bound to a kendo observable.
All I want is: when the user changes value, a confirm should pop saying something like 'are you sure?' if yes -> no problem, go on.
if no -> NOTHING should happen!
In theory it sounds simple as that... but I found 3 major issues:
1) numerictextbox only got 2 events: spin and change... so any idea of using keypress/focus/or any other event is discarded.
2) So tried using the change event... but I can't preventDefault! Another try was to save previous value and restore it back in case of 'no answer' but this brings me to trigger event change TWICE!
3) Any other model field who is 'observing' the numerictextbox will change before I even answer the confirm box... And I absolutely don't want this!
P.S. I also got a dropdownlist and a datepicker that must work in the same way!
Help please!
Provided a fast example: http://dojo.telerik.com/EyItE
Here you can see how the numericbox2 (who is observing numericbox1 and is computed) changes itself before the user answer yes/no (problem 3)
and keypress/focus/preventDefault doesn't work.
here is an answer about binding events not supported by default:
Kendo MVVM and binding or extending custom events
For preventDefault (or "reverting" the value). I tried to store the previous value as you suggested and it is does not fire twice:
var viewModel = kendo.observable({
myItem: {
// fields, etc
myNumericBox: 10,
myNumericBox2: function () {
return viewModel.get("myItem.myNumericBox")*2;
},
tmp: 10
},
onChange: function (e) {
if ( confirm("are you sure?")) {
viewModel.set("myItem.tmp", viewModel.get("myItem.myNumericBox"));
}
else {
viewModel.set("myItem.myNumericBox", viewModel.get("myItem.tmp"));
}
},
tryf: function () {
alert("hello!"); // doesn't trigger
},
tryk: function() {
alert("hello2!"); // doesn't trigger
}
});
I solved with a custom binding that ask you a confirm between html widget change -> model update.
kendo.data.binders.widget.valueConfirm = kendo.data.Binder.extend({
init: function (widget, bindings, options) { // start
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
this.widget = widget;
this._change = $.proxy(this.change, this);
this.widget.bind("change", this._change); // observe
},
refresh: function () { // when model change
if (!this._initChange) {
var widget = this.widget;
var value = this.bindings.valueConfirm.get(); // value of the model
if (widget.ns == ".kendoDropDownList") { // for the dropdown i have to use select
widget.select(function (d) {
return d.id == value.id;
});
}
else widget.value(value); // update widget
}
},
change: function () { // when html item change
var widget = this.widget;
if (widget.ns == ".kendoDropDownList") var value = widget.dataItem(); // for dropdown i need dataitem
else var value = widget.value();
var old = this.bindings.valueConfirm.get();
this._initChange = true;
// I want to bypass the confirm if the value is not valid (for example after 1st load with blank values).
if (old == null || old == 'undefined' || old == 'NaN') this.bindings.valueConfirm.set(value); // Update the View-Model
else {
if (confirm("Are you sure?")) {
this.bindings.valueConfirm.set(value); // Update the View-Model
}
else {
this._initChange = false;
this.refresh(); // Reset old value
}
}
this._initChange = false;
},
destroy: function () { // dunno if this is useful
this.widget.unbind("change", this._change);
}
});
I'm using a kendo grid.
I want to add a slide-down animation - when I click on a row in the grid it expands with animation
(the expansion happens with grid.ExpandRow function - kendo inner).
I think that I need the animation on k-detail-row element.
But I still cant find the proper place/way to do that.
Anyone did that already, and can help me with that.
Unfortunately animations are not supported for table rows. Here is a related question: How to Use slideDown (or show) function on a table row?
I had the same question, and although this is an old post, I figured someone might need it.
Unfortunately Kendo does not support this functionality as yet, however there is a solution.
Kendo uses the jquery toggle() to show and hide the detail row, thus by performing a conditional override on the jQuery you can insert animation.
jQuery(function($) {
var _oldShow = $.fn.show;
var _oldHide = $.fn.hide;
$.fn.show = function(speed, oldCallback) {
return $(this).each(function(index, item) {
var obj = $(item);
_oldShow.apply(obj, [speed, oldCallback]);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function () {
var grid = $(this);
grid.slideDown(300);
});
}
});
}
$.fn.hide = function (speed, oldCallback) {
return $(this).each(function () {
var obj = $(this);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function () {
$(this).slideUp(300, function () { _oldHide.apply(obj, [speed, oldCallback]); });
});
} else {
_oldHide.apply(obj, [speed, oldCallback]);
}
});
}
});
I ran into this issue today and managed to solve it using the detailExpand function of the grid. You can then use the Kendo Fx slidedown effect to make the detail row slide down. For example:
detailExpand: function (e) {
var detailRow = e.detailRow;
setTimeout(function () {
kendo.fx(detailRow).slideIn("down").duration(375).play();
}, 0);
}
For more information, please check:
Detailexpand documentation
Kendo Fx documentation
A while back I found some code that allows you to filter the contents of a SELECT by typing in a text element. It works well however, over time the performance degrades pretty badly. I'm not sure if it is the filter code or the way in which I am activating it.
The SELECT shows up in a modal dialog (bootstrap) so I have the following code:
$('#myModal').on('shown', function () {
$(".focusable").val("").focus();
var select = $('#myModal').find(".modal-body").find("select");
var text = $('#myModal').find(".modal-body").find("input[type='text']");
select.filterByText(text, true);
});
And here is the filter code:
jQuery.fn.filterByText = function (textbox, selectSingleMatch) {
return this.each(function () {
var select = this;
var options = [];
$(select).find('option').each(function () {
options.push({value:$(this).val(), text:$(this).text(), data:$(this).data("short-name")});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function () {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search, 'gi');
$.each(options, function (i) {
var option = options[i];
if (option.text.match(regex) !== null) {
var copyOption = $('<option>').text(option.text).val(option.value);
copyOption.data("short-name", option.data);
$(select).append(copyOption);
}
});
if (selectSingleMatch === true &&
$(select).children().length === 1) {
$(select).children().get(0).selected = true;
}
});
});
};
Can anyone shed some light on where my performance issue(s) might be and how to solve it?
reading through the comments I would suggest to add the following:
$(textbox).bind('change keyup', function(event) {
console.log(event);
// your code
});
Is the event triggered more than once on a single keyup after some times the dialog is shown?
$('#myModal').on('hidden', function () {
$('#myModal').find(".modal-body").find("input[type='text']").off("change keyup");
});
I am using the following for datepicker in Jquery to format the date display in dd/mm/yy format and also I want the user not to select future date.Only one thing is working at a time.
<script type="text/javascript" language ="javascript" >
$(function () {
var date = new Date();
var currentDate = date.getDate();
var currentMonth = date.getMonth();
var currentYear = date.getFullYear();
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
$(".datepicker").datepicker({ maxDate: new Date(currentYear, currentMonth, currentDate) });
});
</script>
How do make, both the dateformat and disable the future dates to work simultaneously. I am missing single bit, I don't know how to club this two validations or requirements togather.
Any answers Please?
Thank you.
I had a similar requirement for my code with a hire date. Here's how I did it:
$('#hireDate').datepicker({
dateFormat: 'dd/mm/yy',
maxDate: new Date(currentYear, currentMonth, currentDay)
});
The user can still enter a future date manually and weasel around your date picker. We had this problem on a production system.
If you want to additionally validate the date using the validation plugin, try this:
/**
* Requires Datepicker and Validator
*
* Params:
* 0...dateformat. see datepicker
* 1...date. Value "0" is "today"
* 2...(optional). date to display. will be automatically filled if 0 and 1 are set.
* usage:
* myfield: { maxDate: ['m/d/yy', 0] }
*/
jQuery.validator.addMethod("maxDate",
function(value, element, params) {
if (!params[0])
throw 'params missing dateFormat';
if (typeof(params[1]) == 'undefined' )
throw 'params missing maxDate';
var dateFormat = params[0];
var maxDate = params[1];
if (maxDate == 0) {
maxDate = new Date();
maxDate.setHours(0); // make it 00:00:0
maxDate.setMinutes(0);
maxDate.setSeconds(0);
maxDate.setMilliseconds(0);
}
if (typeof(params[2]) == 'undefined' )
params[2] = $.datepicker.formatDate(dateFormat, maxDate);
try {
var valueAsDate = $.datepicker.parseDate( dateFormat, value )
return (valueAsDate < maxDate);
} catch (x) {
return false;
}
},'Must be greater than {2}.');
$("#myform").validate({
rules: {
datepicker : {
maxDate ['m/d/yy', 0]
}
}
});
HTML:
<input name="datepicker" class="datepicker" type="text"/>