Layout customization

14 Feb 201912 minutes to read

Size

Allows you to render the pivot client in different sizes. You can set the height and width under the size property.

Set size in pixels

  • HTML
  • <div id="PivotClient1"></div>
    <script>
        $(function() {
            $("#PivotClient1").ejPivotClient({
                //...
                size: { width: "1000px" , height: "685px" }
            });
        });
    </script>

    Th pivot client with decreased size from default size.

    JavaScript pivot client control with reduced size

    Set size in percentage

    You can also set the pivot client size in percentage.

    NOTE

    The size of the parent container should be set in pixels.

  • HTML
  • <div id="control" style="width:1000px; height:800px">
      <div id="PivotClient1">
        <script>
            $(function() {
                $("#PivotClient1").ejPivotClient({
                    //...
                    size:{ width: "50%" , height: "80%" }
                });
            });
        </script>
      </div>
    </div>

    NOTE

    The pivot client is set with minimum height and width to show the decent UI.

    Control placement

    Tab view

    In tab view representation, both the grid and the chart will be displayed in separate tabs. This can be set by using the controlPlacement property under the displaySettings option. By default, the Tab value is set.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
        //...
        displaySettings: {
            controlPlacement: ej.PivotClient.ControlPlacement.Tab
        }
    });

    JavaScript pivot client control with tab view

    Tile view

    In tile view representation, both the grid and the chart will be displayed one above the other, in the same layout. The tile view can be set by using the controlPlacement property under the displaySettings option.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
        //...
        displaySettings: {
            controlPlacement: ej.PivotClient.ControlPlacement.Tile
        }
    });

    JavaScript pivot client control with tile view

    Default view

    Grid view

    To display the grid control by default, set the defaultView property under the displaySettings option to Grid, which is the default value of the property.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            displaySettings: {
                defaultView: ej.PivotClient.DefaultView.Grid
            }
        });

    JavaScript pivot client control with grid view as default

    Chart view

    To display chart control by default, set the defaultView property to Chart.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            displaySettings: {
                defaultView: ej.PivotClient.DefaultView.Chart
            }
        });

    JavaScript pivot client control with chart view as default

    Display mode

    Grid only

    By setting the mode property under the displaySettings option to GridOnly, the pivot grid component alone will get rendered and the pivot chart will not be rendered.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            displaySettings: {
                mode: ej.PivotClient.DisplayMode.GridOnly
            }
        });

    JavaScript pivot client control with grid only view

    Chart Only

    By setting the mode property under the displaySettings option to ChartOnly, the pivot chart component alone will get rendered and the pivot grid will not be rendered.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            displaySettings: {
                mode: ej.PivotClient.DisplayMode.ChartOnly
            }
        });

    JavaScript pivot client control with chart only view

    Both chart and grid

    By setting the mode property under the displaySettings option to ChartAndGrid, the data is displayed in both the grid and chart. This is the default value of the mode property.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            displaySettings: {
                mode: ej.PivotClient.DisplayMode.ChartAndGrid
            }
        });

    JavaScript pivot client control with grid and chart view

    Toggle panel

    The toggle panel option allows you to toggle the visibility of axis element builder and cube dimension browser panels in the pivot client with a use of a button. The button can be added to the control by enabling the enableTogglePanel property under the displaySettings option. This property is disabled by default.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            displaySettings: {
                enableTogglePanel: true
            }
        });

    JavaScript pivot client control with toggle panel

    Collapse toggle panel by default

    Allows you to hide the “Cube Browser” and “Axis Element Builder” panels while initiating the widget. You can enable this option in the pivot client by setting the collapseCubeBrowserByDefault property to true.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            collapseCubeBrowserByDefault: true
        });

    JavaScript pivot client control with toggle panel by default

    Maximized/full screen view

    Full screen view helps to visualize the pivot grid and pivot chart controls in the pivot client precisely according to the browser window size. By selecting full screen icon in the toolbar, the control which is in the view gets maximized. The drill down action can also be performed in both the pivot grid and the pivot chart in the maximized view. This option is enabled by setting the enableFullScreen property under the displaySettings option to true. The value is false by default.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            displaySettings: {
                enableFullScreen: true
            }
        });

    Full screen icon in JavaScript pivot client control

    The following screenshot shows the maximized view of the pivot grid:

    Full screen view of JavaScript pivot client control

    Chart types

    While loading the pivot client initially, the pivot chart widget can be rendered in any one of the available chart types using the chartType property.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            chartType: ej.PivotChart.ChartTypes.Area
        });

    The chartType property takes column chart by default. The available chart types are column, stacking column, bar, stacking bar, line, spline, step line, area, spline area, step area, stacking area, pie, funnel, and pyramid.

    The chart type can also be changed dynamically through the toolbar icon.

    Chart types in JavaScript pivot client control

    JavaScript pivot client control with line chart type

    Pivot tree map

    IMPORTANT

    This feature is applicable only for the OLAP data source bound from the server-side.

    You can include the pivot tree map component as one of the chart type by setting the enablePivotTreeMap property to true.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            enablePivotTreeMap: true
        });

    Treemap icon in chart types panel of JavaScript pivot client control

    Treemap in JavaScript pivot client control

    Report Toolbar

    You can customize the display of toolbar by enabling/disabling the visibility of each icon. This can be achieved by setting the properties under the toolbarIconSettings option to false. The values are true by default.

  • JAVASCRIPT
  • $("#PivotClient1").ejPivotClient({
            //...
            //Disable toolbar icon in PivotClient.
            toolbarIconSettings: {
                enableAddReport: false,
                enableNewReport: false,
                enableRemoveReport: false
            }
        });

    Report toolbar in JavaScript pivot client control

    The following screenshot will be displayed after disabling the toolbar icons.

    Hiding report icons from toolbar of JavaScript pivot client control

    The following table will explain you the available properties for the customization of the report toolbar.

    Property Description
    enableNewReport Allows you to set the visibility of New Report icon in the toolbar panel.
    enableAddReport Allows you to set the visibility of Add Report icon in the toolbar panel.
    enableRemoveReport Allows you to set the visibility of Remove Report icon in the toolbar panel.
    enableRenameReport Allows you to set the visibility of Rename Report icon in the toolbar panel.
    enableDBManipulation Allows you to set the visibility of DB Manipulation icon in the toolbar panel.
    enableMDXQuery Allows you to set the visibility of MDX Query icon in the toolbar panel.
    enableDeferUpdate Allows you to set the visibility of Defer Update icon in the toolbar panel.
    enableExcelExport Allows you to set the visibility of Excel Export icon in the toolbar panel.
    enableWordExport Allows you to set the visibility of Word Export icon in the toolbar panel.
    enablePdfExport Allows you to set the visibility of PDF Export icon in the toolbar panel.
    enableFullScreen Allows you to set the visibility of Full Screen icon in the toolbar panel.
    enableSortOrFilterColumn Allows you to set the visibility of Sort/Filter Column icon in the toolbar panel.
    enableSortOrFilterRow Allows you to set the visibility of Sort/Filter Row icon in the toolbar panel.
    enableToggleAxis Allows you to set the visibility of Toggle Axis icon in the toolbar panel.
    enableChartTypes Allows you to set the visibility of Chart Types icon in the toolbar panel.
    enableCalculatedMember Allows you to set the visibility of Calculated Member icon in the toolbar panel.