This is a migrated thread and some comments may be shown as answers.

ListView empty template

11 Answers 1472 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Dennis
Top achievements
Rank 2
Dennis asked on 26 Mar 2013, 06:34 PM
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?

11 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 27 Mar 2013, 02:03 PM
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!
0
Thomas
Top achievements
Rank 1
answered on 29 Jun 2015, 07:23 AM

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?

0
Dimiter Madjarov
Telerik team
answered on 30 Jun 2015, 10:45 AM

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!
 
0
Thomas
Top achievements
Rank 1
answered on 30 Jun 2015, 11:10 AM

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.

0
Dimiter Madjarov
Telerik team
answered on 01 Jul 2015, 03:37 PM

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!
 
0
Thomas
Top achievements
Rank 1
answered on 02 Jul 2015, 07:46 AM
Thank you!
0
Ruud
Top achievements
Rank 1
answered on 04 Aug 2015, 07:11 AM

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

0
Ruud
Top achievements
Rank 1
answered on 04 Aug 2015, 07:15 AM

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.

 

 

0
Dimiter Madjarov
Telerik team
answered on 04 Aug 2015, 08:03 AM

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!
 
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 22 Apr 2020, 08:00 AM
I need this functionality. Is there a plan to implement the nodatatemplate like in dropdownlist?
0
Alex Hajigeorgieva
Telerik team
answered on 24 Apr 2020, 08:05 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
ListView
Asked by
Dennis
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Thomas
Top achievements
Rank 1
Ruud
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Alex Hajigeorgieva
Telerik team
Share this question
or