Update label text when opening Window

[Mickael]

Hi,
I am evaluating Telerik to replace some controls we have for our project.

We are using a RadSearchBox, and when the user select an entry, based on the entry different things can happen.
One of them is that a popup open with a label inside displaying the user entry name.

So far I have the following

ASP

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
<telerik:RadSearchBox
    ID="RadSearchBox1"
    runat="server"
    Width="300px"
    EmptyMessage="Search..."
    OnClientSearch="aspButtonCallbackFn"
    ShowSearchButton="true">
    <DropDownSettings Height="400" Width="300" />
    <WebServiceSettings Path="Main.aspx" Method="GetResults" />
</telerik:RadSearchBox>

<asp:Button runat="server" ID="Button6" OnClick="Button1_Click" Style="display: none" />
<script type="text/javascript" language="javascript">
    function aspButtonCallbackFn() {
        __doPostBack('<%=Button6.UniqueID%>', "");
    }
</script>
</telerik:RadAjaxPanel>

<telerik:RadWindow
    ID="modalPopup"
    runat="server"
    Width="360px"
    Height="360px"
    Modal="true">
    <ContentTemplate>
        <div style="height:100px; width:300px; text-align:center;">
            <asp:Table runat="server">
                <asp:TableRow>
                    <asp:TableCell ColumnSpan="2">
                        <asp:Label
                            ID="Lbl_Pnl_ForAdd"
                            runat="server"
                            Text="" />
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell HorizontalAlign="Center">
                        <asp:Button
                            ID="Bttn_Add"
                            Width="100"
                            OnClick="Bttn_Add_Click"
                            Text="Add"
                            runat="server"
                            class="button" />
                    </asp:TableCell>
                    <asp:TableCell HorizontalAlign="Center">
                        <asp:Button
                            ID="Bttn_Cancel_ForAdd"
                            Width="100"
                            OnClick="Bttn_Cancel_ForAdd_Click"
                            Text="Cancel"
                            runat="server"
                            class="button" />
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </div>
    </ContentTemplate>
</telerik:RadWindow>

telerik:RadSearchBox

    ID="RadSearchBox1"

    runat="server"

    Width="300px"

    EmptyMessage="Search..."

    OnClientSearch="aspButtonCallbackFn"

    ShowSearchButton="true">

    <DropDownSettings Height="400" Width="300" />

    <WebServiceSettings Path="Main.aspx" Method="GetResults" />

</telerik:RadSearchBox>

 

<asp:Button runat="server" ID="Button6" OnClick="Button1_Click" Style="display: none" />

<script type="text/javascript" language="javascript">

    function aspButtonCallbackFn() {

        __doPostBack('<%=Button6.UniqueID%>', "");

   }

</script>

<telerik:RadWindow
   ID="modalPopup"
runat="server"
Width="360px"
Height="360px"
Modal="true">
<ContentTemplate>
<div style="height:100px; width:300px; text-align:center;" class="popup_Container">
<asp:Table runat="server">
<asp:TableRow>
<asp:TableCell ColumnSpan="2">
<asp:Label
ID="Lbl_Pnl_ForAddExistingInterest"
runat="server"
Text="" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell HorizontalAlign="Center">
<asp:Button
ID="Bttn_Add_ForAddExistingInterest"
Width="100"
OnClick="Bttn_Add_ForAddExistingInterest_Click"
Text="Add"
runat="server"
class="button" />
</asp:TableCell>
<asp:TableCell HorizontalAlign="Center">
<asp:Button
ID="Bttn_Cancel_ForAddExistingInterest"
Width="100"
OnClick="Bttn_Cancel_ForAddExistingInterest_Click"
Text="Cancel"
runat="server"
class="button" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</ContentTemplate>
</telerik:RadWindow>

C#

[WebMethod]
public static SearchBoxData GetResults(SearchBoxContext context)
{
    return SQLAccess.Instance.Search(context.Text);
}

protected void Button1_Click(object sender, EventArgs e)
{
    try
    {
        string selectedData = RadSearchBox1.Text;
        Lbl_Pnl_ForAddExistingInterest.Text = String.Format("Do you want to add {0}?", selectedData);
        RadAjaxPanel2.ResponseScripts.Add(String.Format("$find('{0}').ajaxRequest();", RadAjaxPanel2.ClientID));

        string script = "function f(){$find(\"" + modalPopup.ClientID + "\").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
        ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);
   }
}

Any help would be welcomed.

[Marin Bratanov]

Hi Mickael,

Here are the issues I can see with this code, considering that I am not sure what exactly is the problem you are facing:

• an AJAX request is initiated via the __doPostBack() call, so a secondary request via the ResponseScripts registration is not needed inside the Button_Click event handler.
• to use the RadWindow ContentTemplate with AJAX, you should examine this article: http://www.telerik.com/help/aspnet-ajax/window-ajaxifying.html. Said shortly, its ContentTemplate may not be in the place in the DOM you may expect so it may not participate in the partial postback as expected. Adding an asp:UpdatePanel with UpdateMode=Conditional as the first child of the ContentTemplate and calling its Update() method when needed should let you accomplish this task.

Also, since it seems you need a confirmation from the server code, I advise you examine this article that treats such a setup so you can see how to accomplish it: http://www.telerik.com/help/aspnet-ajax/window-using-radconfirm-in-server-code.html.


Regards,

Marin Bratanov
Telerik

 

 

[Mickael]

Thanks for your quick answer.

I know the code is not usual.
Until now I was using Ajax and Obout as controls.
But they have shortcomings for what we want to achieve.

I removed the __doPostBack() and now I am using OnSearch() instead. It looks like it is working.
I know the popup looks like a confirmation popup, but this is only one out of several I can open depending on the entry selected.
In one of them I have to add controls dynamically for exemple.

I also added an update panel.
It looks like it is working too now.

I thought the RadAjaxPanel was a replacement for the UpdatePanel.
Looks like I was wrong.

Thanks a lot for your quick help.
Hopefully I will be able to move on on my own from there now.

[Mickael]

Oh, another question related (I am posting it here because I am not sure where else to put it)

If have the following in my ASP:

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
    <div id="navigationContainer" runat="server">
        <div id="navigation" style="height: 50px; width: 550px; display: block;"></div>
    </div>
</telerik:RadAjaxPanel>

From C# I am adding dynamic javascript that reference navigation.
But for some reason I get the following error when I have a postback:

JavaScript runtime error: Can not find container in document with id navigation

Is this a problem because I should have the javascript code in a RadCodeBlock ?
If so, how can I put the code dynamically into a RadCodeBlock?
Or could it be that the Javascript is added before the RadAjaxPanel ?

The RadAjaxPanel was to be an UpdatePanel.
It's the panel that contains the RadSearchBox.

[Marin Bratanov]

Hello Mickael,

RadAjax (RadAjaxManager and RadAjaxPanel) are built on top of the asp:UpdatePanels and extend their functionality with a lot of other convenient features, but there are limitations with the dynamic interception mechanism they need to use, and the lack of the .Update() method is the primary one. With AjaxSettings designed for the concrete page, this can be overcome. Of course, you can keep using the asp:Updatepanel in this case.

On the JS error you get - it is quite strange and I am not sure what could be causing it. Generally, elements created on the server (that have the runat="server" attribute) need to be referenced with their ClientIDs, like this:

function getNavigationContainer() {
 return document.getElementById("<%=navigationContainer.ClientID%>");
}

note how server code blocks are used to get the actual ID of the HTML element from the server, because ASP changes it.

You would need to wrap such a script that uses server code blocks in a RadCodeBlock.

If you are creating the script at runtime (e..g, via the ScriptManager.RegisterStartupScript or the ClientScript.RegisterClientScriptBlock methods), you should not need to add it to a RadCodeBlock. Those methods directly write the script in the HTML stream and they do not render server code blocks, you only need to make sure you pass the variables and strings properly (i.e., that there are quotation marks or apostrophes around the strings).

If this does not help, please post the simplest code that results in that error so I can examine it and offer a  more concrete answer.

Regards,

Marin Bratanov
Telerik

 

 

[Mickael]

I was using the ClientScript.RegisterClientScriptBlock  but it looks like it is what created those issues.
Now I am adding the scripts directly to RadCodeBlocks.

I use those scripts to draw on a canvas.
One of the canvas is drawing properly.
But the other is not for some reason.
Probably something stupid I am doing.