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.

Example
     <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>

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

close
Dummy