Column Resizing
Users can resize DataGrid columns if the allowColumnResizing option is enabled. When a user resizes a column, the grid's behavior depends on the columnResizingMode option value:
-
"nextColumn": the widget resizes its adjacent column; total widget width stays the same.
-
"widget": the widget size increases or decreases; all other columns maintain their widths.
Use the drop-down list below the DataGrid to try both values.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
var resizingModes = ["nextColumn", "widget"];
$scope.columnResizingMode = resizingModes[0];
$scope.dataGridOptions = {
dataSource: customers,
allowColumnResizing: true,
showBorders: true,
columnMinWidth: 50,
columnAutoWidth: true,
columns: ["CompanyName", "City", "State", "Phone", "Fax"],
bindingOptions: {
columnResizingMode: "columnResizingMode",
}
};
$scope.resizingOptions = {
items: resizingModes,
width: 250,
onValueChanged: function(data) {
$scope.columnResizingMode = data.value;
},
bindingOptions: {
value: "columnResizingMode",
}
};
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.3/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.3/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.3/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="orders" dx-data-grid="dataGridOptions"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Column resizing mode:</span>
<div id="select-resizing" dx-select-box="resizingOptions"></div>
</div>
</div>
</div>
</body>
</html>
#orders {
max-height: 310px;
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 10px;
}
.option > span {
position: relative;
top: 2px;
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
var customers = [{
"ID": 1,
"CompanyName": "Super Mart of the West",
"Address": "702 SW 8th Street",
"City": "Bentonville",
"State": "Arkansas",
"Zipcode": 72716,
"Phone": "(800) 555-2797",
"Fax": "(800) 555-2171",
"Website": "http://www.nowebsitesupermart.com"
}, {
"ID": 2,
"CompanyName": "Electronics Depot",
"Address": "2455 Paces Ferry Road NW",
"City": "Atlanta",
"State": "Georgia",
"Zipcode": 30339,
"Phone": "(800) 595-3232",
"Fax": "(800) 595-3231",
"Website": "http://www.nowebsitedepot.com"
}, {
"ID": 3,
"CompanyName": "K&S Music",
"Address": "1000 Nicllet Mall",
"City": "Minneapolis",
"State": "Minnesota",
"Zipcode": 55403,
"Phone": "(612) 304-6073",
"Fax": "(612) 304-6074",
"Website": "http://www.nowebsitemusic.com"
}, {
"ID": 4,
"CompanyName": "Tom's Club",
"Address": "999 Lake Drive",
"City": "Issaquah",
"State": "Washington",
"Zipcode": 98027,
"Phone": "(800) 955-2292",
"Fax": "(800) 955-2293",
"Website": "http://www.nowebsitetomsclub.com"
}, {
"ID": 5,
"CompanyName": "E-Mart",
"Address": "3333 Beverly Rd",
"City": "Hoffman Estates",
"State": "Illinois",
"Zipcode": 60179,
"Phone": "(847) 286-2500",
"Fax": "(847) 286-2501",
"Website": "http://www.nowebsiteemart.com"
}, {
"ID": 6,
"CompanyName": "Walters",
"Address": "200 Wilmot Rd",
"City": "Deerfield",
"State": "Illinois",
"Zipcode": 60015,
"Phone": "(847) 940-2500",
"Fax": "(847) 940-2501",
"Website": "http://www.nowebsitewalters.com"
}, {
"ID": 7,
"CompanyName": "StereoShack",
"Address": "400 Commerce S",
"City": "Fort Worth",
"State": "Texas",
"Zipcode": 76102,
"Phone": "(817) 820-0741",
"Fax": "(817) 820-0742",
"Website": "http://www.nowebsiteshack.com"
}, {
"ID": 8,
"CompanyName": "Circuit Town",
"Address": "2200 Kensington Court",
"City": "Oak Brook",
"State": "Illinois",
"Zipcode": 60523,
"Phone": "(800) 955-2929",
"Fax": "(800) 955-9392",
"Website": "http://www.nowebsitecircuittown.com"
}, {
"ID": 9,
"CompanyName": "Premier Buy",
"Address": "7601 Penn Avenue South",
"City": "Richfield",
"State": "Minnesota",
"Zipcode": 55423,
"Phone": "(612) 291-1000",
"Fax": "(612) 291-2001",
"Website": "http://www.nowebsitepremierbuy.com"
}, {
"ID": 10,
"CompanyName": "ElectrixMax",
"Address": "263 Shuman Blvd",
"City": "Naperville",
"State": "Illinois",
"Zipcode": 60563,
"Phone": "(630) 438-7800",
"Fax": "(630) 438-7801",
"Website": "http://www.nowebsiteelectrixmax.com"
}, {
"ID": 11,
"CompanyName": "Video Emporium",
"Address": "1201 Elm Street",
"City": "Dallas",
"State": "Texas",
"Zipcode": 75270,
"Phone": "(214) 854-3000",
"Fax": "(214) 854-3001",
"Website": "http://www.nowebsitevideoemporium.com"
}, {
"ID": 12,
"CompanyName": "Screen Shop",
"Address": "1000 Lowes Blvd",
"City": "Mooresville",
"State": "North Carolina",
"Zipcode": 28117,
"Phone": "(800) 445-6937",
"Fax": "(800) 445-6938",
"Website": "http://www.nowebsitescreenshop.com"
}];