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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top