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

3 posts, 0 answers
  1. James
    James avatar
    1 posts
    Member since:
    Sep 2012

    Posted 01 Oct 2012 Link to this post

    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!
  2. N Mackay
    N Mackay avatar
    228 posts
    Member since:
    Dec 2010

    Posted 08 Oct 2012 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Juan Carlos
    Juan Carlos avatar
    8 posts
    Member since:
    Oct 2012

    Posted 07 Nov 2012 Link to this post

    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
Back to Top