Question

MVC 4.当我在Kendo UI PanelBar中放置Grid时，它无法按预期工作。视图最终没有将Grid放在Content()中，而是将其自身一次又一次地放入面板recursively。

@(Html.Kendo().PanelBar()
  .Name("IntroPanelBar")
  .Items(items =>
      {
          items.Add()
               .Text("papering Reports")
               .Selected(true)
               .Expanded(true)
               .Content(() => Html.RenderAction("Grid"));

要查看它是否是我的代码，我将Grid放在PanelBar之外，所有内容都可以通过PanelBar外部的网格呈现：

@{
   Html.RenderAction("Grid");
}

@(Html.Kendo().PanelBar()
  .Name("IntroPanelBar")
  .Items(items =>
      {
          items.Add()
               .Text("papering Reports")
               .Selected(true)
               .Expanded(true)
               .Content("PLAIN TEXT");

Answer 1

我知道这是一个较老的问题但是当我搜索类似的问题时它会弹出。可以使用Razor helper function来解决。我的示例显示了一个面板，其中包含一个包含网格的标签条。

    <div id="panel">
    @(Html.Kendo().PanelBar()
        .Name("panelbar")
        .ExpandMode(PanelBarExpandMode.Single)
        .Items(panelbar =>
            {
                foreach (var a in Model)  {

                    panelbar.Add().Text(a.dom.fileName)
                        .Content(@<div id="tabs">
                            @RenderTabStrip(a)

                        </div>
                );

                }
            })
    )

    @helper RenderTabStrip(DominguezReport.WebInterface.Models.accModelTest a)
{
    @(Html.Kendo().TabStrip()
        .Name("tabs" +a.dom.recordID)
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Status")
                .Content(@<div>@RenderStatusGrid(a)</div>);

            tabstrip.Add()
                .Text("Errors")
                .Content(@<div>@RenderErrorGrid(a)</div>);
        })
    );
}

     @helper RenderStatusGrid(DominguezReport.WebInterface.Models.accModelTest a)
{
    @(Html.Kendo().Grid(a.drs)
    .Name("Status")
    .Columns(columns=>
                    {
                        columns.Bound(c => c.currentStatus);
                        columns.Bound(c => c.updateTime);
                    })
                    .Scrollable()
      )
}
    @helper RenderErrorGrid(DominguezReport.WebInterface.Models.accModelTest a)
{
    @(Html.Kendo().Grid(a.dre)
    .Name("Errors")
    .Columns(columns =>
    {
        columns.Bound(c => c.errorType);
        columns.Bound(c => c.errorDetail);
        columns.Bound(c => c.updateTime);
    })
    .Scrollable()
)
}

Answer 2

解决方案是使用Action的 MVCHtmlString 输出：

@(Html.Kendo().TabStrip()
  .Name("tabstrip")
  .Items(tabstrip =>
      {
          tabstrip.Add().Text("papering")
                  .Selected(true)
                  .Content(Html.Action("Grid").ToHtmlString());   <---

Answer 3

我尝试了以下代码并且它有效。将您的网格代码包含在PanelBar的“内容”部分的<div>标记中。

@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar => 
    { 
             panelbar.Add().Text("Devices")
            .Expanded(true)
            .Content(@<div>@(Html.Kendo().Grid(Model)
            ...grid code here
             </div>
            );
            })
            )

MVC的Kendo UI：在PanelBar中渲染网格

3 个答案: