ListView empty template

10 posts, 1 answers
  1. Dennis
    Dennis avatar
    24 posts
    Member since:
    Oct 2012

    Posted 26 Mar 2013 Link to this post

    Hello,

    I was wondering, is there a out of the box way to setup a template that would be shown only if the listview is empty. For instance lets say we have a product list with search. If you search something that matches no results now my listview area would be empty. I want it to display nice big letters saying "No products match your search".

    One way I thought I could do this is to have two divs. One with the listview and another one with this message and bind them to a visible / invisible view model property that shows the product data source item count. That way the listview would be shown when there are products, and the message would be shown when the count is at 0.

    I guess it would work, but seems rough. Is there a better way or should I stick to my idea?
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 27 Mar 2013 Link to this post

    Hello Dennis,


    The easiest way to go in the current scenario would be to bind to the dataBound event of the ListView and check the count of the items in the dataSource. If the dataSource is empty, you could append some custom content or display some other div.
    E.g.
    $("#listView").kendoListView({
        dataSource: dataSource,
        dataBound: function(e) {
            if(this.dataSource.data().length == 0){
                //custom logic
                $("#listView").append("<h1>No products</h1>");
            }
        },
        template: kendo.template($("#template").html())
    });

     

    Greetings,
    Dimiter Madjarov
    the Telerik team
    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. Thomas
    Thomas avatar
    12 posts
    Member since:
    Jul 2013

    Posted 29 Jun 2015 Link to this post

    Isn't there any clearer way than this?

    Something that would be accessible from the template itself, like "items.length", would be really helpful.

    If there isn't yet, is it planned for a next release or something?

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 30 Jun 2015 Link to this post

    Hello Thomas,

    Currently there is no other way to handle the scenario. Regarding the second question, since the template won't be rendered in this case, there is no need to access the information from inside.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Thomas
    Thomas avatar
    12 posts
    Member since:
    Jul 2013

    Posted 30 Jun 2015 in reply to Dimiter Madjarov Link to this post

    Ok, thank you.

    One more question similar to this one:

    If there are any items, is there a way from inside the template to access the index of the current item or the total items ?

    If it's not, is it planned for a next release? I find it really helpful and I use custom code in order to achieve this. In my opinion it should already be there.

    Thank you in advance.

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 01 Jul 2015 Link to this post

    Hello Thomas,

    The easiest way to achieve the task would be to retrieve the dataSource instance in the template in order to get the desired information.
    E.g.

    <script type="text/x-kendo-tmpl" id="template">
        # var ds = $("\\#listView").data("kendoListView").dataSource #
        <span>Total: #= ds.total() #</span>
        <span>Index: #= ds.indexOf(data) #</span>
    </script>

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Thomas
    Thomas avatar
    12 posts
    Member since:
    Jul 2013

    Posted 02 Jul 2015 in reply to Dimiter Madjarov Link to this post

    Thank you!
  9. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 04 Aug 2015 Link to this post

    Hi,

    Probably a bit too late; but I use this mechanic to show an empty div:

    • on the dataSource, define an event "Change" and point to a js function (like "dsChange")
    • add a div to display the empty message where ever you want like this (I use mvc):

    <center><div id="nosummaryfound" style="display:none">@Resources.NoResults</div></center>

    • within your own dsChange js function call a generic function with the div id as parameter:

        function dsChange(){

     

    }

    function showNoResults = function (e,divid) {
    if (e.items.length === 0) {
    $("#" + divid).attr("style", "display:block");
    } else {
    $("#" + divid).attr("style", "display:none");
    }
    }

  10. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 04 Aug 2015 in reply to Ruud Link to this post

    Oops, sorry, corrected version:

    • on the dataSource, define an event "Change" and point to a js function (like "dsChange")
    • add a div to display the empty message where ever you want like this (I use mvc):
      <div id="nosummaryfound" style="display:none">@Resources.NoResults</div>
    • within your own dsChange js function call a generic function with the div id as parameter:
          function dsChange(){
                 showNoResults(e,''nosummaryfound);
      }
    • and then a generic js function to show/hide the div:

             showNoResults = function (e,divid) {
             if (e.items.length === 0) {
                      $("#" + divid).attr("style", "display:block");
             } else {
                      $("#" + divid).attr("style", "display:none");
            }
        }

     I do think that having an empty template would offer a much greater flexibility for displaying empty messages; so I added this to the user voice located here: http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/2973833-add-a-no-records-template-to-mobile-listview. I encourage you to do also if you agree; Telerik really looks at this list for upcoming releases.

     

     

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 04 Aug 2015 Link to this post

    Hello Ruud,

    Thank you for the contribution and for posting the idea in the User Voice portal. Have a great day!

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready