Prasanth100
Top achievements
Rank 1
Rank 1
Prasanth100
asked on 24 Jun 2013, 02:07 PM
Hi,
I have a TabStrip Control,where i am loading Usercontrols dynamically.
Here TabStrip is loading the usercontrol,But when i click the Button inside usercontrol,it is not firing.
If i remove the RadAjaxManager,it is working perfectly.
How to accomplish this,without having a postback.
(Here i have added Calculator.ascx usercontrol,u can add dummy usercontrol for map.)
)
Here is the Code (Design Page)
-------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="TestApp.WebApp.DUMMY.WebForm5" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>ASP.NET TabStrip Demo - Dynamic PageView Creation via AJAX</title>
<%-- <link href="styles.css" rel="stylesheet" type="text/css" />--%>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" EnableRoundedCorners="false" />
<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
<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>
<script type="text/javascript">
/* <![CDATA[
// function onTabSelecting(sender, args) {
//
// if (args.get_tab().get_pageViewID()) {
// args.get_tab().set_postBack(true);
// }
// }
/* ]]> */
</script>
<div class="exampleWrapper">
<telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" AutoPostBack="true"
runat="server" MultiPageID="RadMultiPage1" Width="900" Align="Justify"
OnTabClick="RadTabStrip1_TabClick"> <%--OnClientTabSelecting="onTabSelecting"--%>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated">
</telerik:RadMultiPage>
</div>
</form>
</body>
</html>
CodeBehind
--------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using Telerik.Web.UI;
namespace TestApp.WebApp.DUMMY
{
public partial class WebForm5 : System.Web.UI.Page
{
protected void Page_Init(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
AddTab("Map");
AddPageView(RadTabStrip1.FindTabByText("Map"));
AddTab("Calculator");
// AddTab("RadHTMLChart");
}
}
private void AddTab(string tabName)
{
RadTab tab = new RadTab();
tab.Text = tabName;
tab.Width = Unit.Pixel(200);
RadTabStrip1.Tabs.Add(tab);
}
protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
{
//string userControlName = e.PageView.ID + "CS.ascx";
if (e.PageView.ID == "Map")
{
string userControlName = "~/Controls/Map.ascx";//e.PageView.ID + "CS.ascx";
Control userControl = Page.LoadControl(userControlName);
userControl.ID = e.PageView.ID + "_userControl";
e.PageView.Controls.Add(userControl);
}
if (e.PageView.ID == "Calculator")
{
string userControlName = "~/Controls/Calculator.ascx";//e.PageView.ID + "CS.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.Text;
RadMultiPage1.PageViews.Add(pageView);
tab.PageViewID = pageView.ID;
}
protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
{
AddPageView(e.Tab);
e.Tab.PageView.Selected = true;
}
}
}
UserControl
-----------------------
Calculator.ascx
------------------
<script type="text/javascript" language="JavaScript">
function get_round(X) { return Math.round(X * 100) / 100 }
function showpay() {
if ((document.getElementById('<%=loan.ClientID%>').value == "") || (document.getElementById('<%=months.ClientID%>').value == "") || (document.getElementById('<%=rate.ClientID%>').value == "")) {
document.getElementById('<%=pay.ClientID%>').value = "Incomplete data";
document.getElementById('<%=tot_amount.ClientID%>').value = "Incomplete data";
document.getElementById('<%=tot_interest.ClientID%>').value = "Incomplete data";
document.getElementById('<%=yearly_interest.ClientID%>').value = "Incomplete data";
document.getElementById('<%=interest_pa.ClientID%>').value = "Incomplete data";
document.getElementById('<%=interest_pm.ClientID%>').value = "Incomplete data";
}
else {
var princ = document.getElementById('<%=loan.ClientID%>').value;
var term = document.getElementById('<%=months.ClientID%>').value;
var intr = document.getElementById('<%=rate.ClientID%>').value / 1200;
var yrs = document.getElementById('<%=months.ClientID%>').value / 12;
document.getElementById('<%=pay.ClientID%>').value = get_round(princ * intr / (1 - (Math.pow(1 / (1 + intr), term))));
document.getElementById('<%=tot_amount.ClientID%>').value = get_round(document.getElementById('<%=pay.ClientID%>').value * term);
document.getElementById('<%=tot_interest.ClientID%>').value = get_round(document.getElementById('<%=tot_amount.ClientID%>').value / yrs);
document.getElementById('<%=yearly_interest.ClientID%>').value = get_round(document.getElementById('<%=tot_interest.ClientID%>').value / yrs);
document.getElementById('<%=interest_pa.ClientID%>').value = get_round(document.getElementById('<%=yearly_interest.ClientID%>').value / princ * 100);
document.getElementById('<%=interest_pm.ClientID%>').value = get_round((document.getElementById('<%=yearly_interest.ClientID%>').value / princ * 100) / 12);
}
}
</script>
<div id="Property_form">
<div class="EMICALCdiv">
<fieldset>
<h2>
EMI Calculator
</h2>
<table align="center" class="EMICCALCtblnew">
<tbody>
<tr>
<td width="20%">
<span class="label">Loan Amount<font color="#FF0000">*</font> </span></p>
</td>
<td style="margin-left: 5px" width="20%">
<asp:TextBox ID="loan" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<p class="label">
Loan Tenure (Months)<font color="#FF0000" face="Verdana" size="2">*</font></p>
</td>
<td>
<asp:TextBox ID="months" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<p class="label">
Interest Rate (Reducing)<font color="#FF0000" face="Verdana" size="2">*</font></p>
</td>
<td>
<asp:TextBox ID="rate" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
<td>
%
</td>
</tr>
<tr>
<td>
<p class="label">
Monthly Payment (EMI)</p>
</td>
<td>
<p align="center">
<input type="button" id="button" name="button" value="Click" class="normallink" onclick="showpay()" />
<%-- <asp:Button ID="button" runat="server" Text="Click" OnClientClick="return showpay();" />--%>
</p>
</td>
</tr>
<tr>
<td>
<span class="label">Calculated Monthly EMI </span>
</td>
<td>
<asp:TextBox ID="pay" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Total Amount with Interest </span>
</td>
<td>
<asp:TextBox ID="tot_amount" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Flat Interest Rate PA </span>
</td>
<td width="109">
<asp:TextBox ID="interest_pa" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Flat Interest Rate PM </span>
</td>
<td>
<asp:TextBox ID="interest_pm" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Total Interest Amount </span>
</td>
<td width="109">
<asp:TextBox ID="tot_interest" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Yearly Interest Amount </span>
</td>
<td>
<asp:TextBox ID="yearly_interest" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</div>
Thanks,
Prasanth
I have a TabStrip Control,where i am loading Usercontrols dynamically.
Here TabStrip is loading the usercontrol,But when i click the Button inside usercontrol,it is not firing.
If i remove the RadAjaxManager,it is working perfectly.
How to accomplish this,without having a postback.
(Here i have added Calculator.ascx usercontrol,u can add dummy usercontrol for map.)
)
Here is the Code (Design Page)
-------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="TestApp.WebApp.DUMMY.WebForm5" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>ASP.NET TabStrip Demo - Dynamic PageView Creation via AJAX</title>
<%-- <link href="styles.css" rel="stylesheet" type="text/css" />--%>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" EnableRoundedCorners="false" />
<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
<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>
<script type="text/javascript">
/* <![CDATA[
// function onTabSelecting(sender, args) {
//
// if (args.get_tab().get_pageViewID()) {
// args.get_tab().set_postBack(true);
// }
// }
/* ]]> */
</script>
<div class="exampleWrapper">
<telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" AutoPostBack="true"
runat="server" MultiPageID="RadMultiPage1" Width="900" Align="Justify"
OnTabClick="RadTabStrip1_TabClick"> <%--OnClientTabSelecting="onTabSelecting"--%>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated">
</telerik:RadMultiPage>
</div>
</form>
</body>
</html>
CodeBehind
--------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using Telerik.Web.UI;
namespace TestApp.WebApp.DUMMY
{
public partial class WebForm5 : System.Web.UI.Page
{
protected void Page_Init(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
AddTab("Map");
AddPageView(RadTabStrip1.FindTabByText("Map"));
AddTab("Calculator");
// AddTab("RadHTMLChart");
}
}
private void AddTab(string tabName)
{
RadTab tab = new RadTab();
tab.Text = tabName;
tab.Width = Unit.Pixel(200);
RadTabStrip1.Tabs.Add(tab);
}
protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
{
//string userControlName = e.PageView.ID + "CS.ascx";
if (e.PageView.ID == "Map")
{
string userControlName = "~/Controls/Map.ascx";//e.PageView.ID + "CS.ascx";
Control userControl = Page.LoadControl(userControlName);
userControl.ID = e.PageView.ID + "_userControl";
e.PageView.Controls.Add(userControl);
}
if (e.PageView.ID == "Calculator")
{
string userControlName = "~/Controls/Calculator.ascx";//e.PageView.ID + "CS.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.Text;
RadMultiPage1.PageViews.Add(pageView);
tab.PageViewID = pageView.ID;
}
protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
{
AddPageView(e.Tab);
e.Tab.PageView.Selected = true;
}
}
}
UserControl
-----------------------
Calculator.ascx
------------------
<script type="text/javascript" language="JavaScript">
function get_round(X) { return Math.round(X * 100) / 100 }
function showpay() {
if ((document.getElementById('<%=loan.ClientID%>').value == "") || (document.getElementById('<%=months.ClientID%>').value == "") || (document.getElementById('<%=rate.ClientID%>').value == "")) {
document.getElementById('<%=pay.ClientID%>').value = "Incomplete data";
document.getElementById('<%=tot_amount.ClientID%>').value = "Incomplete data";
document.getElementById('<%=tot_interest.ClientID%>').value = "Incomplete data";
document.getElementById('<%=yearly_interest.ClientID%>').value = "Incomplete data";
document.getElementById('<%=interest_pa.ClientID%>').value = "Incomplete data";
document.getElementById('<%=interest_pm.ClientID%>').value = "Incomplete data";
}
else {
var princ = document.getElementById('<%=loan.ClientID%>').value;
var term = document.getElementById('<%=months.ClientID%>').value;
var intr = document.getElementById('<%=rate.ClientID%>').value / 1200;
var yrs = document.getElementById('<%=months.ClientID%>').value / 12;
document.getElementById('<%=pay.ClientID%>').value = get_round(princ * intr / (1 - (Math.pow(1 / (1 + intr), term))));
document.getElementById('<%=tot_amount.ClientID%>').value = get_round(document.getElementById('<%=pay.ClientID%>').value * term);
document.getElementById('<%=tot_interest.ClientID%>').value = get_round(document.getElementById('<%=tot_amount.ClientID%>').value / yrs);
document.getElementById('<%=yearly_interest.ClientID%>').value = get_round(document.getElementById('<%=tot_interest.ClientID%>').value / yrs);
document.getElementById('<%=interest_pa.ClientID%>').value = get_round(document.getElementById('<%=yearly_interest.ClientID%>').value / princ * 100);
document.getElementById('<%=interest_pm.ClientID%>').value = get_round((document.getElementById('<%=yearly_interest.ClientID%>').value / princ * 100) / 12);
}
}
</script>
<div id="Property_form">
<div class="EMICALCdiv">
<fieldset>
<h2>
EMI Calculator
</h2>
<table align="center" class="EMICCALCtblnew">
<tbody>
<tr>
<td width="20%">
<span class="label">Loan Amount<font color="#FF0000">*</font> </span></p>
</td>
<td style="margin-left: 5px" width="20%">
<asp:TextBox ID="loan" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<p class="label">
Loan Tenure (Months)<font color="#FF0000" face="Verdana" size="2">*</font></p>
</td>
<td>
<asp:TextBox ID="months" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<p class="label">
Interest Rate (Reducing)<font color="#FF0000" face="Verdana" size="2">*</font></p>
</td>
<td>
<asp:TextBox ID="rate" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
<td>
%
</td>
</tr>
<tr>
<td>
<p class="label">
Monthly Payment (EMI)</p>
</td>
<td>
<p align="center">
<input type="button" id="button" name="button" value="Click" class="normallink" onclick="showpay()" />
<%-- <asp:Button ID="button" runat="server" Text="Click" OnClientClick="return showpay();" />--%>
</p>
</td>
</tr>
<tr>
<td>
<span class="label">Calculated Monthly EMI </span>
</td>
<td>
<asp:TextBox ID="pay" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Total Amount with Interest </span>
</td>
<td>
<asp:TextBox ID="tot_amount" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Flat Interest Rate PA </span>
</td>
<td width="109">
<asp:TextBox ID="interest_pa" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Flat Interest Rate PM </span>
</td>
<td>
<asp:TextBox ID="interest_pm" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Total Interest Amount </span>
</td>
<td width="109">
<asp:TextBox ID="tot_interest" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Yearly Interest Amount </span>
</td>
<td>
<asp:TextBox ID="yearly_interest" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</div>
Thanks,
Prasanth
1 Answer, 1 is accepted
0
Hello Prasanth,
I tried to replicate the problematic behavior that you described, but to no avail. Here is a video, demonstrating the behavior at my end. The asp:Button uses its server-side OnClick event handler, in order to update the text of an asp:Label. Please correct me if I had missed something.
Regards,
Nencho
Telerik
I tried to replicate the problematic behavior that you described, but to no avail. Here is a video, demonstrating the behavior at my end. The asp:Button uses its server-side OnClick event handler, in order to update the text of an asp:Label. Please correct me if I had missed something.
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.