Несколько столбцов в режиме редактирования popup

Question

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

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

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

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 (м)] атрибут выше модели редактирования и использовать [ShowInColumn (п)] атрибут выше свойства (п = 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; 
} 

Что вы думаете?

Answer 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: " ", 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>