web-dev-qa-db-ja.com

空のときに剣道グリッド内にメッセージを表示する

データベースにレコードがないときに、グリッドコンテンツ内に（ "レコードが見つかりません。後で再試行してください"など）わかりやすいメッセージを表示しようとしています。

docs で見たものから、現在、グリッドコンテンツに対してこれを行う方法はありません。それはフッターに実行可能。このフィドルで例を見ることができます： http://jsfiddle.net/lav911/uNWXJ/

空のグリッドを作成するために、意図的にデータルートのスペルを間違えました。コンテンツで表示するには、これらの行をコメント/コメント解除するだけです：

transport: {
            // read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customerss"
        },

これを達成するためのクリーンな方法はありますか？

javascriptjquerycsskendo-uikendo-grid
43
Zubzob

良いニュース-このオプションは現在利用可能です：

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/norecords#noRecords

剣道テンプレートを使用してメッセージを設定できます。

noRecords: {
    template: "No data available on current page. Current page is: #=this.dataSource.page()#"
}

またはメッセージオプションを使用：

noRecords: true,
messages: {
    noRecords: "There is no data on current page"
}

デフォルトのテキストは「利用可能なレコードがありません」です。 noRecordsを設定した場合：trueのみ

61
MarkosyanArtur

CSSを使用できます：[〜＃〜] demo [〜＃〜]

tbody:empty:before {
    content:'NO DATA';
}
スタイルはほとんどありません：

tbody:empty:before { content:'NO DATA'; display:table-cell; padding:0.5em; } 

 20 
G-Cyr
グリッドを定義するときに次を使用します。
$('#grid').kendoGrid({
    dataSource: employeeDataSource,
    dataBound: function () {
        DisplayNoResultsFound($('#grid'));
},


 javascript関数「DisplayNoResultsFound」の定義は次のとおりです。
function DisplayNoResultsFound(grid) {
    // Get the number of Columns in the grid
    var dataSource = grid.data("kendoGrid").dataSource;
    var colCount = grid.find('.k-grid-header colgroup > col').length;

    // If there are no results place an indicator row
    if (dataSource._view.length == 0) {
        grid.find('.k-grid-content tbody')
            .append('<tr class="kendo-data-row"><td colspan="' + colCount + '" style="text-align:center"><b>No Results Found!</b></td></tr>');
    }

    // Get visible row count
    var rowCount = grid.find('.k-grid-content tbody tr').length;

    // If the row count is less that the page size add in the number of missing rows
    if (rowCount < dataSource._take) {
        var addRows = dataSource._take - rowCount;
        for (var i = 0; i < addRows; i++) {
            grid.find('.k-grid-content tbody').append('<tr class="kendo-data-row"><td>&nbsp;</td></tr>');
        }
    }
}

実行中のデモを見つけることができます here
 16 
Stef Heyenrath
2015.2.805リリースですぐに使用できるようにサポートされました。 http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-noRecords.template
 7 
pcl
まず、cannot不正な読み取りURLを指定するだけで空のデータソースを偽造することはできません。これにより、読み取りエラーが発生するだけで、グリッドのデータソースで更新がトリガーされることはありません（つまり、dataBoundイベントは発生しません）。一方、空のデータソースは依然として有効なデータソースであり、willはdataBoundイベントをトリガーします。
とにかく、ここに私の解決策があります。まず、空のデータソースをエミュレートするために、データソースを次のように設定しました。
_    dataSource: []
_
さて、グリッドが本当に空かどうかをチェックする適切な方法は、データソース自体を読み取ることです。他の人はそれを... html DOMを読むことで、よりハックな方法で行います。 [〜＃〜] not [〜＃〜]を実行してください。複数のページ、フィルターなどがある場合があります。アイテムはdataSourceにありますが、 DOM。これを行う方法は次のとおりです。
_if($("#grid").data("kendoGrid").dataSource.data().length===0){
    //do your stuff!
}
_
これで、データソースを読み取ると、毎回dataBoundイベントがトリガーされます。したがって、上記のコードをdataBoundイベントに配置する必要があります。グリッドのdataSourceが空かどうかを確認し、ユーザーにメッセージを送信します。 dataBoundの完全なコードを次に示します。
_dataBound: function (e) {
    var grid = $("#grid").data("kendoGrid");
    var mBox = $("#msgBox");
    if (grid.dataSource.data().length === 0) {
        if (!mBox.data("kendoWindow")) {
            mBox.kendoWindow({
                actions: ["Close"],
                animation: {
                    open: {
                        effects: "fade:in",
                        duration: 500
                    },
                    close: {
                        effects: "fade:out",
                        duration: 500
                    }
                },
                modal: true,
                resizable: false,
                title: "No items",
                width: 400
            }).data("kendoWindow").content("<p>No contacts available. Please try again later.</p>").center().open();
        } else {
            mBox.data("kendoWindow").content("<p>No contacts available. Please try again later.</p>").open();
        }

    }
}
_
上記のこの狂った混乱は何ですか？あなたは、変数mBoxを使って多くのことをやっていることに気付くでしょう。これは単に空の_<div>_です。これは、HTMLページにID msgBoxで追加し、kendoWindowをインスタンス化して、データがないことを示すポップアップを作成するために使用しています。
kendoWindow here の詳細を確認できます。そのため、見苦しい警告ボックスを使用する代わりに、剣道UIのウィジェットライブラリの別の部分を利用しています。これは、カスタマイズおよび制御が可能です。
ifを使用したelseおよびmBoxロジックは、メッセージを表示するための後続の呼び出しを単に処理します。初めて、kendoWindowはインスタンス化されていないため、if句を通過します。ウィンドウを再度開くだけの後続の呼び出し。
試してみる ：）。次のページのボタンをクリックして、ポップアップが再び表示されることを確認できます。 jsFiddle Demo です。
 5 
gitsitgo
enter image description here
 // Kendo Grid
         dataSource: dataSource,
         dataBound:gridDataBound,



//No data in the grid show message
        function gridDataBound(e) {
            var grid = e.sender;
            if (grid.dataSource.total() == 0) {
                var colCount = grid.columns.length;
                $(e.sender.wrapper)
                    .find('tbody')
                    .append('<tr class="kendo-data-row"><td colspan="' + colCount + '" class="no-data">There is no data to show in the grid.</td></tr>');
            }
        };

 4 
atik sarker
私はパーティーに遅れていることを知っていますが、私はそれをどうやってやったのですか？これは、ほとんどTreeTreeのデータなし機能からコピーされたものです（標準のグリッドでは同じものが得られなかったので悩みました）。プロトタイプの拡張機能にしたので、すべてのグリッドに自動的に追加されます。オプションを追加して、メッセージを構成可能にすることもできます。
// Replace the grid content with a status message (Can be reused for data errors if you want to show "Request failed [Reload]" or something like that.
kendo.ui.Grid.prototype._showStatus = function (message) {
    var status = this.content.find(".k-status");

    if (!status.length) {
        status = $("<div class='k-status' />").appendTo(this.content.closest(".k-grid-content"));
    }

    status.html(message);
};

// Put back the grid content instead of the status message
kendo.ui.Grid.prototype._hideStatus = function () {
    this.content.find(".k-status").remove();
};

// Keep the original render function so we can call it int our override
kendo.ui.Grid.prototype.__renderContent = kendo.ui.Grid.prototype._renderContent;

// Override the render function
kendo.ui.Grid.prototype._renderContent = function (data, colspan, groups) {
    this.__renderContent(data, colspan, groups);
    if (data.length)
        this._hideStatus();
    else
        this._showStatus("No data."); // Could also add an option for that text so you can choose the message in a grid config
};

 3 
Pluc
グリッドに詳細グリッド（ネストされたグリッド）がある場合、上記の例はネストされたグリッドでは機能しません。これをすべての剣道グリッドに確実に適用するには、以下を実行できます。
function kendoEmptyGridFix() {
    $("[data-role='grid']").each(function() {
        $(this).data("kendoGrid").bind('detailInit', function(e) {
            kendoEmptyGridFix();
        });
        $(this).data("kendoGrid").bind('dataBound', function(e) {
            var colCount = this.table.find("tHead tr th").length;
            if ($(this)[0].dataSource._view.length == 0) {
                var msg = ($(this)[0].dataSource.options.emptyMsg == undefined ? "No Results Found!" : $(this)[0].dataSource.options.emptyMsg);
                this.table.find('tbody').html('<tr class="kendo-data-row"><td colspan="' + colCount + '" style="text-align:center; padding-top:20px; padding-bottom:20px;"><div class="k-empty-grid-row">' + msg + '</div></td></tr>');

                // optional to hide pager section
                this.table.parent().find('.k-grid-pager').hide();
            };
        });
    });
}

次に、すべてのコンテンツがロードされた後にこの関数を呼び出します。各グリッドに個別に追加する必要はありません。
$(document).ready(function () {
    kendoEmptyGridFix();
});

メッセージを変更する場合は、emptyMsgをdataSourceに追加します。
dataSource: {
    transport: {
        read: {
            url: "/getItems/" + e.data.id,
            dataType: "xml"
        }
    },
    emptyMsg: 'There are currently no items available', 
    schema: {
        type: "xml",
        data: "/a/b",
        model: {
            fields: {
                "id": "id/text()",
                "status": "status/text()"
            }
        }
    },
    pageSize: 20
}

 2 
Darren
このようなことはできませんか-
if(this.tbody.rows.length === 0) {
     alert('no records');
     return;
}

それとも、剣道に組み込まれたもっときれいなものを探していますか？これは、まだ修正されていないKendo UIの問題であると思います。これを参照してください- http://www.telerik.com/forums/empty-grid-norecords-template
 2 
Cute_Ninja
グリッドデータ上で.
次のスクリプトを追加して、メッセージを表示します。
 //ondatabound on user assginment grid grid
    function onUserAssignGridDataBound(e) {

        //Get the number of Columns in the grid
        var colCount = $("#UserAssignGrid").find('.k-grid-header colgroup > col').length;

        //If There are no results place an indicator row
        if ($("#UserAssignGrid").data("kendoGrid").dataSource._view.length == 0) {
            $("#UserAssignGrid").find('.k-grid-content tbody')
                .append('<tr class="kendo-data-row"><td colspan="' +
                    colCount +
                    '" style="text-align:center; padding-top:10px;background-color:#AFE4FA"><b>No Results Found!</b></td></tr>');

        }

 2 
Shaz
Kendo grid No Data foundメッセージ
function gridDataBound(e) {
var grid = e.sender;
if (grid.dataSource.total() == 0) {
    var colCount = grid.columns.length;
    $(e.sender.wrapper)
        .find('tbody')
        .append('<tr class="kendo-data-row"><td colspan="' + colCount + '" class="no-data">Sorry, no data :(</td></tr>');
}

};
 2 
Gaurang Dhandhukiya
この質問が尋ねられた正確なバージョンは不明でしたが、私の場合、上記のソリューションはどれもうまくいきませんでした。
私は次のものを使用しました：
config : {
     noRecords: {
          message: "No records found."
     },
}

 1 
radu florescu