This is a migrated thread and some comments may be shown as answers.

Shaping PanelBar data with Underscore

1 Answer 28 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 2
Phil asked on 02 May 2014, 02:42 AM
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

1 Answer, 1 is accepted

Sort by
0
Phil
Top achievements
Rank 2
answered on 04 May 2014, 01:48 PM
Sorry this is for Kendo UI.
Tags
PanelBar
Asked by
Phil
Top achievements
Rank 2
Answers by
Phil
Top achievements
Rank 2
Share this question
or