如何实现Kendo TreeView的div可滚动且不展开？附Demo问题说明

Hey there! Let's sort out your Kendo TreeView problems one by one—getting its container to scroll, making it stick tight to the window edges, and stopping nodes from automatically expanding. Here's a straightforward breakdown with code examples:

1. Make the Container Scrollable & Align to Window Edges #

The key here is setting proper sizing and overflow properties on the TreeView's parent div, while stripping out any default margins that might push it away from the window edges.

Add this CSS to your stylesheet:

/* Reset body's default margin to ensure full edge alignment */
body {
  margin: 0;
}

/* Style the TreeView container */
.treeview-wrapper {
  height: 100vh; /* Makes the container fill the entire viewport height */
  overflow-y: auto; /* Enables vertical scrolling when content overflows */
  overflow-x: hidden; /* Hides horizontal scroll (adjust if you need it) */
  padding: 0; /* Remove default padding that might create gaps */
}

This setup ensures the container fits perfectly to the window edges and only scrolls when the TreeView content exceeds the viewport height. If you don't want it to fill the entire window, replace 100vh with a fixed height like 500px.

2. Prevent Automatic Node Expansion #

Kendo TreeView has a built-in setting to turn off auto-expansion. Just add the autoExpand: false option when initializing the TreeView.

Here's the JavaScript initialization code:

$("#your-treeview-id").kendoTreeView({
  dataSource: yourTreeData, // Replace with your actual data source
  autoExpand: false, // This disables automatic expansion of all nodes
  loadOnDemand: true, // Optional: Improves performance for large datasets by loading child nodes only when needed
  // Add any other TreeView configurations here
});

If you notice nodes still expanding, double-check your data source—make sure none of the nodes have an expanded: true property set (that would override the global setting).

Full Working Demo #

Putting it all together, here's a complete example that demonstrates all three requirements:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2024.1.319/styles/kendo.default-v2.min.css" />
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>
  <style>
    body {
      margin: 0;
    }
    #tree-container {
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
    }
  </style>
</head>
<body>
  <div id="tree-container">
    <div id="treeview"></div>
  </div>

  <script>
    // Simulate a large dataset to test scrolling
    const sampleData = new kendo.data.HierarchicalDataSource({
      data: [
        {
          text: "Main Category 1",
          items: Array.from({length: 25}, (_, i) => ({
            text: `Subcategory 1-${i+1}`,
            items: [{ text: `Item 1-${i+1}-A` }]
          }))
        },
        {
          text: "Main Category 2",
          items: Array.from({length: 20}, (_, i) => ({
            text: `Subcategory 2-${i+1}`
          }))
        }
      ]
    });

    $("#treeview").kendoTreeView({
      dataSource: sampleData,
      autoExpand: false,
      loadOnDemand: true
    });
  </script>
</body>
</html>

Quick Troubleshooting Tips #

• Edges not贴合? Check if any parent elements (like a wrapper div) have extra margins or padding—strip those out to ensure full alignment.
• Still auto-expanding? Search your code for any calls to .expand() or .expandTo(), which might be overriding the autoExpand setting.
• Scroll not working? Make sure the container has a defined height (either fixed or viewport-based)—without a set height, overflow-y: auto won't do anything.

内容的提问来源于stack exchange，提问作者Francis Lim