Kendo Ui内联弹出窗口宽度

Question

好的，所以我在我的数据网格中使用了工具包btw的kendo ui优秀工具，我为内联弹出式窗口创建了eidtor模板。

@using Kendo.Mvc.UI
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@(Html.Kendo().DatePicker()
                    .Name("datepicker")
)
@(Html.Kendo().Grid<FuelActivityTrackerDal.Models.ActivityHeader>()
                        .Name("grid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.Name).Filterable(false);
                            columns.Bound(p => p.Description);
                            columns.Bound(p => p.ActivityDate).Format("{0:MM/dd/yyyy}");
                            columns.Bound(p => p.EmployeeName);
                            columns.Bound(p => p.Status);
                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);

                        })
                           .ToolBar(toolbar => toolbar.Create())
        .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("ActivityEditor")).HtmlAttributes(new { style = "width: 100%" })


                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .HtmlAttributes(new { style = "width: 100%" })
                    .HtmlAttributes(new { style = "height:550px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(Model.Count())
                        .Read(read => read.Action("Activity_Read", "Activity"))
                    )
)

我的活动模板在这里，但我的问题是如何使弹出窗口的宽度更大，并且可以在模板中使用引导程序列？

我尝试在弹出窗口上使用.HtmlAttributes（new {style =“ width：100％”}），但它似乎并未对其进行调整。

@model FuelActivityTrackerDal.Models.ActivityHeader

<div class="k-edit-form-container">
    <h3>Activity</h3>
    <br />
    @Html.HiddenFor(model => model.Name)

    <div class="k-edit-label">
        @Html.LabelFor(model => model.Name)
    </div>


    <div class="k-edit-label">
        @Html.LabelFor(model => model.ActivityDate)
    </div>
    <div class="k-edit-field">
        @Html.Kendo().DateTimePickerFor(model => model.ActivityDate)
        @Html.ValidationMessageFor(model => model.ActivityDate)
    </div>
</div> 

Answer 1

这是我使用实际用于调整弹出窗口大小的一些代码准备的dojo。

https://dojo.telerik.com/UNiHehes

尽管您使用的是MVC包装器，但您只需要绑定到editEvent即可

.events(eve => eve.Edit('resizeMode')) 

（从记忆里）

然后，这是为您调整大小的代码：

    function resizeMode() {
     var popUpWindow = $(".k-popup-edit-form").data("kendoWindow");
     var contentArea = $(".k-edit-form-container");
     var innerForm = $(".k-edit-form-container"); //add your class for you form in here.
     contentArea.height($(window).innerHeight() * 0.8).width($(window).innerWidth() * 0.8);


     var fixedHeight = (contentArea.height() - 70);
     var fixedWidth = contentArea.width() * 0.80;
     console.log($(window).innerWidth());
     innerForm.height(fixedHeight).width(fixedWidth).css({

       maxHeight: fixedHeight + 'px !important',

       maxWidth: fixedWidth + 'px !important',


       overflowY: 'scroll',
       overflowX: 'hidden'

     });
     popUpWindow.center();
   }

因此，我通常想做的是使弹出窗口可滚动，但要确保“更新/取消”按钮始终处于屏幕上（即固定在窗口底部）。 因此，我在调整大小功能中添加了一些其他代码，以确保将更新按钮部分pinned在表单的底部。 如果弹出控件没有被其他div / class包围，那么它将只是将它们固定在form的底部

因此，让我解释一下这段代码在做什么：

首先，我们通过类名获取弹出窗口实例（如果您愿意的话，也可以通过数据角色来完成。其次，我们然后获取弹出窗口内容区域（因此表单标题下方的所有内容）；第三，获取表格中的实际div。

一旦有了这些组件，就可以调整所需大小。 因此，在我的示例中，我基于浏览器的window执行此操作，但是如果需要，可以在其他功能上执行此操作吗？ 在我的示例中，我将调整窗口大小以再次占据屏幕空间的80％，您可以根据需要进行更改。

现在我们调整了弹出窗口的大小，我们需要确保表单占用适当的空间并且不会溢出窗口，这就是为什么我将其设置为占据可用高度的70％（因为这占用了固定更新/取消按钮），然后再次将宽度的80％固定为99％（如果您愿意的话）（我从未将其设置为新窗口尺寸的100％宽度，以考虑到滚动条） ）

最后，我们设置最大高度和宽度css属性，然后在窗口上调用center函数，以便它居中。