如何在 Kendo 调度程序上正确设置 max-height？

Question

我想知道是否有人知道如何使用 Kendo 调度程序实现以下行为：

我希望调度程序的高度是其内容的高度，直到它达到浏览器的高度（我已经计算过了），然后让它尽可能地成为可滚动的。

现在，我只是将高度设置为浏览器的高度，但这会导致时间线视图等视图以及仅显示营业时间（都比其他视图短得多）时出现多余的白色 space在它下面，因为调度器仍然是浏览器的高度window。

我通过将我初始化为调度程序的 max-height 设置为浏览器高度来实现这一点。唯一的问题是它使整个调度程序可滚动（包括带有日期导航工具的 header，我不想要）。我只希望 header 下的内容可以滚动。

Answer 1

看看DOM。您会注意到调度程序的内容在与 header.

分隔的 <table> 内呈现

从技术上讲，您可以将 <div> 包裹在小部件的 table 周围并将其 CSS-property height 或 max-height 设置为所需的高度，然后 overflow-y 到 scroll 或 auto。这样，你就可以实现你想要的。

看看下面的code-snippet。它应该可以解决问题：

$("#scheduler > table.k-scheduler-layout").wrap("<div style='max-height: 200px; overflow-y: auto;'></div>")

但是，我还没有测试过以这种方式操作 HTML-structure 是否会在正常使用小部件期间从 kendo 的一侧引入任何意外的 side-effects。

更新：在 rendering-process 导航到不同视图时，kendo 删除旧的 table 以呈现新视图 - 显然 - 使用与以前相同的例程。剩下的是我们在上面创建的空 <div> 和新的 table，它们都直接位于小部件 parent-node $("#scheduler") 下方。这意味着必须在绑定网格数据后执行上面的代码。为此，您可以使用 dataBound-event。文档：https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#events-dataBound)

更新后的 code-snippet，展示了 event-method 的样子：

  function scheduler_DataBound() {
    $("#scheduler > .scheduler-content-wrapper").remove();//Reset the DOM after changing page
    $("#scheduler > table.k-scheduler-layout").wrap("<div class='scheduler-content-wrapper' style='max-height: 200px; overflow-y: auto;'></div>");
    $("#scheduler .k-scheduler-content").css("overflow-x", "hidden");//Fix horizontal scrollbar
  }

更新 2：我发现如果 dataBound-event 在调整页面大小或打开 editor-popup 后被触发，网格将崩溃。我的第一个想法是 dataBound 不是调整网格大小的正确位置。在尝试通过 navigate 事件运行代码后，我认为这应该是正确的位置，我发现让它从那里开始工作的唯一方法是用 [= 包围代码26=]。虽然这有效，但延迟渲染在浏览器中看起来很糟糕。最后，我更改了代码，以便在 dataBound 之后每当应调整网格大小时设置一个标志。当然，为了调整小部件的大小而散布那么多代码感觉很俗气。但从我目前的理解来看，如果用户体验很重要，这是唯一的acceptable解决方案。

<script>
  var resizeScheduler = true;
  function scheduler_DataBound() {
    if (!resizeScheduler) {//Prevent grid crash, when event fired on page resize
      return; 
    }

    resizeScheduler = false;
    $("#scheduler > .scheduler-content-wrapper").remove();
    $("#scheduler > table.k-scheduler-layout").wrap("<div class='scheduler-content-wrapper' style='max-height: 200px; overflow-y: auto;'></div>");
    $("#scheduler .k-scheduler-content").css("overflow-x", "hidden");//Fix horizontal scrollbar
  }
  function scheduler_Navigate() {
    resizeScheduler = true;
  }
</script>

希望对您有所帮助。

如何在 Kendo 调度程序上正确设置 max-height？

How to correctly set a max-height on Kendo Scheduler?

javascript

jquery

css

kendo-ui

kendo-scheduler