Adding new row overrides focus

4 posts, 0 answers
  1. Graham
    Graham avatar
    3 posts
    Member since:
    Dec 2016

    Posted 29 Jun 2017 Link to this post

    Hey guys,

    I'm having trouble setting the focus to a column after I've just added a new row to my grid.

    When I add a new row, I want to set the focus to a custom drop down editor I've implemented. However, if I override the edit function of the grid and set the focus to the drop down list, once the edit function is complete, the focus will be reset to the first editable cell in the row.

    I have an example here: http://dojo.telerik.com/@gmeulendyks/eFinI/3

     

    Clicking the "Add New Record" button should set focus to the Category drop down list.

     

    Can someone tell me what I'm doing wrong in the edit function?

     

    Thanks,

    Graham

  2. Graham
    Graham avatar
    3 posts
    Member since:
    Dec 2016

    Posted 29 Jun 2017 Link to this post

    I forgot to mention please don't solve this problem using column indexes. My grid allows users to reorder the columns so the drop down list could be at any index. I need to find the drop down list by its name within the grid.

     

    Thanks,

    Graham

  3. Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 03 Jul 2017 Link to this post

    Hello Graham,

    In this scenario, I can suggest using the ".k-dropdown" as a selector for the DropDown widget. The user input element is actually with display none attribute, that is why the focus was not changed.

    http://dojo.telerik.com/OtUri

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    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.
  4. Graham
    Graham avatar
    3 posts
    Member since:
    Dec 2016

    Posted 05 Jul 2017 Link to this post

    This above does work, but for some reason I have to wrap it in a timeout function like so:

     

    setTimeout(function ()
    {
        var row = $("#grid .k-grid-edit-row").closest("tr");
        var ddl = $(row).find(".k-dropdown");
                              
        // if DropDownListwidget is found
        if (ddl)
        {
            console.log($(ddl))
            $(ddl).focus();
        }
    }, 50);

     

    To get it to work. I'm not sure if it's because I'm on kendo version v2016.3.1118, or if I have some external library that is causing the focus to always be set to the first editable cell of the newly constructed line, but the timeout wrapper fixes my issue.

     

    Thanks!

     

     

Back to Top