1

剣道グリッドに問題がwindowあり、ウィンドウ内にtabstripタブのコンテンツがあり、タブ1とタブ2にそれぞれ表示される2つのグリッドがあり、ウィンドウも最初は見えません。

私の問題はgrid in the second tab height、元のグリッド コンテンツの高さを超えていることです。私は jsfiddle clickhereで問題を再現しました。誰かが私を助けることができると思います。

4

4 に答える 4

2

上記のコメントで説明されているように結果を取得するには：

ページングではなくスクロールを使用してすべての結果を表示するグリッドが必要です。ただし、このグリッドはタブストリップ タブ (たまたまウィンドウ内) 内にあるため、コンテナー (タブストリップ タブ) をオーバーフローさせることはできません。

あなたがすべき：

  1. 私の知る限り、heightは の有効なオプションではありませんkendoTabStrip。削除できます。
  2. ページングは​​必要ありませんが、サーバーからすべての結果を取得してからスクロールします。したがって、初期化からだけでなくpageable: ...、初期化からも削除する必要があります。GridpageSize: 10DataSource
  3. グリッドを作成した後、heightKendo UI が導入したスタイリングが正しく計算されない (!?)ため、 を実行して削除する必要があります$("#grid2").css("height","");。これは少しトリッキーに思えますが、それ以外の方法では実行できませんでした。
  4. グリッドの高さを少し下げる必要があります。そうしないと、ウィンドウに収まりません。450に変更しました。

あなたの例の次の変更では、この変更をgrid2（grid2のみ）に対して行いました。

于 2013-01-25T11:21:06.363 に答える
1

私はあなたのjsfiddleをチェックし、それを見つけました

<div id="tabStrip">
    <ul>
        <li>First tab</li>
        <li>Second tab</li>
    </ul>
    <div id="grid1"></div>
    <div id="grid2">Second tab content</div>
</div>

上記のコード<div id="grid2">Second tab content</div>では、2番目のタブの高さの問題が発生しています。

のテキストを削除してdiv試すことができます。

デモ

変化する

コードにいくつか変更を加えました。以下のjsFiddleをご覧ください。

フィドルこのフィドルを確認してください

あなたのコメントに従ってフィドルを更新しました

于 2013-01-25T04:31:48.577 に答える
1

私は同じ問題を抱えており、dataBound イベントで .k-grid-content の高さを設定することで解決します

$("#grid").kendoGrid(
{
    dataBound: function()
    {
        $('#grid .k-grid-content').height(349);
    }
});

ここでjsfiddleをチェックしてください

于 2014-03-28T11:37:49.247 に答える
0

ウィンドウまたはタブストリップ (アクティブなタブ以外) 内のグリッドの高さの問題。実際、これらの問題は、コンテンツを部分的にロードしたり、ajax を介してロードしたりするときに発生します。

解決策 1:作業中
- CSS を使用してグリッド コンテンツ コンテナーに最大高さを設定し、グリッドのバインド中に高さを削除します。したがって、グリッド コンテンツがこの高さよりも大きい場合、スクローラーが有効になります。以下のようにしました。

CSS:

    #gridTasks .k-グリッド-コンテンツ {
            最大高さ: 300px;
        }

JavaScript:


    //グリッドで利用可能なデータソースを準備します
                var taskDataSource = new kendo.data.DataSource({
                    サーバーページング: 真、
                    サーバーフィルタリング: 真、
                    サーバーソート: 真、
                    ページサイズ: 10,
                    スキーマ: {
                        データ: "データ",
                        合計: "合計",
                        model: { // データ ソースのモデルを定義します。検証およびプロパティ タイプに必要です。
                            id: "メンバーID",
                            田畑： {
                                MemberID: { type: "number", editable: false },
                                TaskName: { type: "string" }
                            }
                        }
                    }、
                    輸送： {
                        読んだ： {
                            url: "/MemberManagement/GetTasksList",
                            contentType: "アプリケーション/json",
                            type: "POST" // デフォルトでは GET は ASP.NET MVC で許可されていないため、HTTP POST 要求を使用します。
                        }、
                        parameterMap: 関数 (データ、操作) {
                            if (操作 == "読み取り") {
                                JSON.stringify(データ) を返します。
                            }
                        }
                    }
                });

    //バインド グリッド
    $("#gridTasks").kendoGrid({
                 // 高さ: 300, // この行を削除 ***
                    列: [                
                        { field: "MemberID", title: "Member ID", width: 60, groupable: false, hidden: true },
                        { field: "TaskName", title: "Task Name", width: 100 , groupable: false }
                    ]、
                    ページング可能: {
                        リフレッシュ: 真、
                        ページサイズ: 10,
                        ページサイズ: [10, 20, 50, 100],
                        ボタン数: 5,
                        メッセージ: {
                            空: "レコードが見つかりません。",
                            表示: 「{0}-{1}/{2}」
                        }
                    }、
                    ソート可能: true,
                    選択可能：「複数」、
                    スクロール可能: true,
                    フィルタリング可能: true,
                    グループ化可能: true,
                    データソース: taskDataSource
                });

解決策2：私のためにも働いています。
- dataBound javascriptでk-grid-content の高さを変更します。


    データバインド: 関数() {
                 $('#gridTasks .k-grid-content').height(300);
              }
于 2015-04-08T20:14:25.073 に答える