Template Handle Empty Datasource

[Ashleigh L]

 I'm using a template and datasource to set up a tile view of objects, which works great. However, there is a case where the page may have zero objects to display, and I need to handle that.

This is my javascript to get the data and populate the template:

var tile_template = kendo.template($('#tile_template').html());

var tile_dataSource = new kendo.data.DataSource({
    transport: {
        read: { url: "/Controllers/MainController.cfc?method=getObjects" }
    },
    schema: {
        type: "xml",
        data: "/Objects/Object",
        model: {
            id: "ID",
            fields: {
                Name: { field: "Name/text()", type: "string" },
                Tag: { field: "Tag/text()", type: "string" },
                Image: { field: "Image/text()", type: "string" }
            }
        }
    }
});

tile_dataSource.bind("change", function() {
    $('#main').html(kendo.render(tile_template, tile_dataSource.view()));
});

tile_dataSource.read();

I was hoping there was some way to detect if the datasource is empty and then either using a different template, or, within the template itself, detecting if say, the ID was null/empty/0 and then rendering different HTML. To be clear, I'm not using an actual Kendo ListView or anything similar, simply using the template and datasource to render HTML:

<div id="main" class="col-xs-12 col-lg-12 padding list-items-content-area ui-layout-west k-widget k-listview"></div>

<script type="text/x-kendo-template" id="tile_template">
    <div class="col-xs-12 col-md-6  col-lg-4 course-content">
        <div class="k-block list-items">
            <div class="list-items-heading padding k-block">
                <div class="list-items-heading-icons ">
                    <a href="##" data-role="button" class="k-button info-button" role="button" aria-disabled="false" tabindex="0">
                        <i class="fa-icon-info-circle"></i>
                    </a>
                </div>
                <div class="list-items-heading-ellipsis">
                    <a href="##"><h3 class="item-title">#= Name #</h3></a>
                </div>
            </div>
            <div class="padding list-items-body">
                # if (Tag != null && Tag != '') { #
                    <div class="tag-overlay"><i class="fa-icon-tag"></i>#= Tag #</div>
                # } #

                # if (Image != null && Image != '') { #
                    <img src="/object/#= ID #/Image/#= Image #" class="img-responsive border-radius">
                # } else { #
                    <img src="/object/default/image.jpg" class="img-responsive border-radius">
                # } #

            </div>
        </div>
    </div>
</script>

I haven't been able to find anything via Google, so any information/suggestions would be great.

 

[Rosen]

Hi shimmoril,

In order to check if current view does not contains any records you could look at the array's length property and render the appropriate template. Similar to the following:

tile_dataSource.bind("change", function() {
   var view = tile_dataSource.view();
   var html = "";
   if (view.length) {
       html = kendo.render(tile_template, view);
   } else {
       html = no_records_template({});
   }
   $('#main').html(html);
});

Regards,
Rosen
Telerik

 

 

[Ashleigh L]

Thanks Rosen, that looks perfect. One question - I've set up your code in my project, and I've created a template called "no_records_template" like so:

<script type="text/x-kendo-template" id="no_records_template">
    NO RECORDS
</script>

However, when I run the page w/ an empty view, I get an error that "no_records_template" is not a function:

TypeError: no_records_template is not a function

html = no_records_template({});

And I'm not sure why.

[Rosen]

Hello Shimmoril,

You should "load" the template prior to using, it similar to the way you are already doing for the tile_template:

var no_records_template = kendo.template($('#no_records_template').html());

Regards,
Rosen
Telerik

 

 

[Ashleigh L]

Ah, of course. Thanks again.