7 Answers, 1 is accepted
Can you please create a dojo example that replicates the problems, so we can test it locally. Additionally, please elaborate on the exact issue that you are facing with the scrolling after expanding.
Looking forward to your reply.
Regards,
Konstantin Dikov
Telerik
Rank 1
sorry no time for dojo,
loosing allready all my time with your website ....
the problem is simple, scrolling doesn't work when treelist is inside div with other div.....
As you can see in our online demo, the scrolling for the TreeList widget is working correctly, even if the widget is placed within two DIV elements:
Can you please confirm that you are setting the Height property of the TreeList, because this is a mandatory requirement in order for the scrolling to be enabled.
On a side note, please have in mind that without knowing your exact implementation it is almost impossible to pinpoint what could be causing the issues that you are facing, so for saving both sides time I would suggest that you provide more information in the future and whenever possible, isolate the problems in dojo examples.
Kind Regards,
Konstantin Dikov
Telerik
Rank 1
just edit your demo
and see what happens
<div id="example" style="position: absolute; top: 0px; left: 13.83px; height: 100.03px; width: 312.04px; display: inline;" >
<div id="treelist"></div>
<script id="photo-template" type="text/x-kendo-template">
<div class='employee-photo'
style='background-image: url(../content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
<div class='employee-name'>#: FirstName #</div>
<div id="example2" style="position: absolute; top: 100px; left: 13.83px; height: 100.03px; width: 312.04px; display: inline;" > tata </div>
Rank 1
sorry last code was unclear:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" style="position: absolute; top: 0.99px; left: 13.83px; height: 50.03px; width: 312.04px; display: inline;">
<div id="tewst"></div>
<div id="treelist"></div>
</div>
<div id="example" style="position: absolute; top: 60.99px; left: 13.83px; height: 295.03px; width: 312.04px; display: inline;">
dsfgsdgfdgdf
</div>
<script id="photo-template" type="text/x-kendo-template">
<div class='employee-photo'
style='background-image: url(../content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
<div class='employee-name'>#: FirstName #</div>
</script>
<script>
$(document).ready(function() {
var service = "//demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
filterable: true,
sortable: true,
columns: [
{ field: "FirstName", title: "First Name", width: 280,
template: $("#photo-template").html() },
{ field: "LastName", title: "Last Name", width: 160 },
{ field: "Position" },
{ field: "Phone", width: 200 },
{ field: "Extension", width: 140 },
{ field: "Address" }
]
});
});
</script>
<style>
.employee-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.employee-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
Rank 1
The scrolling functionality of the widget follows the basic HTML scrolling principles and it is mandatory for an element with "overflow: scroll/auto" to have a set height. If the DIV element wrapping the widget does not have fixed height, that DIV element (as a block element) will expand to the height of its content.
With the above in mind, please ensure that you are setting the height of the widget (which could also be set to a percentage value, which will use the height of the first parent with fixed height):
Regards,
Konstantin Dikov
Telerik