剣道スケジューラーの最大高さを正しく設定する方法は？

Question

剣道スケジューラで以下の動作を達成する方法を知っている人がいるかどうかは疑問です。

スケジューラの高さをブラウザの高さに合わせる私はすでに計算しています）、それが行く限り、スクロール可能になります。

今は高さをブラウザの高さに設定しているだけですが、タイムラインビューのようなビューが表示され、営業時間（他のビューよりもはるかに短い）に余分な余分な空白がありますそれはスケジューラが依然としてブラウザウィンドウの高さのためです。

私はスケーラとしてブラウザの高さに初期化する自分の最大高さを設定することでこれを達成しました。これに関する唯一の問題は、スケジューラ全体をスクロール可能にすることです（日付ナビゲーションツールのヘッダーを含めて、私は望みません）。ヘッダーの下のコンテンツをスクロール可能にしたいだけです。

Answer 1

DOMを見てください。スケジューラーのコンテンツ は、ヘッダーから区切られた<table>の範囲内でレンダリングされます。

技術的に、あなたは、ウィジェットのテーブルの周りに<div>をラップし、それが所望の高さとscrollまたはautoからoverflow-yにCSS-プロパティheightまたはmax-heightだ設定することができます。この方法で、あなたが望むものを達成することができます。

以下のコードスニペットをご覧ください。それはトリックを行う必要があります。

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

しかし、私はHTML構造を操作する場合はテストしていないウィジェットの通常の使用時に剣道の側からの予期しない副作用を紹介しますこの方法。

更新： 別のビューにナビゲートするときのレンダリングプロセス中、剣道は古いものをレンダリングするために古いものを削除します - 明らかに - 以前と同じルーチンを使用します。残っているのは、上記で作成した空の<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 
    } 

UPDATE 2：私は、グリッドはデータバインドされ、イベントが取得する場合にクラッシュすることが判明ページのサイズを変更したり、エディタポップアップを開いた後に起動されます。私の最初の考えは、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> 

これが役立つことを願っています。