Отображать сообщение в сетке Кендо, когда оно пустое

Ответ 1

Хорошие новости - этот вариант доступен сейчас:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-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

Ответ 2

Вы можете использовать CSS: DEMO

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

с типом litlle:

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

Ответ 3

При определении сетки я использую следующее:

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

Ниже приведена демонстрационная версия

Ответ 4

Поддерживается готовый выпуск версии 2015.2.805. http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-noRecords.template

Ответ 5

Во-первых, вы не можете подделать пустой источник данных, просто указав неверный URL-адрес чтения. Это приведет к ошибке чтения и никогда не вызовет обновления в вашем источнике данных сетки (т.е. Событие dataBound никогда не произойдет). С другой стороны, пустой источник данных по-прежнему является достоверным источником данных и вызывает событие dataBound.

В любом случае, вот мое решение. Во-первых, чтобы эмулировать пустой источник данных, я установил источник данных следующим образом:

    dataSource: []

Теперь правильный способ проверить, действительно ли ваша сетка пуста, это прочитать сам источник данных. Другие делают это... более взломанным способом, читая html DOM. Пожалуйста, НЕ делайте этого, поскольку у вас может быть несколько страниц, фильтры и т.д., Где элемент находится в источнике данных, но не в DOM. Вот как вы должны это сделать:

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

Теперь, когда вы читаете свой источник данных, событие dataBound запускается каждый раз. Таким образом, вы должны поместить вышеуказанный код в событие dataBound. Проверьте, нет ли данных gridSource источника, а затем выпустите сообщение пользователю. Вот мой полный код для 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 здесь. Поэтому вместо использования уродливых предупреждающих ящиков я просто воспользуюсь другой частью библиотеки виджета кендо UI, которая настраивается и контролируется.

Логика if и else с помощью mBox просто обрабатывает последующие вызовы для отображения сообщения. В первый раз, kendoWindow не был создан, поэтому он проходит через предложение if. Последующие вызовы только разблокируют окно.

Попробуй:). Вы можете щелкнуть по кнопкам следующей страницы, чтобы убедиться, что он снова отобразит всплывающее окно. Вот jsFiddle Demo.

Ответ 6

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

Ответ 7

Я знаю, что опаздываю на вечеринку, но вот как я это сделал. В основном это копировалось из функции TreeList без данных (меня раздражало, что у вас не было того же со стандартной сеткой). Я превратил его в прототип, поэтому он автоматически добавляется к каждой сетке. Также можно добавить опцию для конфигурирования сообщения.

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

Ответ 8

Разве вы не можете сделать что-то вроде этого?

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

Или вы ищете что-то еще чище, чем что-то встроенное в Kendo? Я думаю, это еще проблема в пользовательском интерфейсе Kendo, который еще не исправлен См. Это http://www.telerik.com/forums/empty-grid-norecords-template

Ответ 9

Введенные данные сетки.

Добавьте сообщение script, чтобы отобразить сообщение.

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

        }

Ответ 10

Если ваша сетка имеет детализированные сетки (вложенные сетки), то приведенные выше примеры не будут работать на вложенных сетках. Чтобы убедиться, что вы применили это ко всем сетям кендо, вы можете сделать следующее:

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 в свой источник данных 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
}

Ответ 11

сетка Кендо Нет данных найдено сообщение

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

};

Ответ 12

Не знаете, в какой именно версии был задан этот вопрос, но в моем случае ни одно из вышеперечисленных решений не работало.

Я использовал следующий:

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