Splitter inside kendo window some weird behaviour

[Anamika]

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>

[Dimo]

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