Bootstrap js with kendo Conflicting

I am creating a project using Javascript. In my project i am using kendo with bootstrap. The Problem some of the kendo and bootstrap are conflicting.I know there is $.noconflict, But this create me lot of problems. Mainly the kendodropdown is conflicting.

<!-- Mainly scripts -->
            <script src="$themeDisplay.getPathThemeRoot()/js/jquery-2.1.1.js"></script>
            <script src="$themeDisplay.getPathThemeRoot()/js/plugins/jquery-ui/jquery-ui.min.js"></script>
            <script src="$themeDisplay.getPathThemeRoot()/js/bootstrap.js"></script>
            <script src="$themeDisplay.getPathThemeRoot()/js/plugins/metisMenu/jquery.metisMenu.js"></script>
            <script src="$themeDisplay.getPathThemeRoot()/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

            <script src="$themeDisplay.getPathThemeRoot()/js/jquery.mousewheel.js"></script>
            <script src="$themeDisplay.getPathThemeRoot()/js/jquery.jscrollpane.min.js"></script>
            <script src="$themeDisplay.getPathThemeRoot()/js/custom.js?v=$version"></script> 

If I remove the bootstrap file then kendo functions working properly.Please help me for using kendo and bootstrap together.

The exact issue is when i open dropdown and scrolls it automatically closes.

This is the code:

 $("#searchTktID").kendoDropDownList({
         filter: "startswith",

     });

and am handling this situation using

 close: function(e){
                if(isScroll) {
                        e.preventDefault(); 
                    }
             },
             open:function(){
                 isScroll = true;
             },

But this is not correct way i think.

from Bootstrap js with kendo Conflicting