Shaping PanelBar data with Underscore

2 posts, 0 answers
  1. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 01 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");
        });
        //
    });

    I read the data 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.

    Phil
  2. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 04 May 2014 in reply to Phil Link to this post

    Sorry this is for Kendo UI.
Back to Top