Multiple instances of user control containing RadCallBack

[Manik]

Hi...
I created a user control which has a rad ComboBox and RadCallBack.
ComboBox displays customer name and when i select a customer, with the help of RadCallBack, execution transfers to code behind and customer details are extracted from DB.
then those details are filled in combo boxes.

when I have 1 instance of this user control on a page, it works fine, but when I add another instance, I can see customer names in the dropdown, but those textboxes are not filled. I can debug and see that those code behind lines are executed but i do not see any results in my text boxes.

Any help would be appreciated.

here is the code:



// this is java script code called when a customer is selected in rad combobox

function CustomerSelectedChanged() {

                var comboBox = <%= cmbLookUp.ClientID %>;

               

                var CustomerCode = comboBox.GetValue();

                //document.getElementById("<%=txtFrom.ClientID %>").value = 'manik';

                  <%=rdCallBackCustDetails.ClientID%>.MakeCallback('GetCustomerDetails',CustomerCode);

                 

 

            }

' this is code behind

 

Private Sub RadCallback1_Callback(ByVal sender As System.Object, ByVal args As Telerik.WebControls.CallbackEventArgs) Handles rdCallBackCustDetails.Callback

 

        If args.CallbackEvent = "GetCustomerDetails" And args.Args <> "" Then

 

            Try

 

 

                MakeControlsUpdatable()

 

               

                Dim CustomerData As New FreightComDN.cls_Customer(ConfigurationManager.AppSettings("FreightConStr"))

                Dim resultcol As Collection

                Dim CustomerCode As String

 

                CustomerCode = args.Args

 

                resultcol = CustomerData.getASpecificCustomer(args.Args)

 

                SetText(Me.txtFrom, resultcol.Item(1).customerName)

 

                CustomerData = Nothing

            Catch ex As Exception

 

            End Try

 

       

            End If

 

 

        End If

    End Sub

 

Private Function MakeControlsUpdatable()

        Try

            ' set all the controls to be updated

            rdCallBackCustDetails.ControlsToUpdate.Add(Me.txtFrom)

 

        Catch ex As Exception

 

        End Try

    End Function

 

Private Sub SetText(ByVal txtBox As TextBox, ByVal txtValue As Object)

        Try

            txtBox.Text = txtValue

        Catch ex As Exception

        End Try

 

    End Sub

[Ivana]

Hi Manik,

Could you please share, which version of our controls you are using?
I have noticed in your client-side code that you are using the client-side API of the Classic ASP.NET Rad Controls, to find the object of a ComboBox:

var comboBox = <%= cmbLookUp.ClientID %>;
var CustomerCode = comboBox.GetValue();

The online help documentation of the Rad Controls for ASP.NET AJAX is available at: RadControls for ASP.NET AJAX Documentation.

Regards,
Ivana
the Telerik team

[Manik]

Hi Ivana

thanks for the reply.

I am trying to upgrade from classic telerik controls to Rad Ajax suite.
I have a simple scenerio, I am somehow not able to achieve that.

I need to create a user control where I will have one rad combo box, and few text boxes.
Rad Combobox will get customer names from database. On selecting a customer form dropdown, I want to do a ajax post back, get customer details from DB and fill my text boxes.

Most important thing is that I want to place 3 instances of this user control on my page.

If you have any sample code or sample project of this scenerio, it would really help. I am kind of stuck in this.

thanks again
Manik Rawal

[Manik]

Hi Ivana

I researched more on this and found out that i need to use RadAjaxManagerProxy in order to acheive this.
Here is what i did,

I placed RadAjaxManagerProxy on my user control along with RadComboBox and a textbox inside a panel.
On onclientselectedindexchanged event of RadComboBox, I called following method

function InitiateAsyncRequest() {

        var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
        ajaxManager.ajaxRequest('test');
        return false;
    }

My RadAjaxManagerProxy HTML looks like this

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManagerProxy1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1"
                    LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

Code Behind::

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim manager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)
        ' manager.ClientEvents.OnRequestStart = "onRequestStart"
        'manager.ClientEvents.OnResponseEnd = "onResponseEnd"
        AddHandler manager.AjaxRequest, AddressOf manager_AjaxRequest

    End Sub


    Protected Sub manager_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs)
        'handle the manager AjaxRequest event here
        TextBox1.Text = "Manik"
    End Sub

Then I placed two instances of this control on my web page, and one RadAjaxManager.

Below is HTML code for web page:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="test2.WebForm1" %>

<%@ Register src="WebUserControl2.ascx" tagname="WebUserControl2" tagprefix="uc1" %>
<%@ 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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
        </telerik:RadScriptManager>
        <br />
        <br />

    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <uc1:WebUserControl2 ID="WebUserControl21" runat="server" />
    <p>
         </p>
    <uc1:WebUserControl2 ID="WebUserControl22" runat="server" />
    </form>
</body>
</html>

When I do a select something in Combo box, JS is fired properly. the call back works good as well and code behind is executed.

THE PROBLEM:

Now the problem is, one changing the item on ComboBox of one Control, Text boxes on both Controls get updated.
Please HELP.

thanks
Manik

[Ivana]

Hello Manik,

The reason why the textBox gets populated in both instances of the user control is that the AjaxRequest event handler in code-behind, executes for every instance that it is initiated on the page.

Instead of populating the TextBox within the user control, you could populate it within the page where the user controls are initiated. I have prepared a sample web page, which shows how the TextBox could be populated in the way described above. In the sample, I have demonstrated two ways how it could be achieved, entirely with client code and using AjaxRequest.
You could download the attached files and test the page locally.

I hope this would help.

Greetings,
Ivana
the Telerik team