This is a migrated thread and some comments may be shown as answers.

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

5 Answers 33 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Veteran
Iron
Chris asked on 07 Nov 2017, 08:57 AM

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

 

 

 

5 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 08 Nov 2017, 01:28 PM
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.
0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 10 Nov 2017, 02:39 AM

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

 

 

 

0
Tsvetina
Telerik team
answered on 13 Nov 2017, 03:22 PM
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.
0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 16 Nov 2017, 07:32 AM

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

Best regards

Chris

 

 

 

 

 

0
Tsvetina
Telerik team
answered on 17 Nov 2017, 04:11 PM
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.
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Veteran
Iron
Answers by
Preslav
Telerik team
Chris
Top achievements
Rank 1
Veteran
Iron
Tsvetina
Telerik team
Share this question
or