- <!DOCTYPE html>
- <html>
- <head>
- <base href="https://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="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-nova.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.nova.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.nova.mobile.min.css" />
- <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
- <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
- </head>
- <body>
- <div id="example">
- <div id="treelist"></div>
- <script>
- $(document).ready(function() {
- var service = "https://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: false
- }
- }
- },
- height: 540,
- filterable: true,
- dataBound: function(e){
- applyLevelStyle(e.sender);
- },
- expand: function(e){
- setTimeout(function(){
- applyLevelStyle(e.sender);
- }, 20)
- },
- collapse: function(e){
- setTimeout(function(){
- applyLevelStyle(e.sender);
- }, 20)
- },
- 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" }
- ],
- pageable: {
- pageSize: 15,
- pageSizes: true
- }
- });
- });
- function applyLevelStyle(treeList){
- var items = treeList.items();
- items.each(function(){
- var row = $(this);
- var level = row.find("td").first().find(".k-icon").length;
- row.removeClass("treeListLevel1 treeListLevel2 treeListLevel3 treeListLevel4");
- row.addClass("treeListLevel" + level);
- })
- }
- </script>
- <style>
- .treeListLevel1 td{
- background: #ccc;
- }
- .treeListLevel2 td{
- background: #eee;
- }
- .treeListLevel3 td{
- background: #999;
- }
- .treeListLevel4 td{
- background: #777;
- }
- </style>
- <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;
- background:red;
- padding-left: 3px;
- }
- </style>
- </div>
- </body>
- </html>
[text] deneme
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
Editor
You can edit this paste and save as new: