How to fix a div size after value changed RadNumericTextBox

2 posts, 0 answers
  1. M
    M avatar
    2 posts
    Member since:
    Sep 2013

    Posted 23 Dec 2013 Link to this post

    I've been using a RadNumericTextBox to fix a min and max values for sizing a div.

    Control

    <Telerik:RadNumericTextBox ID="txtHeight" runat="server" MinValue="0" MaxValue="128" NumberFormat-DecimalDigits="0" onchange="setHeight();"></Telerik:RadNumericTextBox>

    JS function

    function setHeight() {
        $("#div1").css("height", $("[id$=txtHeight]").val());
    }

    DIV

    <div id="div1" style="border:1px solid black;"></div>

    Everything works well, but when I input the value of 500 inside the txtHeight then lost the focus, the RAD control fix the max value to 128 but the div has been already change the height to 500px and it's not refreshed. I put a button to refresh the value of the div but what I really want is to set it in the change or blur client side event of the textbox. If not, it could be seen as a bug. So how can I do to set the div size after the RADControl does the change value to maximum value set?

  2. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 25 Dec 2013 Link to this post

    Hello,

    You need to use the client-side events provided by the RadNumericTextBox:
    <script type="text/javascript">
        //Put your JavaScript code here.
        function valueChanged(sender, args) {
            if (args.get_newValue() != '') {
                $("#div1").height(args.get_newValue());
            }
        }
    </script>
    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" MinValue="0" MaxValue="128">
        <NumberFormat DecimalDigits="0" />
        <ClientEvents OnValueChanged="valueChanged" />
    </telerik:RadNumericTextBox>
    <br />
    <br />
    <div id="div1" style="border: 1px solid black; background-color: lightblue; width: 128px; height: 128px"></div>

    Hope this helps. Please copy this mark-up to your page and let me know about the result.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top