RadGrid edit highlight entire text in cell

[Fred]

On a RadGrid, when I tab to edit a GridNumericColumn, the entire text in the cell gets highlighted. I would like for this same effect to happen for a GridBoundColumn. Is this possible?

[Jayesh Goyani]

Hi,

(I am not able to reproduce it but) Please try with the below code snippet. 

<style>
    .riTextBox:hover {
        background-color: red !important;
    }
</style>

Let me know if any concern.

Thanks,
Jayesh Goyani

[Fred]

Hi Jayesh,
Thanks for the reply. To clarify, I attached couple of snippets. The first one shows that when I enter the grid to edit, in a cell that is a GridNumericColumn (Qty), the data in the cell is highlighted in blue so that the entire content of the cell can be easily modified. In the second snippet, I've tabbed over to a GridBoundColumn (MFG), where instead of the entire text highlighting for edit as in the GridNumericColumn, the cursor lands at the beginning of the cell. This causes the editor to have to select the text in order to replace it. I'd like for the text to already be selected as in the GridNumericColumn so the user doesn't have to select the text in order to edit it.

[Eyup]

Hello Fred,

You can use the following approach to achieve the requested functionality:

<ClientSettings>
    <ClientEvents OnBatchEditOpened="editOpened" />
</ClientSettings>

JavaScript:

function editOpened(sender, args) {
    var editControl = sender.get_batchEditingManager()._getDataControl(args.get_row(), args.get_columnUniqueName());
    if (editControl.tagName == "INPUT") {
        setTimeout(function () {
            editControl.select();
        }, 2)
    }
}

Hope this helps.

Regards,
Eyup
Telerik

 

 

[TestTeam]

Hi Jayesh,

I tried your code but sometimes entire text in the cell gets highlighted and sometimes not.

Thanks

[Vessy]

Hi TestTeam,

Can you increase the timeout given to the selection and see whether the highlighting will become stable?

function editOpened(sender, args) {
    var editControl = sender.get_batchEditingManager()._getDataControl(args.get_row(), args.get_columnUniqueName());
    if (editControl.tagName == "INPUT") {
        setTimeout(function () {
            editControl.select();
        }, 100)
    }
}

Regards,
Vessy
Telerik by Progress

[TestTeam]

... unfortunately same result.

[TestTeam]

Any other suggestions?

thanks

[Vessy]

Hi Carlo,

In order to be able to help you further we will need to examine the exact RadGrid configuration leading to the problem. It will be really appreciated if you follow the steps from the following blog post and send us a runnable sample were we can examine the cause of the problem:
http://www.telerik.com/blogs/isolating-a-problem-in-a-sample-project

Regards,
Vessy
Telerik by Progress

[Jimmy]

I tried the approach above and it gave me some mixed results.  However, when I changed the arguments of _getDataControl from "args.get_row(), args.get_columnUniqueName()" to args.get_cell() everything worked perfectly (not easy to figure out).

            function editOpened(sender, args) {

                var editControl = sender.get_batchEditingManager()._getDataControl(args.get_cell());
                if (editControl.tagName == "INPUT") {
                    setTimeout(function () {
                        try {
                            editControl.select();
                        } catch (e) {
                        }
                    }, 100)
                }
            }

Now my issue is when I set these edit controls to allow MultiLine the tagname comes back as "DIV" rather than "INPUT" and the editcontrol variable throws an error that select is not supported.  Any ideas on why that may be and how to fix it?

[Eyup]

Hello Jimmy,

You can use the following approach instead to achieve this requirement:

function batchEditOpened(sender, args) {
    var column = args.get_column();
    if (column._data.ColumnType == "GridBoundColumn") {
        var editControl = $(args.get_cell()).find("input:visible");
        setTimeout(function () {
            editControl.select();
        }, 2);
    }
}

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[Jimmy]

Eyup,

 

     

[Jimmy]

Eyup,  

We are getting closer.  The editControl.select(); no longer throws an error and it still works on non-multiline controls but it will not highlight my text on multi-line controls.  One thing I did discover is that if I highlight the text in the grid manually one time then it will select the text from that point forward (whatever text I have highlighted.

I also added an editControl.focus(); to see if that would help but it did not.  I have attached my grid layout to this post.

[Eyup]

Hello Jimmy,

You can resolve this by adding textarea in the following line:

var editControl = $(args.get_cell()).find("input:visible,textarea");

Please give it a try and let me know about the result.

Regards,
Eyup
Progress Telerik

[Jimmy]

Eyup,

That worked perfectly. Thank you so much for your help.  This forum and all of telerik's involvement is invaluable to me as a developer. 

Thank you again,.

Jimmy