[text] deneme

Viewer

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <base href="https://demos.telerik.com/kendo-ui/treelist/index">
  6.     <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
  7.     <title></title>
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-nova.min.css" />
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.nova.min.css" />
  10.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.nova.mobile.min.css" />
  11.  
  12.     <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
  13.     <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
  14.     
  15.  
  16. </head>
  17. <body>
  18. <div id="example">
  19.  
  20.         <div id="treelist"></div>
  21.  
  22.       
  23.  
  24.         <script>
  25.             $(document).ready(function() {
  26.                 var service = "https://demos.telerik.com/kendo-ui/service";
  27.  
  28.                 $("#treelist").kendoTreeList({
  29.                     dataSource: {
  30.                         transport: {
  31.                             read: {
  32.                                 url: service + "/EmployeeDirectory/All",
  33.                                 dataType: "jsonp"
  34.                             }
  35.                         },
  36.                         schema: {
  37.                             model: {
  38.                                 id: "EmployeeID",
  39.                                 parentId: "ReportsTo",
  40.                                 fields: {
  41.                                     ReportsTo: { field: "ReportsTo",  nullable: true },
  42.                                     EmployeeID: { field: "EmployeeId", type: "number" },
  43.                                     Extension: { field: "Extension", type: "number" }
  44.                                 },
  45.                                 expanded: false
  46.                             }
  47.                         }
  48.                     },
  49.                     height: 540,
  50.                     filterable: true,
  51.                     dataBound: function(e){
  52.                       applyLevelStyle(e.sender);
  53.                     },
  54.                     expand: function(e){
  55.                       setTimeout(function(){
  56.                           applyLevelStyle(e.sender);
  57.                       }, 20)                      
  58.                     },
  59.                                collapse: function(e){
  60.                       setTimeout(function(){
  61.                           applyLevelStyle(e.sender);
  62.                       }, 20)
  63.                     },
  64.                     sortable: true,
  65.                     columns: [
  66.                         { field: "FirstName", title: "First Name", width: 280,
  67.                           template: $("#photo-template").html() },
  68.                         { field: "LastName", title: "Last Name", width: 160 },
  69.                         { field: "Position" },
  70.                         { field: "Phone", width: 200 },
  71.                         { field: "Extension", width: 140 },
  72.                         { field: "Address" }
  73.                     ],
  74.                     pageable: {
  75.                         pageSize: 15,
  76.                         pageSizes: true
  77.                     }
  78.                 });
  79.             });
  80.           
  81.           function applyLevelStyle(treeList){
  82.                       var items = treeList.items();
  83.               items.each(function(){
  84.                  var row = $(this);
  85.                  var level = row.find("td").first().find(".k-icon").length;
  86.                  row.removeClass("treeListLevel1 treeListLevel2 treeListLevel3 treeListLevel4");
  87.                  row.addClass("treeListLevel" + level);
  88.               })
  89.           }
  90.         </script>
  91.  
  92.   <style>
  93.     .treeListLevel1 td{
  94.       background: #ccc; 
  95.     }
  96.     
  97.     .treeListLevel2 td{
  98.       background: #eee; 
  99.     }
  100.     
  101.     .treeListLevel3 td{
  102.       background: #999; 
  103.     }
  104.     
  105.     .treeListLevel4 td{
  106.       background: #777; 
  107.     }
  108.   </style>
  109.   
  110.         <style>
  111.             .employee-photo {
  112.                 display: inline-block;
  113.                 width: 32px;
  114.                 height: 32px;
  115.                 border-radius: 50%;
  116.                 background-size: 32px 35px;
  117.                 background-position: center center;
  118.                 vertical-align: middle;
  119.                 line-height: 32px;
  120.                 box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
  121.                 margin-left: 5px;
  122.             }
  123.  
  124.             .employee-name {
  125.                 display: inline-block;
  126.                 vertical-align: middle;
  127.                 line-height: 32px;
  128.               background:red;
  129.                 padding-left: 3px;
  130.             }
  131.         </style>
  132.     </div>
  133.  
  134.  
  135. </body>
  136. </html>

Editor

You can edit this paste and save as new:


File Description
  • deneme
  • Paste Code
  • 07 Dec-2022
  • 4.66 Kb
You can Share it: