RadGrid edit highlight entire text in cell

9 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
    3225 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 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
    1581 posts

    Posted 17 May 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 in reply to Vessy Link to this post

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

    Posted 19 May Link to this post

    Any other suggestions?

    thanks

  9. Vessy
    Admin
    Vessy avatar
    1581 posts

    Posted 22 May 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.
Back to Top