This is a migrated thread and some comments may be shown as answers.

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

1 Answer 290 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 13 Nov 2012, 04:43 PM
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.


1 Answer, 1 is accepted

Sort by
0
dtrejo
Top achievements
Rank 1
answered on 23 Nov 2015, 08:17 PM

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.

Tags
ListView (Mobile)
Asked by
Matt
Top achievements
Rank 1
Answers by
dtrejo
Top achievements
Rank 1
Share this question
or