Edit this page

Resize Columns from a Button

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">
        <br /><br />
        <button class="k-button" ng-click="onClick()">Disable resizing</button>

      angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){

        $scope.onClick = function(){

        $scope.expandButton = function(){

        $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>'

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article