Focusing RadComboBox on Edit Item

4 posts, 0 answers
  1. Joe
    Joe avatar
    16 posts
    Member since:
    Oct 2013

    Posted 16 Sep 2014 Link to this post

    In our application, we have to meet several requirements that require us to focus the cursor on the first field of the edit item. We are able to achieve this in a few different ways. Either grabbing the edit item on the ItemDataBound event, or even through the use of javascript that you're team has provided on your  site. Although this gives the field focus, it's almost as if it's not true focus. We also have these fields with the properties of 'EnableLoadOnDemand=true' and 'AutoPostback=true' trying to achieve that whenever the customer types in even one letter, the program should mark the first match in the data-bound control. When we focus it, and start typing, nothing happens at all outside of the text being displayed, but if we focus away and then CLICK back to the input area, it sense the text input correctly. We need the field to sense the input and cause the drop-down to load right after clicking insert and gaining focus. We are using the ASP.NET AJAX version 2014.2.618.40 and this has been plaguing our site for a while now.

    Please assist!

    Thanks,

    Joe
  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 19 Sep 2014 Link to this post

    Hello Joe,

    As you mentioned that one of the implemented approaches is focusing the ComboBox at client-side, I would suggest you to expand the drop down manually, right after the control is focused. I would suggest you to use the following approach, which would push the ComboBox to expand its dropdown and thus trigger the ItemsRequested event, which would populate the control with data :

    $find("RadComboBox1").showDropDown()


    Regards,
    Nencho
    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joe
    Joe avatar
    16 posts
    Member since:
    Oct 2013

    Posted 23 Sep 2014 in reply to Nencho Link to this post

    The one issue with this and why it hasn't worked is that the radcombobox is not render on the page until edit mode has opened up which we do in-line. So this isn't going to work for us. The code we are using to find the control on the control load is as follows:

    function GridCombo_ClientLoad(sender) {
                 var canfocus = function (element) {
                     return element.type != 'hidden' && element.style.visibility != 'hidden' && element.style.display != 'none' && !element.disabled;
                 };
                 if (sender) {
                     var element = sender.get_inputDomElement();
                     if (element && canfocus(element)) {
                         try {
                             element.focus();
                             element.select();
                         }
                         catch (e) {
                         }
                     }
                 }
             }
  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 26 Sep 2014 Link to this post

    Hello Joe,

    In that case, you could use the previously suggested function in the OnClientLoad client-side event in the following manner :

    <script type="text/javascript">
            function GridCombo_ClientLoad(sender) {
                var canfocus = function (element) {
                    return element.type != 'hidden' && element.style.visibility != 'hidden' && element.style.display != 'none' && !element.disabled;
                };
                if (sender) {
                    var element = sender.get_inputDomElement();
                    if (element && canfocus(element)) {
                        try {
                            element.focus();
                            element.select();
                            sender.showDropDown();
                        }
                        catch (e) {
                        }
                    }
                }
            }
        </script>



    Regards,
    Nencho
    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.

     
Back to Top