How to select/highlight values inside NumericTexBox

[Shawn]

Hello,

In my Grid's Edit PopUp window I have a Kendo NumericTextBoxFor input control to allow the user to add/edit values in the Grid and the underlying model.  When I want to insert a record the NumericTextBox displays a zero "0" which is fine.  However, when the user tabs to this text box or when it gets focus I want the "0" to be highlighted/selected so that the user can change it to a different value without having to click either the delete button or the backspace button to get rid of the "0".  Currently, when the user tabs to this text box the value is momentarily highlighted for a split-second.  Is there a way to have the value get highlighted and stay highlighted until the user tabs out of this input box? 

This is my HTML:

@Html.Kendo().NumericTextBoxFor(model => model.ReplacementCost).Format("C0").Decimals(0).Placeholder("...").HtmlAttributes(new { style = "width: 200px; background-color: white;" }).Spinners(false).Events(e => e
    .Change("replacementCost_change"))

 

This is the script to make it so that the validation message doesn't show if the user clears the value in the text box:

function replacementCost_change() {
    var txtLatitude = $("#ReplacementCost").data("kendoNumericTextBox");
    if ($("#ReplacementCost").val() === '') {
        txtLatitude.value(0);
        txtLatitude.trigger('change');
    }
}

 

Thanks.

Shawn A.

[Konstantin Dikov]

Hello Shawn,

Once the NumericTextBox is initialized you could attach handler for the "focus" event of the input element and manually call the "select" method over it:

$("#theID").focus(function(){
  var input = $(this)
  setTimeout(function(){
input.select();
  })
})

Best Regards,
Konstantin Dikov
Progress Telerik

[Shawn]

Hello Konstantin,

Thank you for your help!  This worked perfectly for me.

<div>
                @(Html.Kendo().NumericTextBoxFor(model => model.ReplacementCost)
                            .Format("C0").Decimals(0).Placeholder("...")
                            .HtmlAttributes(new { style = "width: 200px; background-color: white;" })
                            .Spinners(false)
                            .Events(e => e
                                .Change("replacementCost_change")))

                <script>
                    $("#ReplacementCost").focus(function () {
                        var input = $(this);
                        setTimeout(function () {
                            input.select();
                        });
                    });
                </script>
</div>

 

Regards,

Shawn A.