Tab in TabStrip renders only once

2 posts, 1 answers
  1. Alexander Tokarenko
    Alexander Tokarenko avatar
    2 posts
    Member since:
    Oct 2009

    Posted 20 May 2015 Link to this post

    Hello. I have a problem. I created Layout by splitters and put the Tabstrip into the central area. In TabStrip I creates 2 tabs. In one tab I put PageView with UserControl and the second tab is empty UserControl. When page is loaded in first tab I see my UserControl. But after switch into the second tab and return into first I see an empty tab. The code is following.

    Default.aspx:

     

    <style type=css
    html, body, form 
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
    </style>
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
    <%@ Register Src="~/ChartUC.ascx" TagPrefix="uc1" TagName="Chart" %>
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
             /* <![CDATA[ */
             function onTabSelecting(sender, args) {
                 var tab = args.get_tab();
                 if (tab.get_pageView())
                 {
                     tab.set_postBack(false);
                 }
             }
            /* ]]> */
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnablePageHeadUpdate="true">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" LiveResize="true" Width="100%">
                <telerik:RadPane ID="navigationPane" runat="server" Width="25%" Height="100%">
                    <p>Left</p>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" Height="100%">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="contentPane" runat="server" Width="75%" Height="100%">
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Height="70%" LiveResize="true">
                        <telerik:RadPane ID="topPane" runat="server">
                             
                            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Glow" MultiPageID="RadMultiPage1"
                                Width="100%" SelectedIndex="0" OnTabClick="RadTabStrip1_TabClick" ClickSelectedTab="True"
                                OnClientTabSelecting="onTabSelecting" Align="Justify">
                            </telerik:RadTabStrip>
     
                            <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" RenderSelectedPageOnly="true"
                                OnPageViewCreated="RadMultiPage1_PageViewCreated" CssClass="RadMultiPage">
                            </telerik:RadMultiPage>
     
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Backward"/>
                        <telerik:RadPane ID="bottomPane" runat="server" Height="30%">
                             Nested Splitter Bottom Content
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>

    Default.aspx.cs

     

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                AddTab("Диаграмма Парето", "ChartUC");
                AddPageView(RadTabStrip1.FindTabByText("Диаграмма Парето"));
                AddTab("Таблица", "GridUC");
            }
        }
        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            AddPageView(e.Tab);
            e.Tab.PageView.Selected = true;
        }
        protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            string userControlName = e.PageView.ID + ".ascx";
            Control userControl = Page.LoadControl(userControlName);
            userControl.ID = e.PageView.ID + "_userControl";
            e.PageView.Controls.Add(userControl);
        }
        private void AddPageView(RadTab tab)
        {
            RadPageView pageView = new RadPageView();
            pageView.ID = tab.PageViewID;
            RadMultiPage1.PageViews.Add(pageView);
            tab.PageViewID = pageView.ID;
        }
        private void AddTab(string tabName, string sId)
        {
            RadTab tab = new RadTab();
            tab.Text = tabName;
            tab.PageViewID = sId;
            tab.Width = Unit.Percentage(100);
            RadTabStrip1.Tabs.Add(tab);
        }
    }

    ChartUC.ascx

     

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ChartUC.ascx.cs" Inherits="ChartUC" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <div class="contentWrapper">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="gridLoadingPanel"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
            </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
            <script type="text/javascript">
                function SeriesClicked(e) {
                    if (e.originalEvent.type === "contextmenu") {
                        // Disable browser context menu
                        e.originalEvent.preventDefault();
                        return;
                    }
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    ajaxManager.ajaxRequest('Chart1SC' + '$' + e.series.index + '$' + e.point.categoryIx);
                }
            </script>
        </telerik:RadCodeBlock>
        <div style="width: 700px; height: 500px; float: left;">
            <telerik:RadHtmlChart runat="server" ID="m_ParetoChart" Height="400" Width="600">
                <ChartTitle Text="Дефекты ППМ. Диаграмма Парето">
                </ChartTitle>
                <ClientEvents OnSeriesClick="SeriesClicked" />
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries Name="Дефекты">
                            <TooltipsAppearance Color="White" />
                        </telerik:ColumnSeries>
                        <telerik:LineSeries Name="Проценты">
                            <TooltipsAppearance Color="White" />
                        </telerik:LineSeries>
                    </Series>
                    <YAxis Width="3">
                        <TitleAppearance Text="Количество">
                            <TextStyle Color="Black" />
                        </TitleAppearance>
                        <LabelsAppearance>
                            <TextStyle Color="Black" />
                        </LabelsAppearance>
                    </YAxis>
                        <AdditionalYAxes>
                        <telerik:AxisY Name="AdditionalAxis" Color="Black" Width="3" MaxValue="1.2">
                            <TitleAppearance Text="Проценты">
                                <TextStyle Color="Black" />
                            </TitleAppearance>
                            <LabelsAppearance>
                                <TextStyle Color="Black" />
                            </LabelsAppearance>
                            <LabelsAppearance DataFormatString="P" />
                        </telerik:AxisY>
                    </AdditionalYAxes>
                    <XAxis>
                        <TitleAppearance Text="Дефекты">
                            <TextStyle Color="Black" />
                        </TitleAppearance>
                        <LabelsAppearance>
                            <TextStyle Color="Black" />
                        </LabelsAppearance>
                        <AxisCrossingPoints>
                            <telerik:AxisCrossingPoint Value="0" />
                            <telerik:AxisCrossingPoint Value="9" />
                        </AxisCrossingPoints>
                    </XAxis>
                </PlotArea>
                <Legend>
                    <Appearance BackgroundColor="White" Position="Right" Visible="true" />
                </Legend>
            </telerik:RadHtmlChart>
        </div>
        <div style="width: 700px; height: 500px; float: left;">
            <h2>Дефекты ППМ. Таблица</h2>
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" AllowPaging="true"
                AllowSorting="true" AllowFilteringByColumn="true" GridLines="Both" PageSize="10"
                ClientSettings-Scrolling-AllowScroll="true"
                AllowCustomPaging="True" OnNeedDataSource="RadGrid1_NeedDataSource">
                <ClientSettings AllowKeyboardNavigation="True">
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                </ClientSettings>
                <MasterTableView TableLayout="Fixed">
                    <Columns>
                        <telerik:GridBoundColumn HeaderText="Вид дефектов на печатной плате" DataType="System.String"
                            DataField="CategoryID"/>
                        <telerik:GridBoundColumn HeaderText="Процент от общего числа дефектов" DataType="System.Double"
                            DataField="Percents"/>
                        <telerik:GridBoundColumn HeaderText="Дата обнаружения" DataType="System.DateTime"
                            DataField="Date"/>
                        <telerik:GridBoundColumn HeaderText="Контроллер" DataType="System.String"
                            DataField="Checker"/>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </div>
    </div>

    Chart.ascx.cs

     

    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 System.Xml.Linq;
    using Telerik.Web.UI;
     
    public partial class ChartUC : System.Web.UI.UserControl
    {
        public ChartUC()
        {
            m_SelectedSeries.SeriesIdx = -1;
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                PopulateChart2();
            }
        }
        public struct SelectedSeries
        {
            public int SeriesIdx;
            public int ItemIdx;
        }
        private SelectedSeries m_SelectedSeries;
        protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            if (m_SelectedSeries.SeriesIdx == -1)
            {
                int startRowIndex = RadGrid1.CurrentPageIndex * RadGrid1.PageSize;
                int maximumRows = RadGrid1.PageSize;
                DataTable dt = PopulateGrid2(false);
                var v = dt.AsEnumerable().Skip(startRowIndex).Take(maximumRows);
                RadGrid1.DataSource = v.Any() ? v.CopyToDataTable() : dt.Clone();
            }
            else
            {
                DataTable dt = PopulateGrid2(false);
                var grps = dt.AsEnumerable().GroupBy(a => a.Field<string>("CategoryID")).OrderByDescending(b => b.Count());
                //var v = m_SelectedSeries.ItemIdx == 0 ? grps.Take(1) : grps.Skip(m_SelectedSeries.ItemIdx - 1).Take(1);
                var v = grps.Skip(m_SelectedSeries.ItemIdx).Take(1);
                var dt_ = v.First().CopyToDataTable();
                RadGrid1.VirtualItemCount = dt_.Rows.Count;
                RadGrid1.DataSource = dt_;
            }
        }
        private void PopulateChart2()
        {
            DataTable dt = PopulateGrid2(false);
            var grps = dt.AsEnumerable().GroupBy(a => a.Field<string>("CategoryID")).OrderByDescending(b => b.Count());
            RadHtmlChart chart = m_ParetoChart;
            var colSeries = chart.PlotArea.Series[0] as ColumnSeries;
            decimal sum = 0;
     
            foreach (var grp in grps)
            {
                //string sName = grp.Key;
                decimal ct = grp.Count();
                sum += ct;
                var csi = new CategorySeriesItem(ct);
                colSeries.SeriesItems.Add(csi);
            }
            //colSeries.TooltipsAppearance.ClientTemplate = "#=dataItem." + tooltipColumn + "#";
            var weights = new List<decimal>();
            foreach (var grp in grps)
            {
                decimal ct = grp.Count();
                weights.Add(ct / sum * 100);
            }
            var lineSeries = chart.PlotArea.Series[1] as LineSeries;
            decimal weight = 0;
            foreach (var val in weights)
            {
                weight += val;
                if (weight > 100) weight = 100;
                var v = Math.Round(weight);
                var csi = new CategorySeriesItem(v);
                lineSeries.SeriesItems.Add(csi);
            }
     
        }
        private DataTable PopulateGrid(bool a_bSetDataSource = true)
        {
            DataTable dt = new DataTable();
            DataColumn col = new DataColumn("CategoryID", typeof(string));
            dt.Columns.Add(col);
            col = new DataColumn("Percents", typeof(double));
            dt.Columns.Add(col);
            col = new DataColumn("Date", typeof(DateTime));
            dt.Columns.Add(col);
            col = new DataColumn("Checker", typeof(string));
            dt.Columns.Add(col);
            DataRow row = dt.NewRow();
            row["CategoryID"] = "Недостаток припоя";
            row["Percents"] = 60;
            row["Date"] = DateTime.Now;
            row["Checker"] = "Иванов И. И.";
            dt.Rows.Add(row);
            row = dt.NewRow();
            row["CategoryID"] = "Трещины";
            row["Percents"] = 10;
            row["Date"] = DateTime.Now;
            row["Checker"] = "Иванов И. И.";
            dt.Rows.Add(row);
            row = dt.NewRow();
            row["CategoryID"] = "Царапины";
            row["Percents"] = 10;
            row["Date"] = DateTime.Now;
            row["Checker"] = "Иванов И. И.";
            dt.Rows.Add(row);
            row = dt.NewRow();
            row["CategoryID"] = "Пятна припоя";
            row["Percents"] = 5;
            row["Date"] = DateTime.Now;
            row["Checker"] = "Иванов И. И.";
            dt.Rows.Add(row);
            row = dt.NewRow();
            row["CategoryID"] = "Тепловая деформация";
            row["Percents"] = 5;
            row["Date"] = DateTime.Now;
            row["Checker"] = "Иванов И. И.";
            dt.Rows.Add(row);
            row = dt.NewRow();
            row["CategoryID"] = "Расслоение платы";
            row["Percents"] = 7;
            row["Date"] = DateTime.Now;
            row["Checker"] = "Иванов И. И.";
            dt.Rows.Add(row);
            row = dt.NewRow();
            row["CategoryID"] = "Прочее";
            row["Percents"] = 3;
            row["Date"] = DateTime.Now;
            row["Checker"] = "Иванов И. И.";
            dt.Rows.Add(row);
            if (a_bSetDataSource)
            {
                RadGrid1.DataSource = dt;
                RadGrid1.DataBind();
            }
            return dt;
        }
     
        private DataTable PopulateGrid2(bool a_bSetDataSource = true)
        {
            DataTable dt = new DataTable();
            DataColumn col = new DataColumn("CategoryID", typeof(string));
            dt.Columns.Add(col);
            col = new DataColumn("Percents", typeof(double));
            dt.Columns.Add(col);
            col = new DataColumn("Date", typeof(DateTime));
            dt.Columns.Add(col);
            col = new DataColumn("Checker", typeof(string));
            dt.Columns.Add(col);
     
            var xd = XDocument.Load("D:/Work/ASP.Net/telerikt1/SimpleChart/bin/defects.xml");
            foreach (XElement xe in xd.Root.Elements())
            {
                var dr = dt.NewRow();
                dr["CategoryID"] = xe.Attribute("Type").Value;
                dr["Percents"] = 0;
                dr["Date"] = DateTime.Parse(xe.Attribute("Date").Value);
                dr["Checker"] = xe.Attribute("Checker").Value; ;
                dt.Rows.Add(dr);
            }
            RadGrid1.VirtualItemCount = dt.Rows.Count;
            if (a_bSetDataSource)
            {
                RadGrid1.DataSource = dt;
                RadGrid1.DataBind();
            }
            return dt;
        }
        public void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            string[] a = e.Argument.Split('$');
            if (a[0] == "Chart1SC")
            {
                m_SelectedSeries.SeriesIdx = int.Parse(a[1]);
                m_SelectedSeries.ItemIdx = int.Parse(a[2]);
                RadGrid1.Rebind();
            }
        }
    }

    GridUC.ascx

     

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="GridUC.ascx.cs" Inherits="GridUC" %>

    GridUC.ascx.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class GridUC : System.Web.UI.UserControl
    {
        public GridUC()
        {
     
        }
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
    }

     

     

  2. Answer
    Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 25 May 2015 Link to this post

    Hello Alexander,

    The reason for the experienced behavior is the RenderSelectedPageOnly setting that you had set to true for the RadMultiPage. In such a manner, you push the RadMultiPage to render only one PageView at a time, which is in contradiction with the logic in OnClientTabSelecting client-side event, which aims to set as selected the PageView, which is already added in the PageViews collection and already associated with the tab which is about to be selected.

    I would suggest you to remove this setting, in order to achieve the proper behavior.

    Regards,
    Nencho
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top