How to display "no data message" when RemoteDataSource is empty?

[James]

I tried to display the no data message but failed.
Below is my try:

1. http://www.kendoui.com/forums/framework/data-source/best-way-to-handle-no-data-in-a-datasource.aspx
   Tried above to use dataBound event to inject "no data message", but it seems there is no such event in mobile ListView
2. another approach is to use "change" event of dataSource, but things will get nasty if the data source is shared...
   [Edit] This doesn't work. After the event is fired, you can insert html into the DOM, but it will be overwrriten by the empty view generated by the ListView

What's the best practice for doing this?

Thanks!

[N Mackay]

James,

I had a similar issue, I'm not 100% this is best practice in a mobile app but I search for the data 1st and only navigate the user to the results if they exist, otherwise I just show a message. You can achieve this with a mixture of Ajax calls and Kendo data source, you could probably do it all with the datasource but I had an issue with POST params to a Restful WCF service and ajax worked fine.

I just have a script data source and if any results exists then they are loaded into the control. It works very well, I tried other solutions for changing the html in the listview but it caused all sorts of side effects. Also this way they don't have to navigate back to try another search term.

var customerList = new kendo.data.DataSource();

 

 

 

function searchButton(e) {

             

            if (searchValid == true)

                {

                    sessionStorage.setItem('lastsearchterm', $("#searchString").val());

                         

                    app.showLoading();

                     

                    $.ajax({

                        type: "POST",

                        url: "http://MyServer/MyService.svc/GetCustomers",

                        contentType: "application/json",

                        beforeSend: function (xhr){

                            xhr.setRequestHeader('serv-authorization', sessionStorage.getItem('SessionKey'));

                        },

                        data: JSON.stringify(sessionStorage.getItem('lastsearchterm')),

                        dataType: "json",

                        cache: false,

                        success: function(msg){

                            custSearchResponse(msg);

                        },

                        statusCode: {

                            403: function() {

                                app.hideLoading();

                                showModalViewNotify("Your security key is invalid or your session has expired","Security Error");

                            app.navigate("#login");

                            }

                        },

                        error: function(jqXHR, textStatus, errorThrown){

                            app.hideLoading();

                            showModalViewNotify("Customer search is not available at present, please try later","Server Error");   

                       }

                    });

                }

            else

                {

                    showModalViewNotify('Customer Name must be at least three characters',"");

                }

        }

             

 

         

        function custSearchResponse(response) {

             

            customerList.data(response);

             

            if (customerList.total()==0)

                {

                    app.hideLoading();

                    showModalViewNotify('No customer accounts found, please try a different search term',"");

                    clearButton();

                }

            else

                {

                    app.navigate("#customerlist");

                }      

        }

         

         

        function initCustomers(e) {

             

            $("#customerListview").kendoMobileListView({

                dataSource: customerList,

                template: $("#template_custdetails").html(),

                click: customerlist_click,

                selectable: true

            });    

        }

It might help.

Cheers,
Norman.

[Juan Carlos]

The easiest way I think is something like this: 

var data= new kendo.data.DataSource({
serverPaging : true,
transport : {
read : {
url : "url.php", // the remove service url
dataType : "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
}
},
schema : {// describe the result format
data : "result" // the data which the data source will be bound to is in the "results" field
}
});

$("#ul_id").kendoMobileListView({
dataSource : data,
template : $("#template_id").text(),
style: "inset",
});

if (data.total() == 0) {
$("#ul_id").html('<li>No data found</li>');
}

JSON must response with null , if response with an empty array it wont work:   "result:null"  Works / " result":[]  Don´t work