Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > TabStrip > Difficulty with splitter in second tab of tabstrip

• Craig

  Posted on Nov 29, 2011 (permalink)

  Hello,
  I've taken the full screen example as provided by Alex in this post and I am trying to build on it.
  
  I've added a tabstrip to Index.cshtml. The tabstrip has two tabs and each tab has a splitter in vertical orientation so there are two horizontal panes per tab. I have set the size of the panes and Tab 1, which is displayed by default, appears correctly (see image1). 
  
  However, when I select Tab 2 the panes are not visible and the handle for the splitter is in the top left hand corner (see image2).
  
  I've attempted to overcome this with a jQuery script called on tab select but it is not succeeding entirely. Image3 shows the result. The splitter handle is at the position but the pane content and splitter is not displayed. If I manually move the splitter the panes and splitter appear (see image4). Also note the right hand end of the splitter meets with the edge of the pane. This did no occur on tab 1 automatically and likewise attaches to the edge of the pane when moved manually.
  
  Here are my questions:
  - How do I get the panes and splitter to be displayed on tab 2 after the tab is selected at the positions set in code?
  - Should I need use jQuery to adjust the position of the splitter on tab 2? (If I use the current script I get undesirable side affect when switching tabs since pane positions are remembered but my script moves splitter independently).
  - After the splitter is moved manually the width is adjusted automatically to the width of the panes. This is observed on both tabs. How can this be achieved without manually moving the splitter?
  
  Thanks for your time.
  Craig
  
  Index.cshtml code :-
  
  

  @(Html.Telerik().TabStrip()

      .Name("myTabstrip")

      .HtmlAttributes(new { style = "height: 100%;" })

      .Items(parent =>

      {

          parent.Add()

              .Text("Tab 1")

              .Content(@<text>

                          @VerticalTemplate1()

                       </text>);

          parent.Add()

              .Text("Tab 2")

              .Content(@<text>

                          @VerticalTemplate2()

                       </text>);

      })

      .SelectedIndex(0)

      .ClientEvents(events =>

      {

          events.OnSelect("Select");

      })

      )   

   

  @helper VerticalTemplate1()

      {

      <text>

          @(Html.Telerik().Splitter().Name("vsplitter1")

              .Orientation(SplitterOrientation.Vertical)

              .HtmlAttributes(new { style = "height: 600px;" })

              .Panes(vPanes =>

              {

                  vPanes.Add()

                      .Scrollable(false)

                      .Collapsible(false)

                      .Size("200px")

                      .Content(@<text>

                                  Pane 1

                              </text>);

   

                  vPanes.Add()

                      .Scrollable(false)

                      .Collapsible(false)

                      .Size("300px")

                      .Content(@<text>

                                  Pane 2

                              </text>);

              })

              )     

      </text>

  }

   

  @helper VerticalTemplate2()

      {

      <text>

          @(Html.Telerik().Splitter().Name("vsplitter2")

              .HtmlAttributes(new { style = "height: 600px;" })

              .Orientation(SplitterOrientation.Vertical)

              .Panes(vPanes =>

              {

                  vPanes.Add()

                      .Size("100px")

                      .Scrollable(false)

                      .Collapsible(false)

                      .Content(@<text>

                                  Pane 3

                              </text>);

   

                  vPanes.Add()

                      .Size("400px")

                      .Scrollable(false)

                      .Collapsible(false)

                      .Content(@<text>

                                  Pane 4

                              </text>);

              }))     

      </text>

  }

   

  <script type="text/javascript">

      function Select(e) {

          $("#vsplitter2").children(".t-pane").css("height", "600px");

          $("#myTabStrip").children(".t-splitbar").css("width", $("#myTabStrip").width());

          $("#vsplitter2").children(".t-splitbar").css("top", "250px");

      }

  </script>

  
  

  
  

  Attached files

  • image1.jpg
  • image2.jpg
  • image3.jpg
  • image4.jpg

  Reply

• Craig

  Posted on Nov 29, 2011 (permalink)

  My apologies if there is a big overlap with this post . I've since tried Dimo's suggestion i.e. placed the following code in the Select event script
  
  

  $("#vSplitter1").trigger("resize");

  $("#vSplitter2").trigger("resize");

  
  but it does not have the desired effect. 
  
         

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > TabStrip > Difficulty with splitter in second tab of tabstrip