C# 剑道Ui内联弹出窗口宽度

好的，所以我正在为我的数据网格使用kit btw的kendo ui优秀peice，我已经为我的内联弹出窗口创建了一个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"))
                    )
)

我这里有我的活动模板，但我的问题是如何使弹出窗口的宽度变大，你能在模板中使用引导列吗

我尝试在弹出窗口中使用.HtmlAttributesnew{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> 

---

下面是我使用一些代码准备的dojo，我实际使用这些代码来调整弹出窗口的大小

尽管您使用的是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();
   }

因此，我通常喜欢做的是使弹出窗口可滚动，但确保更新/取消按钮始终在屏幕上，即固定在窗口底部。 因此，我在resizing函数中添加了一些额外的代码，以确保updatebutton部分固定在表单的底部。如果弹出控件没有被额外的div/class包围，那么它只会将它们固定在表单的底部

让我解释一下这段代码的作用：

首先，我们通过类名获取弹出窗口实例，如果您愿意，也可以通过数据角色来完成。 其次，我们得到了弹出窗口的内容区域，因此表单标题下的所有内容 第三，我们得到了实际的div和它的形式

一旦我们有了这些组件，我们就可以根据需要调整大小。所以在我的例子中，我是基于浏览器的窗口来做这件事的，但是如果你想的话，你可以在别的东西上做？ 在我的例子中，我将调整窗口的大小，使其占据80%的屏幕空间。您可以根据需要进行更改

现在，我们已经调整了弹出窗口的大小，我们需要确保窗体占用适当的空间，并且不会溢出窗口，这就是为什么我将其设置为占用可用高度的70%，因为这考虑到固定更新/取消按钮，然后再调整80%的宽度。如果您需要，这可能会达到99%我想我从来没有设置为新窗口大小的100%宽度，以考虑滚动条

最后，我们设置了最大高度和宽度css属性，然后调用窗口上的中心函数，以便它可以很好地为我们设置中心