Template Handle Empty Datasource

5 posts, 2 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 04 May 2015 Link to this post

     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.

     

  2. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 06 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 06 May 2015 in reply to Rosen Link to this post

    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.

  5. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 07 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 07 May 2015 in reply to Rosen Link to this post

    Ah, of course. Thanks again.
Back to Top
Kendo UI is VS 2017 Ready