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

Tooltip on textbox, keypress event not working

2 Answers 366 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Bert
Top achievements
Rank 1
Bert asked on 05 Jun 2015, 07:49 AM
Hello,

when i add a tooltip to a textbox it does not fire the keypress event. 

<div id="example">
    <input class="k-textbox"
                  title="Hello!"
                  data-role="tooltip"
                  data-auto-hide="false"
                  data-position="top"
                  data-bind="events: { show: onShow, hide: onHide, keypress: onKeypress }"/>
 
    <div class="box-col console-section">
        <h4>Console</h4>
        <div class="console"/>
    </div>
</div>
<script>
    var viewModel = kendo.observable({
        onShow: function() {
            kendoConsole.log("event :: show");
        },
        onHide: function() {
            kendoConsole.log("event :: hide");
        },
        onKeypress: function() {
            kendoConsole.log("event :: key press");
        }
    });
    kendo.bind($("#example"), viewModel);
</script>

 

After removing the tooltip, the keypress event is working as expected.

removed lines:

data-role="tooltip"
data-auto-hide="false"
data-position="top"

 Dojo Example that demonstrates this problem: http://dojo.telerik.com/AhigA

Could you be so kind to help us with this issue.

Kind Regards,

Bert

 

 

 

 

2 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 09 Jun 2015, 06:42 AM

Hello Bert,

The keypress event will not work as the Tooltip widget does not have such event. When you set a widget role to given element, it will be bound with the appropriate widget binding. Thus, in this case the events to which you can bind are those which are applicable for the widget.

If you want to use the input DOM events, you will need to remove the widget from the element. In the case with the Tooltip you could set the widget at the container element and target the input elements within this container.

Similar to the following:

<div data-role="tooltip"
        data-filter="input"
        data-auto-hide="false"
        data-position="top"
        data-bind="events: { show: onShow, hide: onHide }">
  <input class="k-textbox"
        title="Hello!"                 
        data-bind="events: {  keypress: onKeypress }"/>
</div>

 

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bert
Top achievements
Rank 1
answered on 09 Jun 2015, 08:47 AM

Hello,

it tried this solution and it is working as expected. Thank you for your clear answer. 

Kind regards,

Bert

Tags
ToolTip
Asked by
Bert
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Bert
Top achievements
Rank 1
Share this question
or