分离器中的Kendo UI网格

时间:2013-02-26 13:59:32

标签: asp.net-mvc visual-studio-2012 kendo-ui kendo-grid splitter

我的布局中有一个分割器,用于显示信息。

我的显示效果很好,但是当我在我的index.html中使用我的网格时(在我的布局中被@RenderBody()调用),我的分割器不再显示了......

一切都在一页上,没有分割器...

有什么想法吗?

编辑:

对不起。

我的控制器:

public class HomeController : Controller
{
    private static string path = @"C:\LogIngesup\log.xml";

    public ActionResult Index()
    {
        DataTable logs = Write_Log.Read.loadXML(path);

        return View(logs);
    }
}

我的布局:

    <body>
@(Html.Kendo().Splitter()
      .Name("vertical")
      .Orientation(SplitterOrientation.Vertical)
      .Panes(verticalPanes =>
      {
          verticalPanes.Add()
              .HtmlAttributes(new { id = "middle-pane" })
              .Scrollable(false)
              .Collapsible(false)
              .Content(
                Html.Kendo().Splitter()
                    .Name("horizontal")
                    .HtmlAttributes(new { style = "height: 100%;" })
                    .Panes(horizontalPanes =>
                    {
                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "left-pane" })
                            .Size("230px")
                            .Resizable(false)
                            .Collapsible(true)
                            .Content(@<div>@RenderPage("~/Views/Home/Calendrier.cshtml")</div>);

                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "center-pane" })
                            .Content(@<div class="pane-content">
                                <section id="main">
                                    @RenderBody()
                                </section>
                            </div>);

                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "right-pane" })
                            .Collapsible(true)
                            .Size("220px")
                            .Content(@<div class="pane-content">
                                @RenderPage("~/Views/Home/XML.cshtml")
                            </div>);
                    }).ToHtmlString()
              );

          verticalPanes.Add()
              .Size("70px")
          .HtmlAttributes(new { id = "bottom-pane" })
          .Resizable(false)
          .Collapsible(true)
          .Content(@<div class="pane-content" style="text-align:center">
             <p>Application développée par : Dan</p>
          </div>);
      }))
</body>

最终我的index.html:

    @{
    ViewBag.Title = "LogApp";
}

@model System.Data.DataTable

@(Html.Kendo().Grid(Model)
    .Name("Grid")    
    .Columns(columns => {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            columns.Bound(column.DataType, column.ColumnName);     
        }
    })    
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
)

我知道我的代码有任何建议:)

此外我还有一个问题:

当我尝试在我的网格中添加它时(index.html):

.DataSource(datasource=>datasource
    .Ajax()
    .PageSize(10)
)
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

我不能去其他页面,也不能选择一行......你能帮助我吗?

(直接写url:localhost \?Grid-page = 2)

1 个答案:

答案 0 :(得分:0)

在Kendo UI Tabcontrol中放置Kendo UI Splitter时遇到了同样的问题。

当Tabcontrol在Splitter之前制作时它出现了这个问题,但是当我刚刚颠倒了它的顺序时它运行正常。

即我改变了:

$(document).ready(function () 
{
    $("#ManagementMenu").kendoTabStrip();
    $("#splitter").kendoSplitter({
        panes: [
            { size: "200px", resizable: false},
            { size: "500px", collapsible: false}
        ],
    });
}

$(document).ready(function () 
{
    $("#splitter").kendoSplitter({
        panes: [
            { size: "200px", resizable: false},
            { size: "500px", collapsible: false}
        ],
    });
    $("#ManagementMenu").kendoTabStrip();
}

并解决了问题。