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

Ajax, LoadingPanel and RadNumericTextBox

5 Answers 256 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Mac
Top achievements
Rank 2
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

Sort by
0
Johan
Top achievements
Rank 1
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> 


0
Mac
Top achievements
Rank 2
answered on 17 May 2007, 10:37 AM
Thanks Johan, the sample works as I'd expected now. Guess I better go and rip out all the ajaxmanager references to ajax panels :(

The other thing I noticed is that when the radnumerictextbox is disabled, the spinbuttons still function increasing/decreasing the value. O wise telerik chaps, is this the expected behaviour, doesn't seem logical and I can't find anything in the input docs either way?

Thanks
Scott.

0
Johan
Top achievements
Rank 1
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>
0
Mac
Top achievements
Rank 2
answered on 17 May 2007, 11:11 AM
Thanks for the workaround Johan, agree that the input docs are a bit light at the moment.

To avoid makings lots of changes in my project however can anyone from Telerik confirm if a fix for this will be available in the service pack due next week because if so I'll wait, otherwise I'll use the workaround?

0
Steve
Telerik team
answered on 17 May 2007, 12:48 PM
Hello Mac,

This is an omission on our end which we will fix for the service pack. For the time being, please use the workaround provided by Johan.

Sorry for the inconvenience.

Greetings,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Ajax
Asked by
Mac
Top achievements
Rank 2
Answers by
Johan
Top achievements
Rank 1
Mac
Top achievements
Rank 2
Steve
Telerik team
Share this question
or