RadGrid edit highlight entire text in cell

15 posts, 0 answers
  1. Fred
    Fred avatar
    2 posts
    Member since:
    Dec 2014

    Posted 01 Dec 2014 Link to this post

    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?
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 01 Dec 2014 in reply to Fred Link to this post

    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
  3. Fred
    Fred avatar
    2 posts
    Member since:
    Dec 2014

    Posted 01 Dec 2014 in reply to Jayesh Goyani Link to this post

    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.
  4. Eyup
    Admin
    Eyup avatar
    3866 posts

    Posted 04 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. TestTeam
    TestTeam avatar
    4 posts
    Member since:
    Sep 2012

    Posted 17 May 2017 in reply to Eyup Link to this post

    Hi Jayesh,

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

    Thanks

  6. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 17 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. TestTeam
    TestTeam avatar
    4 posts
    Member since:
    Sep 2012

    Posted 17 May 2017 in reply to Vessy Link to this post

    ... unfortunately same result.
  8. TestTeam
    TestTeam avatar
    4 posts
    Member since:
    Sep 2012

    Posted 19 May 2017 Link to this post

    Any other suggestions?

    thanks

  9. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 22 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Jimmy
    Jimmy avatar
    9 posts
    Member since:
    May 2017

    Posted 14 Dec 2017 Link to this post

    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?

  11. Eyup
    Admin
    Eyup avatar
    3866 posts

    Posted 19 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. Jimmy
    Jimmy avatar
    9 posts
    Member since:
    May 2017

    Posted 19 Dec 2017 in reply to Eyup Link to this post

    Eyup,

     

         

  13. Jimmy
    Jimmy avatar
    9 posts
    Member since:
    May 2017

    Posted 19 Dec 2017 in reply to Jimmy Link to this post

    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.

  14. Eyup
    Admin
    Eyup avatar
    3866 posts

    Posted 22 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  15. Jimmy
    Jimmy avatar
    9 posts
    Member since:
    May 2017

    Posted 22 Dec 2017 in reply to Eyup Link to this post

    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

     

Back to Top