(Solved) DataSource binding to grouped Listview with custom-ish sort

[Matt]

Posting here in case this helps anyone else:

I had a case where I needed to bind a simply JSON object to a listView. The issue was that the listView when using grouping sorts on the group field, so if you have:

data = [

{ band: '0-11', text: 'Some text here' },

{ band: '8-20', text: 'Some text here' },

{ band: '10-30', text: 'Some text here' } ];

And chose to do this:

kendo.data.DataSource.create( { data: data, group: "band" } )

Then the resulting list will be oddly sorted:

0-11, 10-30, 8-20

The trick here is to sort by one field but use another in the headerTemplate:

data = [

{ band_order: '1.0-11',  band: '0-11', text: 'Some text here' },

{ band_order: '2.8-20', band: '8-20', text: 'Some text here' },

{ band_order: '3.10-30',  band: '10-30', text: 'Some text here' } ];

And then use a function as the headerTemplate to use another field completely:

$("#myList").kendoMobileListView( {

                dataSource    : kendo.data.DataSource.create( { data: bands, group: "band_order" } ),

                template      : $("#mytemplate").html(),

                headerTemplate: function(data) { return data.items[0].band; } } );

This allows you to create your own sort by creating a specific "order" field without having to use it as the group title.

[dtrejo]

I had the same issue and this solution worked for me, but, I wanted to use "data-" attributes for binding rather than creating and initializing the listview in JavaScript.

The data for my listview comes from an AJAX call and is returned as such:

[
{ Category: "Main", CategoryPosition: 0, Title: "Log Out", Link: "blah"},
{ Category: "Main", CategoryPosition: 0, Title: "Admin", Link: "blahblah"},
{ Category: "Inventory", CategoryPosition: 1, Title: "Bin Move", Link: "blahblahblah"}
]

This is how my datasource is setup:

var menu = new kendo.data.DataSource({
        transport: {
            read: {
                url: APP.baseUrl + "ApplicationHelpers/Navigation/Menu",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "Link"
            }
        },
        group: { field: "CategoryPosition" }
    });

 

I set the html for my listview to this:

<ul id="navigationMenuList" data-role="listview" data-bind-auto="false" data-bind="source: menu, events: { click: openView }" data-template="menu-list-template" data-header-template="menu-header-template"></ul>

 

My kendo templates look like this: 

<script type="text/x-kendo-template" id="menu-list-template">
        ${Title}
    </script>
    <script type="text/x-kendo-template" id="menu-header-template">
        #: items[0].Category #
    </script>

 

And to get everything rolling I created an initialization method that gets called when I'm ready to display the listview:

function initializeNavigationMenu() {
        menu.fetch().then(function () {
        $("#navigationMenuList").data("kendoMobileListView").setDataSource(menu);
        navigationModel.menu = menu.data;
        APP.instance.pane.loader.hide();
    });
}

 

Hope that helps anyone that would rather use "data-" attributes.