Automatic text selection when NumericTextBox take focus

8 posts, 1 answers
  1. Jérémy
    Jérémy avatar
    11 posts
    Member since:
    Dec 2013

    Posted 04 Dec 2013 Link to this post

    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)

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 04 Dec 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jérémy
    Jérémy avatar
    11 posts
    Member since:
    Dec 2013

    Posted 04 Dec 2013 Link to this post



    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
  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 04 Dec 2013 Link to this post

    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!
  6. Mike
    Mike avatar
    17 posts
    Member since:
    Jan 2014

    Posted 07 Jan 2014 Link to this post

    Iliana,

    This worked great for me, but why have the setTimeout? 
  7. Mike
    Mike avatar
    17 posts
    Member since:
    Jan 2014

    Posted 08 Jan 2014 Link to this post

    Nevermind. It works in IE without the setTimeout but in Chrome it requires it.
  8. Daniel
    Daniel avatar
    17 posts
    Member since:
    Jan 2014

    Posted 25 Aug 2014 Link to this post

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

    Regards,
    Daniel
  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 25 Aug 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready