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?
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'));
});