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

[Chris]

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

 

 

 

[Preslav]

Hi Chris,

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

• https://api.jquery.com/click/
• https://api.jquery.com/focus/

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

[Chris]

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

 

 

 

[Tsvetina]

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

[Chris]

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

Best regards

Chris

 

 

 

 

 

[Tsvetina]

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