Automatic text selection when NumericTextBox take focus

[Jérémy]

Hello,

 We have a problem with a NumericTextBox within a Grid.
We would like to automatically select the text when the control NumericTextBox take focus (or only when the input value is 0).

This is defined in a NumericTextBox EditorTemplate as follows in the attached word file. I had to attach a file because of losing text formats while copy/pasting in your rich text editor in this forum (with IE10+Office2013+Win8):

Do you have an idea to make it because we are requested to do it for an intensively used and critical application ?

Thx

Mathieu P
.Net Developper
DEVOTEAM Application Practice (Luxembourg)

[Iliana Dyankova]

Hi Mathieu,

In order to achieve the expected result you could attach a handler to the Grid edit event and use the select() method with setTimeout. For example: 

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
  //....
  .Events(ev=>ev.Edit("selectText"))
)

<script>
function selectText(e) {
   $(e.container).find(".k-input.k-textbox").select();
   $('.k-input').on('focus', function () {
      var input = $(this);
      setTimeout(function () {
          input.select();
      });
   });
}
</script>

Regards,
Iliana Nikolova
Telerik

[Jérémy]

Thank you for your reply.

But I don’t have the event "edit" in my grid. Any idea?
See update and screenshot on the attached file

Mathieu

[Iliana Dyankova]

Hello Mathieu,

Edit is an event of the Grid not of the dataSource. I.e. thy the following: 

@(Html.Kendo().Grid(Model.Packages)
  //....
  .DataSource(dataSource => dataSource.Ajax()
    //....
  )
  .Events(ev=>ev.Edit("selectText"))
)

Regards,
Iliana Nikolova
Telerik

[Mike]

Iliana,

This worked great for me, but why have the setTimeout? 

[Mike]

Nevermind. It works in IE without the setTimeout but in Chrome it requires it.

[Daniel]

This should (must) be the default for all input controls (TextEdit, NumericTextBox, ...).

Regards,
Daniel

[Georgi Krustev]

Hi,

I would suggest vote for this functionality in the corresponding UserVoice item. Its implementation is directly related to the votes it has.

Regards,
Georgi Krustev
Telerik

 

 

[Anton Mironov]

Hi,

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

@(Html.Kendo().NumericTextBox()
      .SelectOnFocus(true)
      .Name("numerictextbox") // The name of the NumericTextBox is mandatory. It specifies the "id" attribute of the widget.
      .Min(-100) // Set the min value of the NumericTextBox.
      .Max(100) // Set the min value of the NumericTextBox.
      .Value(10) // Set the value of the NumericTextBox.
)

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

 

Kind Regards,
Anton Mironov
Progress Telerik