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

RadAjaxManager only one controll should load

2 Answers 63 Views

Ajax

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

Kristijan asked on 15 Jul 2011, 09:25 PM

Hi experts,

I am using the RadAjaxManager the first time and is not working as expected (described: http://www.telerik.com/help/aspnet-ajax/ajax-ajaxmanager.html)

Environment:

Dot Net Nuke 6.0
The user controll is inhereiting from a base class that nothidg to do with Ajax (just some helping utilities)

Two asp:Panels:

panTable: Containing RadGrid where the customers are listed
panDetails: Containing different controls where customer details are (will be) displayed

Ajaxifying goals:

panTable is ajaxifyed for sorting, filtering …
panDetails ajaxifyed in order to add components in runtime…
performance:
1. when a line in panTable is clicked (selected) I write the customerID in a hidden field in panTable “hdId” and trigger it with JavaScript ($(".updateTriger").trigger('click');)
2. I am going to trigger panTable reload by btnSave (panDetails) in case the Customer name is changed.

Problem :

When the line in the grid is clicked, both panDetails AND panTable are triggered.

Can you find an error in my code? Do you have a better solution to achieve the goals above?

Thanks,

Kristijan

Code:

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

Inherits="Vits.Modules.VipCrm.Controls.CustomersView" %>

<%@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %>

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

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="panTable">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panTable" LoadingPanelID="ralPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="panDetails">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panDetails" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%">

<telerik:RadPane ID="rpTable" runat="server">

<asp:Panel ID="panTable" runat="server">

<asp:ImageButton ID="imgAdd" ImageUrl="~/images/add.gif" runat="server" />

<asp:LinkButton ID="lnkAddCustomer" CssClass="CommandButton" runat="server" resourcekey="lnkAddCustomer"

Text="lnkAddCustomer" />

<telerik:RadGrid ID="rgvMain" runat="server" OnInit="LocalizeRagGridHeader" DataSourceID="gridData">

<MasterTableView DataKeyNames="Id" AutoGenerateColumns="false" AllowFilteringByColumn="True"

AllowSorting="True" TableLayout="Auto" CssClass="VitsSelectable" OverrideDataSourceControlSorting="true">

<Columns>

<telerik:GridBoundColumn DataField="Id" DataType="System.Int32" ItemStyle-CssClass="VitsId HiddenA"

HeaderStyle-CssClass="HiddenA" SortExpression="Id" />

<telerik:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name"

DataType="System.String" UniqueName="Name" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"

FilterControlWidth="100%" ShowFilterIcon="false" />

</Columns>

<SortExpressions>

<telerik:GridSortExpression FieldName="Name" SortOrder="Ascending" />

</SortExpressions>

</MasterTableView>

<FilterMenu EnableImageSprites="False" />

<GroupingSettings CaseSensitive="false" />

</telerik:RadGrid>

<asp:ObjectDataSource ID="gridData" runat="server" TypeName="Vits.Modules.VipCrm.Dal.DaoCustomers"

SelectMethod="GetAll" />

</asp:Panel>

</telerik:RadPane>

<telerik:RadSplitBar ID="spliteBar" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="rpDetails" runat="server">

<telerik:RadAjaxPanel ID="raxDetails" runat="server">

<asp:Panel ID="panDetails" runat="server" OnLoad="panDetails_Load">

<div class="divDetails">

<a href="#" class="updateTriger" onclick="__doPostBack('<%= panDetails.ClientID %>', '');">

</a>

<asp:HiddenField ID="hdCmd" runat="server" />

<asp:HiddenField ID="hdId" runat="server" />

<table>

<tr>

<td>

<dnn:Label id="lblName" runat="server" controlname="lblName" />

</td>

<td>

<asp:TextBox ID="txtName" CssClass="NormalTextBox" runat="server" />

</td>

</tr>

</table>

<asp:Repeater ID="rptCustomerAccess" runat="server">

<HeaderTemplate>

<table>

<tr>

<th>

<dnn:Label id="lblUserName" runat="server" controlname="lblUserName" />

</th>

<th>

<dnn:Label id="lblHasAccess" runat="server" controlname="lblHasAccess" />

</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

</td>

<td>

<asp:HiddenField ID="hdUserId" runat="server" Value='<%#Eval("UserId")%>' />

<asp:Label ID="lblLastName" runat="server" Text='<%#Eval("LastName")%>' />

<asp:Label ID="lblFirstName" runat="server" Text='<%#Eval("FirstName")%>' />

-

<asp:Label ID="lblDisplayName" runat="server" Text='<%#Eval("DisplayName")%>' />

</td>

<td>

<asp:CheckBox ID="cbxHasAccess" Checked='<%#Eval("HasAccess")%>' runat="server" />

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

<table id="commands">

<tr>

<td>

<telerik:RadButton ID="btnSave" CssClass="CommandButton" runat="server" resourcekey="btnSave"

OnClick="btnSave_Click" Text="btnSave" />

</td>

<td>

<telerik:RadButton ID="btnCancel" CssClass="CommandButton" runat="server" resourcekey="btnCancel"

OnClick="btnCancel_Click" Text="btnCancel" />

</td>

</tr>

</table>

</div>

</asp:Panel>

</telerik:RadAjaxPanel>

</telerik:RadPane>

</telerik:RadSplitter>

using System;

using Vits.Modules.VipCrm.Dal;

using Vits.Modules.VipCrm.Ui;

namespace Vits.Modules.VipCrm.Controls

{

public partial class CustomersView : VitsModuleBase

{

public override void LoadContent()

{

}

protected void btnCancel_Click(Object sender, EventArgs e)

{

}

protected void btnSave_Click(Object sender, EventArgs e)

{

}

protected void panDetails_Load(object sender, EventArgs e)

{

if ("ViewCMD" != hdCmd.Value)

return;

int id;

if (!int.TryParse(hdId.Value, out id))

id = DaoCountries.ID_NONE;

LoadDetails(id.ToString());

}

private void LoadDetails(string textId)

{

int id;

if (!int.TryParse(textId, out id))

{

id = -2;//Something wrong!

}

hdId.Value = id.ToString();

if (DaoCustomers.ID_NONE == id)

txtName.Text = string.Empty;

else

{

Customer customer = DaoCustomers.Instance.Get(id);

txtName.Text = customer.Name;

}

rptCustomerAccess.DataSource = DaoCustomers.Instance.GetCustomerAccess(PortalId, id);

rptCustomerAccess.DataBind();

}

2 Answers, 1 is accepted

answered on 20 Jul 2011, 03:27 PM

Hello Kristijan,

Check out the below demos and help article for more information:
http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/partialajaxification/defaultcs.aspx
http://www.telerik.com/help/aspnet-ajax/ajax-controls-in-ajaxpanel-and-ajaxsettings.html

Additionally, I suggest that you avoid adding container controls as ajax initiators. Because when a container (the panTable in your case) is added as ajax initiator, and respectively as updated controls, it behaves like being wrapped in ASP:UpdatePanel with UpdateMode Always. Thus whatever is the ajax controls, panTable will be always updated. So you would better add separate settings for each postback controls which you need to invoke ajax.

Give it a try and let me know if this helps.

Greetings,
Iana
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!