kendo dropdownlist close when tooltip dialog opens

[karthikeyan]

HI 

     I have an issue in kendo combobox I added a tooltip in kendo combobox dropdown list, the issue is when I click the tooltip in the combobox the dropdown was automatically closed. I want the when the tooltip dialog opens then the corresponding combobox dropdown list should not close. I am stuck in this issue help me out.

I used both the e.Preventdefault and e.stoppropagating but its not working. The following code that I used for the tooltip click event and I attached the screenshot of my issue.

 

comboBox.list.find('.info-MultiComboBox', '.cogInfo', 'cog-widget').click(function (e) {
// For some reason, this click event causes the dropdown to close. Calling preventDefault() stops this behavior.
e.preventDefault();
});

[Dimiter Topalov]

Hi Karthikeyan,

The default functionality of the Kendo UI ComboBox is to close the dropdown when another element gains focus, or an item from the list is selected via click/enter.

You can use some custom logic to bind the show and hide events of the Tooltip with a boolean variable, based on which you can conditionally call e.preventDefault() in the ComboBox's close event handler, e.g.:

http://dojo.telerik.com/IkaXA

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[karthikeyan]

Hi,
   Thanks for the response and the example but it's not working for me, in your example the tooltip was inherit in the combobox but in my code the combobox and the tooltip was separate. 

The tooltip was shown in the dialog and we just call the tooltip from outside of the combobox so when I click the tooltip it act as a separate click event function only.

I need to know how to inherit the combobox function into the tooltip click event function or provide some other suggestion. 

The following code that I user to call the tooltip in the combobox.


var comboBox = $el.data("kendoModifiedComboBox");
comboBox.list.data("kendoPopup").setOptions({ origin: "bottom right", position: "top right" });
comboBox.list.find('.info-MultiComboBox').cogInfo({
title: LocalizedStrings['Strings.Controls.Silverlight'].MultiSelection_PopUp_Info_HeaderText,
content: LocalizedStrings['Strings.Controls.Silverlight'].MultiSelection_PopUp_Info_BodyText
});

comboBox.list.find('.info-MultiComboBox', '.cogInfo', 'cog-widget').click(function (e) {
// e.preventDefault();

});

[Dimiter Topalov]

Hello Karthikeyan,

In general, custom scenario implementation falls outside the scope of our support service, but I can provide the following general suggestions on preventing the Kendo UI DropDownList and ComboBox closing on blur of the dropdown list:

1) Use some custom or built-in event (like the Tooltip show event, from the discussed example) to toggle a boolean variable that indicates whether the DropDownList/ComboBox close event should be prevented or not

2) Prevent the DropDownList close event conditionally, based on the value of this custom boolean variable

3) Use the Tooltip hide event to toggle the variable back (or some other custom event or function that is fired/called when the Tooltip is closing)

If you send us an isolated runnable project, where the custom setup can be investigated, we can take a look, and try to provide a more to-the-point suggestion, applicable to the custom scenario, if one is supported.

Regards,
Dimiter Topalov
Telerik by Progress

[karthikeyan]

Hi,
      Thanks for the reply, based on your example I tried but you are inherit the tooltip in the combobox itself.

We are handling combobox and tooltip are separate method that used in all over the application as generalized.
In tooltip we are using cog dialog, as you mentioned using variable it's a good idea but I don't know how to inherit the combobox function into the tooltip click event function.

Unfortunately I can't provide the sample project to you but I add some of the codes that I used for your reference except the css file.

[karthikeyan]

Hi,
      Thanks for the reply, based on your example I tried but you are inherit the tooltip in the combobox itself.

We are handling combobox and tooltip are separate method that used in all over the application as generalized.
In tooltip we are using cog dialog, as you mentioned using variable it's a good idea but I don't know how to inherit the combobox function into the tooltip click event function.

Unfortunately I can't provide the sample project to you but I add some of the codes that I used for your reference except the css file.

[Dimiter Topalov]

Hello Karthikeyan,

Thank you for the provided details. I have modified the example to better resemble the specific case. Instead of using Kendo UI Tooltip, now a Kendo UI window is created on a click on an element in the ComboBox header template:

http://dojo.telerik.com/IkaXA/5

The difference is that the flag, indicating whether the ComboBox can be closed, is toggled in the Kendo UI Window's open and close events.

In general, you can get a reference to a Kendo UI widget as described in the following documentation article:

http://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#get-widget-reference

To get a reference to the specific ComboBox instance, in which the button, opening the Window was clicked, you can use the approach, shown in the dojo example:

http://dojo.telerik.com/IkaXA/5

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[karthikeyan]

Hi Dimiter Topalov,

    Thank you so much for the example finally I fixed the issue. But in your example all the functions are handle in the same file so it is easy to handle the tooltip open and close function.

In my code all are in separate files only I used to call the function from one to another so I changed the code slightly based on my code and the result was success.

Thanks again for the support....

[karthikeyan]

HI

Thank you so much finally I fixed the issue, but I need another suggestion if I open the tool tip then I click outside of the window then both the tool tip and the combo box should need to close.

Based on your example once the tool tip close means then only the combo close, I slightly add a variable to change your code based on my requirement. In this the combo box was close when I click on the outside but the Kendo window was not closed.

I know in your example all are inherit in a single page itself so it can easily call the kendo window to close when I click on outside. so please review my previous code img that I used tool tip and combo box are in separate file. I don't know how to inherit the tool tip into the combobox.js. help me in that..

http://dojo.telerik.com/@karthikeyan/uSiFU

[karthikeyan]

HI
Thank you so much finally I fixed the issue, but I need another suggestion if I open the tooltip then I click outside of the window then both the tooltip and the combobox should need to close.

Based on your example once the tooltip close means then only the combo close, I slightly add a variable to change your code based on my requirement. In this the combobox was clse when I click on the outside but the Kendowindow was not closed.

I know in your example all are inherit in a single page itself so it can easily call the kendowwindow to close when I click on outside. so please review my previous code img that I used tooltip and combobox are in separate file. I don't know how to inherit the tooltip kendowindow into the combobox.js. help me in that..

http://dojo.telerik.com/@karthikeyan/uSiFU

[karthikeyan]

HI

Thank you so much finally I fixed the issue, but I need another suggestion if I open the tooltip then I click outside of the window then both the tooltip and the combobox should need to close.

Based on your example once the tooltip close means then only the combo close, I slightly add a variable to change your code based on my requirement. In this the combobox was clse when I click on the outside but the Kendowindow was not closed.

I know in your example all are inherit in a single page itself so it can easily call the kendowwindow to close when I click on outside. so please review my previous code img that I used tooltip and combobox are in separate file. I don't know how to inherit the tooltip kendowindow into the combobox.js. help me in that..

http://dojo.telerik.com/@karthikeyan/uSiFU

[karthikeyan]

Hi
Thanks for the reply finally the issue was fixed, but I need another suggestion from you. Based on your example once the tooltip was open the combobox will not close until the tooltip was closed.

In our code we have multiple combobox in a single page itself so if we freeze the combobox means it will conflict with other function. We need once the tooltip click the dropdown should remain open now its working 100% correctly, but once we click outside of the combobox both the tooltip(Kendo window) and the combobox should need to close.

I have slightly changed your code by adding variables in close function once I click outside of the combo the combobox closed correctly but the kendo window(tooltip) remains open.

I know that in your code all the functions are handled in a single page itself so its easy to call the kendo window  close() but please review my code images that I attached in previous post, the combo and tooltip are handled in different pages. I don't know how to inherit the kendo window(tooltip) control into the combobox.js. help me in that.

http://dojo.telerik.com/@karthikeyan/uSiFU

[Dimiter Topalov]

Hi Karthikeyan,

I am glad the issue was fixed. Regarding the multiple ComboBoxes on the page, the custom logic, preventing its closing will be applied only to the instances, in which the close event is handled in the configuration options.

As for closing the Window and the Tooltip on clicking elsewhere on the page, this can be achieved with some additional custom logic and checks.

Regarding obtaining the Kendo Window instance, you can do it any JavaScript file/module, as the Window can be retrieved from the DOM, i.e. if the Window is created, it can be accessed by giving an ID attribute to the element it is initialized from, e.g.:

var kw = $('#kendo-window').data('kendoWindow');
...
if(kw){
  kw.close();
}

This code will retrieve the Kendo Window, if one exists, and close it. If no Kendo Window exists in the DOM, the call to the close() method will not be performed.

On a side note, please mind that implementing custom logic and/or scenarios typically falls outside the scope of our support service:

https://www.telerik.com/account/support/scope

We will be happy to help with any questions and/or issues, concerning the public APIs of the Kendo UI widgets, and some general tips of how some non built-in functionality can be achieved via the mentioned APIs (if the desired behavior is supported).

You can also benefit from the Progress Professional Services for custom solutions, if needed:

https://www.progress.com/services

Let me know if you are interested, and I will arrange for someone from the team to contact you.

Regards,
Dimiter Topalov
Telerik by Progress