Edit this page

kendo.mobile.ui.SplitView

Configuration

style String(default: "horizontal")

Defines the SplitView style - horizontal or vertical.

Vertical SplitView

<div data-role="splitview" data-style="vertical">
  <div data-role="pane">
      <div data-role="view" id="foo">Pane 1 </div>
  </div>
  <div data-role="pane">
      <div data-role="view" id="foo">Pane 2 </div>
  </div>
 </div>

<script>
new kendo.mobile.Application();
</script>

Methods

destroy

Prepares the SplitView for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.

Important: This method does not remove the SplitView element from DOM.

expandPanes

Displays the collapsible panes; has effect only when the device is in portrait orientation.

collapsePanes

Collapses back the collapsible panes (displayed previously with expandPanes); has effect only when the device is in portrait orientation.

Events

init

Fires after the mobile SplitView and its child widgets are initialized.

Example

<div data-role="splitview" data-init="onInit">
  <div data-role="pane">
      <div data-role="view" id="foo">Pane 1 </div>
  </div>
  <div data-role="pane">
      <div data-role="view" id="foo">Pane 2 </div>
  </div>
 </div>

<script>
function onInit(e) {
  console.log(e);
}
new kendo.mobile.Application();
</script>

Event Data

e.view jQuery

The mobile SplitView instance

show

Fires when the mobile SplitView becomes visible.

Example

<div data-role="splitview" data-show="onShow">
  <div data-role="pane">
      <div data-role="view" id="foo">Pane 1 </div>
  </div>
  <div data-role="pane">
      <div data-role="view" id="foo">Pane 2 </div>
  </div>
 </div>

<script>
function onShow(e) {
  console.log(e);
}
new kendo.mobile.Application();
</script>

Event Data

e.view jQuery

The mobile SplitView instance

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy