InLine Edit - Select entire cell

[Terry]

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();

}

[Stephen]

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.

 

 

[Konstantin Dikov]

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

[Terry]

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. 

[Stephen]

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.

[Terry]

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.  

[Stephen]

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).

[Konstantin Dikov]

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

[Terry]

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.

[Stephen]

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."

 

[Terry]

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();
    }
}

[Stephen]

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."

[Terry]

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();
        }
    })
}

[Stephen]

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();
                }
            })
         }
    })
 }

[Terry]

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