4 July, 2014 Roel van Lisdonk 0 Comments 1 category

If you want to show an text in a Kendo UI grid, you could use CSS, as suggested on stackoverflow.com:

http://stackoverflow.com/questions/23476978/display-a-message-within-the-kendo-grid-when-its-empty

 

But if you want to completely hide the gird and show a message, you can use a calculated field:

http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/observableobject#creating-dependent-methods-also-known-as-calculated-fields

 

image

 

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Kendo element binding research page.</title>
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.metro.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.metro.mobile.min.css" />
    <style>
        /* Resets */
        div, span, i, p, input, select {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */
            color: rgb(112, 112, 112);
            font-family: Arial, Helvetica, sans-serif; /* For know use default fonts used on google.com stackoverflow.com, telerik.com etc. */
            font-size: 13px;
            margin: 0; /* Margin zero is used to prevent unnecessary white space. */
            padding: 0; /* Padding zero is used to prevent unnecessary white space. */
        }        

        html, body {
            height: 100%;
            max-height: 100%;
        }

        body {
            padding: 20px;
        }

        .info {
            border: 1px solid rgb(128, 128, 128);
            box-shadow: rgba(0, 0, 0, 0.298039) 0 2px 6px 0, rgba(0, 0, 0, 0.2) 0 -3px 8px 0;
            padding: 10px;
        }

        .no-data {
            border: 1px solid #dadada;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="view">
        <div class="info">            
            <script id="productsRowTemplate" type="text/x-kendo-tmpl">
                <tr data-uid="#: uid#">
                    <td>#: Id#</td>
                    <td>#: Name#</td>
                </tr>
            </script>
            <div id="productsGrid" data-role="grid"
                 data-row-template="productsRowTemplate"
                 data-columns="[
                                    { 'field': 'Id' },
                                    { 'field': 'Name' }
                               ]"
                 data-bind="source: products, invisible: productsIsEmpty"></div>
            <div class="no-data" data-bind="visible: productsIsEmpty">No data.</div>
        </div>
    </div>

    <!-- Libraries -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>


    <!-- Custom -->
    <script type="text/javascript" src="kendo-controller.js"></script>
</body>
</html>

 

JavaScript

var kendo = kendo || {};

kendo.controller = (function () {
    var self = {};
    var _vm = null;

    self.show = function () {

        _vm = new kendo.data.ObservableObject({
            products: new kendo.data.DataSource({
                data: new kendo.data.ObservableArray([
                    
                ])
            }),
            productsIsEmpty: function () {
                return this.get("products").data().length === 0;
            }
        });

        kendo.bind($("#view"), _vm);
    };

    return self;
})();

kendo.controller.show();
Tags:
Category: Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts