Search code examples
jqueryhtmlasp.netkendo-treeview

Jquery to get the value of data-id on the <li> item


Can anyone help me how to get the value of (data-id=64) on click of the li-item of the tree. My tree looks with tree of 5 list items.And each having subchilds. I am getting the (data-uid) of first li but how do i get the (data-id) of the first (li). Attached is the code of what i tried. The var(selectedParentNodeid) is returning null when i click on the child.

Thanks in advance

function onExpand(e)
{
    var datauid = $(e.node).attr('data-uid');
    var selectedParentNodeid = $('li [data-uid=' + datauid + ']').find('#treelabel').data('id');

   // alert(e.node.dataValueField)
}

html

<ul class="k-group k-treeview-lines" role="tree">
   <li class="k-item k-first" aria-selected="false " data-uid="addf1dd4-3f6e-4ec8-81f3-72f2c45e0d7d" role="treeitem" aria-expanded="false" id="treeview_tv_active">
        <div class="k-top">
            <span class="k-icon k-plus" role="presentation"></span>
            <span class="k-in">
                <span id="treeLabel" data-id="64" style="font-weight:bold;">Test</span>
            </span>
        </div>
    </li>
    <li class="k-item" aria-selected="false " data-uid="916b79a1-2193-41d2-9e3c-69b6c8938c1d" role="treeitem"></li>
    <li class="k-item" aria-selected="false " data-uid="4fa1a2ed-2e51-4546-b88b-f38f4b2e32e4" role="treeitem"></li>
    <li class="k-item" aria-selected="false " data-uid="3c74c3df-920e-44fa-8784-9c40a7b8ecf7" role="treeitem"></li>
    <li class="k-item k-last" aria-selected="false " data-uid="1dedbb52-e8e5-413f-b429-581cf6b58ee7" role="treeitem"></li>
</ul>

Solution

  • You can set an onclick event for the li to find span children with the data-id attribute.

    $('li').on('click', function(e) { 
        alert($(e.target).find('span[data-id]').attr('data-id'));
    });
    

    Here's a fiddle