This is a migrated thread and some comments may be shown as answers.

Template Default: "This template is empty"

1 Answer 126 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 19 Jul 2012, 07:02 PM
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.

1 Answer, 1 is accepted

Sort by
0
Jamie
Top achievements
Rank 1
answered on 14 Nov 2012, 11:01 AM
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
Tags
Templates
Asked by
Matt
Top achievements
Rank 1
Answers by
Jamie
Top achievements
Rank 1
Share this question
or