How can group items in ListView based on their first character

5 posts, 0 answers
  1. Ron
    Ron avatar
    14 posts
    Member since:
    Jan 2013

    Posted 22 Jan 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 23 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ron
    Ron avatar
    14 posts
    Member since:
    Jan 2013

    Posted 23 Jan 2013 Link to this post

    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 
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 24 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ron
    Ron avatar
    14 posts
    Member since:
    Jan 2013

    Posted 25 Jan 2013 Link to this post

    Hi Alexander 

    The solution perfectly works.

    Thank you
    Ron
Back to Top
Kendo UI is VS 2017 Ready