How to get the parent id of the parent when we click on the child check box

Question

i am having an kendo treeview with checkbox template.

my html code

<div id="treeview-left" style=" height: 375px; position: absolute;top: 30px;"></div>

I have defined the treeview like:

var treeview1 = $('#treeview-left').kendoTreeView({
            select: onSelect,
            checkboxTemplate: kendo.template($("#treeview-checkbox-template").html()),            
            dragAndDrop: true,
            dataSource: parent, 
            dataTextField: ["parentName", "childName"]
        }).data("kendoTreeView");

And the checkbox template is defined like:

<script id="treeview-checkbox-template" type="text/kendo-ui-template">
            <input type="checkbox" />
</script>

And the datasource will be

var parent = new kendo.data.HierarchicalDataSource({
            type: "POST",
            dataType: "json",
            transport: {
                read: {
                    url: "/Projects/leftdisplay"
                }
            },
            schema: {
                model: {
                    id: "parentid",
                    hasChildren: "childName",
                    children: child
                }
            }
        });

now the child of the parent will be like:

   var child = {
            type: "POST",
            dataType: "json",
            transport: {
                read: {
                    url: function (options) {
                        return kendo.format("/projects/modulesleftdisplay?parentid=" + options.parentid + "&roleid=" + rolevalue + "&projectid=" + projectid + "");
                    }
                }
            },
            schema: {
                model: {
                    id: "childid",
                    hasChildren: function () {
                        return false;
                    }
                }
            }
        };

Now when i am clicking on the child checkbox i want to get the parent id of the selected child. How can i get that.

I have written code like

$("#treeview-left [type=checkbox]").live('change', function (e) {      
    var chkBox = $(this)
    var parentid = chkBox.parent();
    var date = $('#treeview-left').data('kendoTreeView').dataItem(parent_id);
    var parid = date.id;
    var childid = $('#treeview-left').data('kendoTreeView').dataItem(parentid);
});

but the parid is not getting. How can i get the parent id of the selected child. Any help is appreciated.

@Naidu, inspecting one basic questions: When you compute `date`, what is `treeview`? Is it `treeview` or `treeview-left`?. — OnaBai, Mar 14 '13 at 09:29

Web_Designer · Answer 1 · 2013-03-14T05:31:12.013

0

Try this:

// Find all the checkboxes:
var checkboxes = Array.prototype.slice.call(document.querySelectorAll('#yourFormsID input[type=checkbox]'));

checkboxes.forEach(function(checkbox) {                //<== loop through checkboxes
    checkbox.addEventListener('change', function() {   //<== When clicked:
        console.log(this.parentNode.id);               //<== Log the id of the checkbox's parentNode in the console.
    }, false);
});

Here's a demo. Be sure to open the console.

edited Mar 14 '13 at 05:31

answered Mar 14 '13 at 05:12

Web_Designer

72,308
93
206
262

where should i use that in check box change event and what is element and parentNode – Jonathan Mar 14 '13 at 05:16
I am not using forms. I am using kendo ui treeview. the example is not working for me – Jonathan Mar 14 '13 at 05:44
@Naidu What browser are you using? Did you open the console to see what happens when you click on the checkboxes? – Web_Designer Mar 14 '13 at 05:45
yah it is getting undefined – Jonathan Mar 14 '13 at 06:12
@Naidu I can't help you unless you're more descriptive. "It's not working" is not descriptive, and neither is "it is getting undefined". What is getting undefined? – Web_Designer Mar 14 '13 at 16:25

PSR · Answer 2 · 2013-03-14T05:46:07.127

0

you can use this

   var parentId = $(this).parent().closest(parent element).attr('id')

Example:

 var parentId  = $(this).parent().closest('li').attr('id')

instead of

 var chkBox = $(this)

 var parentid = chkBox.parent();

to get the parent id.

edited Mar 14 '13 at 05:46

answered Mar 14 '13 at 05:15

PSR

39,804
41
111
151

what is the parent element – PSR Mar 14 '13 at 05:21
what should be the parent element in the first example. I am getting undefined if i am using the second example – Jonathan Mar 14 '13 at 05:43
what you are expecting there – PSR Mar 14 '13 at 05:46
It will be an integer number which will be assigned to each parent – Jonathan Mar 14 '13 at 06:12
I have given the code in my question. Initially in the parent datasource the parent elements are assigned and then the childs will be assigned for each parent – Jonathan Mar 14 '13 at 06:34

How to get the parent id of the parent when we click on the child check box

2 Answers2