Select text on focus

[EDWARD]

How can I select the textbox's contents when it receives the focus.  Ordinarily, I would call select() within jQuery's focus event handler.  However, this does not work with the numeric textbox.  I presume this is because the input that ultimately receives focus has style display:none when the page is loaded.

[Georgi Krustev]

Hello Edward,

 
You will need to use setTimeout to achieve your goal. Check this jsFiddle demo.

All the best,
Georgi Krustev
the Telerik team

[EDWARD]

Thanks.

I used this in a more general approach to the problem:

$('.k-input').on('focus', function () {
        var input = $(this);
        setTimeout(function () { input.select(); });
    });

[Fernando Nogues]

This is working great for me, thanks EDWARD.

In my opinion this should be the default behavior as it is for other regular inputs.

[Mike]

The standard behavior of selecting all text when tabbing into an input should work with the NumericTextBox both inside and outside of a Kendo Grid, and should be built into Kendo.

We have created a UserVoice entry for this - go vote on it if you agree!

[z]

if you want to use this behavior of selecting all text in NumericTextBox inside a Kendo Grid, create a editor for the column:
  { field: "Budget", title: "Budget",  editor: editNumberWithoutSpinners }

    function editNumberWithoutSpinners(container, options) {
                var fld = $('<input data-text-field="' + options.field + '" ' +
            'data-value-field="' + options.field + '" ' +
            'data-bind="value:' + options.field + '" ' +
            'data-format="' + options.format + '"  />');
                fld.focus(function () {
                    this.select();
                });
                fld.appendTo(container)
                fld.kendoNumericTextBox({
                    spinners: false
                });
            }

[Robert]

Attempting to select text on focus, but in a grid field. Here's a jsbin: http://jsbin.com/ekegas/2/edit
In this simple grid, trying to set the 'name' column text when in focus, but its not working, even with the timeout.
What am I missing?

[Alexander Valchev]

Hi Robert,

In your case the combo is bound to remote data, this means that the widget will populate after data is received. You should bind to the dataBound event of the combo and select the text of its input element.

editor:function categoryDropDownEditor(container, options) {
   $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
   .appendTo(container)
   .kendoComboBox({
     autoBind: false,
     dataSource: {
       type: "odata",
       transport: {
         read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
       }
     },
     dataBound: function() {
       var combo = this;
       setTimeout(function() {
         combo.input.select();
       }, 0);
     }
   });
}

It is also required to wrap the select logic inside a time out, because the text is actually set after dataBound triggers.

Kind regards,
Alexander Valchev
the Telerik team

[Shea]

I used z's suggestion to fix this for myself. But this really should be the default behaviour. 

A very common use case if for users to tab between fields, then tab to the next field. Especially when these editors are part of a grid (which is also common). With this bug users must tab into the field, backspace the existing characters (or in IE del them, weird that they are different). Totally destroying the rapid input use case.

Here's to hoping this gets fixed in 2013.2.

~S

[Atlas]

I agree, this should be the default behavior. In addition, it would be nice to have a configuration setting for it so that you can easily do what you want. The RadNumericTextbox works this way.

[Atanas Korchev]

Hello,

 We cannot modify the default behavior because it would be a breaking change. We recommend opening a new feature request in our feedback portal.

Regards,
Atanas Korchev
Telerik

[Daniel]

Hi,

one year later and the same odd (annoying) behavior.
This behavior makes end-users crazy!


Please vote up for this:
http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3264987-automatically-select-all-when-tabbing-into-the-num


Regards,
Daniel

PS: Such a behavior doesn't have to be in such good UI control set.

[Allan]

And still we wait...  is it worth adding votes to feedback forums, it doesn't seem to make any difference.  I thought we would see the behaviour corrected when they introduce brand new .Net Core controls...  but alas no.  Wouldn't have been a breaking change on new controls... which was the previous excuse.

[Boyan Dimitrov]

Hello Allan,

In general our wrappers render the HTML and JavaScript needed to initialize a Kendo UI widget. The widget options propagate to the client-side via the widget initialization script. The Telerik UI for ASP.NET Core does not make any difference and works in the same way. 

Given this in order to change the behavior in .Net Core controls we should eventually change it in the Kendo UI NumericTextBox for JavaScript. Definitely this will be rather a breaking change with our current behavior and this can cause different behavior in existing projects of many our customers. We are trying to avoid introducing breaking changes so we do our best to find a workaround/solution to achieve this behavior  without modifying the source code of our widgets (in cases when such modification will introduce a breaking change with the current behavior). Currently my suggestion is to go with the solution provided in the http://docs.telerik.com/kendo-ui/controls/editors/numerictextbox/how-to/select-all-on-focus how-to article. 

 

Regards,
Boyan Dimitrov
Telerik by Progress

[Anton Mironov]

Hi Colleagues,

I would like to share with you that as of Kendo UI version 2020.2.617, our team has added the "selectOnFocus" property covering the pointed requirements in this thread.  For your future web development, feel free to utilize this implementation shown here:

<input id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox({
    selectOnFocus: true
});
</script>

If you have any questions about the new functionality don't hesitate to contact our team.

Kind Regards,
Anton Mironov
Progress Telerik

[jason2k]

[quote]Anton Mironov said:Hi Colleagues,

I would like to share with you that as of Kendo UI version 2020.2.617, our team has added the "selectOnFocus" property covering the pointed requirements in this thread.  For your future web development, feel free to utilize this implementation shown here:

<input id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox({
    selectOnFocus: true
});
</script>

If you have any questions about the new functionality don't hesitate to contact our team.

Kind Regards,
Anton Mironov
Progress Telerik

[/quote]

 

This does not work on its declarative init counterpart though:

<input type="number" data-role="numerictextbox" data-select-on-focus="true" />

[Anton Mironov]

Hello Jason,

Try the following implementation for the Kendo UI NumericTextBox:

<kendo-numerictextbox name="numeric" select-on-focus="true"></kendo-numerictextbox>

Using the latest version of the Kendo UI should work out of the box for the "selectOnFocus".

I hope this information helps.

 

Best Regards,
Anton Mironov
Progress Telerik

[Andy]

Hi Anton

This doesn't appear to work on a numeric textbox within a grid.  I have updated the EditorTemplates to include this, but it still appears to make no difference.  Am I missing something?

 

Thanks

 

Andy

[Tsvetomir]

Hello,

Attached to my response is a sample project using the latest version of the suite. It utilizes the Kendo UI NumericTextBox as an editor for a column. It appears to be working as expected. Can you confirm this on your side?

It would be very helpful if you could share the relevant code snippets for the grid and editor templates. As well as, the suite of Kendo UI that you are using.

 

Kind regards,
Tsvetomir
Progress Telerik

[Andy]

Hi Tsvetomir

Sorry for the delay, the email went to my junk.   Will review today and get back to you.

 

Andy

[Andy]

Hi Tsvetomir

I am using a new version of the Kendo UI  (Version 2020.3.1118), the version in your sample is 2020.2.617

The supplied sample you shared doesn't actually apply a select on focus to the Order ID field, which highlights my issue.

When the numeric textbox is used as an editor for the grid, the select on focus is not applied, and tabbing to the field doesn't highlight the number, but sets focus to the end of the value (i.e. after the value).

My understanding of the automatic templates used for grid editing is that it uses the templates in the shared\editortemplates directory, so altering these will alter how the controls are displayed?

My issue is that when editing a grid in-line, I need the select on focus set, so a user can tab between fields editing / adding values and the previous value is highlighted.

 

Andy

 

 

 

 

[Tsvetomir]

Hi Andy,

I apologize for the misinformation. I have attached the sample project that I used as a base rather than the modified version. I am reattaching the correct one to my response.

The editor templates located within the EditorTemplates folder of the project are data type-specific. The attached sample has different editors for the OrderID and the Freight due to the fact that the latter one is of decimal data type whereas OrderID is of type integer.

You could examine the "Decimal.cshtml" file that has the select-on-focus property enabled.

 

Best regards,
Tsvetomir
Progress Telerik