Reputation: 1926
I'm working with Kendo UI for JQuery, and I declared a multiselect to act as a TagBox following this example.
I noticed that whenever the component loses its focus, whatever was typed is cleared. I wish to avoid this behavior, since forcing a user to retype whatever they had anytime they click outside the Multiselect would be annoying.
I tried to do this:
$('.email_notification_create .k-multiselect .k-input').unbind('blur');
$('.email_notification_create .k-multiselect .k-input').on('blur', function(){
console.log(currentEmailInput.val());
console.log('overriden blur');
});
But the value on the input is already cleared, so someone else is clearing the input when the focus is lost.
How can I stop the Multiselect from clearing its input?
Upvotes: 1
Views: 1664
Reputation: 28522
As you have already defined function
on keyup
you can add an else part inside it to get the last value which user has typed and store them in some global variable . Then , you can use focusout
event so when the input loose focus then defined some function inside that assign values
to your input-box and change its width
as well.
Demo Code :
var valuess; //declare this
var widths; //and this
var currentId = 1;
function onDataBound(e) {
$('.k-multiselect .k-input').unbind('keyup');
$('.k-multiselect .k-input').on('keyup', onClickEnter);
//add this event when input lost it focus
$('.k-multiselect .k-input').on('focusout', values);
}
function onClickEnter(e) {
if (e.keyCode === 13) {
var widget = $('#products').getKendoMultiSelect();
var dataSource = widget.dataSource;
var input = $('.k-multiselect .k-input');
var value = input.val().trim();
if (!value || value.length === 0) {
return;
}
var newItem = {
ProductID: currentId++,
ProductName: value
};
dataSource.add(newItem);
var newValue = newItem.ProductID;
widget.value(widget.value().concat([newValue]));
$('.k-multiselect .k-input').val("")
valuess="";//empty values
} else {
//get the values of input and width of input
valuess = $('.k-multiselect .k-input').val()
widths = $('.k-multiselect .k-input').width()
}
}
$("#products").kendoMultiSelect({
autoClose: false,
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
data: []
},
dataBound: onDataBound
});
function values() {
//set width
$('.k-multiselect .k-input').css("width", widths)
//remove readonly from input
$('.k-multiselect .k-input').removeClass("k-readonly")
$('.k-widget').addClass("k-state-hover k-state-focused")
$('.k-clear-value').removeClass("k-hidden")
$('.k-multiselect .k-input').val(valuess) //add the values
}
#products-list {
display: none !important;
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>
</head>
<select id="products" style="width: 100%;"></select>
Upvotes: 0