Kendo UI Mobile ScrollView with multiple templates in a listview

3 posts, 1 answers
  1. Ryan
    Ryan avatar
    7 posts
    Member since:
    Jul 2013

    Posted 26 Jul 2013 Link to this post

    What I am trying to accomplish is a listview where each item is horizontally scrollable to another template item specifically an input field and a button. Is there any way to accomplish this? I have tried creating a listview with a template that contains a touch element and using the swipe event to update the template for that individual item but there appears to be no way on a mobile device to update an individual list items template. Another way I tried to do accomplish this was by making each listview item a scrollview but the problem there is the template for the scrollview has to be uniform and can not vary between pages. Any help would be much appreciated.

    Thanks.
    Ryan
  2. Ryan
    Ryan avatar
    7 posts
    Member since:
    Jul 2013

    Posted 26 Jul 2013 Link to this post

    I have refined my question some:

    <body>
        <ul id="listView"></ul>

        <script type="text/x-kendo-template" id="sitesListViewTemplate">   
            <div data-role="scrollview" data-template="scrollview-binding-template" data-source="?"></div>
        </script>
            
        <script type="text/x-kendo-template" id="scrollview-binding-template">
            <div data-bind="visible: shouldShowSite">
                <img src="styles/icons/#=sharepointType#.ico" alt="#=sharepoint#"/>
                        <h3>${title}</h3>
            </div>
            <div data-bind="invisible: shouldShowSite">
                <input />
                        <div data-role="button">Search</div>
            </div>
        </script>
    </body>

    var testData = ?;

    var dataView = new kendo.data.DataSource.create({data: testData});
        
        $("#listView").kendoMobileListView({
                dataSource: dataView,
                template: $("#sitesListViewTemplate").html(),
                click : listViewItemClick
            });
    }

    What should I use as my data-source in my sitesListViewTemplate and how should my data (testData) be formatted in my javascript file to get this behavior.
  3. Answer
    Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 29 Jul 2013 Link to this post

    Hi,

    I think that this demo (swipe right on an item) should be of help. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top