Hiding Grouping when value is empty

Hide dat dumb grouping

HTML

<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.silver.min.css">
<div id="grid"></div>

JavaScript

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
            pageSize: 20,
             sort: { field: 'ContactName', dir: 'asc' },
               group: [
               {  field: "Country"},
                 {  field: "CompanyName"}
               ],
        },
        height: 550,
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,	
            pageSizes: true,
            buttonCount: 5
        },
        dataBound: function (e) {
            console.log('dataBound');
            if ($('#grid').data('kendoGrid').groupable.dataSource._group.length > 0) {
                $('#grid tbody .k-grouping-row').filter(function (index) {
                    return $(this).find("p")[0].innerText.slice(-1) === ":";
                }).hide();
                $('tr td:empty').parent().hide();
            } else {
                $('tr td:empty').parent().show();
            }
        },
        columns: [{
            field: "ContactName",
            title: "Contact Name",
            width: 200
        }, {
            field: "ContactTitle",
            title: "Contact Title", width: 150
        }, {
            field: "CompanyName",
            title: "Company Name", width: 150
        }, {
            field: "Country",
            width: 150
        }],
        editable: true
    });

});