在模板中指定网格

我想要的是添加一个剑道UI网格到一个剑道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>

这是带有ListView的TabStrip的代码。

<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实现这一点?

问好。

<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())