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>

这是带有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实现这一目标？

最好的问候。

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读取行

在模板中指定网格

1 个答案: