Splitter in Collapse Panel

2 posts, 0 answers
  1. Jeff
    Jeff avatar
    1 posts
    Member since:
    Apr 2017

    Posted 05 May Link to this post

    I want to put a splitter in a bootstrap collapse panel.  This works fine when the collapse panel is loaded open (ie a class of collapse in).  However when the page loads with the collapse is loaded closed, the splitter does not render.  Is there a way to make this work short of having a document ready function that has $(".collapse").collapse('hide');?

     

    Thank-you

    Here is the cshtml code.

     

      <div class="panel-heading" style="background-color: #717174;height: 35px;color:white;font-size:11px;width:100%;">
            <div class="panel-title">
             <div class="row">
        <div class="col-md-6">
          <form id="form1" name="form1">
            <div class="input-group input-group-sm input">
                       <span style="color:white;font-size:12px;font-weight:bold;">Account:&nbsp;</span>
                <input id="selacct" class="form-control" name="selacct" placeholder="Search Account #..." style="width:120px;font-size:10px;height:20px;vertical-align:middle;float:none">
           <a href="#" style="color:white;height:20px;"><span class="glyphicon glyphicon-search"></span></a>
                 <div class="col-md-1" style="border-left:1px solid #cccccc;">
              <a data-toggle="collapse" href="#collapse1" style="text-decoration:none;color:white;font-weight:bold;font-size:14px;"><span class="glyphicon glyphicon-menu-down"></span></a>
        </div>
        <!-- /.end see more -->
      </div>


                 </div>
          </div>

    <div id="collapse1" class="panel-collapse collapse col-md-12">
            <div class="panel-body" style="background-color: #999999;height: 250px;color:white;font-size:12px">
        
          @(Html.Kendo().Splitter()
          .Name("vertical")
          .Orientation(SplitterOrientation.Vertical)
          .Panes(verticalPanes =>
          {
              verticalPanes.Add()
                  .HtmlAttributes(new { id = "top-pane" })
                  .Scrollable(false)
                  .Collapsible(false)
                  .Content(
                    Html.Kendo().Splitter()
                        .Name("horizontal")
                        .HtmlAttributes(new { style = "height: 100%;" })
                        .Panes(horizontalPanes =>
                        {
                            horizontalPanes.Add()
                                .HtmlAttributes(new { id = "left-pane" })
                                .Size("220px")
                                
                                .Content(@<div class="pane-content">
                                            <h3>Inner splitter / left pane</h3>
                                            <p>Resizable and collapsible.</p>
                                          </div>);
                            horizontalPanes.Add()
                                .HtmlAttributes(new { id = "right-pane" })
                                
                                .Size("220px")
                                .Content(@<div class="pane-content">
                                            <h3>Inner splitter / right pane</h3>
                                            <p>Resizable and collapsible.</p>
                                          </div>);
                        }).ToHtmlString()
                  );
              })
    )
                </div>
            </div>

  2. Ianko
    Admin
    Ianko avatar
    1741 posts

    Posted 09 May Link to this post

    Hello Jeff,

    As the Splitter is initially hidden and dynamically shown, this is considered as a responsive layout. Hence, the resize method should be called on showing the Splitter. 

    <script>
        $("#collapse1").one("shown.bs.collapse", function (ev) {
            $("#vertical").data("kendoSplitter").resize();
        })
    </script>

    Regards,
    Ianko
    Telerik by Progress
    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.
Back to Top