How to insert a value the RadNumericTextBox to RadSlider?

3 posts, 1 answers
  1. Patrik
    Patrik avatar
    6 posts
    Member since:
    May 2009

    Posted 08 Jul 2012 Link to this post

    The project got a RadSlider, a RadNumericTextBox and a Label. Changing values ​​RadSlider the value shown in RadNumericTextBox, Label displays the function result (deposit + interest).

    The problem is that I can not create an event that would change the values ​​in RadNumericTexBox (change clients) value delegated to RadSlider.

    <script type="text/javascript">
            function ManualValueChange(sender, eventArgs) {
                $get("CalcSlider").value = sender.get_newValue();
            }
        </script>
        <telerik:RadAjaxManager ID="PpAjaxManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="CalcSlider">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="CalcSliderDeposit" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="lblYouHave" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="lblprofit" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CalcSliderDeposit">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="CalcSlider" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="lblYouHave" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="lblprofit" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
       <div class="typeCalc">
                        <br />
                        <table style="width: 640px; margin: 0 auto;">
                            <tr>
                                <td colspan="2" style="height: 20px; text-align: center">
                                    <h3>
                                        BondMarketers Invest Plan</h3>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 80px; border-top: 1px solid gray; text-align: center">
                                    <telerik:RadSlider ID="CalcSlider" runat="server" Skin="Black" MinimumValue="0" MaximumValue="10000"
                                        LargeChange="2000" SmallChange="10" Width="650px" Height="65px" ItemType="Tick"
                                        TrackPosition="TopLeft" AnimationDuration="600" ShowDragHandle="false" OnValueChanged="CalcSliderValueChanged"
                                        AutoPostBack="true">
                                    </telerik:RadSlider>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 20px">
                                      
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 200px; text-align: center">
                                    Invest:
                                </td>
                                <td>
                                    <telerik:RadNumericTextBox runat="server" ID="CalcSliderDeposit" Type="Currency"
                                        Culture="en-US" DataType="System.Decimal" AutoPostBack="true">
                                        <ClientEvents OnValueChanged="ManualValueChange" OnLoad="ManualValueChange" />
                                    </telerik:RadNumericTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 20px">
                                      
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 200px; text-align: center">
                                    <asp:Label runat="server" ID="lblYouHave" />
                                </td>
                                <td>
                                    <asp:Label runat="server" ID="lblprofit" Font-Bold="True" Font-Size="Larger" ForeColor="Green" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 20px">
                                      
                                </td>
                            </tr>
                        </table>
                    </div>


    Method to change the values​​:

    protected void CalcSliderValueChanged(object sender, EventArgs e)
           {
               double percent = FormulaLayer.FormulaValue((decimal)CalcSlider.Value);
               decimal deposit = (decimal)CalcSlider.Value;
               int percents = 100;
     
               DateTime sDate = DateTime.Now;
               DateTime eDate = DateTime.Now.AddDays(365);
     
               CalcSliderDeposit.Value = Convert.ToDouble(deposit);
                
                    
               lblYouHave.Text = "You have: ";
     
               lblprofit.Text = string.Format("${0}", ((Convert.ToDouble(deposit) / percents) * percent * Convert.ToDouble(FormulaLayer.GetWorkDayCount(sDate, eDate)) + Convert.ToDouble(CalcSlider.Value)));
           }


    Thanks for any help.

    Sorry for my bad english... :D
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jul 2012 Link to this post

    Hi Patrik,

    Try the following code snippet to change the RadSlider value based on the value in the RadNumericTextBox.

    JS:
    <script type="text/javascript">
        function ManualValueChange(sender, eventArgs) {
            var CalcSlider = $find("<%= CalcSlider.ClientID %>");
            CalcSlider.set_value(sender.get_value());
        }
    </script>

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Patrik
    Patrik avatar
    6 posts
    Member since:
    May 2009

    Posted 09 Jul 2012 Link to this post

    Hi Princy,

    Thanks.
Back to Top