MVC Grid with InCell editing - can't select all text

3 posts, 0 answers
  1. Chris T.
    Chris T. avatar
    31 posts
    Member since:
    Apr 2008

    Posted 29 Nov 2016 Link to this post

    I've got a grid using the InCell edit mode with a custom editor template, and I'm trying to select all the text when the user clicks the cell to edit.  I've seen (and tried) several suggestions in other forums, but they simply don't work for me.  Currently, I'm down to this, which doesn't work but seems like it should:

    Editor template:

    @model decimal?
     
    @(Html.Kendo().NumericTextBoxFor(m => m)
          .Decimals(2)
          .RestrictDecimals(true)
          .Spinners(false)
          .HtmlAttributes(new { style = "width:100%" })
    )

     

    In the client-side edit handler:

    e.container.find('input').each(function () {
      var editor = this;
      setTimeout(function () { editor.select(); });
    });

     

    The reason I'm using .each is that there seems to be two input elements in the edit container.  I've tried .select on each of them individually, to no avail.

    Any thoughts on this?

  2. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 01 Dec 2016 Link to this post

    Hello Chris,

    You can use the approach from the following help article in order to select all text. Generally you need to call the select method on focus event and not initially.

    I hope this information helps.

    Regards,
    Kostadin
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  3. Chris T.
    Chris T. avatar
    31 posts
    Member since:
    Apr 2008

    Posted 01 Dec 2016 in reply to Kostadin Link to this post

    Cool...I was able to adapt that approach (binding to the focus event) for incell editing.  This is what I put in the grid's Edit event, for anyone else who needs this:

    e.container.find('input').each(function () {
      $(this).bind("focus", function () {
        var input = $(this);
        clearTimeout(input.data("selectTimeId")); //stop started time out if any
     
        var selectTimeId = setTimeout(function () {
          input.select();
        });
     
        input.data("selectTimeId", selectTimeId);
      }).blur(function (e) {
        clearTimeout($(this).data("selectTimeId")); //stop started timeout
      });
    });

     

    Thanks!

Back to Top