剣道UI for jQuery R2 2020 SP1体験版ダウンロード
剣道UIは、現在提供：4つのコントロールjQueryのための剣道UI、角度のための剣道UI、剣道UIサポートリアクトためとVueのための剣道UIサポート。Kendo UI for jQueryは、最新のWebアプリケーションを作成するための最も完全なUIライブラリです。
アダプティブレンダリング
Kendo UI for jQueryは適応性のある拡張機能をサポートしており、あらゆるデバイスで一貫したエクスペリエンスを顧客に提供します。
たとえば、モバイルデバイスでデータをフィルタリングまたは編集すると、Kendo UIはユーザーの新しい画面にスライドします。これは、デスクトップでのインラインおよびポップアップ操作とは異なります。
レスポンシブデザインを有効にする
アダプティブレンダリングを有効にするには、mobile属性をtrueまたは「phone」に設定します。
- trueに設定すると、ウィジェットはモバイルブラウザで表示されるときにアダプティブレンダリングを使用します。
- 「phone」に設定すると、ブラウザのタイプに関係なく、ウィジェットは強制的にアダプティブレンダリングを使用します。
重要な注意：モバイルレンダリングでは、高さオプションも設定することをお勧めします。明確な高さが設定されていない場合、グリッドのビューごとに高さが異なる場合があります。
<div id = "grid"> </ div>
<script>
$（ "＃grid"）。kendoGrid（{
columns：[
{field： "name"}、
{field： "age"}、
{command： "destroy "}
]、
データソース：[
{名： "ジェーン・ドウ"、年齢：30}、
{名： "ジョン・ドウ"、年齢：33}
]、
濾過：真、
編集可能：真、
columnMenu：真、
高さ：550、
mobile： "phone"
}）;
</ script>
モバイルデバイスのパネルを構成する
アダプティブグリッドが配置されているモバイルパネルでは、高さが自動的に拡張されません。アダプティブグリッドをKendo UIモバイルアプリケーションに追加するには、各ビューのストレッチ構成をtrueに設定し、100％の高さをグリッド。または、明確なピクセルグリッドの高さを定義し、パネルストレッチオプションを省略します。
重要な注意：剣道モバイルアプリでグリッドのアダプティブレンダリングを使用する場合は、Less-basedテーマを適用してください。
次の例は、ストレッチオプションを適用する方法を示しています。
<div id = "foo" data-role = "view" data-init = "onInit" data-stretch = "true">
<div id = "grid"> </ div>
</ div>
<script>
var gridConfig = {
列：[
{フィールド： "名前"}、
{フィールド： "年齢"}、
{コマンド： "破棄"}
]、
dataSource：[
{名前： "ジェーンドゥ"、年齢：30}、
{名前： " John Doe "、年齢：33}
]、
フィルター可能：true、
columnMenu：true、
モバイル：" phone "、
高さ：" 100％ "
};
function onInit（）{
$（ "＃grid"）。kendoGrid（gridConfig）;
}
var app = new kendo.mobile。応用（）;
</ script>
次の例は、高さオプションを適用する方法を示しています。
<div id = "foo" data-role = "view" data-init = "onInit">
<div id = "grid"> </ div>
</ div>
<script>
var gridConfig = {
列：[
{フィールド： "name"}、
{field： "age"}、
{command： "destroy"}
]、
dataSource：[
{name： "Jane Doe"、age：30}、
{name： "John Doe"、age：33 }
]、
filterable
：true、columnMenu：true、
mobile： "phone"、
height： "140px" //グリッドは高さ140pxになります
};
$（ "＃grid"）。kendoGrid（gridConfig）;
</ script>
列のサイズを変更
ユーザーが対応する列ヘッダーに指を置くと、タッチスクリーンデバイスの列サイズ調整機能がトリガーされます。サイズ変更アイコンが表示されたら、ユーザーはドラッグして列のサイズを調整できます。
図1：モバイルデバイス上のサイズ変更可能な列を含むグリッド
アダプティブメッシュを破壊する
アダプティブモードでは、グリッドが補助マークを生成します。ウィジェットを手動で破棄する場合は、ウィジェットを削除する必要があります。
グリッドを手動で破棄します。
- グリッドウィジェットの周囲に作成された最も近い.k-pane-wrapper祖先でkendo.destroy（）を呼び出します。
- DOMから.k-pane-wrapper要素全体を削除します。
グリッドを再作成するには、グリッドdivが最初に配置されたのと同じ場所に新しいdivを挿入します。