DataBinding for ScrollView

6 posts, 0 answers
  1. Robert
    Robert avatar
    17 posts
    Member since:
    Mar 2011

    Posted 04 Apr 2012 Link to this post

    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
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Apr 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Andrew
    Andrew avatar
    14 posts
    Member since:
    Nov 2010

    Posted 19 Dec 2012 Link to this post

    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!
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 25 Dec 2012 Link to this post

    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!
  6. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 16 Aug 2013 Link to this post

    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)
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 21 Aug 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready