InLine Edit - Select entire cell

15 posts, 0 answers
  1. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 27 Sep Link to this post

    I'm having trouble selecting the entire cell when editing a grid in InLine mode.  I want the entire cell selected to make entering a new value easier.

    I tried adding the onEdit event.  But the onEdit event fires when the Edit button is clicked.

    For grids that are batch edit, I've been able to have the onEdit event fire javascript to select the entire cell.  This is how I'm doing it for a grid in batch mode.  I assume it will be similar, but I'm struggling with it.  Thanks for your help.

     

    function onEdit(e) {
     
        var inputName = e.container.find('input').attr("name");
     
        var myInput = e.container.find('input[name="' + inputName + '"]');
     
        myInput.select();
     
    }

  2. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 28 Sep in reply to Terry Link to this post

    Check out the HACK!!! that I do: http://dojo.telerik.com/@Stephen/oxuSo

    I've just taken the demo for inline editing and added my HACK!!! for textboxes and numericspin boxes(which is all this demo has).

    The HACK!!! works for grids but it also works for "loose" controls as well, i.e. a widget just on your form.

    The textbox HACK!!! just attaches a global handler on the focus event of .k-textbox element and selects() the contents.

    The NumericTextBox(or ComboBox or DatePicker, etc) is where the magic happens.

    //Custom NumericTextBox extentions.
    (function ($, undefined) {
      //Get a reference to the NumericTextBox init method to
      //call from within the custom control
      var x = kendo.ui.NumericTextBox.fn.init;
     
      var MyNumericTextBox = kendo.ui.NumericTextBox.extend({
          init: function (element, options) {
              var numericTextBox = this;
     
              x.call(numericTextBox, element, options);
              numericTextBox.element.on("focus", numericTextBox._getFocus);
          },
     
          _getFocus: function (e) {
              var input = $(this);
     
              setTimeout(function () {
                  input.select();
              });
          }
      })
      kendo.ui.plugin(MyNumericTextBox);
    })(window.kendo.jQuery);

     

    What this does is creates your own widget derived from the desired kendo widget that simply adds the focus handler to do the selection in the init/constructor.

    Then it registers the widget as a plugin...BUT...because I didn't add the options configuration for the widget to give it a new name(http://docs.telerik.com/kendo-ui/intro/widget-basics/create-custom-kendo-widget#add-options), it overwrites/replaces the built-in NumericTextBox with mine so that all existing code that uses .kendoNumericTextBox() or Html.Kendo().NumericTextBox(), etc still works as the new widget has the same name as the built-in one, just with the tweak to the init to attach the focus handler.

     

    I have a custom widget defined like this for each kendo widget that has an input with contents that should be selected on focus.

     

    Note: the javascript that defines the custom widget should be after the main kendo.all.min.js but *before* the kendo.aspnetmvc.min.js.  The MVC script adds some custom methods to the base widget that get blown away by this HACK!!! if you define your widget after the MVC script has done its thing.

     

    This technique may not be pretty but it's been working pretty well.

     

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 29 Sep Link to this post

    Hello Terry,

    You can try the following code within the edit event of the Grid:
    edit: function(e){
        e.container.find("input").bind("focus", function(){
        if(this.style.display != "none"){
          var element = this;
          setTimeout(function(){
                element.select();
          })
        }
      })
       
      setTimeout(function(){
            document.activeElement.select();
      })
    },

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 29 Sep in reply to Konstantin Dikov Link to this post

    Konstantin,

    This works when there are only text boxes in the grid.  But I have a drop-down list defined like this.

    columns.ForeignKey(c => c.InstanceYear, (System.Collections.IEnumerable)Model.YearList, "Value", "Text").Title("Year");

    I get an error that says "Object doesn't support property or method 'select'" on the drop-down list field.  Is there a way to change the code you sent me to not blow up on the dropdown list?  I don't need the dropdown list to be selected. 

  6. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 29 Sep in reply to Terry Link to this post

    Dropdownlists do not have anything that can be selected, so you get that error.

    In my solution, you simply don't create a custom DropDownList.

    In Konstantin's solution, you have to somehow check if the element is a dropdown list(i.e. has class .k-dropdownlist, isFunction(select), whatever) and skip the select() part.

  7. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 29 Sep in reply to Stephen Link to this post

    Stephen - my understanding is that your hack overrides the Kendo widgets on all views.  Not just this particular view.  Is that correct?

    I'm leery of trying your method because I don't know what that could effect elsewhere.  I don't have a great understanding of JavaScript.  So maybe it's just the fear of the unknown.  But I would prefer a solution that only effects the one view.  So I don't have to worry about there being unintended consequences on other views.  

  8. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 29 Sep in reply to Terry Link to this post

    Yes, it does override all uses of the widget that the custom one replaces...if you include the javascript.  You can choose not to include it on some views but not others.

    I needed/wanted a solution that I didn't have to add to each control/grid.  With dozens of grids(82 and counting in one "Enterprise" app alone) and hundreds(if not thousands) of other inputs in the application, I didn't want to have to have to attach a "select contents" handler to each one.

     

    There is nothing wrong with handling it in the edit event of each individual grid, but it will become tiresome if you have to add that same, exact handler to every grid that requires that behaviour(which is likely to be every grid in your app).

  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 30 Sep Link to this post

    Hi Terry,

    Regarding the select method, you can just include the following condition to handle the erro:
    if(element.select) element.select();


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 15 Nov in reply to Konstantin Dikov Link to this post

    Konstantin,

    Sorry, I never got back to you on this.  I couldn't get this to work.  I'm not exactly following what you're telling me to do with that if statement.  Can you give me a full example of what you're describing?  Thanks.

  11. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 16 Nov in reply to Terry Link to this post

    The if-statement is simply checking that the element(textbox, dropdownlist, whatever) *has* something called "select" before trying to call it.

    i.e. if (element has a select method) call it

    Just take Konstantin's example that you had working for textbboxes and augment the setTimeout part to

    setTimeout(function(){
        if (element.select) {
            element.select();
        }
     })
     

    This is what I meant when I said "you have to somehow check if the element is a dropdown list(i.e. has class .k-dropdownlist, isFunction(select), whatever) and skip the select() part."

     

  12. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 16 Nov in reply to Stephen Link to this post

    Stephan - thanks for the response - but I'd already tried adding the IF statement, but still can't get this to work.  I'm not the greatest with JavaScript.

    I have an Event for Edit:  .Edit("onEdit")

    The onEdit function looks like this:   The page gets this error message when I click on the Update button to edit the row.  Error: 'element' is undefined.

     

    function onEdit(e) {
        e.container.find("input").bind("focus", function(){
     
            if(this.style.display != "none"){
                var element = this;
                setTimeout(function(){
                    element.select();
                })
            }
        })
     
        if (element.select) {
            element.select();
        }
    }
  13. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 16 Nov in reply to Terry Link to this post

    Because element does not exist where you have put the if-statement...

    Look at where element is declared.  It is *inside* the function bound to the "focus" event.

    This means that it only exists inside that function and is out of scope where you are trying to reference it in the if-statement.

    You have put the if-statement outside the "focus" handler function...therefore it does not exist and you get the error when you try to reference it.

    Put the if-statement inside the setTimeout block, exactly as I indicated in my previous post, and get rid of it where you have it now.

    This way the code is "When the cell is edited(onEdit is fired) AND the input gets focus("focus" function fires), get a reference to the input element, wait for a moment(setTimeout), then attempt to select the contents of the input(select) IF the element supports such a thing."

  14. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 16 Nov in reply to Terry Link to this post

    Stephan - part of that was stupidity on my part resulting in not having the complete JavaScript function.  But now, I have the complete function and am still getting an error (element is undefined).  I get the error when I click on the Update button to edit the line.  This is what I have now.  Any ideas on what to try?

    function onEdit(e) {
        e.container.find("input").bind("focus", function(){
     
            if(this.style.display != "none"){
                var element = this;
                setTimeout(function(){
                    element.select();
                })
            }
        })
     
        setTimeout(function () {
            if (element.select) {
                element.select();
            }
        })
    }
  15. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 16 Nov in reply to Terry Link to this post

    Get rid of the whole block of code after the "focus" handler...element does not exist outside that function and just put the if-statement inside the setTimeout inside the focus handler.

    function onEdit(e) {
        e.container.find("input").bind("focus", function(){
             if(this.style.display != "none"){
                var element = this;
                setTimeout(function(){
                    if (element.select) {
                         element.select();
                    }
                })
             }
        })
     }
  16. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 16 Nov in reply to Stephen Link to this post

    Stephan - thank you.  That works.  I really appreciate you're time helping me on this. 

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