Hi Team,
It's an issue in keyboard navigation support for DropDown Tree, where am not able to scroll to the end node. Given the scenario in below link
https://dojo.telerik.com/IROwUrot
Am using 2019.2.619 version.
Regards,
Minati
Context:
- Load on demand enabled
- Check Children is set true
- Remote api call to load data.
- Attached sample code is using kendo services.
Issue or Scenario:
When you select the top node or checkbox, it shows 1 item(s) selected. However, when you expand and deselect child nodes or checboxes, the single tag message will removed and blank field is present.
please find below code and attached gif file, these files will give you clear understanding on the issue with dropdowntree.
<!--BELOW IS THE CODE SAMPLE ON THIS BUG -->
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/dropdowntree/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<input id="dropdowntree" style="width: 100%;" />
</div>
<script>
var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot + "/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#dropdowntree").kendoDropDownTree({
placeholder: "Select ...",
dataSource: homogeneous,
height: "auto",
checkboxes: { checkChildren: true },
dataTextField: "FullName",
clearButton: true,
checkAll: false,
autoClose: false,
tagMode: "single",
loadOnDemand: true
});
</script>
</div>
</body>
</html>