Grid.Navigatable() method causes textbox in HeaderTemplate not focused automatically

6 posts, 0 answers
  1. Chris
    Chris avatar
    116 posts
    Member since:
    Oct 2015

    Posted 07 Nov 2017 Link to this post

    HI

    I known textbox could be placed in HeaderTemplate.

    Single TextBox as filter row in each column header
    https://www.telerik.com/forums/single-textbox-as-filter-row-in-each-column-header
    example
    http://dojo.telerik.com/UbeFu

    But Navigatable() method causes textbox not focused automatically on click.

    How can I solve this kind of problem.

    *input/type=checkbox works well but input/type=text not works : 

      .HeaderTemplate("<input type='text' />");

    *Telerik DevCraft R2 2017 SP1.

    Best regards

    Chris

     

     

     

  2. Preslav
    Admin
    Preslav avatar
    574 posts

    Posted 08 Nov 2017 Link to this post

    Hi Chris,

    A possible solution to achieve the desired result might be handling the click event of the input and programmatically focusing it.
    For example:

    var thead = e.sender.element.find("thead");
    var inputs = thead.find("input");
     
    inputs.click(function(e){
      e.target.focus();
    })

    For a runnable example, check the modified Dojo: http://dojo.telerik.com/IxINal

    I hope this helps.


    Regards,
    Preslav
    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.
  3. Chris
    Chris avatar
    116 posts
    Member since:
    Oct 2015

    Posted 09 Nov 2017 in reply to Preslav Link to this post

    OK, I known the focus(), but another problem is - if the textbox.text is "123" and click between "2" and "3" but the focus caret always after the last char.

     

    I need a simple solution(not handles the caret position by myself).

     

    Best regards

     

    Chris

     

     

     

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 13 Nov 2017 Link to this post

    Hello Chris,

    The underlying cause of this behavior is that the Grid has logic that handles Grid header click when keyboard navigation is enabled and does its own focusing logic. To prevent this logic, you can add a mousedown event handler to the input elements and prevent the event from bubbling to the header.
    dataBound: function(e){
      e.sender.thead.on("mousedown", "th>input", function(e){
        e.stopPropagation();
      });
    }

    This will let you focus the input as normal. Here is a Dojo to test this approach:
    http://dojo.telerik.com/@tsveti/uTUbA

    Regards,
    Tsvetina
    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.
  5. Chris
    Chris avatar
    116 posts
    Member since:
    Oct 2015

    Posted 16 Nov 2017 in reply to Tsvetina Link to this post

    OK, But how about Sortable, click the header will handle only the sortable but textbox can't get focus too.

    Best regards

    Chris

     

     

     

     

     

  6. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 17 Nov 2017 Link to this post

    Hi Chris,

    When a column is sortable, it has additional elements rendered, so the input element is no longer a direct child of the th element and the selector needs to be modified to reflect this. Try with:
    e.sender.thead.on("mousedown", "th input", function(e){
      e.stopPropagation();
    });


    Regards,
    Tsvetina
    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.
Back to Top