ListView empty template

[Dennis]

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?

[Dimiter Madjarov]

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

[Thomas]

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?

[Dimiter Madjarov]

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

 

 

[Thomas]

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.

[Dimiter Madjarov]

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

 

 

[Thomas]

Thank you!

[Ruud]

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");
}
}

[Ruud]

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.

 

 

[Dimiter Madjarov]

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

 

 

[Dan]

I need this functionality. Is there a plan to implement the nodatatemplate like in dropdownlist?

[Alex Hajigeorgieva]

Hello, Dan,

The feature requests are implemented dependent on the demand.

I have added a vote on your behalf and also on behalf of those who have commented here and in the request.

The Feedback portal is reviewed when the teams plan future implementations and the items in highest demand have the best chance to get implemented soonest.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Chris]

Please add a vote for me, i'm currently looking into this. The way i have it now just does not fit in nicely, when I show my "No data available" text, it ruins the layout of the page.. id like it to fit in like the loading symbol.

 

Thanks :)

[Nikolay]

Hi Chris,

Your vote for the feature request has been added.

Regards,

Nikolay