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

[Michael Peter]

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/[e-mail]",

                       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/[e-mail]/data/' + progID

           });

            

           //Alerts ListView

           var dataDataSource = new kendo.data.DataSource({

               transport: {

                   read: {

                       url: dataURL , //"http://localhost:3146/api/shows/[e-mail]/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>

[Iliana Dyankova]

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

[Sam]

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