web-dev-qa-db-ja.com

剣道UIグリッド初回読み取り時にスピナー/ロードアイコンが表示されない

JSONを返すMVCアクションからデータを読み取るように剣道UIグリッドを設定しました。コストの関係で、MVC固有ではなく無料バージョンの剣道を使用しています。

問題は、ページが読み込まれ、グリッドの初期設定が行われるときに、読み込みスピナーが表示されないことです。グリッドにデータが入力された後、別のページに移動するか、表示される列を並べ替えます。

グリッドの高さパラメーターを設定すると、最初のスピナーが表示されますが、グリッドには1行しか表示されません（20行表示されているはずです）。

高さパラメータを設定する必要がある理由を誰かが知っていますか？または、高さを設定せずにスピナーを機能させる方法。

私の剣道javascriptコード：

$("#grid").kendoGrid({
        dataSource: new kendo.data.DataSource({
            transport: {
                read: url,
                parameterMap: function (options) {
                    var result = {
                        pageSize: options.pageSize,
                        skip: options.skip,
                        take: options.take,
                        page: options.page,
                    };

                    if (options.sort) {
                        for (var i = 0; i < options.sort.length; i++) {
                            result["sort[" + i + "].field"] = options.sort[i].field;
                            result["sort[" + i + "].dir"] = options.sort[i].dir;
                        }
                    }

                    return result;
                }
            },
            requestStart: function () {
                //kendo.ui.progress($("#loading"), true); <-- this works on initial load, but gives two spinners on every page or sort change
            },
            requestEnd: function () {
                //kendo.ui.progress($("#loading"), false);

            },
            pageSize: 20,
            serverPaging: true,
            serverSorting: true,
            schema: {
                total: "total", 
                data: "data"
            },
        }),
        height: "100%", <-- I want to avoid this as it renders the grid way to small
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "PaymentRefId",
                title: "Id"
            },
            {
                field: "DueDate",
                title: "Due Date"
            },
            {
                field: "Credit",
                title: "Amount"
            },
            {
                field: "InvoiceGroupId",
                title: " ",
                sortable: false,
                template: '<a href="/InvoiceGroup/InvoiceGroupDetails2/#: InvoiceGroupId #">See details</a>'
            }
        ],
    });
javascriptjqueryasp.net-mvckendo-uikendo-grid
11
Zaphod

変数を使用してデータセットの読み込みが最初の読み込みであったかどうかを通知するソリューション変数。これは完璧な解決策ではありませんが、私が仕事をすることができたのはそれだけです。

var initialLoad = true;
$("#grid").kendoGrid({
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [
        {
            field: "PaymentRefId",
            title: "Id"
        },
        {
            field: "DueDate",
            title: "Due Date"
        },
        {
            field: "Credit",
            title: "Amount"
        },
        {
            field: "InvoiceGroupId",
            title: " ",
            sortable: false,
            template: '<a href="/InvoiceGroup/InvoiceGroupDetails2/#: InvoiceGroupId #">See details</a>'
        }
    ],
});
var ds = new kendo.data.DataSource({
        transport: {
            read: url,
            parameterMap: function (options) {
                var result = {
                    pageSize: options.pageSize,
                    skip: options.skip,
                    take: options.take,
                    page: options.page,
                };

                if (options.sort) {
                    for (var i = 0; i < options.sort.length; i++) {
                        result["sort[" + i + "].field"] = options.sort[i].field;
                        result["sort[" + i + "].dir"] = options.sort[i].dir;
                    }
                }

                return result;
            }
        },
        requestStart: function () {
            if (initialLoad) <-- if it's the initial load, manually start the spinner
                kendo.ui.progress($("#invoiceGroupGrid"), true);
        },
        requestEnd: function () {
            if(initialLoad)
                kendo.ui.progress($("#invoiceGroupGrid"), false);
            initialLoad = false; <-- make sure the spinner doesn't fire again (that would produce two spinners instead of one)

        },
        pageSize: 20,
        serverPaging: true,
        serverSorting: true,
        schema: {
            total: "total", 
            data: "data"
        },
    });
11
Zaphod

私はこれと同じ問題を抱えていました。実際にはスピナー/プログレスバーをレンダリングしていますが、グリッドコンテンツ領域には最初は高さがないため、表示されません。これは私のために働いた。試してみます：

// This forces the grids to have just al little height before the initial data is loaded. 
// Without this the loading progress bar / spinner won't be shown.
.k-grid-content {
    min-height: 200px;
}
36
Andrew Lundgren

グリッドの初期化でデータソースinを作成および設定しているため、グリッドの読み込みが非常に速く、読み込みスピナーが表示されない可能性があります。 kendogridのすべてのWebデモをWebサイトで見ると、初期ロードスピナーが表示されることはめったにありません。ロードに時間がかかる大規模なリモートデータソースでは、それが表示されます。

If I set the height parameter of the grid, I get the initial spinner but the grid only shows one row (should have shown 20)

1行しか表示されないわけではありません。これは、heightプロパティ値の読み取りに失敗したため、デフォルトで可能な限り小さい値に設定されたためです。 高さ 数値のピクセル値を取り、パーセンテージを受け入れません。値を読み取れなかったため、グリッドの初期化に時間がかかり、ロードスピナーが表示された可能性があります。代わりに、高さはたとえば_height: 400,_のように設定する必要があります。しかし、これは重要なことではありません。

起動時にロードスピナーをユーザーに表示させたい場合は、グリッドの初期化の外部でデータソースをロードしてみてください。基本的に、最初にグリッドをロードし、その後にデータソースをロードして、グリッドのレンダリングとデータソースの設定の間にわずかに遅延が生じるようにします。

_$("#grid").kendoGrid({
    //kendoGrid details... but exclude dataSource
});

var ds = new kendo.data.DataSource({
    //DataSource details...
});
_

次に、データソースを次のように設定します。

_var grid = $("#grid").data("kendoGrid");
grid.setDataSource(ds);
grid.refresh();
_

ただし、これでもかなり高速に読み込まれると思います。

それでもスピナーが本当に必要な場合のもう1つの最後の手段は、ユーザーをだましてロードに時間がかかると思わせ、試したようにロードスピナーを手動で呼び出すことです。 kendo.ui.progress($("#loading"), true);を呼び出し、たとえば250msの小さな遅延関数を実行してから、ロードスピナーをオフにしてから、grid.setDataSource(ds);を呼び出して更新します。

0
gitsitgo