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

Ajax, LoadingPanel and RadNumericTextBox

5 Answers 312 Views

Ajax

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

Mac asked on 17 May 2007, 09:15 AM

Hi, not sure what's happening but I'm having a couple of issues with Ajax Prom... working with LoadingPanels and RadNumericTextBoxes

the follow page exhibits 2 unexpected behaviours
1) Clicking on the checkbox will cause a postback as expected but after the first postback the loadingpanel never shows again. It always shows for the dropdown postback though
2) When the checkbox triggers a postback, the RadNumericTextBox style, width, spin button functions and number client validation etc is lost

Any ideas if this is a bug or am I missing the obvious?

Thanks
Scott.

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

<!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>Ajax Numeric Input</title> 

</head> 

<body> 

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

    <asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager> 

    <telerik:RadAjaxManager ID="ram1" runat="server" EnableAJAX="true" EnableHistory="true" EnablePageHeadUpdate="true">  

        <AjaxSettings> 

            <telerik:AjaxSetting AjaxControlID="ddlType">  

                <UpdatedControls> 

                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1" /> 

                </UpdatedControls> 

            </telerik:AjaxSetting> 

        </AjaxSettings> 

    </telerik:RadAjaxManager> 

    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Height="75px" InitialDelayTime="0" Width="75px">  

        <asp:Image ID="Image1" runat="server" ImageUrl="~/RadControls/Ajax/Skins/Default/Loading.gif" AlternateText="Loading" /> 

    </telerik:RadAjaxLoadingPanel> 

    <div> 

        <asp:DropDownList ID="ddlType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlType_SelectedIndexChanged">  

            <asp:ListItem Value="">Select</asp:ListItem> 

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

            <asp:ListItem Value="Number">Value2</asp:ListItem> 

        </asp:DropDownList> 

    </div> 

    <div> 

        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px" LoadingPanelID="LoadingPanel1">  

            <asp:Panel ID="pnlNumber" runat="Server" Visible="true">  

                <asp:CheckBox ID="chkNumberValidation" runat="server" Text="Enable" AutoPostBack="true" OnCheckedChanged="chkNumberValidation_CheckChanged" Checked="true"/>  

                <br /> 

                <radI:RadNumericTextBox ID="txtNumberMinLength" Width="60px" runat="server" ShowSpinButtons="True">  

                    <EnabledStyle HorizontalAlign="Right" /> 

                </radI:RadNumericTextBox> 

                <radI:RadNumericTextBox ID="txtNumberMaxLength" Width="60px" runat="server" ShowSpinButtons="True">  

                        <EnabledStyle HorizontalAlign="Right" /> 

                </radI:RadNumericTextBox> 

            </asp:Panel> 

        </telerik:RadAjaxPanel> 

    </div> 

    </form> 

</body> 

</html>

Codebehind

using System;  

using System.Data;  

using System.Configuration;  

using System.Collections;  

using System.Web;  

using System.Web.Security;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

using System.Web.UI.WebControls.WebParts;  

using System.Web.UI.HtmlControls;  

public partial class Tests_NumericInput : System.Web.UI.Page  

{  

    protected void Page_Load(object sender, EventArgs e)  

    {  

    }  

    protected void chkNumberValidation_CheckChanged(object sender, EventArgs e)  

    {  

        txtNumberMinLength.Enabled = txtNumberMaxLength.Enabled = chkNumberValidation.Checked;  

    }  

    protected void ddlType_SelectedIndexChanged(object sender, EventArgs e)  

    {  

        pnlNumber.Visible = true;  

    }  

}

5 Answers, 1 is accepted

answered on 17 May 2007, 09:47 AM

It appears that RadAjaxManager cannot ajaxify RadAjaxPanel - if you try to ajaxify AjaxPanel with AjaxManager, strange things may happen :)

I was able to make your setup work fine by removing the AjaxPanel and just using asp:panel. I also added the checkbox to the AjaxSettings list. Everything appeared to be working perfectly fine (skin is not lost, loading panel shows fine, etc).

Here is my setup:

<asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager> 
         
        <telerik:RadAjaxManager ID="ram1" runat="server" EnableAJAX="true" EnableHistory="true" 
            EnablePageHeadUpdate="true"> 
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="ddlType"> 
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="pnlNumber" LoadingPanelID="LoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="chkNumberValidation"> 
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="pnlNumber" LoadingPanelID="LoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Height="75px" InitialDelayTime="0" 
            Width="75px"> 
            <asp:Image ID="Image1" runat="server" ImageUrl="~/RadControls/Ajax/Skins/Default/Loading.gif" 
                AlternateText="Loading" /> 
        </telerik:RadAjaxLoadingPanel> 
        <div> 
            <asp:DropDownList ID="ddlType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlType_SelectedIndexChanged"> 
                <asp:ListItem Value="">Select</asp:ListItem> 
                <asp:ListItem Value="Text">Value1</asp:ListItem> 
                <asp:ListItem Value="Number">Value2</asp:ListItem> 
            </asp:DropDownList> 
        </div> 
        <div> 
            <asp:Panel ID="pnlNumber" runat="Server" Visible="true"> 
                <asp:CheckBox ID="chkNumberValidation" runat="server" Text="Enable" AutoPostBack="true" 
                    OnCheckedChanged="chkNumberValidation_CheckChanged" Checked="true" /> 
                <br /> 
                <radI:RadNumericTextBox UseEmbeddedScripts="false" ID="txtNumberMinLength" Width="60px" 
                    runat="server" ShowSpinButtons="True" Skin="Outlook"> 
                    <EnabledStyle HorizontalAlign="Right" /> 
                </radI:RadNumericTextBox> 
                <radI:RadNumericTextBox UseEmbeddedScripts="false" ID="txtNumberMaxLength" Width="60px" 
                    runat="server" ShowSpinButtons="True" Skin="Outlook"> 
                    <EnabledStyle HorizontalAlign="Right" /> 
                </radI:RadNumericTextBox> 
            </asp:Panel> 

answered on 17 May 2007, 10:52 AM

As far as I can tell, this appears to be a bug - I do not believe that using the buttons in disabled mode should be possible. I have found a workaround though - you can wire the client-side OnButtonClick event handler and return false if the input is disabled - this will cancel the event and the value will not change.

I do agree with you though, that rad Input docs need some work - for example, there is no information about the OnButtonClick client-side event at all (how many parameters it accepts, the type of parameters, etc)

http://www.telerik.com/help/aspnet/input/RadInput~Telerik.WebControls.InputClientEvents~OnButtonClick.html

Here is the code I am using to disable the buttons when the input is disabled as well - hopefully this approach will be applicable in your setup.

<script type="text/javascript">

function ButtonClickHandler(input, buttonName)
{
    if (!input.Enabled)
    {
    return false;
    }
}

</script>

<radI:RadNumericTextBox
    UseEmbeddedScripts="false"
    ID="txtNumberMaxLength"
    Width="60px"
    runat="server"
    ShowSpinButtons="True"
    Skin="Outlook">
    <EnabledStyle HorizontalAlign="Right" />
    <ClientEvents OnButtonClick="ButtonClickHandler"/>
</radI:RadNumericTextBox>