Using KendoMenu inside KendoToolbar cause issue
NickName:Sindhu Ask DateTime:2016-06-21T17:04:48

Using KendoMenu inside KendoToolbar cause issue

We want a menu in toolbar but menu inside toolbar is not work as expected.Menu popup is hide behind the toolbar.We tried to fix but we didn't get any fix for this.I there any other way to use menu in toolbar(Note: Menu should contain sub menu).Please help me resolve this issue.

Code

 <div id="example">
        <div class="demo-section k-content wide">
            <div id="toolbar"></div>
        </div>
        <script>    
         $(document).ready(function() {
                $("#toolbar").kendoToolBar({
                    items: [
                        { type: "button", text: "Button" },
                        { type: "button", text: "Toggle Button", togglable: true },
                        {
                            type: "splitButton",
                            text: "Insert",
                            menuButtons: [
                                { text: "Insert above", icon: "insert-n" },
                                { text: "Insert between", icon: "insert-m" },
                                { text: "Insert below", icon: "insert-s" }
                            ]
                        },
                        { type: "separator" },                        
                        {
                           template: "<ul id='dropdown' style='width:150px;' ></ul>", overflow: "never"
                        }                            
                    ]
                });

                $("#dropdown").kendoMenu({
                    dataSource: [{
                       text: "Action",
                       value: 0,
                       items: [
                        { text: "Heading 1", value: 1 },
                        { text: "Heading 2", value: 2 },
                        { text: "Heading 3", value: 3 },
                        { text: "Title", value: 4 },
                        { text: "Subtitle", value: 5 ,
                         items: [
                               { text: "Subtitle 1", value: 1 },
                               { text: "Subtitle 2", value: 2 },
                               { text: "Subtitle 3", value: 3},
                                ]}
                             ]
                    }]
                });
            });
   </script>
</div>

Sample Program

Copyright Notice:Content Author:「Sindhu」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/37939979/using-kendomenu-inside-kendotoolbar-cause-issue

Answers
The Dread Pirate Stephen 2016-06-21T18:13:16

You can get it to work by setting resizable: false on the ToolBar(this essentially changes the overflow-y handling of the ToolBar) but you lose the overflow area capability of the ToolBar...so not really an option.\n\nYou may notice that DropDownList/ComboBox/DatePicker popups do not get cut off when present in the ToolBar...what's the difference?\nThe difference is that the HTML for those popups are appended to the < body > and not inside the ToolBar at all, and then just positioned appropriately by the framework as required.\n\nSo, this led me down the path of \"faking\" a menu construct for use in the ToolBar that uses this popup mechanism. After fooling around with the internal kendoPopup class for a while and failing, I settled on using a Kendo ContextMenu to get as close to the functionality as possible.\n\nEssentially, you create a ToolBar item with a template and then convert the template into a ContextMenu instead of a Menu.\nApply a bit of styling and you pretty much have a menu that doesn't get cut off in the ToolBar.\n\nTake a look at \n\n\n http://dojo.telerik.com/iQoyo/2\n\n\nwhere I get your menu working by setting resizable: false(with the associated down-side) and also show 2 ContextMenu implementations, 1 using < li >'s in the template and one using a simple template and a dataSource of items like your menu code.\n\nThe only problems I see are:\n1. you have to click on the \"menu\" to get it to show as there is no hover capability built-in \n2. When you click on the \"menu\", it highlights the first button in the ToolBar for some reason....this does not happen in my own code so I'm not sure what is going on here.",


More about “Using KendoMenu inside KendoToolbar cause issue” related questions

Using KendoMenu inside KendoToolbar cause issue

We want a menu in toolbar but menu inside toolbar is not work as expected.Menu popup is hide behind the toolbar.We tried to fix but we didn't get any fix for this.I there any other way to use menu...

Show Detail

how to load the kendoMenu dynamically using dataSource or json

I want to use kendoMenu. I want to load the menu with parent and child fields dynamically. Can anyone tell me how to load the kendoMenu dynamically using json/datasource?

Show Detail

kendoMenu() is not a function

kendoMenu() is not a function , Other functions like kendobutton and kendotabstrip are working but kendoMenu is not working.Please give solution for this, Is there is any JS or CSS f...

Show Detail

How can I replace the kendoGrid toolbar with a kendoToolbar?

I'm ultimately trying to resize custom template controls that I've created in the KendoGrid toolbar. Right now they span the entire length of the toolbar and I'd like a way to resize them or collapse

Show Detail

kendoToolBar with display:none attribute doesn't wok on resize screen

i have this simple exmaple of Kendo UI toolbar, $("#toolbar").kendoToolBar({ items: [ { type: "buttonGroup", attributes: { style: "display:none", },

Show Detail

How to get bootstrap label to fill up remaining area of kendoToolbar?

I have a kendoToolbar with 3 buttons in it and a label, chances are in the end I'll end up adding another button or a dropdown menu in it for exporting the grid data, anyhow.. I was wondering how ...

Show Detail

Addition of Custom button in Kendo Grid using Kendotoolbar and kendo toolbar button

I'm setting up a page with kendo grid, which contains kendotoolbar and kendo toolbar button, all I need to generate custom buttons which helps to generate excel report, mailing, etc. The problem is...

Show Detail

Using Interlocked.Decrement inside If condition, could it cause any Concurrency Issue?

I am creating a custom CountdownWaitHandle class it has the following method: public void Signal() { if (Interlocked.Decrement(ref threadsInstances) &lt;= 0) { mre.Set(); } } ...

Show Detail

Is functional component cause memory issue?

In functional component, we declare function inside component. It creates new function in every render. But in class component, it is added in the component prototype and reuses that function. Is it

Show Detail

Kendo Menu selection issue

I've a kendo menu to dynamically enable or disable the kendo grid columns. When I select the options from the KendoMenu, the selection is firing twice. I've created the demo version below. demo ...

Show Detail