RadSplitter OnClientLoad not called

9 posts, 0 answers
  1. Igor
    Igor avatar
    26 posts
    Member since:
    Nov 2010

    Posted 25 Nov 2010 Link to this post

    I have a problem with raising the event OnClientLoad inside the RadSplitter. I have instantiated  3 Radsplitter inside a RadMultiPage. 
    If I click the tabs, nothing happens, only if a click the last tab the event OnClientLoad is raised and the alarm dialogbox is shown.


    Here my default.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
            BorderSize="0">
            <telerik:RadPane ID="PanelTGDet" runat="server" Locked="true" Height="24" Scrolling="None">
                <telerik:RadTabStrip ID="tabStripTalkGroupDetails" OnTabClick="tabStripTalkGroupDetails_OnTabClick"
                    runat="server" MultiPageID="mpageTalkGroupDetails">
                    <Tabs>
                    </Tabs>
                </telerik:RadTabStrip>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane3" runat="server" Scrolling="Y" Height="100%">
                <telerik:RadMultiPage ID="mpageTalkGroupDetails" OnPageViewCreated="mpageTalkGroupDetails_PageViewCreated"
                    SelectedIndex="0" runat="server">
                </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </asp:Content>

    I have created 3 Tabs dynamically:
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                AddTab("Orango");
                AddTab("OrangoTango");
                AddTab("AnotherOrango");
            }
        }
     
        private void AddTab(string tabName)
        {
            RadTab tab = new RadTab();
            tab.Text = tabName;
            tabStripTalkGroupDetails.Tabs.Add(tab);
     
            RadPageView pageView = new RadPageView();
            pageView.ID = tabName;
            mpageTalkGroupDetails.PageViews.Add(pageView);
        }
     
        protected void tabStripTalkGroupDetails_OnTabClick(object sender, RadTabStripEventArgs e)
        {
        }
     
        protected void mpageTalkGroupDetails_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            string userControlName = string.Empty;
     
            switch (e.PageView.ID)
            {
       
                case "Orango":
                    userControlName = "~/Orango.ascx";
                    break;
     
                case "OrangoTango":
                    userControlName = "~/Orango.ascx";
                    break;
     
                case "AnotherOrango":
                    userControlName = "~/Orango.ascx";
                    break;
     
                default:
                    break;
            }
     
            if (!string.IsNullOrEmpty(userControlName))
            {
                Control userControl = Page.LoadControl(userControlName);
                userControl.ID = e.PageView.ID + "_userControl";
     
                e.PageView.Controls.Add(userControl);
            }
        }
    }

    My custom control with the splitter Orango.ascx look like:
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Orango.ascx.cs" Inherits="Orango" %>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
     
        <script type="text/javascript">
            function MySplitloadedORANGO(sender, args) {
                alert("SplitterLoad ORANGO");
            }
     
     
        </script>
     
    </telerik:RadCodeBlock>
     
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
       OnClientLoad="MySplitloadedORANGO" BorderSize="0" Height="100%">
    </telerik:RadSplitter>

    The same problem occurs if I create 3 instances of Orango.ascx inside the RadPanel. What is wrong?
     
    <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
            BorderSize="0">
            <telerik:RadPane ID="PanelTGDet" runat="server" Locked="true" Height="24" Scrolling="None">
                <telerik:RadTabStrip ID="tabStripTalkGroupDetails" OnTabClick="tabStripTalkGroupDetails_OnTabClick"
                    runat="server" MultiPageID="mpageTalkGroupDetails">
      
    <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
            BorderSize="0">
            <telerik:RadPane ID="PanelTGDet" runat="server" Locked="true" Height="24" Scrolling="None">
                <telerik:RadTabStrip ID="tabStripTalkGroupDetails" OnTabClick="tabStripTalkGroupDetails_OnTabClick"
                    runat="server" MultiPageID="mpageTalkGroupDetails">
                    <Tabs>
                    </Tabs>
                </telerik:RadTabStrip>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane3" runat="server" Scrolling="Y" Height="100%">
                <telerik:RadMultiPage ID="mpageTalkGroupDetails" OnPageViewCreated="mpageTalkGroupDetails_PageViewCreated"
                    SelectedIndex="0" runat="server">
                </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </asp:Content>
    <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
            BorderSize="0">
            <telerik:RadPane ID="PanelTGDet" runat="server" Locked="true" Height="24" Scrolling="None">
                <telerik:RadTabStrip ID="tabStripTalkGroupDetails" OnTabClick="tabStripTalkGroupDetails_OnTabClick"
                    runat="server" MultiPageID="mpageTalkGroupDetails">
                    <Tabs>
                    </Tabs>
                </telerik:RadTabStrip>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane3" runat="server" Scrolling="Y" Height="100%">
                <telerik:RadMultiPage ID="mpageTalkGroupDetails" OnPageViewCreated="mpageTalkGroupDetails_PageViewCreated"
                    SelectedIndex="0" runat="server">
                </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </asp:Content>
                 <Tabs>
                    </Tabs>
                </telerik:RadTabStrip>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane3" runat="server" Scrolling="Y" Height="100%">
                <telerik:RadMultiPage ID="mpageTalkGroupDetails" OnPageViewCreated="mpageTalkGroupDetails_PageViewCreated"
                    SelectedIndex="0" runat="server">
                </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </asp:Content>

    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
            BorderSize="0">
            <telerik:RadPane ID="PanelTGDet" runat="server" Locked="true" Height="24" Scrolling="None">
                <telerik:RadTabStrip ID="tabStripTalkGroupDetails" OnTabClick="tabStripTalkGroupDetails_OnTabClick"
                    runat="server" MultiPageID="mpageTalkGroupDetails">
                    <Tabs>
                    </Tabs>
                </telerik:RadTabStrip>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane3" runat="server" Scrolling="Y" Height="100%">
                <telerik:RadMultiPage ID="mpageTalkGroupDetails" OnPageViewCreated="mpageTalkGroupDetails_PageViewCreated"
                    SelectedIndex="0" runat="server">
                </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
            BorderSize="0">
            <telerik:RadPane ID="PanelTGDet" runat="server" Locked="true" Height="24" Scrolling="None">
                <telerik:RadTabStrip ID="tabStripTalkGroupDetails" OnTabClick="tabStripTalkGroupDetails_OnTabClick"
                    runat="server" MultiPageID="mpageTalkGroupDetails">
                    <Tabs>
                    </Tabs>
                </telerik:RadTabStrip>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane3" runat="server" Scrolling="Y" Height="100%">
                <telerik:RadMultiPage ID="mpageTalkGroupDetails" OnPageViewCreated="mpageTalkGroupDetails_PageViewCreated"
                    SelectedIndex="0" runat="server">
                </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
     
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 26 Nov 2010 Link to this post

    Hi Igor,

    This is expected behavior due to the fact that the multipage is inside another splitter. To avoid this you need to set ResizeWithParentPane property of the UserControl's splitter to false.

    In such scenarios the RadSplitter that is inside the UserControl is registered as a nested splitter to the parent pane, but it is not possible to register multiple nested splitters to the pane. That is why the ClientLoad event is fired only for the last splitter.

    I hope this helps.

    Kind regards,
    Dobromir
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Igor
    Igor avatar
    26 posts
    Member since:
    Nov 2010

    Posted 06 Dec 2010 Link to this post

    Thank you for your answer, now I understand.
    I have another question about this scenario. On each tab I want to place a RadGrid (Inside RadSplitter1 of Orango.ascx). If I use ResizeWithParentPane=false how can I resize the RadGrid to fill out the RadSplitter? 
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Dec 2010 Link to this post

    Hi Igor,

    By setting the RadSplitter's ResizeWithParentPane="false" the nested splitter no longer automatically occupies the entire RadPane in which it resides. This does not affect the resizing of the nested splitter when you resize the browser window.

    To achieve this functionality you need to set Width and Height properties to nested splitter as well. In this scenario the splitter inside the user control should be declared as follows:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
       OnClientLoad="MySplitloadedORANGO" BorderSize="0" Width="100%" Height="100%">
    </telerik:RadSplitter>



    Regards,
    Dobromir
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Igor
    Igor avatar
    26 posts
    Member since:
    Nov 2010

    Posted 14 Dec 2010 Link to this post

    Hi Dobromir,

    your suggestion  works. When I click on tab the grid fill out the parent splitter and it looks great, but my application is a little more complex.
    I have also an horizontal splitbar up to the Multipage to resize RadPanel3. When I move it, the Multipage becomes bigger, but the splitter in custom control doesn't resize (ResizeWithParentPane=false). The same effect occurs when I resize the browser window .  I think to change manually the size of RadSplitter1 inside the custom control using javascript. How  it is possible? 
  7. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 14 Dec 2010 Link to this post

    Hi Igor,

    When nested RadSplitter have width and height properties set in percentage values it falls under the same requirements when you want a splitter to occupy the entire page - you need to make sure that all of its parents have set height. In this specific scenario you need to set height to the RadMultiPage and the created PageView controls, e.g.:

    <telerik:RadMultiPage ID="mpageTalkGroupDetails" OnPageViewCreated="mpageTalkGroupDetails_PageViewCreated"
                        SelectedIndex="0" runat="server" Height="100%">

    RadPageView pageView = new RadPageView();
    pageView.ID = tabName;
    pageView.Height = Unit.Percentage(100);
    mpageTalkGroupDetails.PageViews.Add(pageView);


    For your convenience I have attached a sample page.

    All the best,
    Dobromir
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. Igor
    Igor avatar
    26 posts
    Member since:
    Nov 2010

    Posted 15 Dec 2010 Link to this post

    Hi Dobromir,

    Thank you very much for the example. I have modified it and added a radgrid.
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Orango.ascx.cs" Inherits="Orango" %>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    </telerik:RadCodeBlock>
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
        Width="100%" Height="100%" ResizeWithParentPane="false">
        <telerik:RadPane ID="RadPane2" Height="64px" runat="server">
            <asp:Label runat="server" Text="Below an Orango grid " />
        </telerik:RadPane>
        <telerik:RadPane ID="RadPane1" runat="server">
            <telerik:RadGrid ID="gridOrangos" runat="server" OnNeedDataSource="gridOrangos_NeedDataSource"
                ShowFooter="true">
                <MasterTableView DataKeyNames="OrangoName" ClientDataKeyNames="OrangoName">
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true">
                    <Selecting AllowRowSelect="true" />
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                </ClientSettings>
            </telerik:RadGrid>
        </telerik:RadPane>
    </telerik:RadSplitter>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Orango.ascx.cs" Inherits="Orango" %>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    </telerik:RadCodeBlock>
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" PanesBorderSize="0"
        Width="100%" Height="100%" ResizeWithParentPane="false">
        <telerik:RadPane ID="RadPane2" Height="64px" runat="server">
            <asp:Label runat="server" Text="Below an Orango grid " />
        </telerik:RadPane>
        <telerik:RadPane ID="RadPane1" Width="100%" Height="100%" runat="server">
            <telerik:RadGrid ID="gridOrangos" runat="server" OnNeedDataSource="gridOrangos_NeedDataSource"
                ShowFooter="true">
                <MasterTableView DataKeyNames="OrangoName" ClientDataKeyNames="OrangoName">
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true">
                    <Selecting AllowRowSelect="true" />
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                </ClientSettings>
            </telerik:RadGrid>
        </telerik:RadPane>
    </telerik:RadSplitter>

    protected void gridOrangos_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            DataTable dt = new DataTable();
     
            dt.Columns.Add("OrangoName", Type.GetType("System.String"));
            dt.Rows.Add(new object[] { "bingo" });
            dt.Rows.Add(new object[] { "bongo" });
            dt.Rows.Add(new object[] { "Cita" });
     
            gridOrangos.DataSource = dt;
        }

    The result is that only on the first tab you can see the radgrid and the vertical resize with the splitbar doesn't affect the size of the  grid. On the second and third tab the grid is not visible. Do I have missed something?
    The full modified project is on  default02.zip
  9. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 20 Dec 2010 Link to this post

    Hi Igor,

    The problem occurs because the height value of the dynamically created PageView is not persisted through postbacks that are caused by clicking on the tab. To avoid this you need to call AddTab() method every time, not only on initial load. You can simply remove the check for a postback in the Page_Init, e.g.:
    protected void Page_Init(object sender, EventArgs e)
    {
               AddTab("Orango");
            AddTab("OrangoTango");
            AddTab("AnotherOrango");
     
            tabStripTalkGroupDetails.SelectedIndex = 0;
            mpageTalkGroupDetails.SelectedIndex = 0;
       
    }

    Also, by design RadSplitter persists the size of its panes over postbacks, so you will need to clear the values of the "free sized" pane (that is a RadPane without set width and height properties) during page load, e.g.:
    protected void Page_Load(object sender, EventArgs e)
    {
        //ScriptManager.RegisterStartupScript(Page, Page.GetType(), ""+new Random(), "function MySplitloadedORANGO(sender, args){alert(1);}", true);
        //RadSplitter1.OnClientLoad = "MySplitloadedORANGO";
     
        RadPane1.Width = Unit.Empty;
        RadPane1.Height = Unit.Empty;
    }


    For your convenience I have attached modified sample page.

    Regards,
    Dobromir
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  10. Igor
    Igor avatar
    26 posts
    Member since:
    Nov 2010

    Posted 21 Dec 2010 Link to this post

    Hi Dobromir,

    thank you very much for your support, it help me to solve my problem.
    I have missed some things:  ResizeWithParent=false on each child splitter, PageView Height=100% and the reset of the  Panel that contains the grid when Page.Load  TabClick postback handler should be also declared.

    Best regards,
    Igor 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017