manipulate a property of a child element

Question

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!

That's not a property. `enable: true` are just characters in a string. — I Hate Lazy, Nov 06 '12 at 16:32
...is this part of some other API? If so, doesn't it give you some way to enable/disable elements? — I Hate Lazy, Nov 06 '12 at 16:35
It [is](http://docs.kendoui.com/api/web/dropdownlist). And I wouldn't even call 'XY problem' here, as the OP doesn't say how exactly he needs this property to be changed. — raina77ow, Nov 06 '12 at 16:36

score 3 · Answer 1 · answered Nov 06 '12 at 16:33

3

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

answered Nov 06 '12 at 16:33

David Hellsing

106,495
44
176
212

With all due respect - yuk. What if there's more than one boolean value here, in that dataset? Why not just use `.data` method, if you don't want to let Kendo solve this? – raina77ow Nov 06 '12 at 16:39
I agree... it’s just that I don’t see another way unless this Kendo thing can solve it within it’s API. But that information is not provided in the question. – David Hellsing Nov 06 '12 at 16:43

raina77ow · Accepted Answer · 2012-11-06T17:20:28.190

1

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

edited Nov 06 '12 at 17:20

answered Nov 06 '12 at 16:35

raina77ow

103,633
15
192
229

You are right! This is the way to manipulate this. But toggle does something different. I want on double click to enable/disable the dropdown. How can I do this? I am quite new to jquery and kendoui. – Mdb Nov 06 '12 at 16:58
@Mdb I see, you can check `.enable` property then. Will update the answer with example. – raina77ow Nov 06 '12 at 17:02
@Mdb Sigh... Somehow either I'm bad at parsing documentations (but I'm usually not) or KendoUI indeed doesn't have a getter for this property. I had to go with checking `element` instead, but I'd certainly prefer more 'API'sh way of doing it. – raina77ow Nov 06 '12 at 17:21

manipulate a property of a child element

2 Answers2

Linked