CODEWITHSUNDEEP
jquerykendo-uikendo-multiselect
Uriel Arvizu
Uriel Arvizu

Reputation: 1926

How to avoid Kendo Multiselect from clearing the input when focus is lost?

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

Answers (1)

Swati
Swati

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

Related Questions