Multiple columns in popup edit mode

Question

I think that the pop-up editing mode is the most enjoyable of the editing modes, but with a larger model, the pop-up window becomes very long, which does not look beautiful.

I found a solution for this, and I am interested to know your ideas / feedback / improvements for this solution.

I created two user attributes:

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); } } } 

Then use the [NumberOfColumns (m)] attribute above your editing model and use the [ShowInColumn (n)] attribute above the property (n = 1 is assumed when the attribute is not applied).

I created the Object.cshtml file in Views / Shared / EditorModels / as follows.

 @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> } 

And the following CSS lines:

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

What do you think?

Answer 1

I think it would be much easier. Run this script on the big screen.

  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>