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

Solution:

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.

HTML:

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

JavaScript:

 
<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"];
            });
</script>
 

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.