Prevent closing slider bar when using Combobox

5 posts, 0 answers
  1. Hans van Rijnswoud
    Hans van Rijnswoud avatar
    72 posts
    Member since:
    Sep 2008

    Posted 08 May 2013 Link to this post

    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,
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 10 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Hans van Rijnswoud
    Hans van Rijnswoud avatar
    72 posts
    Member since:
    Sep 2008

    Posted 10 May 2013 Link to this post

    Georgi, thank you. That is exactly what I need.  This property is not so good documented as the others. 
  5. Hans van Rijnswoud
    Hans van Rijnswoud avatar
    72 posts
    Member since:
    Sep 2008

    Posted 13 May 2013 Link to this post

    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,
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 13 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready