剑道UI的使用加载数据源panelbar [英] Loading of Kendo UI panelbar using datasource

问题描述

我试图动态加载panelbar使用的数据源。
其实在我的文档信息了，只有用ajax，
所以我已经实现这个样子，

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

但这个我不能够显示所有值，
我觉得这不是加载面板栏的正确的方式来显示所有的值，如何panelbar显示所有值

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

推荐答案

您应该遍历你的结果数组。您可以使用 jQuery的地图功能例如：

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

这篇关于剑道UI的使用加载数据源panelbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！