ListView within Scroller & Icons

5 posts, 0 answers
  1. Florian
    Florian avatar
    9 posts
    Member since:
    Jun 2012

    Posted 03 Apr 2012 Link to this post

    Hello,

    1.) i got listviews nested in buttonsgroups and i only want the lists to be scrollable (scroller) and not the entire page
    <div data-role="scroller" class="scroller-content">
             <ul data-role="listview">
                    <li>Webdesign</li>
                    <li>Webprogrammierung</li>
                    <li>Content Management Systeme</li>
                    <li>Barrierefreies Webdesign</li>
                    <li>Flash Programmierung</li>
                    <li>Spiele Programmierung</li>
                    <li>Soziale Netzwerke></li>
                    <li>Usability</li>
                    <li>Website Konzeption</li>
        </ul>
             
                <ul data-role="listview" style="display:none">
                    <li data-icon="custom-apple">iPhone/iPad</li>
                    <li data-icon="custom-android"><a>Android</a></li>
                    <li data-icon="custom-mobile"><a>Handy Spiele</a></li>
                    <li data-icon="custom-cart"><a>M-Commerce</a></li>       
                </ul>
             
                <ul data-role="listview" style="display:none">
                    <li>Corporate Design</li>
                    <li>Imagebroschüre</li>
                    <li>Geschäftsbericht</li>
                    <li>Flyer Design</li>
                    <li>Plakat Gestaltung</li>
                    <li>Bildbearbeitung</li>       
                </ul>
    </div>

    but as soon as the listviews are nested inside the scroller, it isnt scrollable anymore


    2.) icons next to the listitems only work when <a> is set.
    how to provide a simple list (items not selectable, no anchors) with icons?

    thanks
  2. Florian
    Florian avatar
    9 posts
    Member since:
    Jun 2012

    Posted 05 Apr 2012 Link to this post

    any ideas? atleast for (2)...? :/
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 05 Apr 2012 Link to this post

    Hello Florian,

    I believe that the listview is not being scrolled in your case, because you forgot to add the height of the scroller element.
    As for your second question, I suggest to add the icons via <img> tab instead of using the data-icon attribute.

    For convenience you may check this jsFiddle example.
    I hope this information will help you to solve the problems.

    Greetings,
    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!
  5. Florian
    Florian avatar
    9 posts
    Member since:
    Jun 2012

    Posted 10 Apr 2012 Link to this post

    Thanks for you reply Alexander!


    1) setting a height fixes the problem, BUT
    1a) as i stated before, i got the listviews linked to a buttonGroup and the scrolling gets applied by all listViews, e.g. scrolling the first to the bottom and selecting the second - its content is at the bottom aswell.

    2) it works with images, but is this the only way? using the data-icon attribute for list items without anchor would avoid repetitive code.
    do you consider this for the next release? (to me its a fix rather than a "new feature")
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 12 Apr 2012 Link to this post

    Hello Florian,

    1. You can use the reset() method of the scroller to return it in its original position.

    2. Currently this is the only way - you can also add a span with the following classes:
    <span class="km-icon km-globe"></span>

    We will consider supporting this out of the box in the list view for one of the next releases.

    Greetings,
    Kamen Bundev
    the Telerik team
    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