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

Input Manager controls lose formatting on ajax postback

5 Answers 235 Views

Input

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

Danny asked on 17 Mar 2010, 04:49 PM

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.

5 Answers, 1 is accepted

answered on 22 Mar 2010, 03:52 PM

example.zip

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.

answered on 25 Mar 2010, 08:53 AM

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

answered on 15 Apr 2010, 02:40 PM

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?

answered on 20 Apr 2010, 01:18 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Input Manager controls lose formatting on ajax postback

5 Answers, 1 is accepted