Ширина встроенного всплывающего окна Kendo Ui

Question

Хорошо. Итак, я использую 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

Вот додзё, которое я подготовил, используя некоторый код, который я на самом деле использую для изменения размера всплывающего окна.

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 / классом, тогда они просто прикрепят их к нижней части form

Итак, позвольте мне объяснить, что делает этот код:

Сначаламы получаем экземпляр всплывающего окна через имя класса (это также можно сделать через роль данных, если вы этого хотите. Во-вторых, мы получаем область содержимого всплывающего окна (так что все под заголовком формы). В-третьих, мы получаемфактический div с формой в нем.

Как только мы получим эти компоненты, мы сможем изменить их размер так, как мы хотим. Так что в моем примере я делаю это на основе window браузера, но вы можете сделать это начто-то еще, если вы хотите? В моем примере я затем изменяю размер окна, чтобы снова занять 80% экранной недвижимости, вы можете изменить это в соответствии с вашими потребностями.

Теперь мы изменили размер всплывающего окна, которое нам нужночтобы форма занимала необходимое количество места и не переполняла окно, поэтому я устанавливаю, что она занимает 70% доступногоight (так как это принимает во внимание закрепление кнопок обновления / отмены), а затем снова 80% ширины, это может доходить до 99%, если вы хотите (я никогда не устанавливал это в 100% ширину нового размера окна, чтобы принятьс учетом полосы прокрутки)

Затем, наконец, мы устанавливаем атрибуты css для максимальной высоты и ширины, а затем вызываем функцию center в окне, чтобы оно было удобно для нас.