How can group items in ListView based on their first character

[Ron]

Hi

I am doing some tests with Kendo UI Mobile for an upcoming project. One thing that I saw can be easily done in jQuery Mobile's ListView is to group items in the ListView by their first character (like contacts in iPhone) automatically and even add a Search box on the top just by setting a property.
I was trying to do the same thing with Kendo UI using a DataSource loading json data from a data service. I can see the list of items in the ListView but I am not able to group them by their first character.
All the examples I have seen use a separate data field for group but I do not have a field for the first character.
Is there anyway that I can group list of names by the first character or at least create an unbound field in the datasource's model/shema that returns first character of the item so I can use it for groping?

Also is there an example that shows how to use a Search field to filter the ListView data?

I appreciate your help in advance.

Regards
Ron Farko

[Alexander Valchev]

Hello Ron,

The DataSource does not provide ability to group by first letter - it is possible to group only by fields.
In case your remote data does not have a separate letter field you may create such on the client side using the parse function.

schema: {
    parse: function (data) {
        for(var i = 0; i < data.length; i++) {
            data[i].letter = data[i].name.charAt(0);
        }
        return data;
    }
},
group: { field: "letter" }

For your convenience I prepared a small example using this approach in action. I hope this will help.

Best regards,
Alexander Valchev
the Telerik team

[Ron]

Hi Alexander 

Thank you for the quick reply and example. Your example works with local data set but not with remote data source. I converted your example using a dataSource to Netflix OData service (attached) and as you can see the grouping doesn't work anymore.

Please let me know if there is another way to group remote data based on the first characters.

Regards
Ron Farko 

[Alexander Valchev]

Hi Ron,

Thank you for the feedback.

In your case, the server response is different so you have to make little modification in the parse function. Data comes as:

{
    "d": {
        "results": [
            { "Name": "Red Hot Chili Peppers: Funky Monks" },
            { "Name": "Rod Stewart: Storyteller 1984-1991" }
        ]
    }
}

Which means that parse function will receive this object as an argument. You have to modify the results array and return back the whole object.

schema: {
    parse: function (response) {
        var data = response.d.results;

        for (var i = 0; i < data.length; i++) {
            data[i].letter = data[i].Name.charAt(0);
        }

        response.d.results = data;
        return response;
    }
},

For your convenience I edited the sample: http://jsbin.com/imiver/2/edit

Please have in mind that the implementation of the parse function varies depending on the format of the server response. I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Ron]

Hi Alexander 

The solution perfectly works.

Thank you
Ron