kendo Datepicker: Prevent closing picker when clicking a date - kendo-ui

When I change the date in the picker then the picker is getting hidden, How can skip this behavior in kendo ui datePicker

You can replace the change method for the date picker's DateView so that it doesn't close the popup:
var datePicker = $("#sampleDate").kendoDatePicker({}).getKendoDatePicker();
datePicker.dateView.options.change = function () {
datePicker._change(this.value());
};
(demo)

Simply do e.preventDefault() on the close event.
$("#datepicker").kendoDatePicker({
close: function(e) {
e.preventDefault(); //prevent popup closing
}
});
Demo
However, you will no longer be able to close the datepicker in any way, so make sure you prevent default only when you want to keep the datepicker open.
e.g
close: function(e) {
if(keepOpen === true){
e.preventDefault();
}
}

Try to capture the change event of the datePicker
$("#datepicker").kendoDatePicker()
.Events(e =>
{
e.Change("JSFunction");
})
function JSFunction() {
var datepicker = $("#datePickerId").data("kendoDatePicker");
datepicker.open();
}

Related

Kendo scheduler month View double click function

I disabled the built-in pop up event. Now I want to implement a double click function on each cell of the month view.
Does anyone know how to do it?
You can add an event handler to the add event of the scheduler in the scheduler options like this:
add: (e) => {
// Place your code here.
e.preventDefault();
}
or in case you would rather not use arrow function:
add: function(e) {
// Place your code here.
e.preventDefault();
}
Calling e.preventDefault() will disable the built-in "add" event handling which is showing the popup window. You mentioned you already disabled it but this is a good way to do it if you did it in another way.
e will contain the slot's start and end time as well as the resource details, if you use resources.
You may want to associate the event with k-event class of an scheduler.
$("#scheduler").on("dblclick", '.k-event', function (e) {
var scheduler = $("#scheduler").getKendoScheduler();
var element = $(e.target).is(".k-event") ? $(e.target) : $(e.target).closest(".k-event");
var event = scheduler.occurrenceByUid(element.data("uid"));
alert("Start Date : " + event.start + ", End Date: " + event.end);
});
Demo Link
Try this it worked for me.
edit: function (e) {
e.preventDefault(); //prevent popup editing
var dataSource = this.dataSource;
var event = e.event;
if (event.isNew()) {
setTimeout(function () {
//dataSource.add(event);
editEvent(event); // your own function to call
});
}
else {
}
}

bootstrap modal and datepicker show events

When click on datepicker (http://www.eyecon.ro/bootstrap-datepicker/), his SHOW event fires, but the modal's SHOW.BS.MODAL fires too. Whhere is a problem?
$(document).ready(function() {
$('#ArrDate')
.datepicker()
.on("show", function(event){
alert("Q");
});
$("#dlg3000to3100")
.on('show.bs.modal', function (event) {
alert("W");
});
$("#dlg3000to3100")
.modal("show");
});
exampleExample
Thanks
It seems to be a bug (or feature?) of the datepicker. What you can do is to prevent the show.bs.modal event reaching the dialog.
$('#ArrDate').on('show.bs.modal', function (event) {
event.stopPropagation();
});
This will detect the event at the datepicker level and stop the event propagation, so show.bs.modal will not 'bubble up' to the dialog.
Another work around is to swap the show.bs.modal with shown.bs.modal on modal event.
modal.on('shown.bs.modal', function (event) {
// Do something
});
however if it is not possible to swap show with shown or hide with hidden use the namespace check
modal.on('show.bs.modal', function(e) {
if (e.namespace === 'bs.modal') {
// Do something
}
});
Had a similar issue, caused by the datepicker watching for a show event.
One option is to use the shown event on the modal but this is not ideal in all cases
$('#dlg3000to3100').on('shown.bs.modal', function (event) {
// modal code in here
});
A more elegant solution is to check the namespace of the event
$('#dlg3000to3100').on('show.bs.modal', function (event) {
if(event.namespace !== 'bs.modal') return;
// modal code in here
});
https://jsfiddle.net/bzh75tww/

Activiate jQuery function based on radio button selection w/o using .change

When my ASP MVC 3 page loads, the user may or may not have a value selected from a group of radio buttons. If, when the page loads, a value is selected (before the user clicks on a button), how would i activate a jquery function?
Currently I use a .change() method to activate some code which decides what menu to display:
$(document).ready(function () {
$('input[name=TransactionType]').change(function () {
//Clear out values
$('input:text').val('');
$('input:text').text('');
//Display input fields
var radioValue = $(this);
$('#RightDiv').children().each(function () {
if (radioValue.attr('id') == $(this).attr('id')) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
Something like that should work :
$('input[name=TransactionType]').change(function () {
//Your code
}).filter(':checked').trigger('change');
I am asuming the input are checkbox's, if that's not the case, you can remove the .filter().
Trigger doc : http://api.jquery.com/trigger/

BackBone events don't get fired on a CodeMirror textarea

var View = Backbone.View.extend({
events: {
"keypress #editor": "updateContent",
},
updateContent: function(ev) {
# Update model
}
});
I've applied a applied a keypress event on a textarea with id editor. Eventually this code works, but after transforming the textarea with CodeMirror a keypress won't fire an event.
Although the the textarea with id editor still extists. Why is this and how can I fix it?
When you are trying to format your code from textarea by CodeMirror, it oveflows the textarea. So, you are typing in it's wrapper, not in your textarea. You should handle CodeMirror's wrapper to get keypress event.
Try something like:
var editor = CodeMirror.fromTextArea(document.getElementById("editor"));
var View = Backbone.View.extend({
events: {
"keypress .CodeMirror": "updateContent"
},
updateContent: function() {
console.log(editor.getValue());
}
});

JQuery button hide and making condition

I want to hide a button until other button is getting submitted.
ex. button1 is hidden.
button 2 visible
if(button2 submitted)
button 1 get visible.
can you tell a method to do that??
I'm rather new to jQuery, but I believe this may work:
HTML:
<form id="someform">
...
</form>
JS:
$(function() {
$('#button1').hide();
}
$('#someform').submit(function() {
$('#button2').show();
}
Try this:
$('#button1').bind('click', function() {
$(this).hide();
$('#button2).show();
});
$('#button2').bind('click, function() {
$(this).hide();
$('#button1).show()
});

Resources