Loading of Kendo UI panelbar using datasource

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

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 
                });
            }
});