Splitter inside kendo window some weird behaviour

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

    Posted 22 Jul 2014 Link to this post

    Hello,

    i am displaying a partialview with splitter having 2 vertical panes. upper vertical pane is non rezizable and lower has 2 horizontal panes. Left side has a treeview and right side grid. When the window Comes up sometimes the splitter loks oka nd sometimes there is a lot of gray space inbetween both vertical panes like attached Image. on resizing window sometime one pane vanishes completely.
    My code goes like this and i want to fix the height of lower vertical pane and make grid and treeview use entire spaace.

    @(Html.Kendo().Splitter()
    .Name("vertical")
    .Orientation(SplitterOrientation.Vertical)
    .Panes(verticalPanes =>
    {

    verticalPanes.Add()
    .Size("50px")
    .HtmlAttributes(new { id = "bottom-pane" })
    .Resizable(false)
    .Collapsible(false)
    .Content(@<text><div class="pane-content">Suchen:
    @Html.TextBox("searchbox")<input class="k-button" id="searchBtn" type="button" value="Suchen" />
    <label><input type="checkbox" id="IsNew-checkbox" checked="checked" /> Archivierte Aufträge Anzeigen</label>
    </div></text>);
    verticalPanes.Add()
    .HtmlAttributes(new { id = "top-pane" })
    .Scrollable(true)
    .Collapsible(true)
    .Size("550px")
    .Content(
    Html.Kendo().Splitter()
    .Name("horizontal")
    .Panes(horizontalPanes =>
    {
    horizontalPanes.Add()
    .HtmlAttributes(new { id = "left-pane" })
    .Collapsible(true)
    .Content(@<text>

    @(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new { @class = "demo-section" })
    .DataTextField("Text")
    .DataSource(dataSource => dataSource
    .Read(readtree => readtree
    .Action("ReadObjects", "Objekt")
    )
    )
    )

    </text>);


    horizontalPanes.Add()
    .HtmlAttributes(new { id = "right-pane" })
    .Collapsible(true)
    .Content(@<text>
    @(Html.Kendo().Grid(Model)
    .Name("Grid")
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
    if (Model != null)
    {
    foreach (System.Data.DataColumn column in Model.Columns)
    {
    model.Field(column.ColumnName, column.DataType);
    }
    }
    })
    .Read(read => read.Action("Object_Read", "Objekt").Data("addSearch"))
    .ServerOperation(false)
    )
    .Columns(columns =>
    {

    for (int i = 0; i < ViewBag.ListHeader.GetLength(0); i++)
    {

    if (ViewBag.ListHeader[i, 1] == "ObjektID")
    {
    columns.Bound(ViewBag.ListHeader[i, 0]).Title(ViewBag.ListHeader[i, 1]).Visible(false);
    }
    else if (ViewBag.ListHeader[i, 1] == "Typ")
    {
    columns.Bound(ViewBag.ListHeader[i, 0]).Title(ViewBag.ListHeader[i, 1]).Visible(false);
    }
    else if (ViewBag.ListHeader[i, 1] == "imagePath")
    {
    columns.Bound(ViewBag.ListHeader[i, 0]).Title("Typ").ClientTemplate("#= AnspracheTemplate(imagePath) #");
    }
    else
    {
    columns.Bound(ViewBag.ListHeader[i, 0]).Title(ViewBag.ListHeader[i, 1]);
    }
    }

    })
    .Selectable(selectable => selectable
    .Mode(GridSelectionMode.Single))

    .Pageable(pageable => pageable
    .PageSizes(true)
    .ButtonCount(20))
    )
    </text>);
    }).ToHtmlString()
    );


    })
    )

    <style scoped>
    #example {
    text-align: center;
    }
    .demo-section {
    vertical-align: top;
    width: 320px;
    text-align: left;
    }

    #vertical
    {
    border-width: 0;
    }
    #top-pane
    {
    overflow: visible;
    z-index: 2;
    }
    #middle-pane {
    background-color: rgba(60, 70, 80, 0.10);
    }
    #bottom-pane {
    background-color: rgba(60, 70, 80, 0.15);
    }
    #left-pane {
    background-color: rgba(60, 70, 80, 0.05);
    }
    #center-pane {
    background-color: rgba(60, 70, 80, 0.05);
    }
    #right-pane {
    background-color: rgba(60, 70, 80, 0.05);
    }

    </style>
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 24 Jul 2014 Link to this post

    Hi Anamika,

    The problem is caused by the fact that the Splitter is initialized in an invisible Kendo UI Window. In such cases Javascript size calculations don't work and the Splitter cannot adjust its layut properly.

    Please use kendo.resize() or the Splitter's resize() method in the Window's activate event:

    kendo.resize()
    http://docs.telerik.com/kendo-ui/api/framework/kendo#methods-resize

    widget resize()
    http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-in-responsive-web-pages#individual-widget-resizing

    Window activate
    http://docs.telerik.com/kendo-ui/api/web/window#events-activate

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top