Mobile / Navbar / Toolbar as ActionBar Implementation

2 posts, 0 answers
  1. asif
    asif avatar
    1 posts
    Member since:
    Nov 2014

    Posted 01 Mar 2016 Link to this post


    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:

    <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:

    <div data-role="view" ... >
    <div id="toolbar">

    $("#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.


  2. Petyo
    Petyo avatar
    2444 posts

    Posted 03 Mar 2016 Link to this post


    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. 

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top