Shaping data for Kendo UI PanelBar

[Phil H.]

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

[Phil H.]

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

[Petur Subev]

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