Template Default: "This template is empty"

2 posts, 0 answers
  1. Matt
    Matt avatar
    16 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    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.
  2.
  3. Jamie
    Jamie avatar
    3 posts
    Member since:
    Jun 2012

    Posted 14 Nov 2012 Link to this post

    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
Back to Top