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>
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>