This is a migrated thread and some comments may be shown as answers.

How to resize RadPane when another RadPane is collapsed

10 Answers 366 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Lina asked on 01 Mar 2016, 11:29 AM

hello,

i have 3 RadPane, when the button btnFilterVisible on the first RadPane is pressed the second RadPane filterPane is collapsed and this should give more space the the third RadPane resultsPane. The height of resultsPane is 100%
how can i change the size dynamically when we press the button (to show or hide the second RadPane)?
when i set the resultsPane height in filterPane_Collapsed there was no affect on the resultsPane size.

<telerik:RadSplitter ID="splitterContent" runat="server" Width="100%" Height="100%" Orientation="Horizontal">

<telerik:RadPane ID="searchPane" runat="server" Width="100%" Height="80px">

<asp:Button ID="btnFilterVisible" runat="server" Text="Hide Filter" OnClientClick="btnFilterVisible_clicked()" />

</telerik:RadPane>

<telerik:RadPane ID="filterPane" runat="server" Width="100%" Height="200px" OnClientExpanded="filterPane_Expanded" OnClientCollapsed="filterPane_Collapsed">

</telerik:RadPane>

<telerik:RadPane ID="resultsPane" runat="server" Width="100%" Height="100%" Scrolling="Both" >

</telerik:RadPane>

</telerik:RadSplitter>

<script type="text/javascript">

function btnFilterVisible_clicked()

{

var splitter = $find("<%= splitterContent.ClientID %>");

var filterPane = splitter.getPaneById("<%= filterPane.ClientID %>");

var resultsPane = splitter.getPaneById("<%= resultsPane.ClientID %>");

var filterText = $("#<%=btnFilterVisible.ClientID%>").val();

if (filterText == "Hide Filter")

{

filterPane.collapse();

$("#<%=btnFilterVisible.ClientID%>").val("Show Filter");

}

else

{

filterPane.expand();

$("#<%=btnFilterVisible.ClientID%>").val("Hide Filter");

}

function filterPane_Collapsed()

{

//resize resultsPane

}

function filterPane_Expanded()

{

//resize resultsPane

}

</script>

10 Answers, 1 is accepted

answered on 07 Mar 2016, 07:17 AM

Hi Lina,

The simplest way to achieve your target behavior is to cances the PostBack of the Show/Hide fillter button:

<telerik:RadSplitter ID="splitterContent" runat="server" Width="100%" Height="100%" Orientation="Horizontal">

<telerik:RadPane ID="searchPane" runat="server" Width="100%" Height="80px">

<asp:Button ID="btnFilterVisible" runat="server" Text="Hide Filter" OnClientClick="btnFilterVisible_clicked(); return false;" />

...

Otherwise, if you will need to handle the server click of the button and reset the size of all RadPanes in it, in order to force the Splitter recalculate their size:

<telerik:RadSplitter ID="splitterContent" runat="server" Width="100%" Height="100%" Orientation="Horizontal">

<telerik:RadPane ID="searchPane" runat="server" Width="100%" Height="80px">

<asp:Button ID="btnFilterVisible" runat="server" Text="Hide Filter"

OnClick="btnFilterVisible_Click" />

</telerik:RadPane>

<telerik:RadPane ID="filterPane" runat="server" Width="100%" Height="200px" BackColor="Red"

OnClientExpanded="filterPane_Expanded" OnClientCollapsed="filterPane_Collapsed">

</telerik:RadPane>

<telerik:RadPane ID="resultsPane" runat="server" Width="100%" Height="100%" Scrolling="Both" BackColor="Gray">

</telerik:RadPane>

</telerik:RadSplitter>

</form>

protected void btnFilterVisible_Click(object sender, EventArgs e)

{

filterPane.Collapsed = !filterPane.Collapsed;

searchPane.Height = Unit.Pixel(80);

filterPane.Height = Unit.Pixel(200);

resultsPane.Height = Unit.Empty;

}

Regards,
Vessy
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 07 Mar 2016, 09:30 AM

Thanks Vessy for the response, but the height isn't modified.

when i tried first solution the result pane size isn't resized. even if i add code to resize it.

is it because of the grid inside the pane? if so, how can i resize it as well?

in the seconds solution, the Height property name isn't correct. how should i resize it? (so the grid content will be resized as well)?

<telerik:RadSplitter ID="splitterContent" runat="server" Width="100%" Height="100%" Orientation="Horizontal">

<telerik:RadPane ID="searchPane" runat="server" Width="100%" Height="80px">

<asp:Button ID="btnFilterVisible" runat="server" Text="Hide Filter" OnClientClick="btnFilterVisible_clicked(); return false;" />

</telerik:RadPane>

<telerik:RadPane ID="filterPane" runat="server" Width="100%" Height="200px" OnClientExpanded="filterPane_Expanded" OnClientCollapsed="filterPane_Collapsed">

</telerik:RadPane>

<telerik:RadPane ID="resultsPane" runat="server" Width="100%" Height="100%" Scrolling="Both" >

<asp:Button ID="btnExportToExcel" runat="server" Text="Export to Excel" OnClick="btnExportToExcel_Click" />

<asp:Button ID="btnExportToExcelAll" runat="server" Text="Export to Excel All Netsted" OnClick="btnExportToExcelAll_Click" />

<telerik:RadGrid ID="OrderSourceGrid" runat="server" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="False"

GridLines="None" OnItemCommand="OrderSourceGrid_ItemCommand" OnNeedDataSource="OrderSourceGrid_NeedDataSource" OnItemDataBound="OrderSourceGrid_ItemDataBound"

OnDetailTableDataBind="OrderSourceGrid_DetailTableDataBind" OnPreRender="OrderSourceGrid_PreRender" OnItemCreated="OrderSourceGrid_ItemCreated"

Width="98%" Height="550" OnExportCellFormatting="OrderSourceGrid_ExportCellFormatting" ShowFooter="false" >

</telerik:RadGrid>

</telerik:RadPane>

</telerik:RadSplitter>

<script type="text/javascript">

function btnFilterVisible_clicked()

{

var splitter = $find("<%= splitterContent.ClientID %>");

var filterPane = splitter.getPaneById("<%= filterPane.ClientID %>");

var resultsPane = splitter.getPaneById("<%= resultsPane.ClientID %>");

var filterText = $("#<%=btnFilterVisible.ClientID%>").val();

if (filterText == "Hide Filter")

{

filterPane.collapse();

$("#<%=btnFilterVisible.ClientID%>").val("Show Filter");

}

else

{

filterPane.expand();

$("#<%=btnFilterVisible.ClientID%>").val("Hide Filter");

}

function filterPane_Collapsed()

{

//resize resultsPane

var windowheight = $(window).height();

$("#resultsPane").height(windowheight - 50);

}

function filterPane_Expanded()

{

//resize resultsPane

var windowheight = $(window).height();

$("#resultsPane").height(windowheight - 400);

}

</script>

answered on 10 Mar 2016, 09:26 AM

Splitter.zip

Hi Lina,

When a RadPane is collapsed, the resizing of the other panes is made out of the box. Please note that when a RadPane size is changed client size it looses it responsive capabilities and its size should be manually handled from now on. I am attaching a sample page, demonstrating the default resizing of the panes. I also tried the resizing logic provided in your last reply and it is also working properly on the attached page.

If this is not the behavior target by you, can you elaborate on which is the exact thing which is not behaving as expected (e.g. if the size of the result pane is 400pw, but you want it to be 500, etc).

Regards,
Vessy
Telerik

answered on 10 Mar 2016, 11:54 AM

Thanks Vessy,

When i'm trying to implement your example on my code, the grid doesn't resized to maximize size. i have grid with 4 levels.
i added part of the complex grid i have to your sample. when i press on hide and then try to open second level grid items, the grid doesn't take advantage of the place we have in the bottom. see attached files.

do you have a suggestion how to make it work? it seems like the grid size isn't modified to the maximum.

i can't attached zip or aspx pages, so the altered pages are bellow.

Regards

Lina

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Splitter.aspx.cs" Inherits="Splitter" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

/*overflow: hidden;*/

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadSplitter ID="splitterContent" runat="server" Width="100%" Height="100%" Orientation="Horizontal">

<telerik:RadPane ID="searchPane" runat="server" Width="100%" Height="80px">

this is search pane

<asp:Button ID="btnFilterVisible" runat="server" Text="Hide Filter" OnClientClick="btnFilterVisible_clicked(); return false;" />

</telerik:RadPane>

<telerik:RadPane ID="filterPane" runat="server" Width="100%" Height="200px" OnClientExpanded="filterPane_Expanded" OnClientCollapsed="filterPane_Collapsed">

this is filter pane

</telerik:RadPane>

<telerik:RadPane ID="resultsPane" runat="server" Width="100%" Height="100%" Scrolling="Both" BackColor="Red">

<asp:Button ID="btnExportToExcel" runat="server" Text="Export to Excel" OnClick="btnExportToExcel_Click" />

<asp:Button ID="btnExportToExcelAll" runat="server" Text="Export to Excel All Netsted" OnClick="btnExportToExcelAll_Click" />

<telerik:RadGrid ID="OrderSourceGrid"

runat="server"

AutoGenerateColumns="False"

AllowSorting="True"

AllowMultiRowSelection="False"

AllowPaging="False"

GridLines="None"

OnNeedDataSource="OrderSourceGrid_NeedDataSource"

OnDetailTableDataBind="OrderSourceGrid_DetailTableDataBind"

Width="98%" Height="550"

ShowFooter="false" >

<ExportSettings ExportOnlyData="true" IgnorePaging="true" FileName="SalesByChannleFull"></ExportSettings>

<MasterTableView DataKeyNames="OrderSource,GridSource" AllowMultiColumnSorting="True" GroupLoadMode="Server" CommandItemDisplay="Top" >

<CommandItemSettings ShowAddNewRecordButton="false" ShowExportToExcelButton="true"></CommandItemSettings>

<DetailTables>

<telerik:GridTableView DataKeyNames="OrderSource,MarketingChannel,GridSource" Name="ChannelGrid" runat="server" >

<DetailTables>

</DetailTables>

<Columns>

<telerik:GridBoundColumn SortExpression="MarketingChannel" HeaderText="MarketingChannel"

HeaderButtonType="TextButton"

DataField="MarketingChannel" UniqueName="MarketingChannel">

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" Width="80px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="OrderSource" HeaderText="OrderSource"

HeaderButtonType="TextButton"

DataField="OrderSource" UniqueName="OrderSource">

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" Width="80px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="c1" HeaderText="c1"

HeaderButtonType="TextButton"

DataField="c1" UniqueName="c1">

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" Width="80px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="c2" HeaderText="c2"

HeaderButtonType="TextButton"

DataField="c2" UniqueName="c2">

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" Width="80px"/>

</telerik:GridBoundColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn SortExpression="OrderSource" HeaderText="OrderSource"

HeaderButtonType="TextButton"

DataField="OrderSource" UniqueName="OrderSource">

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" Width="80px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="c1" HeaderText="c1"

HeaderButtonType="TextButton"

DataField="c1" UniqueName="c1">

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" Width="80px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="c2" HeaderText="c2"

HeaderButtonType="TextButton"

DataField="c2" UniqueName="c2">

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" Width="80px"/>

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowDragToGroup="false">

<Scrolling AllowScroll="true" ></Scrolling>

</ClientSettings>

</telerik:RadGrid>

</telerik:RadPane>

</telerik:RadSplitter>

<script type="text/javascript">

var $ = $telerik.$;

function btnFilterVisible_clicked() {

var splitter = $find("<%= splitterContent.ClientID %>");

var filterPane = splitter.getPaneById("<%= filterPane.ClientID %>");

var resultsPane = splitter.getPaneById("<%= resultsPane.ClientID %>");

var filterText = $("#<%=btnFilterVisible.ClientID%>").val();

if (filterText == "Hide Filter") {

filterPane.collapse();

$("#<%=btnFilterVisible.ClientID%>").val("Show Filter");

}

else {

filterPane.expand();

$("#<%=btnFilterVisible.ClientID%>").val("Hide Filter");

}

function filterPane_Collapsed() {

//resize resultsPane

var windowheight = $(window).height();

$("#resultsPane").height(windowheight - 50);

}

function filterPane_Expanded() {

//resize resultsPane

var windowheight = $(window).height();

$("#resultsPane").height(windowheight - 400);

}

</script>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

public partial class Splitter : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

//protected void btnFilterVisible_Click(object sender, EventArgs e)

//{

// //filterPane.Collapsed = !filterPane.Collapsed;

// //searchPane.Height = Unit.Pixel(80);

// //filterPane.Height = Unit.Pixel(200);

// //resultsPane.Height = Unit.Empty;

//}

protected void btnExportToExcel_Click(object sender, EventArgs e)

{

}

protected void btnExportToExcelAll_Click(object sender, EventArgs e)

{

}

protected void OrderSourceGrid_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

DataTable table = new DataTable();

table.Columns.Add("c1", typeof(int));

table.Columns.Add("c2", typeof(int));

table.Columns.Add("OrderSource", typeof(string));

table.Columns.Add("GridSource", typeof(string));

for (int count = 1; count <= 10; count++)

{

DataRow row = table.NewRow();

row["c1"] = 1;

row["c2"] = 2;

row["OrderSource"] = string.Format("OrderSource{0}",count);

row["GridSource"] = "GridOrderSource";

table.Rows.Add(row);

}

//      int[] dataSource = new int[]{4234,23,4,24,32,4,24,23,442,423,4,234,23,42,34,2,3,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20};

(sender as RadGrid).DataSource = table;

}

protected void OrderSourceGrid_DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)

{

GridDataItem dataItem = (GridDataItem)e.DetailTableView.ParentItem;

switch (e.DetailTableView.Name)

{

case "ChannelGrid":

{

UpdateDataSource_GridChannel(e.DetailTableView, false, dataItem);

break;

}

protected void UpdateDataSource_GridChannel(GridTableView channelGrid, bool bRebind, GridDataItem parentItem)

{

//GridDataItem parentItem = (channelGrid.NamingContainer as GridNestedViewItem).ParentItem as GridDataItem;

string OrderSource = parentItem.GetDataKeyValue("OrderSource") == null ? null : parentItem.GetDataKeyValue("OrderSource").ToString();

DataTable table = new DataTable();

table.Columns.Add("c1", typeof(int));

table.Columns.Add("c2", typeof(int));

table.Columns.Add("OrderSource", typeof(string));

table.Columns.Add("GridSource", typeof(string));

table.Columns.Add("MarketingChannel", typeof(string));

for (int count = 1; count <= 15; count++)

{

DataRow row = table.NewRow();

row["c1"] = 1;

row["c2"] = 2;

row["OrderSource"] = OrderSource;

row["MarketingChannel"] = string.Format("MarketingChannel{0}",count);

row["GridSource"] = "GridChannel";

table.Rows.Add(row);

}

//update grid DataSource

(channelGrid).DataSource = table;

}

Accepted

answered on 14 Mar 2016, 11:58 AM

Splitter.zip

Hello Lina,

This behavior is expected as the Grid in the provided by you configuration has a fixed height (550px). You can achieve the desired fluid design by going through the following steps:

Set height of the Grid in percentage so that it will be resized depending on the available space:

<telerik:RadGrid ID="OrderSourceGrid"

    runat="server"

    Width="98%" Height="100%"

    ...
Wrap the export buttons above the Grid into an additional RadPane, so their height will be excluded from the Grid's height:

<telerik:RadPane ID="AdditionalPane1" runat="server" Height="25px">

<asp:Button ID="Button1" runat="server" Text="Export to Excel" OnClick="btnExportToExcel_Click" />

<asp:Button ID="Button2" runat="server" Text="Export to Excel All Netsted" OnClick="btnExportToExcelAll_Click" />

</telerik:RadPane>
Set the resize mode of the Splitter to EndPane so that the pane holding the Grid will be resized on collapse/expand of the other panes:

<telerik:RadSplitter ID="splitterContent" runat="server" Width="100%" Height="100%" Orientation="Horizontal" ResizeMode="EndPane">
Remove the custom resizing logic of the Splitter in order o be able to use its built-in responsive functionality:

function filterPane_Collapsed() {

    //resize resultsPane

    //var windowheight = $(window).height();

    //$("#resultsPane").height(windowheight - 50);

}

function filterPane_Expanded() {

    //resize resultsPane

    //var windowheight = $(window).height();

    //$("#resultsPane").height(windowheight - 400);

}
[Optional] Remove the scrolling of the Pane holding the Grid, so only the Grid's scrolling will be used (in case it is taking 100% of the RadPane's height):

<telerik:RadPane ID="resultsPane" runat="server" Width="100%" Height="100%" Scrolling="None" BackColor="Red">

For convenience I am attaching a modified version of the provided page so you can examine the described configurations on your side.

Regards,
Vessy
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

answered on 14 Mar 2016, 12:45 PM

Hi Vessy,

without setting height tot he grid i don't see the grid content.

might be because i have the following between the RadScriptManager and the RadSplitter

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"

DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<ClientEvents ></ClientEvents>

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="OrderSourceGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="OrderSourceGrid" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnFilterVisible">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="OrderSourceGrid" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Accepted

answered on 14 Mar 2016, 04:29 PM

Hi Lina,

Yes, when a control is updated via AJAX request it is wrapped into an update panel, which height also have to be set in percentage in order for the updated control to occupy its height properly:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"

DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<ClientEvents ></ClientEvents>

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="OrderSourceGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="OrderSourceGrid" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="100%"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnFilterVisible">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="OrderSourceGrid" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="100%"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Regards,
Vessy
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.