Disable kendo numerictextbox widget on double click using the kendoui and jquery

Question

I have this html. On double click I want to disable/enable the dropdown:

<tr>
   <td><label id="labelId" >My Label</label></td>
   <td><input type="text" id="myInput" data-bind="kendoDropDownList: { data: source, value: myValue, enable: true }" /></td>
</tr>

I was able to do this with the solution from here manipulate a property of a child element using the kendo Api:

$('tr').dblclick(function() {
  var $kd = $(this).find('input').data("kendoDropDownList");
  $kd.enable( $kd.element.is(':disabled') );
});

I have a kendoui numeric widget. It seems that kendoui framework is adding some additional html elements and the final html looks like this:

<tr>
       <td><label id="labelId" >My Label</label></td>
       <td><input class="k-formatted-value k-input" style="display: inline-block;" type="text" readOnly="readonly"/>
           <input name="Afk" class="k-input" id="Afk" style="display: none;" type="text" data-bind="kendoNumericTextBox: { value: Afk, min:1, max:10000, step:1, format: 'd'}" data-role="numerictextbox" required=""/>
        <td>
    </tr>

I tried this:

$('tr').dblclick(function () {
        var $ntb = $(this).find('input').data("kendoNumericTextBox");

        $ntb.enable($ntb.element.is(':disabled'));
    });

But this does not work I think because there are two inputs. My questions is how can I enable/disable the numeric widget on doubleclick similar to the way the kendodropdown is disabled?

score 6 · Accepted Answer · answered Nov 07 '12 at 10:43

6

You can filter for data-role attribute so you can select your desired input, like this:

$('tr').dblclick(function () {
    var $ntb = $(this).find('input[data-role="numerictextbox"]').data("kendoNumericTextBox");

    $ntb.enable($ntb.element.is(':disabled'));
});

answered Nov 07 '12 at 10:43

Nelson

49,283
8
68
81

I did something similar but searched for name attribute ... anyway I like your way more. – Mdb Nov 07 '12 at 10:52

score 4 · Answer 2 · edited Sep 07 '15 at 12:32

4

 var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");

 numerictextbox.enable();

 numerictextbox.enable(false);

http://demos.telerik.com/kendo-ui/numerictextbox/api enter link description here

edited Sep 07 '15 at 12:32

Jayesh Goyani

11,008
11
30
50

answered Dec 01 '14 at 05:54

maxspan

13,326
15
75
104

much cleaner and a more elegant solution. – cyclical May 14 '15 at 18:08

Disable kendo numerictextbox widget on double click using the kendoui and jquery

2 Answers2