web-dev-qa-db-fra.com

Afficher un message dans la grille de Kendo lorsqu'elle est vide

J'essaie d'afficher un message convivial (comme "Aucun enregistrement trouvé, réessayez plus tard") dans le contenu de la grille, lorsqu'il n'y a aucun enregistrement dans la base de données.

D'après ce que j'ai vu dans le docs , il n'y a actuellement aucun moyen de le faire pour le contenu de la grille. faisable pour le pied de page. Vous pouvez voir l'exemple dans ce violon: http://jsfiddle.net/lav911/uNWXJ/

J'ai délibérément mal orthographié la route de données, afin d'avoir une grille vide. Pour le voir avec le contenu, commentez/décommentez ces lignes:

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

Y a-t-il un moyen propre de réaliser cela?

javascriptjquerycsskendo-uikendo-grid
43
Zubzob

Bonne nouvelle, cette option est disponible maintenant:

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

vous pouvez définir un message via un modèle de kendo:

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

ou via l'option de message:

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

le texte par défaut est "Aucun enregistrement disponible". quand set noRecords: vrai seulement

61
MarkosyanArtur

Vous pouvez utiliser CSS: DÉMO 

tbody:empty:before {
    content:'NO DATA';
}
avec peu de style:

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

 20 
G-Cyr
J'utilise les éléments suivants 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 peut être trouvée ici
 16 
Stef Heyenrath
Prise en charge immédiate dans la version 2015.2.805. http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-noRecords.template
 7 
pcl
Premièrement, vous  ne pouvez pas simuler une source de données vide en donnant simplement une URL de lecture incorrecte. Cela provoquera simplement une erreur de lecture et ne déclenchera jamais de mise à jour sur la source de données de votre grille (c'est-à-dire qu'un événement dataBound n'aura jamais lieu). D'autre part, une source de données vide est toujours une source de données valide et  will déclenche l'événement dataBound.
Quoi qu'il en soit, voici ma solution. Tout d'abord, pour émuler une source de données vide, j'ai défini la source de données comme suit:
    dataSource: []

Maintenant, le moyen approprié de vérifier si votre grille est vraiment vide consiste à lire la source de données elle-même. Les autres le font ... de manière plus compliquée en lisant html DOM. Veuillez faire  [~ # ~] pas [~ # ~] faites ceci car 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 devriez le faire:
if($("#grid").data("kendoGrid").dataSource.data().length===0){
    //do your stuff!
}

Désormais, lorsque vous lisez votre source de données, l'événement dataBound est déclenché à chaque fois. Ainsi, vous devriez mettre le code ci-dessus dans l'événement dataBound. Vérifiez si la source de données de la grille est vide, puis envoyez 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();
        }

    }
}

Quel est ce désordre fou ci-dessus? Vous remarquerez que je fais beaucoup de choses avec la variable mBox. C’est simplement un <div> Vide que j’ai ajouté à la page html avec l’identifiant msgBox et que je l’utilise pour instancier un kendoWindow afin de créer la fenêtre contextuelle disant qu’il n’ya pas de données. .
Vous pouvez en savoir plus sur kendoWindow ici . Ainsi, au lieu d’utiliser des boites d’alerte déplorables, je profite simplement d’une autre partie de la bibliothèque de widgets de kendo UI, qui est personnalisable et contrôlable.
La logique if et else avec le mBox gère simplement les appels suivants pour afficher le message. La première fois, kendoWindow n'a pas été instancié, il passe donc à travers la clause if. Les appels suivants avec juste rouvrir la fenêtre.
Essaie :). Vous pouvez cliquer sur les boutons de la page suivante pour vérifier que la fenêtre contextuelle s'affichera à nouveau. Voici une  démonstration de jsFiddle  .
 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
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 de TreeList (j'étais ennuyé de ne pas avoir la même chose avec la grille standard). Je l'ai fait dans une extension de prototype afin qu'il soit automatiquement ajouté à chaque grille. Une option peut é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
};

 3 
Pluc
Si votre grille comporte des grilles de détails (grilles imbriquées), les exemples ci-dessus ne fonctionneront pas avec les grilles imbriquées. Pour vous assurer de l’appliquer à toutes vos grilles de kendo, vous pouvez procéder comme 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();
            };
        });
    });
}

Appelez ensuite cette fonction une fois que tout votre contenu a été chargé. Il n'est pas nécessaire de l'ajouter à chaque grille individuellement.
$(document).ready(function () {
    kendoEmptyGridFix();
});

si vous voulez changer le message, ajoutez emptyMsg à votre source de données, i.e.
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
Tu ne peux pas faire quelque chose comme ça -
if(this.tbody.rows.length === 0) {
     alert('no records');
     return;
}

Ou vous cherchez quelque chose d'encore plus propre, quelque chose de intégré au Kendo? Je pense que cela reste un problème dans Kendo UI qui n’a pas encore été résolu. Voir ceci - http://www.telerik.com/forums/empty-grid-norecords-template
 2 
Cute_Ninja
Sur la grille de données ..
Ajoutez 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>');

        }

 2 
Shaz
Kendo grid Aucun message de données trouvées
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
Je ne sais pas quelle était la version exacte de cette question, mais dans mon cas, aucune des solutions ci-dessus n'a fonctionné.
J'ai utilisé le suivant:
config : {
     noRecords: {
          message: "No records found."
     },
}

 1 
radu florescu