Hello,
I am using RadTabstrip with two tabs(2 usercontrols for 2 tabs).
I have many controls within each usercontrol.
So, I need to ajaxify them.
But I am facing problems.
I created a sample project which is not working properly.
Also, As shown in the wizard sample of radtabstrip, if I user
<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" IsSticky="true">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1" >
.... radtab strip and radmultipage are placed here.
</telerik:RadAjaxPanel>
It is not working.
1] If I keep the above RadAjaxLoading and RadAjaxPanel- In the first page-once I Pick from date, it doesn't allow me to change the from date. The date picker is becoming inactive.
2]So, I removed above bolded part..Then In the first page-I first selected country United states and state--Then I selected From date. Then the page refreshes and state information is lost.
Here is my code
default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadTabStripsample._Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" method="post">
<div>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="false" >
<%--<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadTabStrip1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings> --%>
</telerik:RadAjaxManager>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<%--<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" IsSticky="true">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1" EnableAJAX="false">--%>
<asp:UpdatePanel runat="server" ID="AjaxPanel1" >
</asp:UpdatePanel>
<div style="float: left; width: 500px">
<telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1"
Skin="Sunset" OnTabClick="sample">
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated">
</telerik:RadMultiPage>
</div>
<%--</telerik:RadAjaxPanel>--%>
</div>
</div>
</form>
</body>
</html>
Default.aspx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
namespace RadTabStripsample
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
AddTab("ExpenseHeader", true);
RadPageView pageView = new RadPageView();
pageView.ID = "ExpenseHeader";
RadMultiPage1.PageViews.Add(pageView);
AddTab("ExpenseEntry", false);
}
if (Page.IsPostBack)
{
}
}
private void AddTab(string tabName, bool enabled)
{
RadTab tab = new RadTab(tabName);
tab.Enabled = enabled;
RadTabStrip1.Tabs.Add(tab);
}
protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
{
string userControlName = e.PageView.ID + ".ascx";
Control userControl = LoadControl(userControlName);
userControl.ID = e.PageView.ID + "userControl";
e.PageView.Controls.Add(userControl);
}
protected void sample(object sender, RadTabStripEventArgs e)
{
if (e.Tab.Text == "ExpenseHeader")
{
}
}
}
}
user control1--ExpenseHeader.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ExpenseHeader.ascx.cs" Inherits="RadTabStripsample.ExpenseHeader" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script language="javascript" type="text/javascript">
function itemsLoaded(sender, e) {
var item = null;
if (sender.get_items().get_count() > 0) {
if (item = sender.findItemByText("--Please Select")) {
// Note: This will trigger the onchange event
item.select();
} else {
// Note: This will not trigger the onchange event
sender.set_text("--Please Select");
}
}
}
function loadStates(item) {
var StatePicker = $find("<%= StatePicker.ClientID %>");
StatePicker.clearItems();
var CountryId = item.get_value();
if (CountryId == 'US') {
StatePicker.requestItems(CountryId);
var input = StatePicker.get_inputDomElement();
input.focus();
}
else {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text("Not Listed");
comboItem.set_value("Not Listed");
StatePicker.trackChanges();
StatePicker.get_items().add(comboItem);
StatePicker.commitChanges();
comboItem.select();
}
}
</script>
</telerik:RadScriptBlock>
<telerik:RadAjaxManagerProxy ID="RadAjaxManager2" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="PeriodFrom">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="PeriodFrom" />
<telerik:AjaxUpdatedControl ControlID="PeriodTo" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<div class="oneCol" >
<asp:Label ID="lbl_Country
" AssociatedControlID="CountryPicker"
runat="server" Text="Country"></asp:Label>
<telerik:RadComboBox ID="CountryPicker" runat="server" Height="200px"
OnDataBound="CountryPicker_DataBound"
OnClientSelectedIndexChanged="loadStates">
<Items>
<telerik:RadComboBoxItem Text="Select Country" Value=" " />
<telerik:RadComboBoxItem Text="UNITED STATES" Value="US" />
<telerik:RadComboBoxItem Text="CANADA" Value="CAN" />
<telerik:RadComboBoxItem Text="MEXICO" Value="MEX" />
</Items>
</telerik:RadComboBox>
</div>
<div class="oneCol">
<asp:Label ID="lbl_TransactionStateCity" AssociatedControlID="StatePicker"
runat="server" Text="State"></asp:Label>
<div>
<telerik:RadComboBox ID="StatePicker" runat="server"
OnClientItemsRequested="itemsLoaded"
OnItemsRequested="StatePicker_ItemRequested">
</telerik:RadComboBox>
</div>
</div>
<div>
<asp:Label ID="lbl_ExpenseReportName" AssociatedControlID="ExpenseReportName"
runat="server" Text="Report Name"></asp:Label>
<asp:TextBox ID="ExpenseReportName" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label runat="server" ID="lbl_PeriodFrom" AssociatedControlID="PeriodFrom" Text="Period From"></asp:Label>
<telerik:RadDatePicker ID="PeriodFrom" runat="server" AutoPostBack="true" OnSelectedDateChanged="PeriodFrom_SelectedDateChanged" >
</telerik:RadDatePicker>
</div>
<div>
<asp:Label runat="server" ID="lbl_PeriodTo" AssociatedControlID="PeriodTo" Text="Period To"></asp:Label>
<telerik:RadDatePicker ID="PeriodTo" runat="server" >
</telerik:RadDatePicker>
</div>
<div>
<asp:Button ID="btn_Create" runat="server" OnClick="btn_Create_Click"
Text="Proceed" />
</div>
ExpenseHeader.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Data;
namespace RadTabStripsample
{
public partial class ExpenseHeader : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PeriodTo.SelectedDate = DateTime.Now;
PeriodTo.DateInput.Enabled = false;
PeriodFrom.SelectedDate = DateTime.Now.AddDays(-7);
PeriodFrom.DateInput.Enabled = false;
}
if (IsPostBack)
{
}
}
protected void PeriodFrom_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
{
PeriodTo.MinDate = Convert.ToDateTime(PeriodFrom.SelectedDate);
}
protected void btn_Create_Click(object sender, EventArgs e)
{
GoToNextTab();
}
private void GoToNextTab()
{
ContentPlaceHolder placeHolder = (ContentPlaceHolder)Page.Master.FindControl("CenterPanelPlaceHolder");
RadTabStrip tabStrip = (RadTabStrip)placeHolder.FindControl("RadTabStrip1");
RadTab expenseTransactionTab = tabStrip.FindTabByText("ExpenseEntry");
expenseTransactionTab.Enabled = true;
expenseTransactionTab.Selected = true;
GoToNextPageView();
}
private void GoToNextPageView()
{
ContentPlaceHolder placeHolder = (ContentPlaceHolder)Page.Master.FindControl("CenterPanelPlaceHolder");
RadMultiPage multiPage = (RadMultiPage)placeHolder.FindControl("RadMultiPage1");
RadPageView expenseTransactionPageView = multiPage.FindPageViewByID("ExpenseEntry");
if (expenseTransactionPageView == null)
{
expenseTransactionPageView = new RadPageView();
expenseTransactionPageView.ID = "ExpenseEntry";
multiPage.PageViews.Add(expenseTransactionPageView);
}
expenseTransactionPageView.Selected = true;
}
protected void CountryPicker_DataBound(object sender, EventArgs e)
{
var combo = (RadComboBox)sender;
combo.Items.Insert(0, new RadComboBoxItem("--Select Country", string.Empty));
}
protected void StatePicker_ItemRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
string countryCode = e.Text;
RadComboBoxItem _item1=new RadComboBoxItem("State1","State1");
RadComboBoxItem _item2=new RadComboBoxItem("State2","State2");
RadComboBoxItem _item3=new RadComboBoxItem("State3","State3");
StatePicker.Items.Add(_item1);
StatePicker.Items.Add(_item2);
StatePicker.Items.Add(_item3);
}
}
}
usercontrol2--EmployeeEntry.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ExpenseEntry.ascx.cs" Inherits="RadTabStripsample.ExpenseEntry" %>
<table class="tableLabels">
<tr>
<td>Name:</td>
<td><asp:TextBox runat="server" ID="TextBox1"></asp:TextBox></td>
</tr>
<tr>
<td>Surname:</td>
<td><asp:TextBox runat="server" ID="TextBox2"></asp:TextBox></td>
</tr>
<tr>
<td>Birthday:</td>
<td><asp:TextBox runat="server" ID="TextBox3"></asp:TextBox></td>
</tr>
<tr>
<td>Interests:</td>
<td><asp:TextBox runat="server" ID="TextBox4"></asp:TextBox></td>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="Submit" CssClass="exButton" OnClick="Button1_Click" />
<br/><asp:Label id="Label1" runat="server" style="border:0; margin-left: 75px;" Width="256"></asp:Label>
EmployeeEntry.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace RadTabStripsample
{
public partial class ExpenseEntry : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, System.EventArgs e)
{
Label1.Text = "The personal data has been saved";
}
}
}
I am stuck with these issues. I have many controls which needs to be ajaxified.
Any help pls,
Thanks in advance