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

using click to dynamically change the dataSource of a listview - HELP!

2 Answers 585 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Michael Peter
Top achievements
Rank 1
Michael Peter asked on 21 Sep 2012, 05:19 AM
Hi, I am currently developing an app that has two listviews, one on the mainview, and another on the secondary view, both which are using remote data call using jsonp. the items generated on the first listviews are links to the next listview, I know it sounds confusing, basically im using jquery to grab an attribute from an element on the main listview and that is used for the URL of the new listview, similar to the problem in this forum: http://www.kendoui.com/forums/mobile/listview/mobile-listview-is-not-refreshing-on-button-click.aspx 

here is a copy of my code, hope you can understand and help me out here
Im having trouble loading the second listview with a dynamic URL
       <!--Main view-->
       <div data-role="view" data-init="mobileListViewDataBindInitFlat" data-title="ClickView 24/7 Alerts" id="mainView"  >
           <ul data-role="listview" data-style="inset" data-type="group"  id="result"></ul>
       </div>
       <!--Alerts Display view -->
       <div data-role="view" id="displayPage" data-title="ClickView 24/7 Alerts"  data-init="mobileListViewint" >
           <ul  data-role="listview" id="datashow"   >
           </ul>
       </div>
 
           <!--main layout-->
           <div id="layout" data-role="layout" data-id="main-layout">
               <div data-role="header">
                   <div data-role="navbar">
                       <span data-role="view-title"></span>
                   </div>
               </div>
                   <div data-role="footer">
                       <div data-role="tabstrip">
                           <a href="#mainView" data-icon="home">Home</a>
                           <a href="#alertPage" data-icon="favorites">Alerts</a>
                       </div>
                   </div>
           </div>
            
           <!-- Main Listview Template-->
           <script type="text/x-kendo-template" id="showtemp">
               <a class="show" href="\#displayPage" data-show="${ProgramId}">
               <span class="date">${Start}</span>
               <h2>${Title}</h2>
               <h3 class="chan">${Channel}</h3>
               <p class="descript">${Description}</p>
               </a>
                    
           </script>
            
           <!-- Alerts Listview Template-->
           <script type="text/x-kendo-template" id="datatemp">        
                    
                   <h3 class="keyword">Keyword: #: Keyword#</h3>
                   <a class="actionbutton"data-role="detailbutton" data-style="contactadd"></a>
                   <p class="subtime">#: SubTime#</p>
                   <p class="subtext">#: SubText#</p>
           </script>
 
<script>
           window.app = new kendo.mobile.Application(document.body,{transition: "slide", layout: "main-layout"});
            
           //Main ListView initialiser
           var showDataSource = new kendo.data.DataSource({
               transport: {
                   read: {
                       url: "http://localhost:3146/api/shows/wilan.bigay@clickview.com.au",
                       dataType: "jsonp",
                       contentType: "application/json; charset=utf-8",
                       data: {
                           q: "javascript"
                       }
                   }
               }
           });
           function mobileListViewDataBindInitFlat() {
               $("#result").kendoMobileListView({
                   dataSource: showDataSource,
                   template: $("#showtemp").text(),
               })
           }
            
           $('.show').live('click',function(){
               var progID = $(this).attr('data-show');
               var dataURL = 'http://localhost:3146/api/shows/wilan.bigay@clickview.com.au/data/' + progID
           });
            
           //Alerts ListView
           var dataDataSource = new kendo.data.DataSource({
               transport: {
                   read: {
                       url: dataURL , //"http://localhost:3146/api/shows/wilan.bigay@clickview.com.au/data/0000000",<- how it should look like taking the 'data-show' attribute at the end of the URL
                       dataType: "jsonp",
                       contentType: "application/json; charset=utf-8",
                       data: {
                           q: "javascript"
                       }
                   }
               }
               });
            
           function mobileListViewint() {
               $("#datashow").kendoMobileListView({
                   dataSource: dataDataSource,
                   click: function(e) {
                       //dataURL = e.dataItem.data-show;
                       console.log(e.dataItem.title);
                   },
                   template: $("#datatemp").text(),
               })
           }
 
     </script>

2 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 26 Sep 2012, 08:42 AM
Hello Michael,

The url of the transport accepts a function. I suggest using that feature to modify the address according to your requirements. For example:  
var dataDataSource = new kendo.data.DataSource({
     transport: {
         read: {
            url: function(options) {
                  return yourUrl;
             }
         }
     }
});

Hence the function will be called with each read request, while in the in the provided code the URL will not be changed after the dataSource's initialization.
 
On a side note, I observed that you have initialized both result and datashow listViews twice - by data attribute in the mark-up and by jQuery plugin syntax. Please note that only one of them should be used. 
  
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sam
Top achievements
Rank 1
answered on 10 Dec 2012, 08:37 PM
I find it incomprehensible that there is no complete solution on refreshing a list view if using a datasource with dynamic parameters.  As complete and robust as the documentation is on Telerik's ASP.NET controls, it is equally absent here with Kendo UI.  I love this product, but most people learn better by examples (hence the thousands of great examples on your main site).  I've found bits and pieces on this subject here and the documentation is vague at best.  You have a lot of do this and do that but without a working solution.  After endless searching and trial and error, this is the solution that works for me.  The part that is missing here in most examples I've seen on this site is the datasource.read method.  

var searched = false;
var dsSearch;
function searchActivities() {
    if ($("#SearchString").val() == "") {
        alert("Please enter a valid search string");
        return;
    }
    if (searched) {
        var lvSearch = $("#lstSearchResults").data("kendoMobileListView");
        lvSearch.refresh();
        lvSearch.dataSource.read()
        return;
    }
    searched = true;
    dsSearch = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: "WebServices/Activities.asmx/SearchActivities",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: function () {
                    return GetSearchOptions()
                }
            },
            parameterMap: function (options) {
                return kendo.stringify(options);
            }
        },
        schema: {
            data: function (data) {
                //alert("data is " + data.d.ProjectID);   /*Data Return Successfully*/
                return data.d;
            }
        },
        error: function (e) {
            alert("Error " + e);
        }
    });
    $("#lstSearchResults").kendoMobileListView({
        template: $("#tplSearchResult").text(),
        dataSource: dsSearch,
        loadMore: true,
        click: function (e) {
            showActivity(e.dataItem.EventID);
        },
        dataBound: function () {
            if (this.dataSource.total() == 0) {
                $("#lstSearchResults").html("No Data");
            }
        }
    });
}

function GetSearchOptions() {
    return { ProjectID: $("#SearchProjects").val(),
        ActivityType: $("#SearchActivityType").val(),
        SearchString: $("#SearchString").val()
    }
}

Tags
ListView (Mobile)
Asked by
Michael Peter
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Sam
Top achievements
Rank 1
Share this question
or