Your search did not match any results.
DataGrid

Column Resizing

Documentation
The widget allows a user to resize columns at runtime. They can be resized in two different modes: by changing the width of the next column or the width of the widget. To switch the current mode, use the "Column resizing mode" select box.
Copy to CodePen
Apply
Reset
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, 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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.light.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.2/jszip.min.js"></script> <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/17.1.7/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: #f5f5f5; } .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" }];