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

Ajax is not working with tabstrip callback

7 Answers 142 Views

Ajax

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

Keith asked on 31 May 2013, 04:07 PM

I used an example found elsewhere on the Telerik forums to dynamically load user controls into a panel with a tabstrip control managing which control is loaded.

The original source gave two simple examples:
Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="RadTabStrip.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>

<!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>Dynamically loaded user controls on tab click and a postback from a user control</title>

</head>

<body>

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

<asp:ScriptManager id="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<rad:RadTabStrip ID="RadTabStrip1" runat="server" OnTabClick="RadTabStrip1_TabClick" AutoPostBack="True">

<Tabs>

<rad:Tab runat="server" Text="Simple control" Value="0">

</rad:Tab>

<rad:Tab runat="server" Text="Timer Control" Value="1">

</rad:Tab>

</Tabs>

</rad:RadTabStrip>

<telerik:radajaxmanager id="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadTabStrip1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:radajaxmanager>

<asp:Panel ID="Panel1" runat="server" Height="438px" Width="1192px">

</asp:Panel>

</div>

</form>

</body>

</html>

TimerControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TimerControl.ascx.cs" Inherits="TimerControl" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">

</asp:Timer>

<asp:Label ID="Label1" runat="server" Text="Timer is ticking <br/>Ticks: "></asp:Label>

<asp:Label ID="Label2" runat="server" Text="0"></asp:Label>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="Timer1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Label2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy

and finally
SimpleControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SimpleControl.ascx.cs" Inherits="SimpleControl" %>

<asp:Label ID="Label1" runat="server" Text="Just a user control. Take a look at the other one."></asp:Label>

In the codebehind, the loaded control is determined from the viewstate, and I have successfully incorporated my controls in place of the two examples provided above. However, the entire page is being updated on postback.

In default.aspx I have set the ajax manager to update the tabstrip and panel and in my controls, I have set the ajax proxy to update only the controls that need to be updated, but it does not work correctly, still updating the entire page on each postback.

On another note, when I set OnTabClick to my click handler, I get a compile error indicating that the function is not part of the class. Removing it does not create a problem with the event firing, but I mention it because it may be the reason the entire page is updated.

7 Answers, 1 is accepted

answered on 05 Jun 2013, 11:07 AM

Hi Keith,

Please try removing the RadAjaxManager and wrap the content of the Default.aspx in a RadAjaxPanel and test whether the problem still replicates. If it does please show us your code-behind as well so we investigate further. As for the compile time problem it is probably caused by a broken reference to the code-behind. Now the code demonstrated in the example is taken from a Web Site project if you are using a Web Application you should reference your code-behind file using CodeBehind instead of CodeFile.

Regards,
Angel Petrov
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 their blog feed now.

answered on 05 Jun 2013, 12:28 PM

I was still unable to get the page to work as designed using the above example, however, wrapping the updated body of the page in an asp updatepanel does seem to resolve the issue, but that seems to defeat the purpose of specifying which controls to update when a postback is made from specified controls.

default.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="app._default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>MyApp</title>

<link href="/css/content.css" rel="Stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server" style="height: 100%;">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadTabStrip1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTabStrip" />

<telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePartialRendering="true">

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black" AnimationDuration="500">

</telerik:RadAjaxLoadingPanel>

<div id="container">

<div id="wrapper" runat="server">

<div id="body">

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">

<ContentTemplate>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnTabClick="RadTabStrip_TabClick" AutoPostBack="false"

Skin="Black" Style="margin-bottom: 0px" Width="100%">

<Tabs>

<telerik:RadTab runat="server" Selected="True" Text="Tab1" Value="0">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Tab2" Value="1">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<asp:Panel ID="Panel1" runat="server" Width="100%" BorderColor="Black" BorderStyle="Inset" BorderWidth="2px">

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

TimerControl.ascx

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TimerControl.ascx.vb" Inherits="app.TimerControl" %>

<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">

<ContentTemplate>

<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">

</asp:Timer>

<asp:Label ID="Label1" runat="server" Text="Timer is ticking <br/>Ticks: "></asp:Label>

<asp:Label ID="Label2" runat="server" Text="0"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

The issue with the compile error of the function not being found was me being an idiot ... of course a private function will not be visible outside the class .. changing to a protected function resolved that issue.

The whole reason I need to update only specified controls is because I am requiring authenticated users and my header (not shown in the example for clarity) includes asp:loginstatus and other controls related to login and authentication. Because my security module does not update this during postback, when the whole page is reloaded, the asp:loginstatus is lost and the user appears logged out, when in fact they are not.

answered on 10 Jun 2013, 11:31 AM

Hi Keith,

Since the problem was resolved by wrapping the content in an update panel that surely means that the ajax was not configured correctly. Now in the last code provided the script manager's reference should be placed before the RadAjaxManager because the AJAX scripts will not load correctly. By doing so and removing the update panels from both the default page and user control you should be able to make things work correctly. Note that you should also set the panel to update itself if it contains controls that postback. Also placing a proxy or update panels in the user controls is not necessary when their parent control(panel or tabstrip according to where is the user control loaded) is ajaxified correctly.

Regards,
Angel Petrov
Telerik

answered on 10 Jun 2013, 03:48 PM

That sounds simple enough, only it doesn't seem to be working correctly for me.

Although the controls now update correctly (for example, the codebehind updates of controls being enabled or disabled), the tabstrip becomes disabled after a postback. I am not changing the tabstrip in the codebehind.

When I run it through a debugger, the Telerik core functions throw numerous exceptions regarding a control being undefined or null. I can only presume this has something to do with the Ajax as it was working correctly without the ajax manager, except it refreshed the entire page. Also the Ajax javascript fails with an error after the first postback.

In its simplest form, I have this code which works fine.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Page1.aspx.vb"

Inherits="WebApp.Page1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Src="../controls/header.ascx" TagName="header" TagPrefix="hdr" %>

<%@ Register Src="../controls/footer.ascx" TagName="footer" TagPrefix="ftr" %>

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

</head>

<body>

<form id="form1" runat="server" style="height: 100%;">

<telerik:RadScriptManager ID="RadScriptManager1" EnableScriptCombine="true" OutputCompression="AutoDetect" runat="server">

<CompositeScript>

<Scripts>

<asp:ScriptReference Assembly="System.Web" Name="WebForms.js" ScriptMode="Auto" />

<asp:ScriptReference Path="~/js/Page1.js" ScriptMode="Auto" />

</Scripts>

</CompositeScript>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnNewAdd">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="wrapper" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnEditUpdate">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="wrapper" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnDelete">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="wrapper" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnDone">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="wrapper" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" OutputCompression="AutoDetect">

<StyleSheets>

<telerik:StyleSheetReference Path="~/css/main.css" />

<telerik:StyleSheetReference Path="~/css/Page1.css" />

</StyleSheets>

</telerik:RadStyleSheetManager>

<hdr:header ID="header1" runat="server" />

<div id="wrapper" runat="server">

<div id="Content">

<div id="gb1" class="groupbox">

<asp:Label ID="gb1Label" Text="GroupBox 1" CssClass="groupbox_label" runat="server"></asp:Label>

</div>

<div id="gbTabs">

<telerik:RadTabStrip ID="radTabControl1" runat="server" Skin="Black" SelectedIndex="0"

MultiPageID="radMultiPage1">

<Tabs>

<telerik:RadTab Text="Page1" runat="server" Selected="True">

</telerik:RadTab>

<telerik:RadTab Text="Page2" runat="server">

</telerik:RadTab>

<telerik:RadTab Text="Page3" runat="server">

</telerik:RadTab>

<telerik:RadTab Text="Page4" runat="server">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="radMultiPage1" runat="server" SelectedIndex="0" CssClass="groupbox">

<telerik:RadPageView ID="tpPage1" runat="server">

<div id="gbPage1" class="groupbox">

<asp:Label Text="Page1 Groupbox" CssClass="groupbox_label" runat="server"></asp:Label>

</div>

</telerik:RadPageView>

<telerik:RadPageView ID="tpPage2" runat="server">

<div id="gbPage2" class="groupbox">

<asp:Label Text="Page2 Groupbox" CssClass="groupbox_label" runat="server"></asp:Label>

</div>

</telerik:RadPageView>

<telerik:RadPageView ID="tpPage3" runat="server">

<div id="gbPage3" class="groupbox">

<asp:Label Text="Page3 Groupbox" CssClass="groupbox_label" runat="server"></asp:Label>

</div>

</telerik:RadPageView>

<telerik:RadPageView ID="tpPage4" runat="server">

<div id="gbPage4" class="groupbox">

<asp:Label Text="Page4 Groupbox" CssClass="groupbox_label" runat="server"></asp:Label>

</div>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

<telerik:RadButton ID="btnNewAdd" runat="server" Text="New" Skin="Black">

</telerik:RadButton>

<telerik:RadButton ID="btnEditUpdate" runat="server" Text="Edit" Skin="Black">

</telerik:RadButton>

<telerik:RadButton ID="btnDelete" runat="server" Text="Delete" Skin="Black">

</telerik:RadButton>

<telerik:RadButton ID="btnDone" runat="server" Text="Done" Value="Page1"

AutoPostBack="false" OnClientClicked="MenuCloseMe" Skin="Black">

</telerik:RadButton>

</div>

<ftr:footer ID="footer1" runat="server" />

</form>

</body>

</html>

Further testing indicates that after a single postback, the page is broken and further interaction with the page is not possible.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Ajax is not working with tabstrip callback

7 Answers, 1 is accepted