CODEWITHSUNDEEP
javascriptjquery
Mdb
Mdb

Reputation: 8568

manipulate a property of a child element

I have the following row element with a double click event atached to it.

<tr ondblclick="onLabelDoubleClicked(this)">
   <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>

On double click I need to set the enable property of kendoDropDownList in input element to toggle true/ false.

javascript:

onLabelDoubleClicked = function (event) {

    }

I searched through the event properties but could not find anything useful to get the enable property and manipulate it. Any help with working example will be greatly appreciated. Thank You!

Upvotes: 0

Views: 179

Answers (2)

raina77ow
raina77ow

Reputation: 106385

If you can use jQuery (and tag sets implies you're), why not just use jQuery (and Kendo) methods?

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

Upvotes: 1

David Hellsing
David Hellsing

Reputation: 108500

Instead of inlining the doubleclick event, it’s easier if you put the handler in the JS code and traverse/change the DOM from there.

I’m not sure about the Kendo stuff in the data-bind property, but it looks like a string to me so you’ll need to do string replaces unless you have a better way.

try this:

$('tr').dblclick(function() {
    var $el = $(this).find(':text'),
        data = $el.data('bind');
    if (/true/.test(data)) {
        data = data.replace(/true/,'false');
    } else if (/false/.test(data)) {
        data = data.replace(/false/,'true');
    }
    $el.prop('data-bind', data);
});

Upvotes: 3

Related Questions