Backend API
@using DevExtreme.NETCore.Demos.Models
@model IEnumerable<Order>
<div class="widget-container">
<div class="dx-fieldset">
<div class="dx-fieldset-header">Resizable DataGrid</div>
<div class="dx-field">
@(Html.DevExtreme().Resizable()
.ID("gridContainer")
.MinWidth(400)
.MinHeight(150)
.MaxHeight(370)
.Area(".widget-container .dx-field")
.Content(Html.DevExtreme().DataGrid<Order>()
.ID("grid")
.DataSource(Model, new[] { "ID" })
.ShowBorders(true)
.Height("100%")
.Paging(p => p.PageSize(8))
.Scrolling(s => s.Mode(GridScrollingMode.Virtual))
.Columns(columns => {
columns.AddFor(m => m.OrderNumber)
.AllowGrouping(false)
.Width(130);
columns.AddFor(m => m.CustomerStoreCity);
columns.AddFor(m => m.CustomerStoreState);
columns.AddFor(m => m.Employee);
columns.AddFor(m => m.OrderDate);
columns.AddFor(m => m.SaleAmount)
.Format(Format.Currency);
})
.ToString()
)
)
</div>
</div>
</div>
<div class="options">
<div class="caption">Resizable Options</div>
<div class="option">
<div>Handles</div>
@(Html.DevExtreme().TagBox()
.InputAttr("aria-label", "Behavior")
.Items(new[] { "left", "top", "right", "bottom" })
.Value(new[] { "left", "top", "right", "bottom" })
.OnValueChanged("handlesChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Keep aspect ratio")
.Value(true)
.OnValueChanged("keepAspectRatioChanged")
)
</div>
</div>
<script>
const allHandles = ["left", "top", "right", "bottom"];
function keepAspectRatioChanged(e) {
const resizable = $("#gridContainer").dxResizable('instance');
resizable.option('keepAspectRatio', e.value);
}
function handlesChanged({ value }) {
const resizable = $("#gridContainer").dxResizable('instance');
const resizableClasses = allHandles.reduce((classes, handle) => {
const newClass = value.includes(handle) ? '' : ` no-${handle}-handle`;
return classes + newClass;
}, '');
resizable.option({
handles: value.join(" "),
elementAttr: {
class: resizableClasses
}
});
}
</script>
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ResizableController : Controller {
public ActionResult Overview() {
return View(SampleData.Orders);
}
}
}
using System;
using System.ComponentModel.DataAnnotations;
namespace DevExtreme.NETCore.Demos.Models {
public class Order {
public int ID { get; set; }
[Display(Name = "Invoice Number")]
public int OrderNumber { get; set; }
public DateTime OrderDate { get; set; }
public int SaleAmount { get; set; }
public string Terms { get; set; }
public int TotalAmount { get; set; }
[Display(Name = "State")]
public string CustomerStoreState { get; set; }
[Display(Name = "City")]
public string CustomerStoreCity { get; set; }
public string Employee { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Order> Orders = new[] {
new Order {
ID = 1,
OrderNumber = 35703,
OrderDate = DateTime.Parse("2014/04/10"),
SaleAmount = 11800,
Terms = "15 Days",
TotalAmount = 12175,
CustomerStoreState = "California",
CustomerStoreCity = "Los Angeles",
Employee = "Harv Mudd"
},
new Order {
ID = 4,
OrderNumber = 35711,
OrderDate = DateTime.Parse("2014/01/12"),
SaleAmount = 16050,
Terms = "15 Days",
TotalAmount = 16550,
CustomerStoreState = "California",
CustomerStoreCity = "San Jose",
Employee = "Jim Packard"
},
new Order {
ID = 5,
OrderNumber = 35714,
OrderDate = DateTime.Parse("2014/01/22"),
SaleAmount = 14750,
Terms = "15 Days",
TotalAmount = 15250,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Las Vegas",
Employee = "Harv Mudd"
},
new Order {
ID = 7,
OrderNumber = 35983,
OrderDate = DateTime.Parse("2014/02/07"),
SaleAmount = 3725,
Terms = "15 Days",
TotalAmount = 3850,
CustomerStoreState = "Colorado",
CustomerStoreCity = "Denver",
Employee = "Todd Hoffman"
},
new Order {
ID = 9,
OrderNumber = 36987,
OrderDate = DateTime.Parse("2014/03/11"),
SaleAmount = 14200,
Terms = "15 Days",
TotalAmount = 14800,
CustomerStoreState = "Utah",
CustomerStoreCity = "Salt Lake City",
Employee = "Clark Morgan"
},
new Order {
ID = 11,
OrderNumber = 38466,
OrderDate = DateTime.Parse("2014/03/01"),
SaleAmount = 7800,
Terms = "15 Days",
TotalAmount = 8200,
CustomerStoreState = "California",
CustomerStoreCity = "Los Angeles",
Employee = "Harv Mudd"
},
new Order {
ID = 14,
OrderNumber = 39420,
OrderDate = DateTime.Parse("2014/02/15"),
SaleAmount = 20500,
Terms = "15 Days",
TotalAmount = 9100,
CustomerStoreState = "California",
CustomerStoreCity = "San Jose",
Employee = "Jim Packard"
},
new Order {
ID = 15,
OrderNumber = 39874,
OrderDate = DateTime.Parse("2014/02/04"),
SaleAmount = 9050,
Terms = "30 Days",
TotalAmount = 19100,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Las Vegas",
Employee = "Harv Mudd"
},
new Order {
ID = 18,
OrderNumber = 42847,
OrderDate = DateTime.Parse("2014/02/15"),
SaleAmount = 20400,
Terms = "30 Days",
TotalAmount = 20800,
CustomerStoreState = "Wyoming",
CustomerStoreCity = "Casper",
Employee = "Todd Hoffman"
},
new Order {
ID = 19,
OrderNumber = 43982,
OrderDate = DateTime.Parse("2014/05/29"),
SaleAmount = 6050,
Terms = "30 Days",
TotalAmount = 6250,
CustomerStoreState = "Utah",
CustomerStoreCity = "Salt Lake City",
Employee = "Clark Morgan"
},
new Order {
ID = 29,
OrderNumber = 56272,
OrderDate = DateTime.Parse("2014/02/06"),
SaleAmount = 15850,
Terms = "30 Days",
TotalAmount = 16350,
CustomerStoreState = "Utah",
CustomerStoreCity = "Salt Lake City",
Employee = "Clark Morgan"
},
new Order {
ID = 30,
OrderNumber = 57429,
OrderDate = DateTime.Parse("2013/12/31"),
SaleAmount = 11050,
Terms = "30 Days",
TotalAmount = 11400,
CustomerStoreState = "Arizona",
CustomerStoreCity = "Phoenix",
Employee = "Clark Morgan"
},
new Order {
ID = 32,
OrderNumber = 58292,
OrderDate = DateTime.Parse("2014/05/13"),
SaleAmount = 13500,
Terms = "15 Days",
TotalAmount = 13800,
CustomerStoreState = "California",
CustomerStoreCity = "Los Angeles",
Employee = "Harv Mudd"
},
new Order {
ID = 36,
OrderNumber = 62427,
OrderDate = DateTime.Parse("2014/01/27"),
SaleAmount = 23500,
Terms = "15 Days",
TotalAmount = 24000,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Las Vegas",
Employee = "Harv Mudd"
},
new Order {
ID = 39,
OrderNumber = 65977,
OrderDate = DateTime.Parse("2014/02/05"),
SaleAmount = 2550,
Terms = "15 Days",
TotalAmount = 2625,
CustomerStoreState = "Wyoming",
CustomerStoreCity = "Casper",
Employee = "Todd Hoffman"
},
new Order {
ID = 40,
OrderNumber = 66947,
OrderDate = DateTime.Parse("2014/03/23"),
SaleAmount = 3500,
Terms = "15 Days",
TotalAmount = 3600,
CustomerStoreState = "Utah",
CustomerStoreCity = "Salt Lake City",
Employee = "Clark Morgan"
},
new Order {
ID = 42,
OrderNumber = 68428,
OrderDate = DateTime.Parse("2014/04/10"),
SaleAmount = 10500,
Terms = "15 Days",
TotalAmount = 10900,
CustomerStoreState = "California",
CustomerStoreCity = "Los Angeles",
Employee = "Harv Mudd"
},
new Order {
ID = 43,
OrderNumber = 69477,
OrderDate = DateTime.Parse("2014/03/09"),
SaleAmount = 14200,
Terms = "15 Days",
TotalAmount = 14500,
CustomerStoreState = "California",
CustomerStoreCity = "Anaheim",
Employee = "Harv Mudd"
},
new Order {
ID = 46,
OrderNumber = 72947,
OrderDate = DateTime.Parse("2014/01/14"),
SaleAmount = 13350,
Terms = "30 Days",
TotalAmount = 13650,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Las Vegas",
Employee = "Harv Mudd"
},
new Order {
ID = 47,
OrderNumber = 73088,
OrderDate = DateTime.Parse("2014/03/25"),
SaleAmount = 8600,
Terms = "30 Days",
TotalAmount = 8850,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Reno",
Employee = "Clark Morgan"
},
new Order {
ID = 50,
OrderNumber = 76927,
OrderDate = DateTime.Parse("2014/04/27"),
SaleAmount = 9800,
Terms = "30 Days",
TotalAmount = 10050,
CustomerStoreState = "Utah",
CustomerStoreCity = "Salt Lake City",
Employee = "Clark Morgan"
},
new Order {
ID = 51,
OrderNumber = 77297,
OrderDate = DateTime.Parse("2014/04/30"),
SaleAmount = 10850,
Terms = "30 Days",
TotalAmount = 11100,
CustomerStoreState = "Arizona",
CustomerStoreCity = "Phoenix",
Employee = "Clark Morgan"
},
new Order {
ID = 56,
OrderNumber = 84744,
OrderDate = DateTime.Parse("2014/02/10"),
SaleAmount = 4650,
Terms = "30 Days",
TotalAmount = 4750,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Las Vegas",
Employee = "Harv Mudd"
},
new Order {
ID = 57,
OrderNumber = 85028,
OrderDate = DateTime.Parse("2014/05/17"),
SaleAmount = 2575,
Terms = "30 Days",
TotalAmount = 2625,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Reno",
Employee = "Clark Morgan"
},
new Order {
ID = 59,
OrderNumber = 87297,
OrderDate = DateTime.Parse("2014/04/21"),
SaleAmount = 14200,
Terms = "30 Days",
CustomerStoreState = "Wyoming",
CustomerStoreCity = "Casper",
Employee = "Todd Hoffman"
},
new Order {
ID = 60,
OrderNumber = 88027,
OrderDate = DateTime.Parse("2014/02/14"),
SaleAmount = 13650,
Terms = "30 Days",
TotalAmount = 14050,
CustomerStoreState = "Utah",
CustomerStoreCity = "Salt Lake City",
Employee = "Clark Morgan"
},
new Order {
ID = 65,
OrderNumber = 94726,
OrderDate = DateTime.Parse("2014/05/22"),
SaleAmount = 20500,
Terms = "15 Days",
TotalAmount = 20800,
CustomerStoreState = "California",
CustomerStoreCity = "San Jose",
Employee = "Jim Packard"
},
new Order {
ID = 66,
OrderNumber = 95266,
OrderDate = DateTime.Parse("2014/03/10"),
SaleAmount = 9050,
Terms = "15 Days",
TotalAmount = 9250,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Las Vegas",
Employee = "Harv Mudd"
},
new Order {
ID = 69,
OrderNumber = 98477,
OrderDate = DateTime.Parse("2014/01/01"),
SaleAmount = 23500,
Terms = "15 Days",
TotalAmount = 23800,
CustomerStoreState = "Wyoming",
CustomerStoreCity = "Casper",
Employee = "Todd Hoffman"
},
new Order {
ID = 70,
OrderNumber = 99247,
OrderDate = DateTime.Parse("2014/02/08"),
SaleAmount = 2100,
Terms = "15 Days",
TotalAmount = 2150,
CustomerStoreState = "Utah",
CustomerStoreCity = "Salt Lake City",
Employee = "Clark Morgan"
},
new Order {
ID = 78,
OrderNumber = 174884,
OrderDate = DateTime.Parse("2014/04/10"),
SaleAmount = 7200,
Terms = "30 Days",
TotalAmount = 7350,
CustomerStoreState = "Colorado",
CustomerStoreCity = "Denver",
Employee = "Todd Hoffman"
},
new Order {
ID = 81,
OrderNumber = 188877,
OrderDate = DateTime.Parse("2014/02/11"),
SaleAmount = 8750,
Terms = "30 Days",
TotalAmount = 8900,
CustomerStoreState = "Arizona",
CustomerStoreCity = "Phoenix",
Employee = "Clark Morgan"
},
new Order {
ID = 82,
OrderNumber = 191883,
OrderDate = DateTime.Parse("2014/02/05"),
SaleAmount = 9900,
Terms = "30 Days",
TotalAmount = 10150,
CustomerStoreState = "California",
CustomerStoreCity = "Los Angeles",
Employee = "Harv Mudd"
},
new Order {
ID = 83,
OrderNumber = 192474,
OrderDate = DateTime.Parse("2014/01/21"),
SaleAmount = 12800,
Terms = "30 Days",
TotalAmount = 13100,
CustomerStoreState = "California",
CustomerStoreCity = "Anaheim",
Employee = "Harv Mudd"
},
new Order {
ID = 84,
OrderNumber = 193847,
OrderDate = DateTime.Parse("2014/03/21"),
SaleAmount = 14100,
Terms = "30 Days",
TotalAmount = 14350,
CustomerStoreState = "California",
CustomerStoreCity = "San Diego",
Employee = "Harv Mudd"
},
new Order {
ID = 85,
OrderNumber = 194877,
OrderDate = DateTime.Parse("2014/03/06"),
SaleAmount = 4750,
Terms = "30 Days",
TotalAmount = 4950,
CustomerStoreState = "California",
CustomerStoreCity = "San Jose",
Employee = "Jim Packard"
},
new Order {
ID = 86,
OrderNumber = 195746,
OrderDate = DateTime.Parse("2014/05/26"),
SaleAmount = 9050,
Terms = "30 Days",
TotalAmount = 9250,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Las Vegas",
Employee = "Harv Mudd"
},
new Order {
ID = 87,
OrderNumber = 197474,
OrderDate = DateTime.Parse("2014/03/02"),
SaleAmount = 6400,
Terms = "30 Days",
TotalAmount = 6600,
CustomerStoreState = "Nevada",
CustomerStoreCity = "Reno",
Employee = "Clark Morgan"
},
new Order {
ID = 88,
OrderNumber = 198746,
OrderDate = DateTime.Parse("2014/05/09"),
SaleAmount = 15700,
Terms = "30 Days",
TotalAmount = 16050,
CustomerStoreState = "Colorado",
CustomerStoreCity = "Denver",
Employee = "Todd Hoffman"
},
new Order {
ID = 91,
OrderNumber = 214222,
OrderDate = DateTime.Parse("2014/02/08"),
SaleAmount = 11050,
Terms = "30 Days",
TotalAmount = 11250,
CustomerStoreState = "Arizona",
CustomerStoreCity = "Phoenix",
Employee = "Clark Morgan"
}
};
}
}
.widget-container {
width: calc(100% - 360px);
height: 100%;
margin-right: 320px;
position: absolute;
z-index: 1501;
}
.dx-fieldset,
.dx-field {
width: 100%;
height: calc(100% - 60px);
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 260px;
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 10px;
}
#gridContainer {
padding: 10px;
height: 300px;
}
#grid {
border: 1px solid black;
}
.no-left-handle .dx-resizable-handle-top,
.no-left-handle .dx-resizable-handle-bottom {
left: 10px;
width: calc(100% - 10px);
}
.no-right-handle .dx-resizable-handle-top,
.no-right-handle .dx-resizable-handle-bottom {
right: 10px;
width: calc(100% - 10px);
}
.no-right-handle.no-left-handle .dx-resizable-handle-top,
.no-right-handle.no-left-handle .dx-resizable-handle-bottom {
left: 10px;
width: calc(100% - 20px);
}
.no-top-handle .dx-resizable-handle-right,
.no-top-handle .dx-resizable-handle-left {
top: 10px;
height: calc(100% - 10px);
}
.no-bottom-handle .dx-resizable-handle-right,
.no-bottom-handle .dx-resizable-handle-left {
bottom: 10px;
height: calc(100% - 10px);
}
.no-top-handle.no-bottom-handle .dx-resizable-handle-left,
.no-top-handle.no-bottom-handle .dx-resizable-handle-right {
top: 10px;
height: calc(100% - 20px);
}
.dx-resizable-handle-right {
border-right: 1px dotted #999;
}
.dx-resizable-handle-top {
border-top: 1px dotted #999;
}
.dx-resizable-handle-left {
border-left: 1px dotted #999;
}
.dx-resizable-handle-bottom {
border-bottom: 1px dotted #999;
}
.dx-resizable-handle::after {
content: "";
position: absolute;
width: 9px;
height: 9px;
border: none;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
}
.dx-resizable-handle-right::after {
top: 50%;
right: -5px;
transform: translateY(-50%);
}
.dx-resizable-handle-left::after {
top: 50%;
left: -5px;
transform: translateY(-50%);
}
.dx-resizable-handle-corner-top-left::after {
top: -4px;
left: -4px;
}
.dx-resizable-handle-corner-top-right::after {
top: -4px;
right: -4px;
}
.dx-resizable-handle-corner-bottom-left::after {
bottom: -4px;
left: -4px;
}
.dx-resizable-handle-corner-bottom-right::after {
bottom: -4px;
right: -4px;
}
.dx-resizable-handle-top::after {
top: -5px;
left: 50%;
transform: translateX(-50%);
}
.dx-resizable-handle-bottom::after {
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
You can display resize handles on edges or corners. Use the following keywords to set up the handles property: top, bottom, left, and right. If you specify two adjacent sides (for example, "bottom right"), the control displays a handle in the corner.
The keepAspectRatio property specifies whether a corner handle resizes content proportionally. Set this property to false to allow free-form resize operations.