kendoDropDownListWithTooltip custom knockout binding

130 views Asked by At

I want to create a custom binding to merge Kendo DropDownList and Kendo Tooltip. So I made this:

ko.bindingHandlers.kendoDropDownListWithTooltip =
  {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var local = ko.utils.unwrapObservable(valueAccessor());

    // INIT DropDown
    ko.bindingHandlers.kendoDropDownList.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    var combo = $(element).data().kendoDropDownList;

    // INIT Tooltip
    if (combo) {
      var tooltipConfig = local.tooltip;
      var newValueAccessor = function () { return tooltipConfig; };
      ko.bindingHandlers.kendoTooltip.init(combo.wrapper, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
    }
  }
};

But it doesn't work as expected. I need to display tooltip when DropDownList is focused only. When Dropdown is not focused, tooltip must be hidden.

<input data-bind="kendoDropDownListWithTooltip: { data: choices, value: selectedChoice, tooltip: { showOn: 'focus', position: 'right', content: 'Tootlip Tooltip Tooltip' } }" />

enter image description here

But moving to other dropdows keeps all controls focused. Why and how to fix it?

https://codepen.io/raptor/pen/xXGPmK

UPDATE Seems to be some bug in Kendo itself. Example without Knockout, just kendo controls. The same problem. https://codepen.io/raptor/pen/RLPxZj

0

There are 0 answers