Hello,
I am trying to implement toolbar as actionbar on Kendo UI Mobile:
In the demo, the dataItems are statically placed into the data-items attribute: http://demos.telerik.com/kendo-ui/m/index#navbar/adaptive-toolbar
<div data-role="toolbar" data-items='[
{
id: "back",
type: "button",
icon: "arrow-w",
overflow: "never",
align: "left",
url: "#:back"
},
{
type: "splitButton", id: "viewName", name: "viewName", text: "Inbox (18)", menuButtons: [
{ id: "option1", text: "Drafts (3)" },
{ id: "option2", text: "Sent Mail" },
{ id: "option3", text: "Junk Mail (21)" },
{ id: "option4", text: "Trash (53)" }
],
overflow: "never",
align: "left"
}]'></div>
I would like to be able to initialize and control the toolbar in the javaScript like so:
Html:
<div data-role="view" ... >
<header>
<div id="toolbar">
</header>
</div>
Js:
$("#toolbar").kendoToolBar({ ... });
When I do it this way, however, the toolbar does not get styled as in the demo.
Is there support for this type of toolbar initialization in mobile or am I doing something wrong?
Thank you.
1 Answer, 1 is accepted
Make sure that you initialize the toolbar in the view init event handler. The toolbar needs an active mobile app instance in order to switch to that mode.
Regards,
Petyo
Telerik