Telerik Forums / UI for ASP.NET AJAX Forum / Input /

Input Manager controls lose formatting on ajax postback

Telerik UI for ASP.NET AJAX
Resources Buy Try

6 posts, 0 answers

Danny

22 posts

Member since:
Dec 2005

Posted 17 Mar 2010 Link to this post

I'm having an issue with the numeric input control settings in the input manager. I have a grid that is using ajax for its commands. When one of those commands is executed, the numeric inputs lose their focus. This would potentially not be a big problem, except that their values are lost when the user put focus on the numeric input.

You can actually see this happening in your demo here
http://demos.telerik.com/aspnet-ajax/input/examples/radinputmanager/databinding/defaultcs.aspx

To reproduce, just click on one of the commands in the DateInputSetting grid. For instance, if you click the cancel button on the row that is in edit mode, you will notice the editable numeric box in the NumericTextBoxSetting loses it's formatting. Then all you have to do is click inside that box to see that it disappears when it gets focus.

Is there any way that this could be worked around easily? I have quite a few controls on my form that are using the NumericTextBoxSetting functionality.
Radoslav
Admin

1566 posts
Posted 22 Mar 2010 Link to this post

Hi Daniel,

In order to achieve the desired functionality please set the InitializeOnClient property to true on every RadInputManager's setting:

<telerik:RadInputManager ID="RadInputManager1" runat="server">

<telerik:NumericTextBoxSetting Type="Currency" EmptyMessage="Freight" InitializeOnClient="true" Culture="English (United States)">

   <TargetControls>

       <telerik:TargetInput ControlID="RadGrid2" />

   </TargetControls>

</telerik:NumericTextBoxSetting>

...

Additionally I am sending you a simple example which illustrates the desired functionality.

I hope this helps.

Best wishes,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

example.zip
Danny

22 posts

Member since:
Dec 2005

Posted 22 Mar 2010 Link to this post

Thanks for the reply, Radoslav.

Unfortunately that did not correct my problem. There are a few of differences between my implementation and the one in your demo:

1. My numeric textbox is not inside my grid. It's another control on the form. The grid is using the AjaxManagerProxy, because...
2. I'm using this in a Master/Content page application.
3. This form is in a user control that is dynamically loaded into a panel.

Do you have anything else that I could try.

Thanks again,

Daniel
Radoslav
Admin

1566 posts

Posted 25 Mar 2010 Link to this post

Hello Daniel,

It is hard to say what is causing the described issue without seeing some code. Could you please send us a simple runnable application demonstrating the problem. You could open a formal support ticket from your Telerik account and attach a ZIP file there. In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Best wishes,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

Kevin Cabritit

20 posts

Member since:
Sep 2009

Posted 15 Apr 2010 Link to this post

I'm also having this same issue.

Basic Master Page contains another Content Page.
Content Page contains a RadGrid with Template Edit Form.
When the RadGrid is registered with the RadAjaxManagerProxy, all styles are lost from the RadInputManager.

I tried the suggestion made above.

Master Page:

    
            <%@ Master Language="C#" AutoEventWireup="true" CodeFile="CMSMaster.master.cs" Inherits="CMSMaster" %> 
        
            <!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>KICS Super Admin CMS</title> 
        
                <link rel="stylesheet" href="./css/cms.css" type="text/css" media="screen" /> 
        
                <!-- include jQuery library --> 
        
                <script type="text/javascript" src='<%#ResolveUrl("~/Scripts/jquery-1.4.1.min.js")%>'></script> 
        
                <script type="text/javascript" src='<%#ResolveUrl("~/Scripts/CommonInterfaceScripts.js"%>'></script> 
        
                <asp:ContentPlaceHolder ID="head" runat="server"> 
        
                </asp:ContentPlaceHolder> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                </telerik:RadAjaxManager> 
        
                <div id="container"> 
        
                    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        
                        <tr> 
        
                            <td colspan="2" valign="top" class="header"> 
        
                                <asp:Image ID="Image1" runat="server" ImageUrl="~/images/interface/KICSCMSLogo.png" 
        
                                    Width="228" Height="72" AlternateText="KICS Super Admin CMS" /> 
        
                            </td> 
        
                        </tr> 
        
                        <tr> 
        
                            <td valign="top" class="sidebar"> 
        
                                  <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />   
        
                                <telerik:RadMenu ID="RadMenu1" runat="server" DataNavigateUrlField="Url" DataSourceID="SiteMapDataSource1" 
        
                                    DataTextField="Title" Flow="Vertical" Skin="Default" Width="220px"  
        
                                      OnItemDataBound="RadMenu1_ItemDataBound" style="top: 0px; left: 0px"> 
        
                                    <ExpandAnimation Duration="50" /> 
        
                                    <DefaultGroupSettings ExpandDirection="Right" OffsetX="7" /> 
        
                                </telerik:RadMenu> 
        
                            </td> 
        
                            <td valign="top" class="mainfill"> 
        
                                <div id="maincontent"> 
        
                                    <div id="subMenu"> 
        
                                        <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="False" 
        
                                            StartFromCurrentNode="True" /> 
        
                                        <telerik:RadMenu ID="RadMenu2" runat="server" DataNavigateUrlField="Url" DataSourceID="SiteMapDataSource2" 
        
                                            DataTextField="Title" Skin="Default" Style="top: 0px; left: 0px"  
        
                                            MaxDataBindDepth="1" ondatabound="RadMenu2_DataBound"  
        
                                            onitemdatabound="RadMenu2_ItemDataBound"> 
        
                                            <DefaultGroupSettings ExpandDirection="Right" /> 
        
                                        </telerik:RadMenu> 
        
                                    </div> 
        
                                    <div class="spacer" ID="subMenuSpacer" runat="server">&nbsp;</div> 
        
                                    <div ID="informationDiv" runat="server" class="informationDiv"> 
        
                                        <asp:Literal ID="InformationLiteral" runat="server"></asp:Literal> 
        
                                    </div>                             
        
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
        
                                    </asp:ContentPlaceHolder> 
        
                                </div> 
        
                            </td> 
        
                        </tr> 
        
                        <tr> 
        
                            <td colspan="2" class="footer"> 
        
                                KICS Super Admin CMS. About this page: 
        
                                <asp:Literal ID="PageDescriptionLiteral" runat="server"></asp:Literal> 
        
                            </td> 
        
                        </tr> 
        
                    </table> 
        
                </div> 
        
                <div id="pageTitle"> 
        
                    <asp:Label ID="PageTitleLabel" runat="server" Text="Page Title"></asp:Label></div> 
        
                <div id="logged"> 
        
                    Logged in as 
        
                    <asp:LoginName ID="LoginName1" runat="server" /> 
        
                    <br /> 
        
                    <asp:LinkButton ID="LinkButton1" runat="server">Logout Here</asp:LinkButton></div> 
        
                </form> 
        
            </body> 
        
            </html>

Content Page:

    
            <%@ Page Title="" Language="C#" MasterPageFile="~/CMSMaster.master" AutoEventWireup="true" 
        
                CodeFile="CMSNews_list.aspx.cs" Inherits="CMSNews_CMSNews_list" %> 
        
            <%@ Register Assembly="Telerik.OpenAccess.Web" Namespace="Telerik.OpenAccess" TagPrefix="telerik" %> 
        
            <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> 
        
                <script language="javascript" type="text/javascript"> 
        
                    function CheckBoxListSelect(cbControl, state) { 
        
                        var chkBoxList = $telerik.findElement($get("<%= RadGrid1.ClientID %>"), "CheckBoxList1"); 
        
                        var chkBoxCount = chkBoxList.getElementsByTagName("input"); 
        
                        for (var i = 0; i < chkBoxCount.length; i++) { 
        
                            chkBoxCount[i].checked = state; 
        
                        } 
        
                        return false; 
        
                    } 
        
                </script> 
        
            </asp:Content> 
        
            <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 
        
                <div class="titledBox"> 
        
                    <h1 id="SuperAdminListHeading"> 
        
                        CMS News List</h1> 
        
                    <telerik:OpenAccessDataSource ID="OpenAccessDataSource1" runat="server" ObjectContextProvider="ORM.ObjectScopeProvider1, ORM" 
        
                        OrderBy="IsSticky DESC, ModifyDateTime" TypeName="ORM.Cmsnews" OnInserting="OpenAccessDataSource1_Inserting" 
        
                        OnUpdating="OpenAccessDataSource1_Updating" OnInserted="OpenAccessDataSource1_Inserted" 
        
                        OnUpdated="OpenAccessDataSource1_Updated"> 
        
                    </telerik:OpenAccessDataSource> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="OpenAccessDataSource1" 
        
                        GridLines="None" AllowSorting="True" OnItemCommand="RadGrid1_ItemCommand" AutoGenerateColumns="False" 
        
                        OnItemDataBound="RadGrid1_ItemDataBound" OnItemInserted="RadGrid1_ItemInserted" 
        
                        OnItemUpdated="RadGrid1_ItemUpdated"> 
        
                        <HeaderContextMenu EnableAutoScroll="True"> 
        
                        </HeaderContextMenu> 
        
                        <MasterTableView DataKeyNames="CMSNewsId" DataSourceID="OpenAccessDataSource1" CommandItemDisplay="Top" 
        
                            AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True"> 
        
                            <RowIndicatorColumn> 
        
                                <HeaderStyle Width="20px"></HeaderStyle> 
        
                            </RowIndicatorColumn> 
        
                            <ExpandCollapseColumn> 
        
                                <HeaderStyle Width="20px"></HeaderStyle> 
        
                            </ExpandCollapseColumn> 
        
                            <Columns> 
        
                                <telerik:GridEditCommandColumn ButtonType="ImageButton" Reorderable="False" Resizable="False" 
        
                                    ShowSortIcon="False"> 
        
                                    <HeaderStyle Width="30px" Wrap="False" /> 
        
                                    <ItemStyle Width="30px" /> 
        
                                </telerik:GridEditCommandColumn> 
        
                                <telerik:GridBoundColumn DataField="Subject" HeaderText="Subject" SortExpression="Subject" 
        
                                    UniqueName="Subject"> 
        
                                    <HeaderStyle Width="250px" /> 
        
                                    <ItemStyle Width="250px" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridCheckBoxColumn DataField="IsSticky" DataType="System.Boolean" HeaderText="Always on top?" 
        
                                    SortExpression="IsSticky" UniqueName="IsSticky"> 
        
                                </telerik:GridCheckBoxColumn> 
        
                                <telerik:GridBoundColumn DataField="ModifyDateTime" DataType="System.DateTime" HeaderText="Modified" 
        
                                    SortExpression="ModifyDateTime" UniqueName="ModifyDateTime"> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ConfirmText="Sure?" 
        
                                    ConfirmTitle="Really?" HeaderText="Delete" ImageUrl="~/images/icons/delete.png" 
        
                                    Reorderable="False" Resizable="False" ShowSortIcon="False" Text="Delete" UniqueName="DeleteColumn" 
        
                                    HeaderImageUrl="~/images/icons/delete.png"> 
        
                                    <HeaderStyle Width="30px" /> 
        
                                    <ItemStyle Width="30px" /> 
        
                                </telerik:GridButtonColumn> 
        
                            </Columns> 
        
                            <EditFormSettings EditFormType="Template"> 
        
                                <EditColumn UniqueName="EditCommandColumn1"> 
        
                                </EditColumn> 
        
                                <FormTemplate> 
        
                                    <table style="width: 100%;"> 
        
                                        <tr> 
        
                                            <td style="width: 100px;"> 
        
                                                Subject: 
        
                                            </td> 
        
                                            <td> 
        
                                                <asp:TextBox ID="SubjectTextBox" runat="server" Text='<%# Bind("Subject") %>' CssClass="form50" 
        
                                                    CausesValidation="True" /> 
        
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter a subject." 
        
                                                    ToolTip="Please enter a subject." ControlToValidate="SubjectTextBox" Display="None"></asp:RequiredFieldValidator> 
        
                                                <cc1:ValidatorCalloutExtender ID="RequiredFieldValidator1_ValidatorCalloutExtender" 
        
                                                    runat="server" Enabled="True" TargetControlID="RequiredFieldValidator1"> 
        
                                                </cc1:ValidatorCalloutExtender> 
        
                                            </td> 
        
                                        </tr> 
        
                                        <tr> 
        
                                            <td> 
        
                                                Text: 
        
                                            </td> 
        
                                            <td> 
        
                                                <asp:TextBox ID="TextTextBox" runat="server" Text='<%# Bind("Text") %>' CssClass="form100" 
        
                                                    TextMode="MultiLine" MaxLength="500" /> 
        
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Please enter some text for this news item." 
        
                                                    ToolTip="Please enter some text for this news item." ControlToValidate="TextTextBox" 
        
                                                    Display="None"></asp:RequiredFieldValidator> 
        
                                                <cc1:ValidatorCalloutExtender ID="RequiredFieldValidator2_ValidatorCalloutExtender" 
        
                                                    runat="server" Enabled="True" TargetControlID="RequiredFieldValidator2"> 
        
                                                </cc1:ValidatorCalloutExtender> 
        
                                            </td> 
        
                                        </tr> 
        
                                        <tr> 
        
                                            <td> 
        
                                                URL: 
        
                                            </td> 
        
                                            <td> 
        
                                                <asp:TextBox ID="UrlTextBox" runat="server" Text='<%# Bind("Url") %>' CssClass="form50" /> 
        
                                            </td> 
        
                                        </tr> 
        
                                        <tr> 
        
                                            <td> 
        
                                                Always on top? 
        
                                            </td> 
        
                                            <td> 
        
                                                <asp:CheckBox ID="IsStickyCheckBox" runat="server" Checked='<%# Bind("IsSticky") %>' /> 
        
                                            </td> 
        
                                        </tr> 
        
                                        <tr> 
        
                                            <td valign="top"> 
        
                                                CMSUsers: 
        
                                            </td> 
        
                                            <td> 
        
                                                <a id="A1" href="#" onclick="javascript: CheckBoxListSelect ('CheckBoxList1',true)"> 
        
                                                    All</a> | <a id="A2" href="#" onclick="javascript: CheckBoxListSelect ('CheckBoxList1',false)"> 
        
                                                        None</a><br /> 
        
                                                <br /> 
        
                                                <div class="titledBox"> 
        
                                                    <telerik:OpenAccessDataSource ID="OpenAccessDataSource2" runat="server" EnableDelete="False" 
        
                                                        EnableInsert="False" EnableUpdate="False" ObjectContextProvider="ORM.ObjectScopeProvider1, ORM" 
        
                                                        OrderBy="Name" TypeName="ORM.Cmsuser"> 
        
                                                    </telerik:OpenAccessDataSource> 
        
                                                    <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="OpenAccessDataSource2" 
        
                                                        DataTextField="Name" DataValueField="CMSUserId" RepeatDirection="Horizontal" 
        
                                                        RepeatLayout="Table"> 
        
                                                    </asp:CheckBoxList> 
        
                                                </div> 
        
                                            </td> 
        
                                        </tr> 
        
                                    </table> 
        
                                    <asp:Button ID="btnUpdate" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' 
        
                                        Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'></asp:Button> 
        
                                    &nbsp; 
        
                                    <asp:Button ID="btnCancel" runat="server" CausesValidation="False" CommandName="Cancel" 
        
                                        Text="Cancel"></asp:Button> 
        
                                    <telerik:RadInputManager ID="RadInputManager1" runat="server"> 
        
                                        <telerik:TextBoxSetting BehaviorID="Required" InitializeOnClient="true"> 
        
                                            <TargetControls> 
        
                                                <telerik:TargetInput ControlID="SubjectTextBox" /> 
        
                                                <telerik:TargetInput ControlID="TextTextBox" /> 
        
                                            </TargetControls> 
        
                                            <Validation IsRequired="true" /> 
        
                                        </telerik:TextBoxSetting> 
        
                                        <telerik:TextBoxSetting BehaviorID="NotRequired" InitializeOnClient="true"> 
        
                                            <TargetControls> 
        
                                                <telerik:TargetInput ControlID="UrlTextBox" /> 
        
                                            </TargetControls> 
        
                                            <Validation IsRequired="false" /> 
        
                                        </telerik:TextBoxSetting> 
        
                                    </telerik:RadInputManager> 
        
                                </FormTemplate> 
        
                            </EditFormSettings> 
        
                        </MasterTableView> 
        
                    </telerik:RadGrid> 
        
                    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server"  
        
                        DecoratedControls="CheckBoxes, Buttons" /> 
        
                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"> 
        
                    </telerik:RadAjaxLoadingPanel> 
        
                    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"  
        
                                        LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManagerProxy> 
        
                </div> 
        
            </asp:Content>

Any ideas?

Radoslav
Admin

1566 posts

Posted 20 Apr 2010 Link to this post

Hello Alex,

Placing the RadInputManager into the FormTemplate and registering it via ajax is not suggested, because it is too late for the RadInputManager manager to initialize properly.
To achieve the desired functionality, please check out the following online example which demonstrates how to use the RadInputManager control:
http://demos.telerik.com/aspnet-ajax/input/examples/radinputmanager/dynamicinputfiltersettings/defaultcs.aspx?product=grid

I hope this helps.

Regards,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

Input Manager controls lose formatting on ajax postback

Danny

Radoslav

Danny

Radoslav

Kevin Cabritit

Radoslav