Setting layout links from a view

4 posts, 1 answers
  1. Yrjo
    Yrjo avatar
    11 posts
    Member since:
    Aug 2012

    Posted 14 Dec 2012 Link to this post

    To simplify a little, I have a basic layout with a titlebar and a footer defined as a navbar like this:

    <section data-role="layout" data-id="default">

        <header data-role="header" id="rounded">
            <div data-role="navbar">
            <span data-role="view-title">Chapter 2</span>

        <!--View content will render here-->

        <footer data-role="footer">
            <div data-role="navbar">
                <a data-align="right" data-role="button" class="nav-button" href="<previous>"><i class="icon-arrow-left icon-large"></i></a>
                <a data-align="right" data-role="button" class="nav-button" href="<next>"><i class="icon-arrow-right icon-large"></i></a>


    The idea is that I have multiple view like pages in a book, and I want to have a Previous and Next buttons in the footer, different on each view. I need help on how to define these links in a view file programmatically, so I can keep the footer inside the layout. I understand I can put the footer on each view, but somehow I think it would be more elegant to just have one footer in layout and then just add the links with js from the view.

    Any adivice will be appreciated, thanks!
  2. Andrew Paulson
    Andrew Paulson avatar
    11 posts
    Member since:
    Jul 2004

    Posted 14 Dec 2012 Link to this post

    You should use Multiple Layouts and assign the layout to the view upon or before changing to that view. 

    set the buttons in each view to do what you like, and switch your views useage based on your needs. this keeps your buttons organized and your js light. 

    <div data-role="layout" data-id="mobile1" id="tabstrip"></div>
    <div data-role="layout" data-id="mobile2" id="tabstrip"></div>
    <div data-role="layout" data-id="mobile3" id="tabstrip"></div>

    <div data-role="view" id="myView" data-layout="mobile1"><div>

    in your script


    //Not sure if this is nessesary$("myView"));

  3. Yrjo
    Yrjo avatar
    11 posts
    Member since:
    Aug 2012

    Posted 14 Dec 2012 Link to this post

    Not sure if I understand, Andrew. perhaps I have not been clear enough. I have one layout but many views in separate files, say, index.html as my layout (maybe with a starting view) but several views, view01.html, view02.html etc. acting as pages that all use the same layout. Their basic structure is something like this

    /* view02.html */
    <!DOCTYPE html>
        <title>Page 2</title>
        <div data-role="view" data-layout="default">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

           // set the href in layout footer's previous button tp 'view01.html'
    // set the href in layout footer's next button to 'view03.html'
     }); </script
    </body> </html>
    I cannot figure out how to write the script part in my viewXXX.html file so that is writes the current navigation links in layout footer, already written in index.html as prototypes, i.e. replacing those <previous> and <next> placeholders with proper values depending which view is currently loaded to the layout.
  4. Answer
    Petyo avatar
    2437 posts

    Posted 17 Dec 2012 Link to this post

    Hello Yrjo,

    I would like to suggest an alternative approach.

    You can use handle the button widget click event, perform the necessary logic (determine previous/next page), and use the application navigate method from there.

    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