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

2 posts, 0 answers
  1. Matt
    Matt avatar
    6 posts
    Member since:
    Jul 2012

    Posted 13 Nov 2012 Link to this post

    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.


  2.
  3. dtrejo
    dtrejo avatar
    1 posts
    Member since:
    Jun 2014

    Posted 23 Nov 2015 Link to this post

    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.

Back to Top