Несколько столбцов во всплывающем режиме редактирования

Я думаю, что режим редактирования всплывающего окна — самый приятный из режимов редактирования, но с более крупной моделью всплывающее окно становится очень длинным, что выглядит не очень хорошо.

Я нашел решение для этого, и мне любопытны ваши идеи/отзывы/улучшения для этого решения.

Я создал два пользовательских атрибута:

public class NumberOfColumnsAttribute : Attribute, IMetadataAware
{
    private readonly int _numberOfColumns;

    public NumberOfColumnsAttribute(int numberOfColumns)
    {
        _numberOfColumns = numberOfColumns;
    }

    public void OnMetadataCreated(ModelMetadata metadata)
    {
        if (!metadata.AdditionalValues.ContainsKey("NumberOfColumns"))
        {
            metadata.AdditionalValues.Add("NumberOfColumns", _numberOfColumns);
        }
    }
}

public class ShowInColumnAttribute : Attribute, IMetadataAware
{
    private readonly int _column;

    public ShowInColumnAttribute(int column)
    {
        _column = column;
    }

    public void OnMetadataCreated(ModelMetadata metadata)
    {
        if (!metadata.AdditionalValues.ContainsKey("ShowInColumn"))
        {
            metadata.AdditionalValues.Add("ShowInColumn", _column);
        }
    }
}

Затем используйте атрибут [NumberOfColumns(m)] над моделью редактирования и атрибут [ShowInColumn(n)] над свойством (при отсутствии атрибута предполагается n=1). применяется).

Я создал файл Object.cshtml в Views/Shared/EditorModels/ следующим образом.

@if (ViewData.TemplateInfo.TemplateDepth > 1)
{
    @ViewData.ModelMetadata.SimpleDisplayText
} else {

    for (var i = 1; i <= (int)(!ViewData.ModelMetadata.AdditionalValues.ContainsKey("NumberOfColumns") ? 1 : ViewData.ModelMetadata.AdditionalValues["NumberOfColumns"]);i++)
    {
        <div class="editor-column">
        @foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForEdit && !ViewData.TemplateInfo.Visited(pm) && ((int)(!pm.AdditionalValues.ContainsKey("ShowInColumn") ? 1 : pm.AdditionalValues["ShowInColumn"])) == i))
        {
            if (prop.HideSurroundingHtml) {
                @Html.Editor(prop.PropertyName)
            } else {
                <div class="editor-label">
                    @Html.Label(prop.PropertyName)
                    @(prop.IsRequired ? "*" : "")
                </div>
                <div class="editor-field">
                    @Html.Editor(prop.PropertyName)
                    @Html.ValidationMessage(prop.PropertyName, "*")
                </div>
            }
        }
        </div>
    }
    <div class="editor-seperator"></div>
}

И следующие строки CSS:

.k-edit-form-container {
    width: auto;
}
.editor-column {
    width: 400px;
    float: left;
}
.editor-seperator {
    clear: both;
}

Как вы думаете?


person Michaja Broertjes    schedule 14.02.2013    source источник


Ответы (1)


Я думаю, это было бы намного проще. Пожалуйста, запустите этот скрипт на широком экране.

                    var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                    }
                                }
                            }
                        });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                            { field:"ProductName", title: "Product Name" },
                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
                            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                            { field: "Discontinued", width: "120px" },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                        editable: "popup",
                        edit: fnMultipleLayoutForm
                    });


function fnMultipleLayoutForm(){
  
    $(".k-edit-form-container").prepend('<div class="column1" style="display: inline-block; float: left;padding-right:30px"></div><div class="column2" style="display: inline-block;float: left;padding-right:30px;"></div>');
  
  
    $(".k-edit-form-container").children(".k-edit-label, .k-edit-field").slice(0, parseInt($(".k-edit-form-container").children(".k-edit-label, .k-edit-field").length / 2)).appendTo(".column1");


    $(".k-edit-form-container").children(".k-edit-label, .k-edit-field").appendTo(".column2");

    $(".k-edit-form-container").css("width", "auto");

    $('.k-window').css({ top: '50%', left: '50%', margin: '-' + ($('.k-window').height() / 2) + 'px 0 0 -' + ($('.k-window').width() / 2) + 'px' });
  
  };
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
      <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css" />

   <div id="grid"></div>

person Alim İŞÇİ    schedule 10.01.2016
comment
Хорошая работа, работает отлично! Как бы вы позволили особенно большому элементу управления охватывать 3 столбца? - person Refracted Paladin; 05.04.2016