ScrollView autoBind not documented

1 Answer 54 Views
ScrollView
Marty
Top achievements
Rank 1
Marty asked on 12 Jan 2023, 02:09 PM | edited on 12 Jan 2023, 04:33 PM

The documentation for ScrollView autoBind is incorrect or incomplete.  When examining the ScrollView autoBind API Reference the sample configuration does not mention or show proper usage of the autoBind configuration.  Additionally, I am unable to get the ScrollView widget to initialize when setting autoBind: false

When using this configuration the widget does not initialize.  If I set autoBind: true the widget binds to the dataSource but it does not honor the current query parameters. 

This code runs correctly when autoBind: true.  It fails when autoBind: false  Dojo Snippet

<script id="scrollview-template" type="text/x-kendo-template">
    <div style="width: 200px; height: 200px; background-image: #=setBackground(data.filename)#; background-repeat:no-repeat; background-size: cover;"></div>
    <p>#= data.filename #</p>
</script>


<div id="container" style="margin: 20px;">
    <div id="scrollView"
      data-role="scrollview" 
      data-auto-bind="false"
      data-pageable="true"
      data-enable-pager="true"
      data-template="scrollview-template"
      data-bind="source: fruits"
      data-content-height="100%" 
      data-page="0"
      style="width: 400px; height: 300px; max-width: 100%;">
    </div>
</div>



<script>

function setBackground(filename) {
  return "url(https://demos.telerik.com/kendo-ui/content/shared/images/photos/" + filename + ")";
}

var viewModel = kendo.observable({
  fruits: new kendo.data.DataSource({
    data: [
      { filename: "15.jpg" },
      { filename: "16.jpg" },
      { filename: "17.jpg" }
    ],
    schema: {
      model: {
        fields: {
          filenname: { type: "string" }
        }
      }
    }
  })
});

$(document).ready(function() {
  kendo.bind($("#container"), viewModel);

  

  setTimeout(function(){
    console.log("ScrollView Next - Refresh");
    //var scrollView = $("#scrollView").kendoScrollView().data().kendoScrollView;
    //scrollView.scrollTo(1);
    //scrollView.refresh();
    }, 1000);
  });


</script>

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 17 Jan 2023, 10:53 AM

Hi Marty,

Thank you very much for pointing us to the issue in the documentation. We will change the example in order to demonstrate the configuration with the enabled autoBind option. As a small token of gratitude for reporting an issue in the documentation, I have updated your Telerik points. 

Regarding the autoBind option in the MVVM scenario, you are correctly setting the autoBind to false. However, as the data is not fetched the ScrollView is rendered empty.

In the Dojo example linked here, you will find an example of how to fetch and load the data in the ScrollView that has autoBind set to false.

 $("#scrollView").data("kendoScrollView").dataSource.fetch(function() {
            var scrollView = $("#scrollView").data("kendoScrollView");
            scrollView._content.dataReader.initialFetch = true;
            scrollView.scrollTo(scrollView._content.page, true, true);
            scrollView._content.trigger("reset");
 });

I hope this helps.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ScrollView
Asked by
Marty
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or