在 ASP MVC 中将 List<string> 传递给 Kendo Grid答案

【问题标题】：Passing a List<string> to a Kendo Grid in ASP MVC在 ASP MVC 中将 List<string> 传递给 Kendo Grid
【发布时间】：2018-07-09 18:03:21
【问题描述】：

我有一个剑道网格，其中一列传递了List<string>。现在它显示[object Object]，但我希望它显示用逗号分隔的字符串列表。我找到了这个答案：Kendo Grid: How display List<string> in one cell?

但是提出的解决方案对我不起作用。它只是阻止网格渲染。

这会在列中显示[object Object]：

                     @(Html.Kendo().Grid<Models.MyConfigModel>
                         ()
                         .Name("MyListGrid")
                         .Columns(columns =>
                         {
                            columns.Bound(p => p.myList).Title("My List").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;text-align:center" }).Width(150);
                         })
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(100)
                        .Read(read => read.Action("MyListGrid_Read", Model.ControllerName))
                        .ServerOperation(false).Model(model => model.Id(p => p.MyID)))

这会导致什么都不显示：

                     @(Html.Kendo().Grid<Models.MyConfigModel>
                         ()
                         .Name("MyListGrid")
                         .Columns(columns =>
                         {
                            columns.Bound(p => p.myList).Title("My List").ClientTemplate("# =iterate(myList) #").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;text-align:center" }).Width(150);
                         })
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(100)
                        .Read(read => read.Action("MyListGrid_Read", Model.ControllerName))
                        .ServerOperation(false).Model(model => model.Id(p => p.MyID)))

这是我的迭代函数：

function iterate(object) {
    if (object !== null && object.length > 0) {
        for (var x = 0; x < object.length; x++) {
            html += object[x];
            html += ", ";
        }
        html = html.slice(0, -2);
        return html;
    }
}

【问题讨论】：

为什么不在将其绑定到网格之前进行预处理（创建逗号分隔字符串）？另外，你能检查一下控制台是否有任何错误吗？
@SangramNandkhile 控制台中没有错误。我考虑过预处理，唯一的事情是，在网格中显示时，逗号分隔的字符串很好，但是在编辑时它用于填充需要数组的多选。所以我必须有两个属性并来回复制/转换。这是可行的，但我希望有一个更清洁的解决方案。

标签： kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

我会这样做：

网格：

columns.Template(p => { }).Title("My List").ClientTemplate("#= iterate(data) #").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;text-align:center" }).Width(150);

Javascript：

function iterate(data) {
    if (data.myList!== null && data.myList.length > 0) {
        for (var x = 0; x < data.myList.length; x++) {
            html += data.myList[x];
            html += ", ";
        }
        html = html.slice(0, -2);
        return html;
    }
    return "";
}

【讨论】：