Stop non-editable columns from being selectable / select cell text when entering editable cell

[Brad]

Hi all

I have an in-cell editable grid which I have managed to make so only several columns are editable. However, those non-editable columns are still selectable and when using tab, the tabbing does not skip these cells. Is there any way to make it so the tab order only selects the editable cells?

Also, when I enter one of the editable cells, the cursor puts itself at the start of the value and leaves the cell contents unselected. Is there any way to automatically select the cell's contents on enter?

Regards

Brad

[Vladimir Iliev]

Hi Brad,

Please note that this topic is already discussed in the following forum post:

• Skip read only fields when using keyboard navigation and incell editing

Regards,
Vladimir Iliev
Telerik

 

 

[Brad]

Thanks Vladimir, appreciated. I will review that post and implement it's recommendations. Any clues about my second question regarding selecting cell contents on enter?

[Vladimir Iliev]

Hi Brad,

Basically selecting the text can be achieved using the focus event of the editor - for more information you can check the following forum thread:

• Select text on focus

Regards,
Vladimir Iliev
Telerik

 

 

[Brad]

Great, thanks Vladimir!

[Brad]

Hi Vladimir

I had a problem with some of the suggestions in that post as when the page is loaded it does not appear the editing cells exist, only when the row is clicked. In case someone else has the same issue, I managed to get around this by doing the following on the edit event of the grid.

For the grid events

.Events(events => events.Edit("onGridEdit").SaveChanges("onGridSaveChanges"))

Then in the Javascript

function onGridEdit(arg) {
        $("input.k-input").focus(function () {
            $(this).select();
        });
    }

[Brad]

Slightly cleaner version

function onGridEdit(arg) {
        arg.container.find("input.k-input").focus(function () {
            $(this).select();
        });
    }