This is a migrated thread and some comments may be shown as answers.
Automatic text selection when NumericTextBox take focus
8 Answers 137 Views
This is a migrated thread and some comments may be shown as answers.
Jérémy
Top achievements
Rank 1
Jérémy asked on 04 Dec 2013, 08:18 AM

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)

8 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 04 Dec 2013, 02:11 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jérémy
Top achievements
Rank 1
answered on 04 Dec 2013, 02:31 PM


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
0
Accepted
Iliana Nikolova
Telerik team
answered on 04 Dec 2013, 03:09 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
answered on 07 Jan 2014, 08:48 PM
Iliana,

This worked great for me, but why have the setTimeout? 
0
Mike
Top achievements
Rank 1
answered on 08 Jan 2014, 03:05 PM
Nevermind. It works in IE without the setTimeout but in Chrome it requires it.
0
Daniel
Top achievements
Rank 1
answered on 25 Aug 2014, 01:16 PM
This should (must) be the default for all input controls (TextEdit, NumericTextBox, ...).

Regards,
Daniel
0
Georgi Krustev
Telerik team
answered on 25 Aug 2014, 01:53 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Anton Mironov
Telerik team
answered on 21 Sep 2020, 02:23 PM
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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Asked by
Jérémy
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Jérémy
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Georgi Krustev
Telerik team
Anton Mironov
Telerik team
Share this question
or