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

3 posts, 0 answers
  1. Michael Peter
    Michael Peter avatar
    2 posts
    Member since:
    Sep 2012

    Posted 21 Sep 2012 Link to this post

    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. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 26 Sep 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Sam
    Sam avatar
    60 posts
    Member since:
    Mar 2011

    Posted 10 Dec 2012 Link to this post

    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()
        }
    }

Back to Top