This is a migrated thread and some comments may be shown as answers.

DataBinding for ScrollView

8 Answers 294 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 04 Apr 2012, 07:17 AM
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

8 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 04 Apr 2012, 09:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 1
answered on 20 Dec 2012, 04:51 AM
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!
0
Alexander Valchev
Telerik team
answered on 25 Dec 2012, 07:52 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
JohnVS
Top achievements
Rank 1
answered on 16 Aug 2013, 09:16 PM
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)
0
Alexander Valchev
Telerik team
answered on 21 Aug 2013, 03:08 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ratna
Top achievements
Rank 1
answered on 06 Jan 2020, 10:00 PM

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>

0
Ratna
Top achievements
Rank 1
answered on 06 Jan 2020, 10:57 PM

 

@{
    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>
0
Tsvetomir
Telerik team
answered on 09 Jan 2020, 02:19 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ScrollView (Mobile)
Asked by
Robert
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Andrew
Top achievements
Rank 1
Alexander Valchev
Telerik team
JohnVS
Top achievements
Rank 1
Ratna
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or