How do I trigger a splitter resize when ng-show causes splitter to become visible after window resize?

4 posts, 0 answers
  1. Jon
    Jon avatar
    5 posts
    Member since:
    Aug 2014

    Posted 01 Sep 2014 Link to this post

    I have a splitter that I need to hide or show based on certain conditions. I'm using angular's ng-show to hide and show the div containing the splitter.

    If the window is resized while the splitter div is hidden, showing the div results in a 0 width first column.

    I have seen similar issues on the forums that suggest triggering a resize on the splitter, but it doesn't work the way I'm trying to do it. I suspect that the resize is being triggered before the splitter is actually shown, but I'm not sure where else to put the resize trigger.

    Sample code reproducing the issue is below. 

    Thanks!

    <!DOCTYPE html>
    <html>
    <head>
        <title>AngularJS</title>
        <meta charset="utf-8">
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
        <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
        <script>
            
        </script>
        
        
    </head>
    <body>
        
    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl" style="width: 100%;">

          <h1>How can I trigger a splitter resize when ng-show makes the div visible?</h1>
          <h3>Calling $scope.mainSplitter.trigger("resize") when setting the visibility boolean doesn't work...</h3>
          <h4>
              <ol>
                  <li>Click the button to hide the splitter.</li>
                  <li>Resize the window.</li>
                  <li>Click the button to show the splitter. First column has zero width.</li>
                  <li>Resize the window again and observe the splitter resize.</li>
              </ol>
          </h4>
        <button ng-click="toggleVisible()">{{buttonText}}</button>
        <div class="box-col" style="width: 100%;" ng-show="isSplitterVisible">
          <div kendo-splitter="mainSplitter"
               k-panes="[ { size: '100px' }, null]"
               k-orientation="horizontal">
            <div>
              <p>Pane 1</p>
            </div>
            <div>
              <p>Pane 2</p>
            </div>
          </div>
        </div>
      </div>
    </div>

        <script>
          angular.module("KendoDemos", [ "kendo.directives" ]);

          function MyCtrl($scope) {
              $scope.isSplitterVisible = true;
              $scope.buttonText = "Hide Splitter";

              $scope.toggleVisible = function()
              {
                  $scope.isSplitterVisible = !$scope.isSplitterVisible;
                  if ($scope.isSplitterVisible){
                      // Splitter is visible. Try to trigger a resize
                      $scope.mainSplitter.trigger("resize");

                      // Change the button text
                      $scope.buttonText = "Hide Splitter";
                  }
                  else{
                      // Change the button text
                      $scope.buttonText = "Show Splitter";
                  }
              }
          }
        </script>

    </body>
    </html>
  2. Jon
    Jon avatar
    5 posts
    Member since:
    Aug 2014

    Posted 02 Sep 2014 in reply to Jon Link to this post

    I worked around the issue in my particular case by using nested $state with ui-router, rather than using ng-show or ng-hide. The splitter is in a different substate, and using $state.go works fine, as the div with the splitter is never hidden.

    But I'd still be interested in the best way to resize after ng-show / ng-hide takes effect for future reference.

    Thanks!
  3. Kendo UI is VS 2017 Ready
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 02 Sep 2014 Link to this post

    Hello Jon,

    I believe that in this case, you can use a $watch on the condition and resize the splitter with a $timeout -- because the $watch listener is executed before the ng-show directive shows the element. Here is a Dojo snippet that shows this approach. Please note that Dojo snippets can be shared -- when you start editing them, they are saved and get an unique URL.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Jon
    Jon avatar
    5 posts
    Member since:
    Aug 2014

    Posted 02 Sep 2014 in reply to Alex Gyoshev Link to this post

    That's perfect, thanks!
Back to Top
Kendo UI is VS 2017 Ready