Loading of Kendo UI panelbar using datasource - asp.net-mvc

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