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
>
</
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)
{
}
}