Filter Kendo UI listView with grouped data

Question

I'm transitioning a project from Jquery Mobile into Kendo Mobile UI and I want to be able have filterable listviews (with links) similar to what JQM has here at http://demos.jquerymobile.com/1.3.2/widgets/listviews/ (AutoDividers section)

I have read the Kendo docs and implemented a listview filter with data binding. Have not used the template method yet. I can get the links to show and be filterable.

My issue is that I can't figure out how to put grouped data titles in the listview without having a filter appear for each grouped section of data.

HTML CODE

<div data-role="view" data-title="App Index" data-layout="agesLayout" id="App Index" class="defaultView" data-init="initListView">
        <h1>SPEAK App Index</h1>
        <p>This section contains an index of all the activities that can be found within the different age groups. Use the collapsible menu to search for activities within each age group. You can use the &ldquo;Search&rdquo; feature to look for a particular activity. Use meaningful search words.</p>
    <ul id="panelBar">
     <li>0-12 Months Section
       <div>
        <!--<div style="background:#666; color:white; padding:10px; font-size: 0.9em;">Talking Points</div>-->
        <ul id="listview-points" data-type="group"></ul>
       </div>
     </li>
     <li>13mths+ Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
     <li>2.5yrs+ Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
     <li>3.5yrs+ Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
     <li>4.5yrs+ Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
    </ul>
</div>

JAVASCRIPT CODE

        <script>
            $(document).ready(function() {
                $("#panelBar").kendoPanelBar();
            });
        </script>

<script type="text/javascript">
    function initListView(e) {
        e.view.element.find("#listview-points").kendoMobileListView({
            filterable: {field: "name", operator: "startswith"},
            template: "<a href='#:data.url#'>#:data.name#</a>",
            dataSource: kendo.data.DataSource.create([
                {name: "Role Models", url: "baby/points/point1.html"},
                {name: "Mother's Voice", url: "baby/points/point2.html"},
                {name: "Body Language", url: "baby/points/point3.html"},
                {name: "Listening", url: "baby/points/point4.html"},
                {name: "Brain Development", url: "baby/points/point5.html"},
                {name: "Gentle Words", url: "baby/points/point6.html"},
                {name: "Television", url: "baby/points/point7.html"},
                {name: "Act on Concerns", url: "baby/points/point8.html"},
                {name: "Home Environment", url: "baby/points/point9.html"},
                {name: "First Five Years", url: "baby/points/point10.html"},
//I WANT TO PUT A HEADER SEPARATOR HERE FOR THE NEXT SECTION
                {name: "Social Activity 1", url: "baby/social/social1.html"},
                {name: "Social Activity 2", url: "baby/social/social2.html"},
                {name: "Social Activity 3", url: "baby/social/social3.html"},
            ])
        });
    }
</script>

I regret to say I am a bit stumped or perhaps can't think straight. I cannot see a straightforward solution out of this. Has anyone got any suggestions?

Answer 1

So, I refactored your code a little... I think this will demonstrate it.

var ds = new kendo.data.DataSource({
 data: [{name: "Role Models", url: "baby/points/point1.html", section:"Header1"},
       {name: "Mother's Voice", url: "baby/points/point2.html", section:"Header1"},
       {name: "Body Language", url: "baby/points/point3.html", section:"Header1"},
       {name: "Listening", url: "baby/points/point4.html", section:"Header1"},
       {name: "Brain Development", url: "baby/points/point5.html", section:"Header1"},
       {name: "Gentle Words", url: "baby/points/point6.html", section:"Header1"},
       {name: "Television", url: "baby/points/point7.html", section:"Header1"},
       {name: "Act on Concerns", url: "baby/points/point8.html", section:"Header1"},
       {name: "Home Environment", url: "baby/points/point9.html", section:"Header1"},
       {name: "First Five Years", url: "baby/points/point10.html", section:"Header1"},
       {name: "Social Activity 1", url: "baby/social/social1.html", section:"Header2"},
       {name: "Social Activity 2", url: "baby/social/social2.html", section:"Header2"},
       {name: "Social Activity 3", url: "baby/social/social3.html", section:"Header2"},
 ],
 group: {field: "section"}
 });

$(document).ready(function() {
            $("#panelBar").kendoPanelBar();
        });

function initListView(e) {
    e.view.element.find("#listview-points").kendoMobileListView({
        template: "<a href='#:data.url#'>#:data.name#</a>",
        dataSource: ds
    });
}

new kendo.mobile.Application();