How to resize RadPane when another RadPane is collapsed

[Lina]

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>

[Lina]

is it the correct place to post this question?

[Vessy]

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

[Lina]

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>

[Vessy]

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

[Lina]

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

 

[Vessy]

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

[Lina]

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>

[Vessy]

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

[Lina]

The combination of all your answers solved the problem.
Thank you Vessy for your support.

Regards,
Lina

[Vessy]

Hi,

You are welcome, Lina - I am glad the provided information was helpful for you.

Regards,
Vessy
Telerik