title: Kendo Splitter inside Kendo TabStrip with MVVM init
body: <p>I have a page with a Kendo splitter inside a Kendo tabstrip and they are instantiated using the kendo.init method.  There are two tabs and the splitter control is in the second tab.  When I click on the second tab, the splitter control has not been initialised correctly.  The splitter's divider is not the correct height.  </p>
  
  <p>I have put together a sample page that demonstrates this behaviour:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="testContainer"&gt;
      &lt;div 
          id="testTabStrip"
          data-role="tabstrip"&gt;
          &lt;ul&gt;
              &lt;li class="k-state-active"&gt;Tab1&lt;/li&gt;
              &lt;li&gt;Tab2&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div&gt;
              &lt;div id="tab1-content"&gt;
                  Tab One Content
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div id="tab2-content"&gt;
                  &lt;div data-role="splitter"
                      data-panes="[
                          { collapsible: true, size: '300px' },
                          { collapsible: true }
                      ]" 
                      style="min-height:700px"&gt;
                      &lt;div id="Left-Pane"&gt;
                          Left Pane Content
                      &lt;/div&gt;
                      &lt;div id="Right-Pane"&gt;
                          Right Pane Content
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function() {
      kendo.init($('#testContainer'));
      $('#testTabStrip').bind('select', function (e) {
          setTimeout(function () {
              $(e.contentElement).find(".k-splitter").each(function () {
                  $(this).data("kendoSplitter").trigger("resize");
              },300);
          });
      });
  });
  </code></pre>
  
  <p>Here is a fiddle of the above code: <a href="http://jsfiddle.net/codeowl/2nq5z/3/" rel="nofollow">http://jsfiddle.net/codeowl/2nq5z/3/</a></p>
  
  <p>You can see in this example that I have tried to implement a workaround I found on the Web to trigger the resize event of the splitter on the select event of the tabstrip. However, this has not worked.</p>
  
  <p>How can I resolve this issue?</p>
  
  <p>Thanks for your time,</p>
  
  <p>Regards, </p>
  
  <p>Scott</p>