在模板中指定网格

Question

我想要的只是将 Kendo UI Grid 添加到 Kendo UI ListView 的模板中。列表的每个项目都包含另一个列表，该列表应在模板内显示为网格。理想情况下，网格将使用 Razor 定义，但我不知道如何将模板中的数据绑定到 Razor 网格。我也可以使用 JavaScript 定义的网格。所以这是当前的方法。

这是生成网格的代码：

<script type="text/javascript">
    function buildGrid(id, lines) {
        console.log("buildGrid(" + id + ")");
        console.log("lines", lines);
        var grid = $("#" + id).kendoGrid({
            dataSource: {
                data: lines,
                schema: {
                    model: {
                        fields: {
                            Name: { type: "string" }
                        }
                    }
                }
            },
            columns: [
                "Name"
            ]
        });
        console.log(grid);
    }
</script>

ListView的模板代码如下：

<script type="text/x-kendo-tmpl" id="recordTemplate">
    <div class="k-widget" style="margin:10px auto 10px auto;">
            # var gridId = "RecordLines" + Line; #
            <div id="#=gridId#" style="border:red 1px solid; width:500px; height:500px;"></div>
            # buildGrid(gridId, Lines); #
        </fieldset>
    </div>
</script>

这是 TabStrip 的代码，里面有 ListView。

<div>
    @(Html.Kendo().TabStrip()
        .Animation(false)
        .Name("tabs")
        .Items(i => {
            i.Add().Text("Records").Selected(true).Content(@<text>
                <div class="tabDiv">
                    <div class="demo-section">
                        <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Zeile hinzufügen</a>
                    </div>

                    <div class="demo-section k-header">
                        @(Html.Kendo().ListView<TemplateGeneratorItem.Record>(Model.Records)
                            .Name("RecordsList")
                            .ClientTemplateId("recordTemplate")
                            .DataSource(d => d
                                .Custom()
                                .AutoSync(true)
                                .Events(e => e.Change("changeRecList"))
                                .Schema(s => s.Model(m => m.Id(o => o.Line)))
                                .Sort(s => s.Add(o => o.Line))
                            )
                            .Events(e => e.Remove("removeRecord"))
                            .HtmlAttributes(new { style = "border:none;" })
                            .TagName("div")
                        )
                    </div>
                </div>
            </text>);
        })
    )
</div>

问题是：网格不显示！ JavaScript 控制台上的输出看起来很棒（行包含预期的元素）：

buildGrid(RecordLines1)
lines [ht.e…d.init, ht.e…d.init, ht.e…d.init, _events: Object]
[context: document, selector: "#RecordLines1"]

如果我之后在控制台中选择其中一个网格，我会得到 <div> 元素而不是网格：

$("#RecordLines1");
[<div id=?"RecordLines1" style=?"border:?red 1px solid;? width:?500px;? height:?500px;?">?</div>?]
$("#RecordLines1").data("kendoGrid");
undefined

首先：如何在模板中获取我的网格？
奖励：如何使用 Razor 实现这一目标？

最好的问候。

Answer 1

您可以使用 MVVM 样式在模板脚本中定义网格

<div id="gridLines#=Id#" data-role="grid"
     date-scrollable="true"
     data-editable="true"
     data-columns="[ { 'field': 'Name', 'width': 270 }]"
     data-bind="source: Lines,
                events: {
                  save: onSave
                }"
     style="width: 480px; height: 200px"></div>

或者用剃须刀，

@(Html.Kendo().Grid<LineViewModel>()
      .Name("gridLines#=Id#")
      .Columns(columns =>
               {
                   columns.Bound(c => c.Name).Title("Name");
               })
      .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(5)
                                    .Read(read => read.Action("readbyrecord", "line", new { recordId = "#= Id #" }))
      )
      .Pageable()
      .Sortable()
      .ToClientTemplate())

注意：使用 razor 您需要添加额外的动作控制器以通过记录 id 读取行