Shaping data for Kendo UI PanelBar

3 posts, 1 answers
  1. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 04 May 2014 Link to this post

    Hi All:

    I was working with underscore and figured out that I could reformat the data for the PanelBar control.
    Here is my example code:
    $(function () {
        //
        var meetingDataSource = new kendo.data.DataSource({
            data: [
                { MeetingId: 65, Year: 2014, MeetingDate: '2014-05-14 18:00:00', Title: "30 tools for modern .net web development in 60 minutes" },
                { MeetingId: 64, Year: 2014, MeetingDate: '2014-04-09 18:00:00', Title: "azure websites deep dive" },
                { MeetingId: 63, Year: 2014, MeetingDate: '2014-03-12 18:00:00', Title: "cancelled" },
                { MeetingId: 62, Year: 2014, MeetingDate: '2014-02-12 18:00:00', Title: "getting to know windows azure mobile services" },
                { MeetingId: 60, Year: 2013, MeetingDate: '2013-12-11 18:00:00', Title: "custom graphics for your web application: the html5 canvas and kinetic.js" },
                { MeetingId: 59, Year: 2013, MeetingDate: '2013-11-13 18:00:00', Title: "four platforms. one codebase. xamarin." },
                { MeetingId: 58, Year: 2013, MeetingDate: '2013-10-09 18:00:00', Title: "it’s cheaper than therapy: building an “eliza” psychotherapist app in windows 8" },
                { MeetingId: 57, Year: 2013, MeetingDate: '2013-09-11 18:00:00', Title: "if typescript is the answer, what is the question?" }
            ]
        });
        //
        meetingDataSource.fetch(function () {
            //
            var meetings = meetingDataSource.data();
            //
            var years = _.chain(meetings)
                .pluck('Year')
                .uniq()
                .value();
            //
            var shapedData = _.reduce(years, function (memo, year) {
                var exp = false;
                if (memo.length == 0) exp = true;
                //
                var det = _.chain(meetings)
                    .filter(function (meeting) { return meeting.Year == year; })
                    .map(function (meeting) {
                        var m = meeting;
                        return { value: m.MeetingId, text: m.Title };
                    })
                    .value();
                memo.push({ value: year, text: year, expanded: exp, items: det });
                return memo;
            }, []);
            //
            $("#inline-listview").kendoPanelBar({
                dataSource: shapedData,
                expandMode: "single"
            }).data("kendoPanelBar");
        });
        //
    });

    The data is read with a dataSource fetch command.  In the fetch function, I first extract the years for the level 0 of the panel-bar, then I use the years as input for the reduce function and reprocess the input data.  The years are the level 0 and the level 1 is the reprocessed data.  So, this process could easily adapted to data in a database.

    Phil
  2. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 15 Jun 2014 in reply to Phil H. Link to this post

    Hi All:

    The json is as follows:
    [{"value":2014,"text":2014,"expanded":true,"items":
        [{"value":65,"text":"30 tools for modern .net web development in 60 minutes"},
         {"value":64,"text":"azure websites deep dive"},{"value":63,"text":"cancelled"},
         {"value":62,"text":"getting to know windows azure mobile services"}
        ]},
     {"value":2013,"text":2013,"expanded":false,"items":
        [{"value":60,"text":"custom graphics for your web application: the html5 canvas and kinetic.js"},
         {"value":59,"text":"four platforms. one codebase. xamarin."},
         {"value":58,"text":"it’s cheaper than therapy: building an “eliza” psychotherapist app in windows 8"},
         {"value":57,"text":"if typescript is the answer, what is the question?"}
        ]}
    ]

    Phil
  3. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 18 Jun 2014 Link to this post

    Hello Phil,

    Thank you for sharing your findings with the community I guess there is no really a question here, I created a small Dojo example that demonstrates your approach:

    http://trykendoui.telerik.com/@pesho/aZuF

    Kind Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top