Flexmonster - with Kendo splitters

by Sohan Soni

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<script src="https://cdn.flexmonster.com/2.3/flexmonster.js"></script>

<div id="example">
  <div id="vertical">
    <div id="top-pane">
      <div id="horizontal" style="height: 100%; width: 100%;">
        <div id="left-pane">
          <div class="pane-content">
            <h3>Inner splitter / left pane</h3>
            <p id="pivot">Resizable and collapsible.</p>
          </div>
        </div>
        <div id="center-pane">
          <div class="pane-content">
            <h3>Inner splitter / center pane</h3>
            <p>Resizable only.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="middle-pane">
      <div class="pane-content">
        <h3>Outer splitter / middle pane</h3>
        <p>Resizable only.</p>
      </div>
    </div>
  </div>

CSS

#vertical {
  height: 450px;
  margin: 0 auto;
}

.pane-content {
  padding: 0 10px;
}

JavaScript

$(document).ready(function() {
  $("#vertical").kendoSplitter({
    orientation: "vertical",
    panes: [{
      collapsible: false
    }, {
      collapsible: false,
      size: "100px"
    }]
  });

  $("#horizontal").kendoSplitter({
    panes: [{
      collapsible: true,
      size: "500px"
    }, {
      collapsible: false
    }]
  });
});

var pivot = $("#left-pane").flexmonster({
  toolbar: true,
  width: "100%",
  height: "100%",
  componentFolder: "https://cdn.flexmonster.com/2.3/",
  report: {
    dataSource: {
      filename: "http://www.flexmonster.com/download/data.csv"
    },
    options: {
      configuratorActive: false
    }
  }
});