This is a migrated thread and some comments may be shown as answers.

Showing Tooltips for disabled items

5 Answers 401 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Christian Storb
Top achievements
Rank 2
Veteran
Christian Storb asked on 12 Aug 2020, 04:48 PM
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 

5 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 14 Aug 2020, 11:57 AM

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:

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

0
Christian Storb
Top achievements
Rank 2
Veteran
answered on 14 Aug 2020, 01:07 PM
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
0
Nikolay
Telerik team
answered on 18 Aug 2020, 10:57 AM

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

0
Christian Storb
Top achievements
Rank 2
Veteran
answered on 25 Aug 2020, 08:17 AM

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

0
Nikolay
Telerik team
answered on 27 Aug 2020, 07:43 AM

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:

I hope this helps!

Regards,
Nikolay
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
ListBox
Asked by
Christian Storb
Top achievements
Rank 2
Veteran
Answers by
Nikolay
Telerik team
Christian Storb
Top achievements
Rank 2
Veteran
Share this question
or