Telerik Forums
Kendo UI for jQuery Forum
1 answer
54 views

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>

Neli
Telerik team
 answered on 17 Jan 2023
1 answer
52 views

So I am trying to create a Scrollview from a remote datasource and put the images into a template.  I only want 1 image per "page".   The code from the following screenshots come from this dojo.

This is the template with the issue.

If you have the pageSize set to 2 or more each page shows the template as designed.

If I change that to a pageSize of 1 the template is blank.   How do I get the template to display 1 product per page?

Scott
Top achievements
Rank 1
Iron
 answered on 30 Nov 2022
1 answer
2.7K+ views

The autoFitColum method sizes the chosen column to the correct size, but it also reduces all other columns to their width property as shown below. 

I created some examples to show what I'm talking about by editing autoFitColumn - API Reference - Kendo UI Grid | Kendo UI for jQuery (telerik.com)

This behavior works out in cases where the auto fit column exceeds the grid width (see figure 1), but not in cases where the the data is Smaller than the grid (see figure 2). 

The desired behavior, for me, would be for the autoFitColumn method to act like setting the width manually (see figure 3 or dojo example). I need scrollable to be true and grid width to be auto to work on any screen width. Allowing the rows to text-wrap doesn't work for scrolling large data tables.

Is figure 2 the intended behavior, and is there a way to achieve my desired behavior?

 

<div id="grid"></div><script> $("#grid").kendoGrid({ columns: [ { field: "name", width: 100 }, { field: "age", width : 50 }, { field: "quote" } ], dataSource: [ { name: "Jane Doe", age: 30, quote: "I like Pi." }, { name: "John Doe", age: 33, quote: "The FitnessGramâ„¢ Pacer Test ... ding" } ], scrollable: true, width: 'auto' }); var grid = $("#grid").data("kendoGrid"); grid.autoFitColumn("quote"); </script>

figure 1: behavior of autoFitColumn if data is longer than grid is wide.


<div id="grid"></div><script> $("#grid").kendoGrid({ columns: [ { field: "name", width: 100 }, { field: "age", width : 50 }, { field: "quote", } ], dataSource: [ { name: "Jane Doe", age: 30, quote: "I like Pi." }, { name: "John Doe", age: 33, quote: "I like Pi too." } ], scrollable: true, width: 'auto' }); var grid = $("#grid").data("kendoGrid"); grid.autoFitColumn("quote"); </script>

firuge 2: behavior of autoFitColumn if data is shorter than grid is wide


<div id="grid"></div><hr/><div id="grid2"></div><script> $("#grid").kendoGrid({ columns: [ { field: "name", width: 100 }, { field: "age", width : 50 }, { field: "quote", width : 3272 } //this width should be set by autoFitColumn instead of manually ], dataSource: [ { name: "Jane Doe", age: 30, quote: "I like Pi." }, { name: "John Doe", age: 33, quote: "The FitnessGramâ„¢ Pacer Test ... ding" } ], scrollable: true, width: 'auto' }); $("#grid2").kendoGrid({ columns: [ { field: "name", width: 100 }, { field: "age", width : 50 }, { field: "quote", width: 93 }//this width should be set by autoFitColumn instead of manually ], dataSource: [ { name: "Jane Doe", age: 30, quote: "I like Pi." }, { name: "John Doe", age: 33, quote: "I like Pi too" } ], scrollable: true, width: 'auto' }); //I left this code in a comment to make switching back and forth between my desired and actual behavior easier /*var grid = $("#grid").data("kendoGrid"); var grid2 = $("#grid2").data("kendoGrid"); grid.autoFitColumn("quote"); grid2.autoFitColumn("quote");*/ </script>

figure 3: desired visual result, but the width should be set using autoFitColumn, not manualy

 

Neli
Telerik team
 answered on 05 Jul 2021
2 answers
272 views

Hello

I have successfully created a scrollView with pager (clickable dots at bottom). It works when I manually switch to next/previous page or click on a page dot. Now I wanted to enhance that after a few seconds the scrollView switched to the next page. On the last page it should switch back to the first page. For this I'm using the Javascript function setIntervall and scrollView's methods next and scrollTo.I have now a experienced some weird effects:

- next: With each call of method next a page button at bottom disappears
- scrollTo: After reaching the last page it keeps hanging and does not go back to first page

Here's a code sample that runs out of the box:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Auto scrollview</title>
 
 
 
    <script>
        var timerNewPage;
        var pageNewFile = 0;
 
        // Jump to next page, after page 10 jump back to page 1
        function jumpNextPage ()
        {
            if (pageNewFile > 8) {
                pageNewFile = 0;
                var scrollView = $("#scrollView").kendoScrollView().data().kendoScrollView;
                scrollView.scrollTo(0);
            }
            else {
                var scrollView = $("#scrollView").kendoScrollView().data().kendoScrollView;
                scrollView.next();
                pageNewFile += 1;
            }
        }
 
        $(document).ready(function () {
 
            // Init scrollView
            $("#scrollView").kendoScrollView({
                enablePager: true,
                contentHeight: "100%",
                page: 0
            });
 
            timerNewPage = setInterval(() => jumpNextPage(), 4000);
 
        });
    </script>
 
</head>
<body>
<div id="scrollView" style="height: 500px;">
    <div data-role="page">Page 1</div>
    <div data-role="page">Page 2</div>
    <div data-role="page">Page 3</div>
    <div data-role="page">Page 4</div>
    <div data-role="page">Page 5</div>
    <div data-role="page">Page 6</div>
    <div data-role="page">Page 7</div>
    <div data-role="page">Page 8</div>
    <div data-role="page">Page 9</div>
    <div data-role="page">Page 10</div>
</div>
</body>
</html>

 

I have tested in on lastest Safari, Chrome and Firefox, all with the same described behaviour.Is this a bug or am I doing something wrong? I've used the method refresh after page switch but didn't fix the vanishing page buttons. I've also tried to scroll to next page with scrollTo (instead of using next) but also with the same weird behaviour.

Any help/hint appreciated!

Tayger
Top achievements
Rank 1
Iron
 answered on 25 Apr 2021
1 answer
161 views

Hi!

 

Have any ways make infinite scroll for data source? I need make cyclical page scrolling. By default Kendo disable next scroll button when reached last slide.
What i tried. I attach functin on onchange event like this

_infinityScroll: function (e) {
var nextPage = e.nextPage,
currentPage = e.curentPage,
items = e.sender.dataSource.data();

if (currentPage === -1) {
e.curentPage = 0
}

if (nextPage === -1) {
e.nextPage = 0
}

if (nextPage === items.length) {
e.sender.element.data('kendoScrollView').scrollTo(-1);
e.preventDefault();

}

_showScrollButtons()
},

It's works but looks so bad...

Petar
Telerik team
 answered on 01 Jun 2020
2 answers
828 views

Hi, Dev Team!

First of all thank you for awesome ScrillView control.

I did not catch how i can provide gallery for images with unknown height?

 

HTML:

<div id="scrollView" style="height: 600px; width: 100%;">   <--here i need dynamic height
</div>
<script id="scrollview-template" type="text/x-kendo-template">
    <div style="text-align: center;">
        <p>#=data.Name#</p><img src="#=setBackground(data.ServerRelativeUrl)#">
    </div>
</script>

 

SCRIPT:

        $("#scrollView").kendoScrollView({
            dataSource: AreaPhotoDS,
            template: $("#scrollview-template").html(),
            enablePager: true
        });

 

 

Andrey
Top achievements
Rank 1
Veteran
 answered on 08 Apr 2020
2 answers
2.1K+ views

Hi all,

Just attached the expect layout for the Carousel slider i want.

But i have no idea how to make like that use the Kendo ScrollView...

I tried to change the css make the same layout, but when i go next page, the position go wrong.

Should i handle the position calculation on the Event "change"?

 

Preslav
Telerik team
 answered on 11 Jul 2019
1 answer
86 views

Hi all, 
The documentation on the kendoScrollvView demo link appears to be wrong: https://demos.telerik.com/kendo-ui/scrollview/index

The provided css contains a #scrollview-home string. However, this should be just #scrollview, not #scrollview-home:
("#scrollview-home .photo { display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center center;}")

However, when I correct it, I still can't get the background image to properly cover the widget. It centers the image, but it contains overflow on the side which expands the width of the widget and expands out to the next screen. Is there an example how to use this widget on an adaptive site?
Thanks for your advice, 

Gregory

Alex Hajigeorgieva
Telerik team
 answered on 21 Jun 2019
5 answers
192 views

Hi,

How to know what is the active page in a scrollview when initialized from HTML ?

 

Best regards,

 

Laurent.

Alex Hajigeorgieva
Telerik team
 answered on 07 Mar 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?