Navigate to SplitView from View

3 posts, 1 answers
  1. Shaun
    Shaun avatar
    2 posts
    Member since:
    Apr 2017

    Posted 25 Jul Link to this post

    Hi, I'm trying to use a SplitView within a layout in a mobile application.  I'm using MVVM.

    I've defined the splitview in the html body, outside of any layouts or other views.  The application starts by loading a basic layout and view  It then navigates to different views based on data entered.  

    Can I use my main layout as the layout for the splitview in addition to the starting view, and other standard (non-split) views?  

    Does the splitview need to contain its own layout for each pane?

    I can't directly navigate to "v_bill_splitview" as the page appears blank.  I need to go through another basic view which navigates to the splitview when a tabstrip link is clicked - once the splitview layout is displayed, the content is still blank. 

    Any thoughts / guidance?  Thanks.

    Example structure: 

    <body>
    <!-- Loader Layout -->
    <div data-role="layout" id="l_layout" data-id="l_layout" style="display:none;">
    <section data-role="content"></section>
    </div>

    <!-- View Loader -->
    <div id="v_loader" data-role="view" data-layout="l_layout" data-show="onShow" style="visibility:visible">
    <div class="center">
    <p>
    <object data="logo.svg" type="image/svg+xml">
    <img src="logo.png"/>
    </object>
    </p>
    <p>
    Loading...
    </p>
    </div>
    </div>

    <!-- Main Layout -->
    <div data-role="layout" id="l_main" data-id="l_main" style="display:none">
    <header data-role="header">
    <div data-role="navbar">
    <a data-role="button" data-click="l_main_homeOnClick" data-align="left">
    <img src="logo.png" style="height: 1.8em; width: 1.8em;"/>
    </a>
    <span data-role="view-title"></span>
    </div>
    <div style="text-align: center;">
    <img src="../img/logo.png" style="max-height:25px; text-align:center"/>
    </div>
    </header>
    <section data-role="content"></section>
    </div>

    <!-- View Search Criteria -->
    <div data-role="view"
    id="v_search"
    data-id="v_search"
    data-layout="l_main"
    data-model="app.models.search_criteria"
    data-title="title"
    style="display:none">

    <ul data-role="listview">
    <li>
    <label>Test
    <input type="text" class="km-text"/>
    </label>
    </li>
    <li>
    <label>Test2
    <input type="text" class="km-text"/>
    </label>
    </li>
    </ul>
    <hr/>
    <ul data-role="listview" data-bind="source: dataSources.types" data-template="tpl_types"></ul>
    <br/>
    <div class="container-fluid">
    <div class="row">
    <div class="col-xs-12">
    <a data-role="button"
    data-bind="events: { click: events.searchClick }"
    data-icon="search">
    Search
    </a>
    </div>
    </div>
    </div>
    </div>

    <div data-role="splitview"
    id="v_bill_splitview"
    data-id="v_bill_splitview"
    style="display:none"
    data-layout="l_bill"
    data-style="vertical">

    <!--data-portrait-width="200"-->


    <div data-role="pane" style="-webkit-box-flex: 4" id="main-pane" data-layout="l_bill2">
    <!--<div data-role="layout" data-id="l_bill2">
    <div data-role="header">
    <div data-role="navbar">
    <a id="side-pane-button" data-role="button" data-align="left" data-click="expandSidePane">Side</a>
    <span data-role="view-title"></span>
    <a data-role="button" data-align="right" href="#bar">Bar</a>
    </div>
    </div>
    </div>-->

    <div data-role="layout" data-id="l_bill2">
    <header data-role="header">
    <div data-role="navbar">
    <a data-role="backbutton" data-align="left">Back</a>
    <a data-role="button" data-click="l_main_homeOnClick" data-align="left">
    <img src="track_trace_logo.png" style="height: 2em; width: 2em;"/>
    </a>
    <span class="l_bill_title">Freight Bill 2</span>
    </div>
    </header>
    </div>

    <div data-role="view" data-title="Main Pane">
    Main pane Initial view
    </div>

    <div data-role="view" data-title="Main Pane Bar View" id="main-bar" data-show="collapseSidePane">
    Main pane Bar view
    </div>
    </div>

    <div data-role="pane" data-initial="#view1">
    <div data-role="view" id="view1" data-id="view1" data-title="Side Pane">
    <h3>view1</h3>
    <a data-role="button" data-target="main-pane" href="#main-bar">Bar (Main pane)</a>
    </div>
    </div>
    </div>

  2. Answer
    Pavlina
    Admin
    Pavlina avatar
    6162 posts

    Posted 27 Jul Link to this post

    Hello,

    I am afraid the requested scenario is currently not supported. Unlike most widgets, the SplitView element should not be nested in a view, but rather put as an immediate child of the mobile application element.

    In case your requirements are different please elaborate a bit more in the details, so we can provide more to the point answer.

    Regards,
    Pavlina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Shaun
    Shaun avatar
    2 posts
    Member since:
    Apr 2017

    Posted 01 Aug Link to this post

    Thanks for the help Pavlina - I ended up moving the splitview out of the other view, and including the splitview's layouts and views within it.
Back to Top