DataBinding for ScrollView

[Robert]

Hi There,

Is there possibly a databind functionality for the Scroll View control that you could call similarly to the ListView for example:

$("#myscrollview").kendoMobileScrollView({
            template: "<div>${data.foo}</div>",
            dataSource: kendo.data.DataSource.create([{ foo: "bar" }, { foo: "baz" }])
        });

It would help me huge amount if this was available however if not are there any recommendations regarding using templates or external databinding with the scroll view?

Thanks!

Rob

[Petyo]

Hello,

ScrollView does not support data binding, but you can always combine templates with datasource. the render method will come in handy in this case.

Kind regards,
Petyo
the Telerik team

[Andrew]

Are there any examples of this to refer to or could you post a simple one that accesses a local database or json service?

Thanks!

[Alexander Valchev]

Hello Robert,

Please check this sample. The approach is:

1. Define a template: template = kendo.template($("#PictureTemplate").html())
2. Retrieve the data through Ajax request and render the template with it: 
       content = kendo.render(template, data)
3. Use the content method to update the ScrollView's content.

In order ScrollView to work as expected it is required to remove the whitespaces between <div data-role="page"> elements. This is why I am using a comment tags at a beginning and end of the template.

<script type="text/x-kendo-template" id="PictureTemplate">
    --><div class="photo" data-role="page" style="....." ></div><!--
</script>

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[JohnVS]

I'm having a really hard time figuring out how to bind data to the ScrollView widget when using the MVC Wrappers. The sample code I tried is this:

@(Html.Kendo().MobileScrollView()
      .AutoBind(false)
      .ContentHeight(200)
      .DataSource(dataSource =>
            dataSource
            .Read("GetImages", "MyController", new { id = Model.Id })
      )
      .FitItemPerPage(true)
      .Page(1)
      .TemplateId("ImagesTemplate")
)

I am seeing that the AJAX call is made to retrieve the images, and the JSON data is being returned, but then nothing happens after the data is returned. What am I missing to make this work?

(on a side note, when I initially tried this without AutoBind(false), it was sending two requests to get the data...don't understand why that was happening)

[Alexander Valchev]

Hello JohnVS,

I am afraid that the provided information is not sufficient to examine what exactly is going wrong. I assume that the problem might be connected with:

• the missing pageSize (could you please try to specify one?)
• the widget's pager - in case the total amount of displayed data is large, it is recommended to turn off the pager with .EnablePager(false).
• the template (do you see any JavaScript errors in the console?)

In cases none of the above helps, please send me a small but runnable project with mock that isolates the issue. In this way I can examine your current implementation and assist you further.

Thank you in advance.

Regards,
Alexander Valchev
Telerik

[Ratna]

Hello, 

I'm also having similar issue with Scroll View on ASP.NET MVC. The Scroll View Data bind isn't happening. 

@{      var url = Url.Action("Documents_Grid", "Documents", new { area = "Activity", ObjectName = "job", RecordId = new Guid("6ac67fd4-9d17-ea11-a973-005056842364"), DocumentTypeId = new Guid("F89CD573-1916-EA11-A986-005056842A9C") });

}

<div id="example" style="margin:auto; width:60%">     @(Html.Kendo().ScrollView()         .Name("scrollView")         .EnablePager(false)         .ContentHeight("100%")         .TemplateId("scrollview-template")         .DataSource(d=>                 d.Custom()                                     .Type("json")                     .Transport(t=> t.Read(r=> r.Url(url)))                     .ServerPaging(true)                     .PageSize(3))         .HtmlAttributes(new { style = "height:500px; width:500px" })     )</div>     <script id="scrollview-template" type="text/x-kendo-template">         <div class="img-wrapper">             # for (var i = 0; i < data.length; i++) { #             <div>                 hello                 <p>#= data[i].DocumentName #</p>             </div>             # } #         </div>     </script>

[Ratna]

@{
    var url = Url.Action("Documents_Grid", "Documents", new { area = "Activity", ObjectName = "job", RecordId = new Guid("6ac67fd4-9d17-ea11-a973-005056842364"), DocumentTypeId = new Guid("F89CD573-1916-EA11-A986-005056842A9C") });
}
<div id="example" style="margin:auto; width:60%">

    @(Html.Kendo().ScrollView()
        .Name("scrollView")
        .EnablePager(false)
        .ContentHeight("100%")
        .TemplateId("scrollview-template")
        .DataSource(d=>
                d.Custom()
                    .Type("json")
                    .Transport(t=> t.Read(r=> r.Url(url)))
                    .ServerPaging(true)
                    .PageSize(3))
        .HtmlAttributes(new { style = "height:500px; width:500px" })
    )
</div>

    <script id="scrollview-template" type="text/x-kendo-template">
        <div class="img-wrapper">
            # for (var i = 0; i < data.length; i++) { #
            <div>
                hello
                <p>#= data[i].DocumentName #</p>
            </div>
            # } #
        </div>
    </script>

[Tsvetomir]

Hi Ratna,

I have investigated the provided code snippets and it appears that they are set correctly. However, I am cannot be sure whether the "url" variable is correctly evaluated. Can you ensure that a request is sent to the server-side and the data is retrieved successfully? 

Also, can you check the console of the browser for any errors that might have been thrown? In case the issue is still present, modify the sample below in order to replicate the issue and send it back to me:

https://demos.telerik.com/aspnet-core/scrollview/databinding

 

Regards,
Tsvetomir
Progress Telerik