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. Kendo UI is VS 2017 Ready
  4. 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