Nested Kendo splitter fails

2 posts, 0 answers
  1. Anamika
    Anamika avatar
    130 posts
    Member since:
    Mar 2014

    Posted 29 Sep 2014 Link to this post

    Hello,

    my requirement is parent splitter has 2 vertical panes. Top pane has serach box and search button, lower vertical pane should have 2 horizontal pane and each horizontal pane should have 2 vertical panes each. First 2 steps worked fine but when i am splitting left horizontal pane to 2 vertical panes those 2 panes show horizontally and not vertically. Here is my razor view code, what am i possibly doing wrong

    @(Html.Kendo().Splitter()
          .Name("objvertical")
          .Orientation(SplitterOrientation.Vertical)
          .Panes(objverticalPanes =>
          {          
              objverticalPanes.Add()
                 .Size("50px")
                 .HtmlAttributes(new { id = "obj-top-pane" })
                 .Resizable(false)
                 .Collapsible(false)
                 .Content(@<text><div class="pane-content">Suchen:
     @Html.TextBox("searchbox")<input class="k-button" id="searchBtn" type="submit" value="Suchen" /> <input class="k-button" id="selectBtn" type="button" value="OK" style="width:45px" onclick="SelectObject();" />
                                             </div></text>);
               objverticalPanes.Add()
                  .HtmlAttributes(new { id = "obj-bottom-pane" })
                  .Scrollable(false)
                  .Collapsible(false)
                  .Content(
                    Html.Kendo().Splitter()
                        .Name("horizontal")
                        .HtmlAttributes(new { style = "height: 100%;" })
                        .Panes(horizontalPanes =>
                        {
                            horizontalPanes.Add()
                                .HtmlAttributes(new { id = "top-pane" })
                                .Size("320px")
                                .Scrollable(false)
                  .Collapsible(false)
                                .Content(
                                Html.Kendo().Splitter()
                        .Name("vertical")
                        .HtmlAttributes(new { style = "height: 50%;" })
                        .Panes(verticalPanes =>
                            {
                             verticalPanes.Add()
                  .Size("100px")
                  .HtmlAttributes(new { id = "middle-pane" })
                   .Collapsible(true)
                  .Content(@<div class="pane-content">
                                <h3>left top</h3>
                                <p>Resizable only.</p>
                            </div>);

              verticalPanes.Add()
                  .Size("100px")
                  .HtmlAttributes(new { id = "bottom-pane" })
                  .Content(@<div class="pane-content">
                                <h3>left bottom</h3>
                                <p>Non-resizable and non-collapsible.</p>
                            </div>);
         }).ToHtmlString()

                        );

                            horizontalPanes.Add()
                                .HtmlAttributes(new { id = "right-pane" })
                                .Content(@<div class="pane-content">
                                            <h3>right most</h3>
                                            <p>Resizable only.</p>
                                          </div>);

                        }).ToHtmlString()
                  );




          })
         )
    Attached image left top and bottom show side by side
    Anamika
  2. Anamika
    Anamika avatar
    130 posts
    Member since:
    Mar 2014

    Posted 30 Sep 2014 in reply to Anamika Link to this post

    please ignore this post  .Orientation(SplitterOrientation.Vertical) tag was missing inside
Back to Top