Template Default: "This template is empty"

[Matt]

I am trying to create a template that will read "This template is empty" when the data source is an empty array. Currently, my div is bound to the data source as follows:

<div data-bind="source: data"></div>

I have tried a number of different things including writing a function that returns an object that represents the data source I'm interested in:

function() {
var data = this.data;
if (data.length == 0) {
return [ { dataValue: "This template is empty." } ];
}
else {
return data;
}
};

How would I accomplish this? Thanks in advance.

[Jamie]

Hi Matt

I actually created a workaround for this problem and many others I had.

Unfortunately it requires some changes to the base code of the Kendo javascript but brings lots of benefits when working with ListViews in particular. But it's not hughly over complicated.

My workaround basically add two variables to the ListView options that allow me to add functions on particular outcomes of the datasource.

I altered the following code in the kendo.all.js inside the ListView parameter found around line 19121 (All altered code is commented with the prefix ALT):

The "init" function changes

init: function(element, options) {

            var that = this;

 

            options = $.isArray(options) ? { data: options } : options;

 

            Widget.fn.init.call(that, element, options);

 

            options = that.options;

 

            that.wrapper = that.element;

 

            that._element();

 

            that._dataSource();

 

            that.template = kendo.template(options.template || "");

            that.altTemplate = kendo.template(options.altTemplate || options.template);

            that.editTemplate = kendo.template(options.editTemplate || "");

            that.hasDataFunction = options.hasDataFunction // ALT: New "Has Data" Function

            that.hasNoDataFunction = options.hasNoDataFunction; // ALT: New "No Data" Function

             

            that._navigatable();

 

            that._selectable();

 

            if (that.options.autoBind){

                that.dataSource.fetch();

            }

 

            kendo.notify(that);

             

        }

The "options" changes

options: {

            name: "ListView",

            autoBind: true,

            template: "",

            altTemplate: "",

            editTemplate: "",

            hasDataFunction: "", // ALT: New "Has Data" Option

            hasNoDataFunction: "" // ALT: New "No Data" Option

        },

The "refresh" function changes:

refresh: function(e) {

 

            var that = this,

                data = that.dataSource.view(),

                html = "",

                idx,

                length,

                template = that.template,

                altTemplate = that.altTemplate,

                hasDataFunction = that.hasDataFunction; // ALT: New "Has Data" Option

                hasNoDataFunction = that.hasNoDataFunction; // ALT: New "No Data" Option

 

            if (e && e.action === "itemchange" && that.editable) {

                return;

            }

 

            that.trigger(DATABINDING);

 

            that._destroyEditable();

             

            // ALT: Adding new hasDataFunction and hasNoDatafunction

            if (data.length > 0){

 

                for (idx = 0, length = data.length; idx < length; idx++) {

                    if (idx % 2) {

                        html += altTemplate(data[idx]);

                    } else {

                        html += template(data[idx]);

                    }

                }

 

                that.element.html(html);

                 

                if (hasDataFunction) {

                    hasDataFunction();

                }

 

            } else {

                if (hasNoDataFunction) {

                    hasNoDataFunction();

                }

            }

            // /ALT:

             

            that.trigger(DATABOUND);

             

        },

With these changes done to your default kendo library you can now add functions to the ListView calls to perform tasks if the datasource comes back empty or with rows.

An example of my use with it

// Hide the list to begin with as we may not show it at all

        $("#categoryMainList").hide();

 

        // Fill the categories list if a category has not been selected

        if (departmentID > 0 && categoryID == 0) {

            $("#categoryMainList").kendoListView({

                dataSource: DataSources._categories,

                template: kendo.template($("#categoryMainTemplate").html()),

                autoBind: false,

                hasDataFunction: function () {

                    $("#categoryMainList").show();

                },

                hasNoDataFunction: function () {

                    $("#categoryMainList").hide();

                }

            });

        }

I know its not foolproof and has the old when I update kendo I need to add this again issue but it works well for me and should be addable to almost any other kendo function the same way.

You never know kendo may try to add this in future releases.

Thanks

Jamie