Question

我正在使用ASP MVC和当前版本的Kendo。如果我向Kendo窗口添加太多信息，它会垂直滚动。这会隐藏在底部生成的取消/更新按钮。我需要这些显示。用户不需要滚动即可取消取消。如何使“形状水平”滚动和“k-window”不滚动？

完整窗口：

Full window

滚动窗口：

Scroll window

代码：

@(Html.Kendo().Grid(Model.CompanyList)
        .Name("grid")
        .Columns(columns => {
           columns.Bound(o => o.Company.Name);
           columns.Bound(o => o.Company.DealerId);
           columns.Bound(o => o.Company.CityState).Title("City, " + stateTitle);
           columns.Bound(o => o.Company.CountryCode);
           columns.Bound(o => o.Company.Phone);
           columns.Bound(o => o.CompanyStatus).Title("Status");
           columns.Command(com => { com.Edit(); });
        })
        .Pageable()
        .Sortable()
        .DataSource(
           dataSource => dataSource
              .Server()
              .Sort(sort => sort.Add("Name").Ascending())
              .Model(model => model.Id(m => m.Company.Id))
              .Update(up => up.Action("UpdateCompany", "Home"))
        )
        .Editable(ed => ed
           .Mode(GridEditMode.PopUp)
           .TemplateName("Company")
           .Window(w => w
              .Title("Edit company")
              .Draggable()
              .Resizable()
              .Width(436)
              .Modal(true)
              .Animation(false)
           )
        )
     )

Answer 1

为了实现这样的布局，您需要在自己的元素中处理滚动而不是将其留在窗口中。这涉及一些可能会破坏网格功能的自定义，因此会考虑这个不受支持的，因为它可能会在未来通知的情况下中断。 Suggesting this on UserVoice可能会正式实施，因此从长远来看会更好。

因此，为了做到这一点，请附加一个窗口打开事件处理程序：

var buttonWrapper = $(".k-edit-buttons");
var formContainer = $(".k-edit-form-container");
formContainer.css({
    overflow: "auto", // make the container scroll
    maxHeight: 300 // maximum height of the window content, sans the chrome
});
buttonWrapper.insertAfter(formContainer);

您还需要将样式添加到按钮包装器中：

.k-edit-form-container .k-edit-buttons {
    clear: both;
    text-align: right;
    border-width: 1px 0 0;
    border-style: solid;
    position: relative;
    bottom: -1em;
    padding: .6em;
}

Answer 2

尝试从窗口中删除Resizable()属性。我通常不会为我的Kendo Windows指定Height()或Resizable()属性。

Kendo窗口更改滚动以具有静态更新/取消按钮

2 个答案: