Showing Tooltips for disabled items

[Christian Storb]

Is there a solution (or workaround) to the following problem: 

Tooltips are only displayed for active ("enabled") listbox items. 

I have two linked listboxes (ListBoxA and ListBoxB). ListBoxA shows valid and invalid entries. Invalid entries are disabled in ListBoxA so that they cannot be added to ListBoxB. I want to display tooltips for all entries in ListBoxA so that the user can see why an entry may be is disabled.

Sample code https://jsfiddle.net/chstorb/b2u9cowd/

Kind regards,

Chris 

[Nikolay]

Hello Christian,

Thank you for sharing this use-case.

By design, disabled elements do not fire events. To render the Tooltip over disabled elements, initialize the Tooltip over the parent of the disabled element.

Here is what I came up with for the ListBox:

- Wrap the rendered content in a div

template: "<div class='custom'> #: name # </div>",

- Conditionally append k-state-disabled class:

$( "div.custom" ).filter(function( index ) {
              return $.trim(this.innerHTML) == "ItemA1";
            }).addClass("k-state-disabled");

Please find the provided code revised at the below link:

• https://dojo.telerik.com/acuritan

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Christian Storb]

Hello Nikolay,

thank you very much! That looks pretty good!

But there is still one problem: The deactivated (invalid) list items can still be transferred (Transfer To, Transfer All To). How can we prevent deactivated entries (k-state-disabled) from being transferred?

Best regards,

Chris

[Nikolay]

Hi Christian,

When an Html element is disabled the browser is not raising mouseenter events for, respectively the tooltip is not shown for such elements. The workaround I shared actually wraps the disabled element inside a container so the tooltip is displayed. However, this enables the ability of the whole list item to be transferred.

With that said, I am afraid it shall be either the tooltip or the disabled item you choose. Both are hardly combined together.

Regards,
Nikolay
Progress Telerik

[Christian Storb]

Hello Nikolay,

is there a possibility to override the methods "Transfer To" and "Transfer All To" (e.g. an exclude filter) so that deactivated entries with the class k-state-disabled can be excluded from transactions?

Best regards,

Chris

[Nikolay]

Hello Christian,

Indeed, I believe such an approach is possible. Here is what I came up with:

In the Remove event handler of the ListBoxA prevent the event if a disabled item is found:

remove: function(e) {
            var selected = e.items.text().replace(/\s/g, "");
            if (selected == "ItemA1") {
              e.preventDefault();
            }
          },

Use the same logic for Add event of the ListBox:

add: function(e) {
            var listBoxA = $("#listBoxA").data("kendoListBox");
            var selected = e.items.text().replace(/\s/g, "");
            if (selected == "ItemA1") {
              e.preventDefault();
            }
          },

Below I am posting the Dojo I worked on:

• https://dojo.telerik.com/acuritan/3

I hope this helps!

Regards,
Nikolay
Progress Telerik