having trouble adding elements from a datasource+template to a Scroller

[Gal]

Is this even possible? Any suggestions? I tried both through a datasource, and with native js + jquery and as soon as elements are added the scroller loses its ability to scroll.

example code below:
an example json file can be found here": https://projects-galcohen.rhcloud.com/shutup/channels.json

 <div id="mypage" data-layout="default" data-role="view" data-init="getScroller">
                Foo2222
            <div class="clearfix" id="channelcontainer" data-role="scroller" ></div>
            </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 getScroller(e) {
                alert("HIHIHIH");
                     console.log("MADE IT HERE");
                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").height(150);
                        $("#channelcontainer").html(kendo.render(template, this.view()));
                        
                    }
                });
            
                dataSource.read();
                var scroller = e.view.scroller;
            }

        </script>

[Alexander Valchev]

Hello Gal,

Direct replacement of the View's HTML is not supported. I recommend you to use Mobile ListView - it provide out of the box integration with DataSource and template.

Please try the following approach.

<ul class="clearfix" id="channelcontainer"></ul>

function getScroller(e) {
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "channels.json",
                dataType: "json",
            }
        },
        schema: {
            data: "channelresults"
        }
    });

    $("#channelcontainer").kendoMobileListView({
        dataSource: dataSource,
        template: $("#channeltemplate").html()
    });
}

Kind regards,
Alexander Valchev
the Telerik team

[Gal]

what i want to accomplish is a scrollable div, that has many smaller divs inside it. I don't want the whole page to be scrollable, just the div, and i want the content loaded from the json file. When I used the listview i got neither scrolling nor the grid-like behavior you get when you have many square divs floated left that I'm looking for.

any suggestions?

[Gal]

another issue: http://docs.kendoui.com/api/mobile/scroller is down

stack trace:

[NullReferenceException: Object reference not set to an instance of an object.]
DynamicModule.ns.Wrapped_OpenAccessDynamicModuleProvider_f2b866a9dbc04029ab0d8859308076b6.GetDataItem(Type itemType, Guid id) +268
GitHubDocsModule.PublicControls.GitHubDocsRelatedArticles.<OnPreRender>b__3(Guid guid) +117
System.Linq.WhereSelectArrayIterator`2.MoveNext() +179
System.Linq.WhereSelectEnumerableIterator`2.MoveNext() +87
System.Collections.Generic.List`1..ctor(IEnumerable`1 collection) +327
System.Linq.Enumerable.ToList(IEnumerable`1 source) +58
GitHubDocsModule.PublicControls.GitHubDocsRelatedArticles.OnPreRender(EventArgs e) +275
System.Web.UI.Control.PreRenderRecursiveInternal() +103
System.Web.UI.Control.PreRenderRecursiveInternal() +175
System.Web.UI.Control.PreRenderRecursiveInternal() +175
System.Web.UI.Control.PreRenderRecursiveInternal() +175
System.Web.UI.Control.PreRenderRecursiveInternal() +175
System.Web.UI.Control.PreRenderRecursiveInternal() +175
System.Web.UI.Control.PreRenderRecursiveInternal() +175
System.Web.UI.Control.PreRenderRecursiveInternal() +175
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496

[Alexander Valchev]

Hello Gal,

With regards to the documentation, I am glad to inform you that the problem is already fixed. Please accept my apology for the temporary inconvenience.

In reference to the scenario which you described, if the ListView is not a suitable solution, I suggest you to use source and template binding. I believe that you may also find this forum topic useful as it discusses similar subject.

Kind regards,
Alexander Valchev
the Telerik team

[Gal]

Having trouble adjusting my datasouce and template to fit my new json file. Can you help figure out how to set it up correctly? How do I tell the template or datasource to look deeper into the json file? 


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 have noticed two issues with your code:

1. You are still replacing the HTML which is not supported. Please consider using source and template binding as I recommended in my previous post.
2. The JSON format is incompatible with Kendo DataSource. Data items should be wrapped inside an array - the current structure contains only nested objects. Please change the server response to:
   
   

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

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Gal]

Thanks for the reply.

However, I purposely changed the json response because I wanted the data to be more accessible to me. By having each object have a key I figured I could access them quickly instead of iterating through the object list. 

So you're saying the datasource has a specific format? I was  hoping there was a way to configure it to my json response.

Maybe I'm going on about this the wrong way and you can point me in the right direction: I use the json file to load a list of objects to js. Each item on that list represents an element on the page. I want to be able to add, remove, and sort the elements on the page, in accordance with the list of object that they are backed by.  I could define a new datasource every time and redraw everything after every change. Seeing as how the list is going to have 500+ items, this seems like a slow process, is there another way?
In other words, is there a good way to bind objects to html elements? (both in Kendo UI or in general) 

[Alexander Valchev]

Hello Gal,

DataSource works with arrays, it provides a way to configure it according to the server response, but in terms of specifying which field from the response contains the data items (array), total (number), etc.

However, I purposely changed the json response because I wanted the data to be more accessible to me. By having each object have a key I figured I could access them quickly instead of iterating through the object list. 
You can access a given array item directly by its index (it's zero based).

• channels.2 (your format) will reference the same record as channels[0] (required format)

In case you plan to work with 500+ items, I recommend you to use serverPaging which will allow you to load the information into small chunks. Adding, removing and sorting are features of the DataSource which means that if you want to have them out of the box, you should work with DataSource. Respectively the response should contain an array of records.

The recommended way for binding JavaScript objects to HTML elements is through MVVM. KendoUI has its own MVVM implementation which supports source binding (demo). This is why I suggested using source and template binding for the scenario.

On a side note, you should have in mind that you cannot bind dataSource directly to a template. The workaround however is easy:

var viewModel = kendo.observable({
    var dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "channels.json",
                dataType: "json",
            }
        },
        schema: {
            data: "channelresults"
        },
        change: function() {
            this.set("data", this.view());
        }
    }),
    data: [] //use source binding to this field
});

Kind regards,
Alexander Valchev
the Telerik team