Kendo TreeView Additional Functions

Berikut adalah beberapa contoh fungsi tambahan yang bermanfaat waktu menggunakan Kendo TreeView.

[code language=”javascript”]
function clearAllCheckbox(){
$(‘#parent-options input[type="checkbox"]’).each(function(){
$(this).prop(‘checked’, false);
});
}

function checkNodeByNodeElement(element){
$(element).find(‘input[type="checkbox"]’).first().prop(‘checked’, true);
}

function expandFromRootByNodeElement(element){
$(element).parentsUntil(‘.k-treeview’).filter(‘.k-item’).each(
function (index, element) {
$("#parent-options").data(‘kendoTreeView’).expand($(this));
}
);
}

function checkNodeByDirectoryId(allNodes, directoryId){
var currentNode;
var treeView = $("#parent-options").data("kendoTreeView");
var currentId, currentUid;

for (var i = 0; i < allNodes.length; i++) {
currentNode = allNodes[i];
currentId = currentNode.Id;
currentUid = currentNode.uid;

if(currentId == directoryId){
checkNodeByNodeElement(treeView.findByUid(currentNode.uid));
expandFromRootByNodeElement(treeView.findByUid(currentNode.uid));

break;
}else{
if (currentNode.hasChildren) {
//console.log(currentNode);
//console.log(currentNode.children.view());
checkNodeByDirectoryId(currentNode.children.view(), directoryId);
}
}

}
}

$(document).ready(function () {
var dataSource = new kendo.data.HierarchicalDataSource({
data: @Html.Raw(Model.GetDirectoryOptionsAsJson()),
schema: {
model: {
children: "Children"
}
}
});

$("#parent-options").kendoTreeView({
dataSource: dataSource,
dataTextField: ["Name"],
checkboxes: true,
loadOnDemand: false,
select: function(e){
e.preventDefault();

//var dataItem = $("#parent-options").getKendoTreeView().dataItem(e.node);
//var nodeId = dataItem.Id;
//var hasFile = dataItem.HasFile;

//$(‘#ParentId’).val(nodeId);
},
check: function(e){
//kamus
var treeView = $(‘#parent-options’).data(‘kendoTreeView’);
var dataItem = $("#parent-options").getKendoTreeView().dataItem(e.node);
var nodeId = dataItem.Id;
var hasFile = dataItem.HasFile;

//algoritma
clearAllCheckbox();

if(dataItem.checked){
checkNodeByNodeElement(e.node);
$(‘#ParentId’).val(nodeId);
}else{
$(‘#ParentId’).val(”);
}
},
});

//check nodes by ParentId
var treeView = $(‘#parent-options’).data(‘kendoTreeView’);
var allNodes = treeView.dataSource.view();
var parentId = $(‘#ParentId’).val();
if(parentId !== ”){
checkNodeByDirectoryId(allNodes, parentId);
}
});
[/code]

Tampilan hasil: