CODEWITHSUNDEEP
checkboxkendo-uikendo-treeview
M.I.T.
M.I.T.

Reputation: 1042

kendo ui get id of checkbox when unchecked

i am using kendo ui tree view with check box

i want the check box's id when it is getting unchecked

this is kendo ui mine code

// var homogeneous contains data

$("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: false,
        template:"# if(!item.hasChildren){# <input type='hidden' id='#=item.id#' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox' id_a='#= item.id #' name='c_#= item.id #' value='true' />#}else{# <div id='#=item.id#' style='display:none;' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#",

    },
    dataSource: homogeneous,
    dataBound: ondata,
    dataTextField: "value"
});

function ondata() {
   //alert("databound");
}   


// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
    //console.log(nodes);
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
            checkedNodes.push(nodes[i].id);
        }

        if (nodes[i].hasChildren) {
            checkedNodeIds(nodes[i].children.view(), checkedNodes);
        }
    }
}

// show checked node IDs on datasource change
$("#treeview").data("kendoTreeView").dataSource.bind("change", function() {
    var checkedNodes = [],
        treeView = $("#treeview").data("kendoTreeView"),
        message;

    checkedNodeIds(treeView.dataSource.view(), checkedNodes);
    if (checkedNodes.length > 0) {
        message = "IDs of checked nodes: " + checkedNodes.join(",");
    } else {
        message = "No nodes checked.";
    }

    $("#result").html(message);
});

in this code i am not getting checkbox's id when it is unchecked so i have tried this jquery code

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
       alert('checked');
    } else {
        alert('not checked');
    }
});

this code is only working in js fiddle but not in my case http://jsfiddle.net/NPUeL/

if i use this code then i can get the number of count but i dont know how to use it

    var treeview = $("[data-role=treeview]").data("kendoTreeView");
    treeview.dataSource.bind("change", function (e) {
        if (e.field == "checked") {
            console.log("Recorded Selected: " + $("[data-role=treeview] :checked").length);
        }
    });

what changed i need to do in data source so i can get id thanks in adavance

Upvotes: 1

Views: 9592

Answers (2)

M.I.T.
M.I.T.

Reputation: 1042

i made the small change and its working now

    function ondata() {
   $('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
       alert('checked');
    } else {
        alert('not checked');
    }
  });
}

Upvotes: 1

OnaBai
OnaBai

Reputation: 40887

If you want to get the id you might do:

$('input[type=checkbox]').click(function (e) {
    var li = $(e.target).closest("li");
    var id = $("input:hidden", li).attr("id");
    var node = treeView.dataSource.get(id);
    if (node.checked) {
        console.log('checked');
    } else {
        console.log('not checked');
    }
});

What I do in the event handler is:

  1. find the closest li element that is the node of the tree that has been clicked.
  2. the id is in an HTML input element that is hidden (this is the way that I understood that you have stored it).
  3. Get item from dataSource using dataSource.get method.

See your code modified and running here

Upvotes: 1

Related Questions