Nested Kendo splitter fails

2 posts, 0 answers
  1. Anamika
    Anamika avatar
    124 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
    124 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
  3. Kendo UI is VS 2017 Ready
Back to Top