Resize Columns from a Button
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
| Preferred Framework | AngularJS |
Description
How can I resize the columns of the Kendo UI Grid for jQuery by using a custom button and AngularJS handlers?
Solution
The following example demonstrates how to resize the columns of the Grid by using a custom button and AngularJS handlers.
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div kendo-grid="kg" options="mainGridOptions">
</div>
<br /><br />
<button class="k-button" ng-click="onClick()">Disable resizing</button>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.onClick = function(){
$scope.isDisabled=true;
}
$scope.expandButton = function(){
$scope.kg.thead.prev().find("col").eq(0).width(200);
$scope.kg.tbody.prev().find("col").eq(0).width(200);
}
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title",
width: "120px"
},{
field: "Button",
width: "120px",
template: '<button class="k-button" ng-click="expandButton()" ng-disabled="isDisabled">Resize</button>'
}
]
};
})
</script>