Can't get this Scroller to work with a datasource

[Gal]

it seems that the initScroller function is never being called. If I call it manually, the json file does load and the divs appear, but the outer div loses its Scroller abilities.

Any idea what I might be doing wrong?

<div class="clearfix" id="channelcontainer" data-role="scroller" data-init="initScroller">
                       
</div>

 <script id="channeltemplate" type="text/x-kendo-template">
             <div class="img_icon">
                 name:#= name # <br>
                 chan:#= number # <br>
                 priority:#= priority # <br>
             </div>
       </script>


<script>
            var dataSource = 0; 
            var template = kendo.template($("#channeltemplate").html());
            
            function initScroller(e){
                //alert("hi");
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "channels.json",
                            dataType: "json",
                        }
                    },
                    schema: {
                        data: "channelresults"
                    },
                    change: function() { // subscribe to the CHANGE event of the data source
                        $("#channelcontainer").html(kendo.render(template, this.view()));
                    }
                });
            
                dataSource.read();
                
                var scroller = e.view.scroller;
            }
        </script>
            
        <script>
            var app = new kendo.mobile.Application(document.body);
        </script>


this is the json file: https://projects-galcohen.rhcloud.com/shutup/channels.json
 

[Nikolay Rusev]

Hello Gal,

You should have at least one element with role="view" in your application. Here is step-by-step article how to create mobile application.

You can also find more details in the following sample: http://jsbin.com/opiyed/2/edit

All the best,
Nikolay Rusev
the Telerik team

[Gal]

Your example is close, but what I'm trying to do is only have a div inside of my page scrollable, and i cant seem to get that to work 

[Kamen Bundev]

Hi Gal,

The Scroller doesn't have an init event which you're trying to use, the View has. If you want to use just the Scroller, I don't really see the need for a Kendo UI Mobile Application at all - you can just use kendo.init() to init the Scroller declaratively or init it manually with $("#channeltemplate").kendoMobileScroller().

Greetings,
Kamen Bundev
the Telerik team

[Gal]

Here is what i'm trying to accomplish: I have a view, inside of it i want to have a scrollable div - not the whole page to scroll - only the div. This div has its data loaded from the json file. Maybe I'm going about this the wrong way. How do I make only a portion of the page scroll, and dynamically load content to it?

[Kamen Bundev]

Hello Gal,

Check the scrollElement property of the Scroller if you want to update the element contents with Ajax.

Kind regards,
Kamen Bundev
the Telerik team

[Gal]

Sorry, still new to this. Can you be more specific as to how to use it? 

[Kamen Bundev]

Hi Gal,

Scroller's scrollElement is a jQuery object. To use it, just replace its contents with jQuery's html() method.

Regards,
Kamen Bundev
the Telerik team

[Gal]

Great! Thank you.

I am trying to change the format of my JSON file and I'm not sure how to adjust the template and datasource to fit it. Can you help me out? I am still trying to display the same information, but the structure of the JSON is different.



HTML:
 <div id="home" data-init="initScroller" data-role="view" data-title="" data-layout="main-layout" >
       <div id="homecontainer" class="clearfix">
                <div class="clearfix" id="channelcontainer" data-role="scroller">
                </div>
       </div>
</div>


template:
  <script id="channeltemplate" type="text/x-kendo-template">
             <div class="img_icon">
                 name:#= name # <br>
                 chan:#= number # <br>
                 priority:#= priority # <br>
             </div>
       </script>


json file:
{ "channelresults": {
"2": { "name": "WCBS New York (CBS)", "number": 2, "priority":0, "file":"default.png" },
"3": { "name": "WPXN New York (iON)", "number": 3, "priority":0, "file":"default.png" },
"4": { "name": "WNBC New York (NBC)", "number": 4, "priority":0, "file":"default.png" },
  }
}


the function with the datasource:
 function initScroller(e){
    var scroller = e.view.scroller;
    
    var template = kendo.template($("#channeltemplate").html());
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "channels.json", //usually from file, right now from example json from above
                dataType: "json",
            }
        },
        schema: {
            data: "channelresults"  //not sure how to change this to fit the new format
        },
        change: function() { 
            $('#channelcontainer').data("kendoMobileScroller").scrollElement.html(kendo.render(template, this.view()));
            
        }
    });
    dataSource.read(); 
}

[Alexander Valchev]

Hi Gal,

I already replied in the other forum thread which you opened. The problem is connected with the format of the server response.
We do our best to monitor all threads. Posting same question multiple times causes unnecessary overload and will not lead to receiving faster reply.

Kind regards,
Alexander Valchev
the Telerik team

[Gal]

I apologize for posting the question twice. I did not think the two forums were monitored by the same people or connected in any way, i was simply trying to attack the problem at both ends.

In fact, when I go to Hi,  <Username>! on the top, then Account Overview, Tracked Forum Posts; the other post I made, the one on the Kendo forums, doesn't show up. So I had no idea I was double posing. Though looking back now through the same process but through the Kendo UI website instead, (Account overview > Tracked Forum posts) , which I haven't tried until now,  the forum posts tracked here AND on kendo ui show up.

So the two website dont track the same posts, which is what led me to the confusion and why I posted in two places i thought were unrelated.