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

Tab in TabStrip renders only once

1 Answer 87 Views

TabStrip

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

Alexander Tokarenko asked on 20 May 2015, 07:49 AM

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

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

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

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;