javascript - 如何在 Kendo Scheduler 上正确设置最大高度？

Question

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

我希望调度程序的高度是其内容的高度，直到它达到浏览器的高度(我已经计算过)，然后就可以滚动了。

现在，我只是将高度设置为浏览器的高度，但这会导致时间线 View 等 View 以及仅显示营业时间(都比其他 View 短得多)时在其下方具有额外的不需要的空白因为调度程序仍然是浏览器窗口的高度。

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

Answer 1

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

从技术上讲，您可以包装 <div>围绕小部件的表格并设置它的 CSS 属性 height或max-height到所需的高度和 overflow-y至scroll或auto 。这样，您就可以实现您想要的。

看看下面的代码片段。它应该可以解决问题:

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

但是，我还没有测试过以这种方式操作 HTML 结构是否会在常规使用小部件期间从 kendo 方面引入任何意外的副作用。

更新:在渲染过程中导航到不同 View 时，kendo 会删除旧的 table为了渲染新的 - 显然 - 使用与以前相同的例程。剩下的就是空的<div>我们在上面创建了新的 table ，都位于小部件父节点 $("#scheduler") 的正下方。这意味着上面的代码必须在网格数据绑定(bind)后执行。您可以使用 dataBound-event 来实现此目的。文件: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 运行代码后-event，我认为这应该是正确的地方，我发现让它工作的唯一方法就是用 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>

我希望这会有所帮助。