Question

好，所以我在数据网格中使用了kendo ui套件kit，它为我的内联弹出窗口创建了一个eidtor模板。

acc = ['a', 'a', 'b', 'b'], x = 'c' => returns ['a', 'a', 'b', 'b', 'c', 'c']

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

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

@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"))
                    )
)

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函数，这样它对我们来说就很好了。

Kendo Ui内联弹出窗口宽度

1 个答案: