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

Create and select Radpageview when tab clicked.

6 Answers 394 Views

TabStrip

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

Tommy asked on 10 Jan 2014, 05:46 PM

Hello team I have a question. Is it possible to create a page view add it to a MultiPage and have it selected when you click on a Tab.

I am building my tab control in the page load but I do not want to load all of the pageviews and usercontrols at this time I want to load them only when the tab is clicked for the first time.

I have the following onClientTabSelecting function.

function onClientTabSelecting(sender, args) {

var ajaxManager = $find("<%=DefaultAjaxManager.ClientID %>");

var tab = args.get_tab().get_text();

var argstr = tab;

switch (tab) {

case "Logout":

PageMethods.Logout();

window.location = "Login"

break;

case "User Page":

window.location = "User"

break;

case "Company Maintenance":

ajaxManager.ajaxRequest(argstr);

break;

case "Dashboard Maintenance":

ajaxManager.ajaxRequest(argstr);

break;

}

The ajaxrequest event looks like this.

protected void manager_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

switch (e.Argument)

{

case "Company Maintenance":

manager.AjaxSettings.AddAjaxSetting(manager, AdminMultiPage);

manager.AjaxSettings.AddAjaxSetting(manager, AdminTabStrip);

AddPageView("CompanyMaintenance");

break;

case "Dashboard Maintenance":

manager.AjaxSettings.AddAjaxSetting(manager, AdminMultiPage);

manager.AjaxSettings.AddAjaxSetting(manager, AdminTabStrip);

AddPageView("DashBoardMaintenance");

break;

}

}

private void AddPageView(string viewID)
        {
            RadPageView view = new RadPageView();
            view.ID = viewID;
            AdminMultiPage.PageViews.Add(view);
        }
 
 protected void AdminMultiPage_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            Control userControl = Page.LoadControl("~/Admin/Controls/" + e.PageView.ID + ".ascx");
            userControl.ID = e.PageView.ID + "Content";
            e.PageView.Controls.Add(userControl);
            e.PageView.CssClass = "Radpageview";
 
            if (e.PageView.ID == "CompanyMaintenance")
            {
                RadTab parentTab = AdminTabStrip.Tabs.FindTabByText("Maintenance");
                parentTab.PageViewID = "";
                RadTab childTab = parentTab.Tabs.FindTabByText("Company Maintenance");
                childTab.PageViewID = e.PageView.ID;
                e.PageView.Selected = true;
            }
 
            if (e.PageView.ID == "DashBoardMaintenance")
            {
                RadTab parentTab = AdminTabStrip.Tabs.FindTabByText("Maintenance");
                parentTab.PageViewID = "";
                RadTab childTab = parentTab.Tabs.FindTabByText("Dashboard Maintenance");
                childTab.PageViewID = e.PageView.ID;
                e.PageView.Selected = true;
            }
 
            if (e.PageView.ID == "Home")
            {
                e.PageView.Selected = true;
            }
        }

I can see that the pageview is added to the multipage but it dose not become selected and the multipage does not retain the pageview. Meaning evertime you click on a tab the multipage says it only has one page view.

6 Answers, 1 is accepted

answered on 13 Jan 2014, 05:18 PM

Thank you for the information this is just what I am looking for. All is working great until I add the ajax settings. Once I do that then the selected page view does not change when you click on a tab. Any ideas what could be causing this.

Aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RedCarpet.Admin.Default" %>

<!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 id="Head1" runat="server">

<title>Red Carpet Software</title>

<telerik:RadStyleSheetManager ID="RadLoginStyleSheetManager" runat="server" />

<link href="~/Site.css" rel="stylesheet" type="text/css" />

</head>

<body class="body">

<form id="AdminDefaultForm" runat="server">

<telerik:RadCodeBlock ID="RadAdminCodeBlock" runat="server">

<script type="text/javascript">

$(document).ready(PageMethods.set_path('Admin/Default.aspx'));

var timeLeftCounter = null;

var seconds = 60;

var secondsBeforeShow = 60;

//stop timers for UI

function stopTimer(timer) {

clearInterval(this[timer]);

this[timer] = null;

};

//reset timers for UI

function resetTimer(timer, func, interval) {

this.stopTimer(timer);

this[timer] = setInterval(Function.createDelegate(this, func), interval);

};

function OnClientShowing(sender, args) {

//deal with UI labels

resetTimer("timeLeftCounter", UpdateTimeLabel, 1000);

}

//update the text in the label in RadNotification

//this could also be done automatically by using UpdateInterval. However, this will cause callbacks [which is the second best solution than javascript] on every second that is being count

function UpdateTimeLabel(toReset) {

var sessionExpired = (seconds == 0);

if (sessionExpired) {

stopTimer("timeLeftCounter");

//redirect to session expired page - simply take the url which RadNotification sent from the server to the client as value

window.location.href = $find("<%= RadNotification1.ClientID %>").get_value();

}

else {

var timeLbl = $get("timeLbl");

timeLbl.innerHTML = seconds--;

}

function ContinueSession() {

var notification = $find("<%= RadNotification1.ClientID %>");

//we need to contact the server to restart the Session - the fastest way is via callback

//calling update() automatically performs the callback, no need for any additional code or control

notification.update();

notification.hide();

//resets the showInterval for the scenario where the Notification is not disposed (e.g. an AJAX request is made)

//You need to inject a call to the ContinueSession() function from the code behind in such a request

var showIntervalStorage = notification.get_showInterval(); //store the original value

notification.set_showInterval(0); //change the timer to avoid untimely showing, 0 disables automatic showing

notification.set_showInterval(showIntervalStorage); //sets back the original interval which will start counting from its full value again

stopTimer("timeLeftCounter");

seconds = 60;

}

function onClientTabSelecting(sender, args) {

var tab = args.get_tab().get_text();

var argstr = tab;

switch (tab) {

case "User Page":

args.get_tab().set_postBack(false);

window.location = "User"

break;

case "Home":

args.get_tab().set_postBack(false);

break;

case "Maintenance":

args.get_tab().set_postBack(false);

break;

default:

if (args.get_tab().get_pageViewID()) {

args.get_tab().set_postBack(false);

}

break;

}

</script>

</telerik:RadCodeBlock>

<telerik:RadScriptManager ID="RadScriptManager" runat="server"

EnablePageMethods="True">

<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:RadAjaxManager ID="DefaultAjaxManager" runat="server" EnableHistory="True">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="AdminTabStrip">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="AdminTabStrip" UpdatePanelCssClass="" />

                    <telerik:AjaxUpdatedControl ControlID="AdminMultiPage" UpdatePanelCssClass="" />

                </UpdatedControls>

            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="AdminMultiPage">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="AdminMultiPage" UpdatePanelCssClass="" />

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManager>

<%--<div class="CenterText">

<asp:Image ID="ImageFront" runat="server" ImageUrl="~/Images/rcsbanner.png" />

</div>--%>

<div id="Content" style="height: 100%; width: 100%">

<telerik:RadTabStrip ID="AdminTabStrip" runat="server" MultiPageID="AdminMultiPage"

Skin="MetroTouch" Align="Right" Style="min-width: 1198px"

OnClientTabSelecting="onClientTabSelecting" AutoPostBack="True" OnTabClick ="AdminTabStrip_TabClick">

</telerik:RadTabStrip>

<p style="position:absolute;right:2px; width:300px; height:50px">

<asp:Label ID="lblCompanyName" style=" position :absolute ; right:2px" CssClass="labelSmall" runat="server" Text="Company Name: ">

</asp:Label>

<br />

<asp:Label ID="lblLoggedinUser" Style="position:absolute;right:2px" runat="server" CssClass="labelSmall"

Text="User: ">

</asp:Label>

</p>

<telerik:RadMultiPage ID="AdminMultiPage" runat="server" OnPageViewCreated="AdminMultiPage_PageViewCreated">

</telerik:RadMultiPage>

</div>

<telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240"

Height="100" OnCallbackUpdate="OnCallbackUpdate" AutoCloseDelay="60000" Title="Continue Your Session"

TitleIcon="" Skin="Office2007" EnableRoundedCorners="true" ShowCloseButton="false"

OnClientShowing="OnClientShowing">

<ContentTemplate>

<div class="infoIcon">

<img src="~/Images/Information.bmp" alt="info icon" /></div>

<div class="notificationContent">

Time remaining: <span id="timeLbl">60</span>

<telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session"

Style="margin-top: 10px;" AutoPostBack="false" OnClientClicked="ContinueSession">

</telerik:RadButton>

</div>

</ContentTemplate>

</telerik:RadNotification>

</form>

</body>

</html>

Code Behind for aspx page.

using System;

using System.Web.UI;

using RedCarpet.UI;

using Telerik.Web.UI;

using RedCarpet.BOL;

namespace RedCarpet.Admin

{

public partial class Default : Telerik.Web.UI.RadAjaxPage

{

#region "Page Load"

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

if (RCS.Current.User == null)

{

Response.Redirect("~/Login",true);

}

if (RCS.Current.User.Group_Name == "Sysadmin" || RCS.Current.User.Group_Name == "Sysuser" || RCS.Current .User .Group_Name == "CompanyAdmin")

{

lblCompanyName.Text = "Company Name: " + RCS.Current.Company.CompanyName;

lblLoggedinUser.Text = "User: " + RCS.Current.User.LastName + ", " + RCS.Current.User.FirstName;

//set the expire timeout for the session

Session.Timeout = 20;

//configure the notification to automatically show 1 min before session expiration

RadNotification1.ShowInterval = (Session.Timeout - 1) * 60000;

//set the redirect url as a value for an easier and faster extraction in on the client

RadNotification1.Value = Page.ResolveClientUrl("~/Login");

BuildTabs();

AdminTabStrip.SelectedIndex = 0;

}

else

{

ClientScript.RegisterStartupScript(this.GetType(), "Success", "<script type='text/javascript'>alert('Access Denied.');window.location='User';</script>'");

}

#endregion "Page Load"

#region "Private Functions"

private void BuildTabs()

{

AddTab("Home", true);

AddPageView("Home");

AddTab("Maintenance", true);

AddChildTab("Company Maintenance", true, AdminTabStrip.Tabs.FindTabByText("Maintenance"));

//AddPageView("CompanyMaintenance");

AddChildTab("Dashboard Maintenance", true, AdminTabStrip.Tabs.FindTabByText("Maintenance"));

//AddPageView("DashBoardMaintenance");

AddTab("User Page", true);

AddTab("Logout", true);

}

private void AddTab(string tabText, bool enabled)

{

RadTab tab = new RadTab(tabText);

tab.Enabled = enabled;

AdminTabStrip.Tabs.Add(tab);

}

private void AddChildTab(string tabText, bool enabled, RadTab parentTab)

{

RadTab tab = new RadTab(tabText);

tab.Enabled = enabled;

parentTab.Tabs.Add(tab);

}

private void AddPageView(string viewID)

{

RadPageView view = new RadPageView();

view.ID = viewID;

AdminMultiPage.PageViews.Add(view);

}

#endregion "Privte Functions"

#region "Button Clicks"

protected void AdminTabStrip_TabClick(object sender, RadTabStripEventArgs e)

{

switch (e.Tab.Text)

{

case "Company Maintenance":

AddPageView("CompanyMaintenance");

e.Tab.PageView.Selected = true;

break;

case "Dashboard Maintenance":

AddPageView("DashBoardMaintenance");

e.Tab.PageView.Selected = true;

break;

case "Logout":

AuditLog.LogThis(Enums.MessageType.Information, "User " + RCS.Current.User.UserName + " logged out.");

RCS.Current.User = null;

Session.Abandon();

Response.Redirect("~/Login",true);

break;

}

#endregion "Button Clicks"

#region "Events"

protected void OnCallbackUpdate(object sender, RadNotificationEventArgs e)

{

}

protected void AdminMultiPage_PageViewCreated(object sender, RadMultiPageEventArgs e)

{

Control userControl = Page.LoadControl("~/Admin/Controls/" + e.PageView.ID + ".ascx");

userControl.ID = e.PageView.ID + "Content";

e.PageView.Controls.Add(userControl);

e.PageView.CssClass = "Radpageview";

if (e.PageView.ID == "CompanyMaintenance")

{

RadTab parentTab = AdminTabStrip.Tabs.FindTabByText("Maintenance");

parentTab.PageViewID = "";

RadTab childTab = parentTab.Tabs.FindTabByText("Company Maintenance");

childTab.PageViewID = e.PageView.ID;

}

if (e.PageView.ID == "DashBoardMaintenance")

{

RadTab parentTab = AdminTabStrip.Tabs.FindTabByText("Maintenance");

parentTab.PageViewID = "";

RadTab childTab = parentTab.Tabs.FindTabByText("Dashboard Maintenance");

childTab.PageViewID = e.PageView.ID;

}

if (e.PageView.ID == "Home")

{

e.PageView.Selected = true;

}

#endregion "Events"

}

User control.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DashBoardMaintenance.ascx.cs"

Inherits="RedCarpet.Admin.Controls.DashBoardMaintenance" %>

<style type="text/css">

.RadTreeView .rtUL .rtLI .rtUL

{

padding-left: 0px !important;

}

</style>

<telerik:RadAjaxManagerProxy ID="RAMPDashboardMaintenance" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RCBDefaultDashboard">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblCompany" UpdatePanelCssClass="" />

<telerik:AjaxUpdatedControl ControlID="RCBCompaines" UpdatePanelCssClass="" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnSaveDashboard">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTreeDashboards"

UpdatePanelCssClass="" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RCBDefaultDashboard">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblCompany" UpdatePanelCssClass="" />

<telerik:AjaxUpdatedControl ControlID="RCBCompaines" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnSaveDashboard">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTreeDashboards" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="bntAddChart">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="tbChartTitle" UpdatePanelCssClass="" />

<telerik:AjaxUpdatedControl ControlID="tbChartID" UpdatePanelCssClass="" />

<telerik:AjaxUpdatedControl ControlID="tbSPName" UpdatePanelCssClass="" />

<telerik:AjaxUpdatedControl ControlID="tbXField" UpdatePanelCssClass="" />

<telerik:AjaxUpdatedControl ControlID="tbYField" UpdatePanelCssClass="" />

<telerik:AjaxUpdatedControl ControlID="RCBChartType" UpdatePanelCssClass="" />

<telerik:AjaxUpdatedControl ControlID="RadTreeDashboards"

UpdatePanelCssClass="" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadWindow ID="DashBoards" runat="server" Modal="True" Skin="MetroTouch"

Style="display: none" CssClass="PopUp" Height="250px" Width="380px">

<ContentTemplate>

<div>

<asp:Label ID="lblDashboardName" runat="server" Text="Dashboard Name"></asp:Label><br />

<telerik:RadTextBox ID="tbDashboardName" runat="server">

</telerik:RadTextBox><br />

<asp:Label ID="lblDefaultDashboard" runat="server" Text="Default Dashboard"></asp:Label><br />

<telerik:RadComboBox ID="RCBDefaultDashboard" runat="server" OnSelectedIndexChanged="RCBDefaultDashboard_SelectedIndexChanged"

AutoPostBack="True">

<Items>

<telerik:RadComboBoxItem Value="TRUE" Text="TRUE" Selected="True" />

<telerik:RadComboBoxItem Value="FALSE" Text="FALSE" />

</Items>

</telerik:RadComboBox>

<br />

<asp:Label ID="lblCompany" runat="server" Text="Company" Visible="false"></asp:Label>

<telerik:RadComboBox ID="RCBCompaines" runat="server" Visible="False">

</telerik:RadComboBox>

<br />

<telerik:RadButton ID="btnSaveDashboard" runat="server" Text="Save" OnClick="BtnSaveDashcoard_Click">

</telerik:RadButton>

</div>

</ContentTemplate>

</telerik:RadWindow>

<telerik:RadWindow ID="Charts" runat="server" Modal="True" Skin="MetroTouch" Style="display: none"

CssClass="PopUp" Height="420px" Width="300px">

<ContentTemplate>

<div>

<asp:Label ID="lblChartTitle" runat="server" Text="Chart Title"></asp:Label><br />

<telerik:RadTextBox ID="tbChartTitle" runat="server">

</telerik:RadTextBox>

<asp:Label ID="lblChartID" runat="server" Text="Unique ChartID"></asp:Label><br />

<telerik:RadTextBox ID="tbChartID" runat="server">

</telerik:RadTextBox>

<asp:Label ID="lblSPName" runat="server" Text="Stored Procedure Name"></asp:Label><br />

<telerik:RadTextBox ID="tbSPName" runat="server">

</telerik:RadTextBox>

<asp:Label ID="lblXField" runat="server" Text="Chart XField"></asp:Label><br />

<telerik:RadTextBox ID="tbXField" runat="server">

</telerik:RadTextBox>

<asp:Label ID="lblYField" runat="server" Text="Chart YField"></asp:Label><br />

<telerik:RadTextBox ID="tbYField" runat="server">

</telerik:RadTextBox>

<asp:Label ID="lblChartType" runat="server" Text="Default Chart Type"></asp:Label><br />

<telerik:RadComboBox ID="RCBChartType" runat="server">

<Items>

<telerik:RadComboBoxItem Value="PIE" Text="PIE" Selected="True" />

<telerik:RadComboBoxItem Value="DONUT" Text="DONUT" />

<telerik:RadComboBoxItem Value="BAR" Text="BAR" />

<telerik:RadComboBoxItem Value="GRID" Text="GRID" />

</Items>

</telerik:RadComboBox>

<telerik:RadButton ID="bntAddChart" runat="server" Text="ADD" OnClick="BtnAddChart_Click">

</telerik:RadButton>

</div>

</ContentTemplate>

</telerik:RadWindow>

<telerik:RadWindow ID="rwExistingCharts" runat="server" Modal="True" Skin="MetroTouch"

Style="display: none" CssClass="PopUp" Height="200px" Width="450px">

<ContentTemplate>

<div>

<asp:Label ID="Label1" runat="server" Text="Dashboard Name"></asp:Label><br />

</div>

</ContentTemplate>

</telerik:RadWindow>

<br />

<telerik:RadCodeBlock ID="RCBDashboardMaintenance" runat="server">

<script type="text/javascript">

function ChartBtnClick(sender, args) {

debugger;

var buttonid = sender.get_id();

var parentid = document.getElementById(buttonid).parentNode.id;

var chartType = buttonid;

var buttonName = "button";

var panelName = "panel";

var argstr = buttonid + "," + parentid + ',' + chartType;

$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(argstr);

}

function onClientContextMenuShowing(sender, args) {

var treeNode = args.get_node();

treeNode.set_selected(true);

}

function onClientContextMenuItemClicking(sender, args) {

var menuItem = args.get_menuItem();

var treeNode = args.get_node();

menuItem.get_menu().hide();

switch (menuItem.get_value()) {

case "AddDashboard":

var rw = $find("<%=DashBoards.ClientID%>");

rw.set_title("Add Dashboard");

rw.show();

break;

case "EditDashboard":

var rw = $find("<%=DashBoards.ClientID%>");

rw.set_title("Edit Dashboard");

rw.show();

break;

case "DeleteDashboard":

var result = confirm("Are you sure you want to delete dashboard: " + treeNode.get_text());

args.set_cancel(!result);

break;

case "NewChart":

var rw = $find("<%=Charts.ClientID%>");

rw.set_title("Add Chart");

rw.show();

break;

case "ExistingChart":

var rw = $find("<%=rwExistingCharts.ClientID%>");

rw.set_title("Add Existing Chart");

rw.show();

break;

case "EditChart":

var rw = $find("<%=Charts.ClientID%>");

rw.set_title("Edit Chart");

rw.show();

break;

case "PreviewChart":

var rw = $find("<%=Charts.ClientID%>");

rw.set_title("Preview Chart");

rw.show();

break;

case "DeleteChart":

var result = confirm("Are you sure you want to delete chart: " + treeNode.get_text());

args.set_cancel(!result);

break;

}

</script>

</telerik:RadCodeBlock>

<div id="container" class="ControlContent" style="min-width: 1216px">

<div id="contentleft" class="Content" style="float: left; min-height: 100%; width: 220px;

background-color: White">

Dashboards

<br />

<telerik:RadTreeView ID="RadTreeDashboards" runat="server" Skin="MetroTouch" OnClientContextMenuShowing="onClientContextMenuShowing"

OnClientContextMenuItemClicking="onClientContextMenuItemClicking">

<ContextMenus>

<telerik:RadTreeViewContextMenu ID="ParentContextMenu" runat="server">

<Items>

<telerik:RadMenuItem Value="Dashboards" Text="Dashboards">

<Items>

<telerik:RadMenuItem Value="AddDashboard" Text="Add">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="EditDashboard" Text="Edit">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="DeleteDashboard" Text="Delete">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="Charts" Text="Charts">

<Items>

<telerik:RadMenuItem Value="NewChart" Text="New Chart">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="ExistingChart" Text="Add Existing Chart">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadTreeViewContextMenu>

<telerik:RadTreeViewContextMenu ID="ChildContextMenu" runat="server">

<Items>

<telerik:RadMenuItem Value="EditChart" Text="Edit">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="DeleteChart" Text="Delete">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="PreviewChart" Text="Preview">

</telerik:RadMenuItem>

</Items>

</telerik:RadTreeViewContextMenu>

</ContextMenus>

</telerik:RadTreeView>

</div>

<div id="contentright" runat="server" class="Content" style="min-height: 100%; float: left;

margin-right: 20px; margin-left: 225px; position: absolute; background-color: White">

<asp:Panel ID="PlaceHolder1" runat="server" Style="float: left; height: 340px; width: 310px;

margin-left: 10px; margin-top: 10px; margin-right: 10px">

<telerik:RadButton ID="btnpie1" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/piechart.png" />

</telerik:RadButton>

<telerik:RadButton ID="btndonut1" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/donut.png" />

</telerik:RadButton>

<telerik:RadButton ID="btncol1" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/barchart.png" />

</telerik:RadButton>

</asp:Panel>

<asp:Panel ID="PlaceHolder2" runat="server" class="gradientGreen" Style="float: left;

height: 340px; width: 310px; margin-left: 10px; margin-top: 10px; margin-right: 10px"

BorderStyle="Groove" BorderWidth="2px">

<telerik:RadButton ID="btnpie2" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/piechart.png" />

</telerik:RadButton>

<telerik:RadButton ID="btndonut2" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/donut.png" />

</telerik:RadButton>

<telerik:RadButton ID="btncol2" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/barchart.png" />

</telerik:RadButton>

</asp:Panel>

<asp:Panel ID="PlaceHolder3" runat="server" class="gradientGreen" Style="float: left;

height: 340px; width: 310px; margin-left: 10px; margin-top: 10px; margin-right: 10px"

BorderStyle="Groove" BorderWidth="2px">

<telerik:RadButton ID="btnpie3" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/piechart.png" />

</telerik:RadButton>

<telerik:RadButton ID="btndonut3" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/donut.png" />

</telerik:RadButton>

<telerik:RadButton ID="btncol3" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/barchart.png" />

</telerik:RadButton>

</asp:Panel>

<asp:Panel ID="PlaceHolder4" runat="server" class="gradientGreen" Style="float: left;

height: 340px; width: 310px; margin-left: 10px; margin-top: 10px; margin-right: 10px"

BorderStyle="Groove" BorderWidth="2px">

<telerik:RadButton ID="btnpie4" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/piechart.png" />

</telerik:RadButton>

<telerik:RadButton ID="btndonut4" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/donut.png" />

</telerik:RadButton>

<telerik:RadButton ID="btncol4" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/barchart.png" />

</telerik:RadButton>

</asp:Panel>

<asp:Panel ID="PlaceHolder5" runat="server" class="gradientGreen" Style="float: left;

height: 340px; width: 310px; margin-left: 10px; margin-top: 10px; margin-right: 10px"

BorderStyle="Groove" BorderWidth="2px">

<telerik:RadButton ID="btnpie5" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/piechart.png" />

</telerik:RadButton>

<telerik:RadButton ID="btndonut5" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/donut.png" />

</telerik:RadButton>

<telerik:RadButton ID="btncol5" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/barchart.png" />

</telerik:RadButton>

</asp:Panel>

<asp:Panel ID="PlaceHolder6" runat="server" class="gradientGreen" Style="float: left;

height: 340px; width: 310px; margin-left: 10px; margin-top: 10px; margin-right: 10px"

BorderStyle="Groove" BorderWidth="2px">

<telerik:RadButton ID="btnpie6" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/piechart.png" />

</telerik:RadButton>

<telerik:RadButton ID="btndonut6" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/donut.png" />

</telerik:RadButton>

<telerik:RadButton ID="btncol6" runat="server" CssClass="buttonLeft" Width="16px"

Height="16px" Text="Download" Enabled="true" AutoPostBack="false" OnClientClicked="ChartBtnClick">

<Image ImageUrl="../../Images/barchart.png" />

</telerik:RadButton>

</asp:Panel>

</div>

code behind

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using RedCarpet.UI;

using Telerik.Web.UI;

using RedCarpet.BOL;

namespace RedCarpet.Admin.Controls

{

public partial class DashBoardMaintenance : System.Web.UI.UserControl

{

#region "Page Load"

protected void Page_Load(object sender, EventArgs e)

{

RadToolTip TreeToolTip = new RadToolTip();

TreeToolTip.Text = "Right click for more options";

RadTreeDashboards.ToolTip = TreeToolTip.Text;

string DashBoard = "";

string currentDashBoard = "";

string chart = "";

DataTable dt = RCS.Db.GetDashboardsandCharts();

RadTreeNode parentNode;

RadTreeNode childNode;

foreach (DataRow dr in dt.Rows)

{

DashBoard = dr["DashBoard"].ToString().Trim();

//Add Parent and First Child

if (DashBoard != currentDashBoard)

{

parentNode = new RadTreeNode();

childNode = new RadTreeNode();

currentDashBoard = dr["DashBoard"].ToString().Trim();

chart = dr["Chart"].ToString().Trim();

parentNode.Text = currentDashBoard;

parentNode.Value = dr["DashBoardID"].ToString();

parentNode.ContextMenuID = ParentContextMenu.ID;

parentNode.EnableContextMenu = true;

childNode.Text = chart;

childNode.Value = dr["ChartID"].ToString();

childNode.ContextMenuID = ChildContextMenu.ID;

childNode.EnableContextMenu = true;

RadTreeDashboards.Nodes.Add(parentNode);

RadTreeDashboards.Nodes.FindNodeByText(currentDashBoard).Nodes.Add(childNode);

}

//add all other child nodes to the current parent

else

{

childNode = new RadTreeNode();

chart = dr["Chart"].ToString().Trim();

childNode.Text = chart;

childNode.Value = dr["ChartID"].ToString();

childNode.ContextMenuID = ChildContextMenu.ID;

childNode.EnableContextMenu = true;

RadTreeDashboards.Nodes.FindNodeByText(currentDashBoard).Nodes.Add(childNode);

}

LoadCharts();

}

#endregion "Page load"

#region "Public Functions"

public void LoadCharts()

{

ChartMaker cm = new ChartMaker();

cm.AddChart("SettlementManagement", PlaceHolder1);

cm.AddChart("ChargebackManagement", PlaceHolder2);

cm.AddChart("CostManagement", PlaceHolder3);

cm.AddChart("Alerts", PlaceHolder4);

cm.AddChart("SalesAnalytics", PlaceHolder5);

}

#endregion "Public Functions"

#region "Events"

protected void RCBDefaultDashboard_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

if (e.Value != "TRUE")

{

if (RCBCompaines.Items.Count == 0)

{

List<Company> Compaines = Company.GetAllCompanies();

foreach (Company company in Compaines)

{

RadComboBoxItem item = new RadComboBoxItem();

item.Text = company.CompanyName;

item.Value = company.CompanyID.ToString();

RCBCompaines.Items.Add(item);

}

RCBCompaines.Visible = true;

lblCompany.Visible = true;

}

else

{

RCBCompaines.Visible = false;

lblCompany.Visible = false;

}

#endregion "Events"

#region "Button Clicks"

protected void BtnSaveDashcoard_Click(object sender, EventArgs e)

{

Dashboard DB = new Dashboard();

RadTreeNode parentNode = new RadTreeNode();

DB.Title = tbDashboardName.Text;

if (RCBDefaultDashboard.SelectedValue == "TRUE")

{

DB.ISDEFAULT = 1;

}

else

{

DB.ISDEFAULT = 0;

DB.CompanyID = int.Parse(RCBCompaines.SelectedItem.Value);

}

DB.AddDashboard();

parentNode.Value = DB.DashboardID.ToString();

parentNode.Text = DB.Title;

RadTreeDashboards.Nodes.Add(parentNode);

}

protected void BtnAddChart_Click(object sender, EventArgs e)

{

int id;

RadTreeNode childNode = new RadTreeNode();

RadTreeNode parentNode = RadTreeDashboards.SelectedNode;

Chart chart = new Chart();

chart.ChartID = tbChartID.Text;

chart.SPName = tbSPName.Text;

chart.XField = tbXField.Text;

chart.YField = tbYField.Text;

chart.DefaultType = RCBChartType.SelectedValue;

chart.DashBoardID = int.Parse(parentNode.Value);

id = chart.AddChart();

childNode.Value = id.ToString();

childNode.Text = chart.Title;

parentNode.Nodes.Add(childNode);

tbChartID.Text = "";

tbChartTitle.Text = "";

tbDashboardName.Text = "";

tbSPName.Text = "";

tbXField.Text = "";

tbYField.Text = "";

}

#endregion "Button Clicks"

}

answered on 15 Jan 2014, 02:01 PM

Hello Tommy,

Would you specify if the functionality works correctly, if you disable the Ajax on your page? In addition, I noticed that you have two level of tabs. Does the problem occurs when you attempt to select this Tab? Generally, this functionality is achieved at TabClick, by adding new PageVIew to the PageVIews collection. Therefore, I would suggest you to make sure that the TabClick event is hit, once the Tab is selected. The logic of managing if the Tab click should initiate a post back is configured in the onClientTabSelecting.

Regards,
Nencho
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 15 Jan 2014, 02:24 PM

Here is my onClientTabSelecting

function onClientTabSelecting(sender, args) {

var tab = args.get_tab().get_text();

var argstr = tab;

var multiPage = $find("<%=AdminMultiPage.ClientID %>");

var pageview;

switch (tab) {

case "User Page":

args.get_tab().set_postBack(false);

window.location = "User"

break;

case "Home":

args.get_tab().set_postBack(false);

pageview = multiPage.get_pageViews().getPageView(args.get_tab().get_pageViewID());

pageview.select();

break;

case "Maintenance":

args.get_tab().set_postBack(false);

break;

default:

if (args.get_tab().get_pageViewID()) {

args.get_tab().set_postBack(false);

pageview = multiPage.get_pageViews().getPageView(args.get_tab().get_pageViewID());

pageview.select();

}

break;

}

Trying to select the page view client side did not fix the issue. The first time you click on the tab the page view show just fine there is how ever an issue where nothing in the user control that is loaded in that page view is select able. The second time you click on a tab the multiPage in the client side function returns null not sure why that is. The link to the demo in the first reply is just what I am looking for and I thought I had this setup the same way I have been over and over that demo and can not find a difference. Please let me know if there is anything else you need to see to help me out with this issue.

answered on 20 Jan 2014, 01:48 PM

TabStripSelectionIssue1.zip

Hello Tommy,

As I can see, you are loading only one UserControl in the PageViewCreated handler at server side. Please consider adding the corresponding UserControls to the PageView.ID that you are verifying in the event handler. In addition, I am sending you the sample project, I have tested with, where you could observe how the CompanyMaintenance.ascx is loaded when the CompanyMaintenance tab is selected.

Note : dll files are removed.

Regards,
Nencho
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Create and select Radpageview when tab clicked.

6 Answers, 1 is accepted