Pane size not correct, when splitter rendered in window widget

3 posts, 1 answers
  1. Answer
    Dietmar
    Dietmar avatar
    13 posts
    Member since:
    May 2012

    Posted 08 Jul 2013 Link to this post

    I use a splitter with a left and a right pane within a window widget. If I create the window with “Visible(true)” everything works as it should.
    But since the window is supposed to be displayed, when the user clicks on a button, I have to use “Visible(false)” and make it visible after the click occurred.
     In this case the given pane size of the left pane seems to be ignored and the right pane is not displayed at all(see attached picture).

    After manual resize of the splitter, it seems to work. But when I close the window and reopen it via Javascript, the size parameter is still ignored. Instead the
    manual chosen size is used. It makes no difference if I use Ajax Loading or direct rendering. My Code:

    Window:
    @( Html.Kendo().Window()
           .Name("popupSplitter")
           .Title("Popup Splitter")
           .Draggable(true)
           .Modal(true)
           .Content(
               @<text>
    <div>
        @RenderSplitter()
    </div>
        </text>
    )
            .Width(600)
            .Height(450)
            .Visible(false)
    )
    Splitter:
    @helper RenderSplitter()
    {
       @Html.Kendo().Splitter()
       .Name("MySplitter")
       .Orientation(SplitterOrientation.Horizontal)
       .HtmlAttributes(new { style = "width: 100%; height: 400px; " })
       .Panes(hPanes =>
           {
                hPanes.Add()
                      .Size("200px")
                      .MinSize("100px")
                      .Content(
                          @<text>
                               @RenderTreeView()
      </text>
                      )
                      .HtmlAttributes(new { id = "left_pane" });
     
                hPanes.Add()
                      .Scrollable(true)
        .HtmlAttributes(new { id = "right_pane" });
                      .Content(
                          @<text><p>test</p></text>
                    );
            })
    }
    Button:
    <button class="k-button" id="btnAdd" onclick="addSomething()"><span class="k-icon k-add"></span></button>
    Javascript:
    function addSomething() {
            var window = $("#popupSplitter ").data("kendoWindow");
            window.center();
            window.open();
    }

    Am I missing something here?
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 08 Jul 2013 Link to this post

    Hello Dietmar,

    Javascript size calculations don't work inside hidden containers. Please trigger a manual layout adjustment for the Splitter (with splitterObject.trigger("resize") ) in the Window's activate event, when the Window's opening animation has completed.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dietmar
    Dietmar avatar
    13 posts
    Member since:
    May 2012

    Posted 08 Jul 2013 Link to this post

    Thanks, works like a charm.
Back to Top