Afficher un message dans la grille de Kendo quand il est vide

tbody:empty:before {
    content:'NO DATA';
}

avec un peu de style:

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

j'utilise la suite lors de la définition de la grille:

$('#grid').kendoGrid({
    dataSource: employeeDataSource,
    dataBound: function () {
        DisplayNoResultsFound($('#grid'));
},

la fonction javascript 'DisplayNoResultsFound' est définie comme suit:

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>');
        }
    }
}

une démo en cours d'exécution peut être trouvée ici

prise en charge out-of-the-box dans la 2015.2.805 libération. http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-noRecords.template

tout d'Abord, vous ne peut pas truquer une source de données vide simplement en donnant une url de lecture incorrecte. Cela causera juste une erreur de lecture et ne déclenchera jamais aucune mise à jour sur la source de données de votre grille, (c.-à-d. l'événement dataBound ne se produira jamais). D'un autre côté, une source de données vide est toujours une source de données valide et déclencher l'événement de la base de données.

bref, voici ma solution. Tout d'abord, pour émuler une source de données vide, j'ai source de données comme ceci:

    dataSource: []

Maintenant, la bonne façon de vérifier si votre grille est vraiment vide, c'est de lire la source de données elle-même. Les autres le faire... d'une manière plus hacky en lisant le DOM html. S'il vous plaît ne faire ce que vous pouvez avoir plusieurs pages, filtres, etc... où l'élément est dans la source de données mais pas dans le DOM. Voici comment vous devez le faire:

if($("#grid").data("kendoGrid").dataSource.data().length===0){
    //do your stuff!
}

Maintenant, lorsque vous lisez votre source de données, l'événement dataBound est déclenché à chaque fois. Ainsi, vous faudrait mettre le code ci-dessus dans l'événement dataBound. Vérifiez si la source de données de la grille est vide, puis lancez un message à l'utilisateur. Voici mon code complet pour 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();
        }

    }
}

Qu'est-ce que ce foutoir ci-dessus? Vous remarquerez que je fais beaucoup de choses avec la variable mBox. C'est tout simplement un vide <div> j'ai ajouté sur la page html avec id msgBox, et je l'utilise pour instancier un kendoWindow pour créer le popup disant qu'il n'y a pas de données.

Vous pouvez trouver plus sur kendoWindow here. Donc au lieu d'utiliser des boîtes d'alerte moches, je profite juste d'une autre partie de la bibliothèque de widget de kendo UI, qui est personnalisable et contrôlable.

if et else logique mBox traite simplement les appels subséquents pour afficher le message. La première fois, le kendoWindow n'a pas été instancié, de sorte qu'il passe par le if l'article. Les appels suivants avec juste rouvrir la fenêtre.

lui Donner un essai :). Vous pouvez cliquer sur les boutons page suivante pour vérifier qu'il affichera à nouveau le popup. Voici un jsFiddle Démo.

 // 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>');
            }
        };

je sais que je suis en retard à la fête Mais voici comment je viens de le faire. Il est principalement copié à partir de la fonction no data du TreeList (j'ai été ennuyé que vous n'aviez pas la même chose avec la grille standard). J'en ai fait une extension prototype, donc elle est automatiquement ajoutée à chaque grille. Une option pourrait également être ajoutée pour rendre le message configurable.

// 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
};

Pouvez-vous pas faire quelque chose comme cela -

if(this.tbody.rows.length === 0) {
     alert('no records');
     return;
}

ou vous êtes à la recherche de quelque chose d'encore plus propre quelque chose de construit dans le Kendo? Je pense que C'est un problème qui existe toujours à Kendo UI et qui n'a pas encore été résolu. Voir ce - http://www.telerik.com/forums/empty-grid-norecords-template

si votre grille a des grilles de détail (grilles imbriquées) alors les exemples ci-dessus ne fonctionneront pas sur les grilles imbriquées. Pour vous assurer que vous appliquez ceci à toutes vos grilles de kendo vous pouvez faire ce qui suit:

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();
            };
        });
    });
}

Puis appeler cette fonction après tout votre contenu a été chargé, il n'est pas nécessaire de l'ajouter à chaque grille individuellement.

$(document).ready(function () {
    kendoEmptyGridFix();
});

si vous souhaitez modifier le message, ajoutez emptyMsg à votre source de données, c'est-à-dire

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
}

grille de Kendo aucune donnée trouvée 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">Sorry, no data :(</td></tr>');
}

};

Sur La Grille De Données Liée..

Ajouter le script suivant pour afficher le Message.

 //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>');

        }

Je ne sais pas quelle était la version exacte cette question a été posée, mais dans mon cas aucune des solutions ci-dessus n'a fonctionné.

j'ai utilisé la suivante:

config : {
     noRecords: {
          message: "No records found."
     },
}