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

Problem with Tabstrip and Ajax

2 Answers 119 Views

TabStrip

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

Steven asked on 04 Oct 2012, 11:01 PM

I Opened a ticket for this, but thought I'd post to the forum to see if I could get a faster turnaround...maybe I'm missing something.

Hi,

I have a tabstrip with 2 tabs. I have them set to do a full postback when a tab is clicked.

I have a radgrid, with a dropdown in it. I am updating the grid asynch, when the dropdown is changed.
Additionally, I want to update the text in my tabs when the dropdown is changed. To do is I am using the RadAjaxManager, adding the grid as an ajax setting, and having its updated controls be the grid itself, and the tabstrip.

Unfortunately, as soon as add the tabstrip as an updated control for the the grid action, this causes the tab strip to postback asynch, which is what I do not want to happen.

I think this is a bug, because I have not set the tabstrip to do any asynch postbacks (in the RadAjaxManager). It is only suppose to be sent back to the server when the grid's dropdown is changed. It should continue to do a full postback if a tab is clicked.

I've included a simple project that shows the incorrect behaviour.

As an experiment, I tried in the Page_Init to register the tabstrip as a full postback control using RegisterPostBackControl. This seems to work upon initially loading of the page. The tabs will now do full postbacks at the start. But as soon as the dropdown is changed, and an asynch postback is done (sending the tabstrip to the server), the tabstrip then starts doing asynch postback when the tabs are clicked.

Here is the default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="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 runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

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

<script type="text/javascript">

//Put your JavaScript code here.

</script>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="radGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="radGrid1" />

<telerik:AjaxUpdatedControl ControlID="rtsMainTab" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadTabStrip ID="rtsMainTab" runat="server" AutoPostBack="true" OnTabClick="rtsMainTab_TabClick">

<tabs>

<telerik:RadTab runat="server" >

<TabTemplate>

<span class="rtsTxt">My Groups</span> (<asp:Label ID="lblMyGroupsCountOpen" runat="server" />/<asp:Label ID="lblMyGroupsCountStat" runat="server"

style="color:Red;" />)

</TabTemplate>

</telerik:RadTab>

<telerik:RadTab runat="server" >

<TabTemplate>

<span class="rtsTxt">My Assignments</span> (<asp:Label ID="lblMyAssignmentsCountOpen" runat="server" />/<asp:Label ID="lblMyAssignmentsCountStat" runat="server"

style="color:Red;" />)

</TabTemplate>

</telerik:RadTab>

</tabs>

</telerik:RadTabStrip>

<telerik:RadGrid runat="server" ID="radGrid1" Skin="Outlook"

BorderStyle="None"

AllowPaging="false" AllowMultiRowSelection="true" AutoGenerateColumns="false"

PageSize="30" >

<MasterTableView TableLayout="Fixed" >

<Columns>

<telerik:GridBoundColumn DataField="AssignmentGroup" HeaderText="Assg Group"

HeaderStyle-Width="95px" ItemStyle-Width="95px" />

<telerik:GridTemplateColumn HeaderText="Stat" HeaderStyle-Width="70px" ItemStyle-Width="70px"

SortExpression="IsStat" >

<ItemTemplate>

<asp:DropDownList ID="ddlReferralAssignmentsIsStat" runat="server" CssClass="DropDownList"

AutoPostBack="true" OnSelectedIndexChanged="ddlReferralAssignmentsIsStat_SelectedIndexChanged" >

<asp:ListItem Text="Yes" Value="Yes" />

<asp:ListItem Text="No" Value="No" />

</asp:DropDownList>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowColumnsReorder="false" ReorderColumnsOnClient="false">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="600px" />

</ClientSettings>

<PagerStyle Mode="NumericPages" PageButtonCount="4" />

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Here is the 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_Init(object sender, EventArgs e)

{

//if this is commented in, the tabs will do Full Postbacks initially, until an asynch postback is done from the grid

//if its not commented in, then the tabs always postback asynch

//RadScriptManager.GetCurrent(this.Page).RegisterPostBackControl(rtsMainTab);

}

protected void Page_Load(object sender, EventArgs e)

{

if(!this.IsPostBack)

{

string[] data = { "test1", "test2" };

radGrid1.DataSource = data;

radGrid1.DataBind();

}

protected void rtsMainTab_TabClick(object sender, RadTabStripEventArgs e)

{

bool isAsynch = RadScriptManager.GetCurrent(this.Page).IsInAsyncPostBack;

System.Diagnostics.Trace.WriteLine("tab click is asynch: " + isAsynch);

}

protected void ddlReferralAssignmentsIsStat_SelectedIndexChanged(Object sender, EventArgs e)

{

bool isAsynch = RadScriptManager.GetCurrent(this.Page).IsInAsyncPostBack;

System.Diagnostics.Trace.WriteLine("grid action is asynch: " + isAsynch);

}

Please help,
Rich

2 Answers, 1 is accepted

answered on 05 Oct 2012, 04:10 PM

I got a reply from Telerik regarding my issue. They've provided a workaround. I have not tried it yet, but seems not very difficult to implement.

Hello Richard,

Thank you for contacting us.

This is unfortunately a known limitation of RadAjaxManager. When a control is once added as an updated control, it starts performing AJAX requests when posting to the server. With the current implementation of the manager this cannot be fixed. The only option is to rewrite much of the RadAjaxManager's logic, which is currently not planned but may be scheduled for a future release of the controls in case of many customer complaints.
At the moment, the work around is to check whether the tab strip is making the request and if so, disable AJAX, so an actual postback occurs. To do this you need to:

1) Add a setting where the RadTabStrip updates itself, this is needed as otherwise it cannot be an event target for an Ajax Request:

<telerik:AjaxSetting AjaxControlID="rtsMainTab">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rtsMainTab" />

</UpdatedControls>

</telerik:AjaxSetting>

2) Attach the client OnRequestStart event of the manager and disable AJAX in case of request initiated by the tabstrip:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true" OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated" ClientEvents-OnRequestStart="checkRequest">

function checkRequest(sender, args) {

if (args.get_eventTarget().indexOf("rtsMainTab") != -1) {

args.set_enableAjax(false);

}

We excuse for any inconvenience this issue might have caused.

Kind regards,
Tsvetina
the Telerik team