We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: JavaScript |
Control: ejPivotGrid |
Published Date: April 22, 2016 |
Last Revised Date: April 22, 2016

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

  1. Initially while designing a web page, create a div tag for PivotGrid and an input tag for the drop-down list.
  2. The required attributes of PivotGrid and drop-down list needs to be defined inside their respective tags.



  1. The angular reference name, e-layout” attribute of PivotGrid and “e-value” attribute of drop-down list should be the same.
  2. In script-side, an angular module need to be created in-order to set the values for both the controls.



  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.gridLayoutis 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.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon