Question

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

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

现在，我只是将高度设置为浏览器的高度，但是这会导致时间轴视图之类的视图以及仅显示营业时间（比其他视图都短得多）以在其下方留下额外不需要的空白区域因为调度程序仍然是浏览器窗口的高度。

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

Answer 1

看看DOM。您会注意到调度程序的内容在与标题分开的<table>内呈现。

从技术上讲，您可以在小部件的表格中包裹<div>，并将其CSS属性height或max-height设置为所需的高度overflow-y 1}}到scroll或auto。这样，你就可以达到你想要的效果。

查看以下代码段。它应该做的伎俩：

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

然而，我还没有测试过，如果以这种方式操纵HTML结构会在常规使用小部件时引入剑道方面的任何意外副作用。

更新：在导航到不同视图的渲染过程中，剑道移除了旧的table以便渲染新的 - 显然 - 使用与以前相同的例程。剩下的是我们在上面创建的空<div>和新的table，它们都位于小部件父节点$("#scheduler")的正下方。这意味着必须在绑定网格数据后执行上面的代码。您可以将dataBound事件用于此目的。文件：https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#events-dataBound）

更新后的代码段，显示了事件方法的外观：

  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事件时网格会崩溃。我的第一个想法是dataBound不是调整网格大小的正确位置。尝试通过navigate - 事件运行代码后，我认为应该是正确的地方，我发现从那里开始工作的唯一方法就是用setTimeout(function(){ /* code... */ })包围代码。虽然这有效，但延迟渲染在浏览器中看起来很糟糕。最后，我更改了代码，以便在dataBound之后应该调整网格大小时设置标记。当然，为了调整小部件的大小，传播那些代码感觉很俗气。但从我目前的理解来看，如果用户体验很重要，这是唯一可接受的解决方案。

<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 Scheduler上正确设置最大高度？

1 个答案: