This is a migrated thread and some comments may be shown as answers.

Navigate to SplitView from View

2 Answers 71 Views
SplitView
This is a migrated thread and some comments may be shown as answers.
Shaun
Top achievements
Rank 1
Shaun asked on 25 Jul 2017, 05:19 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Pavlina
Telerik team
answered on 27 Jul 2017, 01:44 PM
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.
0
Shaun
Top achievements
Rank 1
answered on 01 Aug 2017, 05:41 PM
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.
Tags
SplitView
Asked by
Shaun
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Shaun
Top achievements
Rank 1
Share this question
or