@(Html.DevExtreme().Form()
.ID("form")
.LabelLocation(FormLabelLocation.Top)
.MinColWidth(233)
.ColCount(Mode.Auto)
.ColCountByScreen(c => c.Md(3).Sm(2))
.ScreenByWidth("screenByWidth")
.CustomizeItem("form_customizeItem")
.FormData(Model)
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Set the count of columns regardless of screen size")
.Value(true)
.OnValueChanged("ckeckBox_valueChanged")
)
</div>
</div>
<script>
function getFormInstance() {
return $("#form").dxForm("instance");
}
function screenByWidth(width) {
return width < 720 ? "sm" : "md";
}
function ckeckBox_valueChanged(e) {
var form = getFormInstance();
if(e.value) {
form.option("colCountByScreen.sm", 2);
form.option("colCountByScreen.md", 3);
} else {
form.option("colCountByScreen.sm", undefined);
form.option("colCountByScreen.md", undefined);
}
}
function form_customizeItem(item) {
if(item.dataField == "Notes")
item.visible = false;
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class FormController : Controller {
public ActionResult ColumnsAdaptability() {
return View(new FormViewModel {
ID = 1,
FirstName = "John",
LastName = "Heart",
CompanyName = "Super Mart of the West",
Position = "CEO",
OfficeNo = "901",
BirthDate = new DateTime(1964, 3, 16),
HireDate = new DateTime(1995, 1, 15),
Address = "351 S Hill St.",
City = "Los Angeles",
State = "CA",
Zipcode = "90013",
Phone = "+1(213) 555-9392",
Email = "jheart@dx-email.com",
Skype = "jheart_DX_skype"
});
}
}
}
#form {
padding: 10px 10px 110px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
left: 0;
position: absolute;
bottom: 0;
right: 0;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}