Loading of Kendo UI panelbar using datasource

Question

I am trying to load panelbar dynamically using datasource. Actually In the documentation I got information with using ajax only, so I have implemented like this,

    $.ajax({                        
                type: "POST",
                url: '/Home/GetPanelInfo',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (json) {

                    $("#panelBar").kendoPanelBar({
                        expandMode: "single",
                        id: "usr_id",
                        dataSource: [{ text: json[0].groups_name, expand: true, contentUrl: "/Home/Index" },
                                     { text: json[1].groups_name, expand: true, contentUrl: "/Home/Index" },
                                     { text: json[3].groups_name, expand: true, contentUrl: "/Home/Index"}]
                    });
                }
});

but with this I am not able to display all values, I think this is not the correct way of loading panel bar to display all values,How to display all values in panelbar

Answer 1

You should be iterating over your result array. You can use jQuery Map function E.g.:

$.ajax({                        
            type: "POST",
            url: '/Home/GetPanelInfo',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (json) {
                var dataSource = $.map(json, function(obj){
                    return {
                        text: obj.groups_name,
                        expand: true,
                        contentUrl: "/Home/Index" 
                    };
                });

                $("#panelBar").kendoPanelBar({
                    expandMode: "single",
                    id: "usr_id",
                    dataSource: dataSource 
                });
            }
});