Prevent closing slider bar when using Combobox

[Hans van Rijnswoud]

Hi Telerik team,

Durring integration of KendoUI ComboBox control to our solution we faced following problem: we have hidden div that slides from left side of the screen based on click on container and occupies half of the screen. Also this slider is hides when user clicks on any elements that located outside this div.
Problem with KendoUI ComboBox is that it appends to the end of the body elements. So our logic sees that it's outer element and closes slider tab when user tries to select item from combobox.
As far as we can see there is no option to control where is Combobox is rendered their list. And also we cannon prevent bubbling in close handler, because it does't have Event.

What can we do to prevent closing slider tab when selecting item in KendoUI ComboBox?

Regards,

[Georgi Krustev]

Hello,

 
You can specify where the popup will be added. Check this jsBin demo for more information. I believe that this will help you to achieve your goal

Kind regards,
Georgi Krustev
the Telerik team

[Hans van Rijnswoud]

Georgi, thank you. That is exactly what I need.  This property is not so good documented as the others. 

[Hans van Rijnswoud]

Hi Georgi,

Solution with appendTo works perfectly, but now we expect some issues with ComboBox  itself. I try ti emulate our environment  in here http://jsbin.com/eyapuw/6/edit . But it reproduced only in JSBIN Edit view. So pop up сan not calculate the right position. In our case it's positioning somewhere in the top of the window and has strange positioning:
element.style {    display: none;    height: 93px;    left: 109px;    margin-left: -2px;    overflow: hidden;    padding-bottom: 4px;    padding-left: 2px;    padding-right: 2px;    position: absolute;    top: -446px;    width: 136px;    z-index: 10002;}

So it's positioning somewhere of out the visible area.

Can you help with this?

Regards,

[Georgi Krustev]

Hello Hans,

 
The wrapper element in this case needs to be position relatively, because jQuery is not able to return position information correctly. Add position:relative in the CSS:

#container {
  height: 600px;
  float: left;
  position: relative;
}

Regards,
Georgi Krustev
the Telerik team