Articles in this section
Category / Section

How to create a PivotGrid with angular support and grid layout changing option?

1 min read


You can create a PivotGrid with angular support and grid layout option by using the following steps.

Step 1:

Initially while designing a web page, create a div tag for PivotGrid and an input tag for the drop-down list.

Step 2:

The required attributes of PivotGrid and drop-down list needs to be defined inside their respective tags.


<div id="PivotGrid" ej-pivotgrid e-url="url" e-layout="gridLayout" />
<input type="text" ej-dropdownlist e-datasource="layout" e-value="gridLayout" e-selecteditemindex="1"/>


Step 3:

The angular reference name, “e-layout” attribute of PivotGrid and “e-value” attribute of drop-down list should be the same.

Step 4:

In script-side, an angular module need to be created in-order to set the values for both the controls.


<script type="text/javascript">
angular.module('gridCtrl', ['ejangular'])
   .controller('PivotGridCtrl', function ($scope) {
       $scope.isResponsive = true;
       $scope.url = "../wcf/OLAPService.svc";
       $scope.gridLayout = ej.PivotGrid.Layout.Normal;
       $scope.layout = ["normal", "noSummaries", "normalTopSummary", "excelLikeLayout"];


  1. Through the parameter “$scope”, we can set the available properties.
  2. An array which contains the actual grid layout names need to be bound in the data source of the drop-down list. It can be set through “$scope.layout”.
  3. The common field for both the controls, “$scope.gridLayout” is initially set to “Normal”.
  4. The value for the field “$scope.gridLayout” will be changed depending on the selected value from the drop-down list.
  5. The selected value of the drop-down list will be set as the grid layout in PivotGrid control.
Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment