CrosstabControl for Web (#158)

* add map info

* fix year

* cross tab instead of pivot grid

* cross tab instead of pivot grid

Co-authored-by: Natalia Kazakova (DevExpress) <[email protected]>
Co-authored-by: Natalia Kazakova <[email protected]>
Co-authored-by: serge-andreyev <[email protected]>

Author: 4 people

interface-elements-for-web/articles/report-designer/configure-design-settings/enable-the-right-to-left-layout.md

@@ -26,7 +26,8 @@ The following controls support this feature:
 * [Check Box](../use-report-elements/use-basic-report-controls/check-box.md)
 * [Page Info](../use-report-elements/use-basic-report-controls/page-info.md)
 * [Panel](../use-report-elements/use-basic-report-controls/panel.md)
-* [Pivot Grid](../use-report-elements/use-charts-and-pivot-grids.md)
+* [Cross Tab](../create-reports/cross-tab-reports.md)
+* Pivot Grid (deprecated)
 * [Table](../use-report-elements/use-tables.md)
 * [Table of Contents](../use-report-elements/use-basic-report-controls/table-of-contents.md)
 

interface-elements-for-web/articles/report-designer/create-reports.md

@@ -38,10 +38,7 @@ This section contains tutorials that explain how to create different reports.
 
 ### [Cross-Tab Reports](create-reports/cross-tab-reports.md)
 
-![](../../images/cross-tab-report-preview.png)
-
-> [!Note]
-> See the [Use Charts and Pivot Grids](use-report-elements/use-charts-and-pivot-grids.md) documentation section for information on how to use Pivot Grids and Charts in your reports.
+![](../../images/eurd-web-cross-tab-report-result.png)
 
 ## Multi-Column Reports
 

interface-elements-for-web/articles/report-designer/create-reports/cross-tab-reports.md

@@ -4,69 +4,122 @@ author: Anna Vekhina
 ---
 # Cross-Tab Reports
 
-A cross-tab report displays complex multi-dimensional data, such as summary statistics, surveys, and market research information. This report uses a Pivot Grid control that calculates automatic summaries and grand totals across grouped rows and columns.
+A cross-tab report displays complex multi-dimensional data, such as summary statistics, surveys, and market research information. This report uses a Cross Tab control that calculates automatic summaries and grand totals across grouped rows and columns.
 
 ![](../../../images/eurd-web-cross-tab-report-result.png)
 
-## Add a Pivot Grid and Bind It to Data
+## Add a Cross Tab Control and Bind to Data
 
 1. [Create a new report](../add-new-reports.md) or [open an existing one](../open-reports.md).
 
-2. Drop the **Pivot Grid** control from the [Toolbox](../report-designer-tools/toolbox.md) onto the [Detail band](../introduction-to-banded-reports.md).
+2. Drop the **Cross Tab** control from the [Toolbox](../report-designer-tools/toolbox.md) onto the [Detail band](../introduction-to-banded-reports.md).
 
-    ![](../../../images/eurd-web-add-pivot-grid-to-report.png)
+    ![](../../../images/eurd-web-add-cross-tab-to-report.png)
 
-    You cannot place a Pivot Grid in another report control (for example, [Table Cell](../use-report-elements/use-tables.md) or [Panel](../use-report-elements/use-basic-report-controls/panel.md)) because its width cannot be determined at design time.
+    You cannot place a Cross Tab in another report control ([Table Cell](../use-report-elements/use-tables.md) or [Panel](../use-report-elements/use-basic-report-controls/panel.md)).
 
 3. Invoke the designer [menu](../report-designer-tools/menu.md) and click **Add Data Source...**.
 
    ![](../../../images/eurd-web-add-data-source-menu.png)
 
    Navigate through the invoked [Data Source Wizard](../report-designer-tools/data-source-wizard.md)'s pages to set up the data source. See the [Bind to Data](../bind-to-data.md) section for more information. 
 
-3. After the data source is created, you can specify the Pivot Grid's **Data Source** and **Data Member** properties. Expand the **Actions** category and to bind the Pivot Grid to data.
+4. Select the entire Cross Tab control. For this, click the designer surface outside the control and drag the mouse to the control until the entire control is selected. 
 
-    ![](../../../images/eurd-web-cross-tab-pivot-grid-bind-to-data-source.png)
+    ![](../../../images/eurd-web-select-cross-tab-control.gif)
+
+5. Bind the Cross Tab control to the data source. In the [Properties Panel](../report-designer-tools/ui-panels/properties-panel.md) expand the **CROSS TAB TASKS** section and specify the **Data Source** and **Data Member** properties.
+
+    ![](../../../images/eurd-web-cross-tab-bind-to-data-source.png)
 
     > [!NOTE]
-    > Ensure that a report's **Data Source** property is not set if you place the Pivot Grid in the Detail band. Otherwise, the Pivot Grid data is printed as many times as there are rows in the report data source.
+    > Ensure that a report's **Data Source** property is not set if you place the Cross Tab in the Detail band. Otherwise, the Cross Tab data is printed as many times as there are rows in the report data source.
+
+
+## Define Cross Tab Fields
+
+1. In the **Properties Panel**, expand the **DATA** section and click **plus** in the **ROW FIELDS** section to add a Row Field. Select the field name from the drop-down list:
+
+    ![](../../../images/eurd-web-cross-tab-specify-row.png)
+
+    You can repeat these steps to add another row field.
+
+2. In the **Properties Panel**, expand the **DATA** section and click **plus** in the **COLUMN FIELDS** section to add a Column Field. Select the field from the drop-down list:
+
+    ![](../../../images/eurd-web-cross-tab-specify-column.png)
+
+    You can repeat these steps to add another column field.
+
+
+3. In the **Properties Panel**, expand the **DATA** section and click **plus** in the **DATA FIELDS** section to add a Data Field. Select the field from the drop-down list:
+
+    ![](../../../images/eurd-web-cross-tab-specify-data.png)
+
+
+The resulting cross-tab control looks as follows:
+
+![](../../../images/eurd-web-cross-tab-fields-defined.png)
+
+
+## Specify Group Settings
+
+Select the Cross Tab cell bound to the `OrderDate` field and click its smart tag. Set the **GroupInterval** property to `DateQuarter` to group data by quarters.
+
+![](../../../images/eurd-web-cross-tab-group-quarter.png)
+
+Switch to the **Report Viewer** to preview the result:
+
+![](../../../images/eurd-web-cross-tab-preview-group-quarter.png)
+
+## Format Data
+
+1. Format the currency data. Hold down CTRL, and select the following cells:
+
+    - the cell bound to the `ExtendedPrice` field
+    - the cells that display column and row totals
+    - the cells that display column and row grand totals
+
+    ![](../../../images/eurd-web-cross-tab-select-currency-data-cells.png)
+
+    Switch to the Properties window and set the `TextFormatString` property to **{0:c}**.
+
+    ![](../../../images/eurd-web-cross-tab-format-currency-data-cells.png)
+
+2. Select the cell bound to the `OrderDate` field:
+
+   ![](../../../images/eurd-web-cross-tab-select-order-date-cell.png)
 
+   Set the **Text Format String** option to `Quarter {0}`.
 
-## Define the Pivot Grid's Content
+   ![](../../../images/eurd-web-cross-tab-format-order-date-cell.png)
 
-1. To add a field to the particular grid area, expand the **Actions** category and click one of the following buttons.
+Switch to the Report Viewer to observe the result:
 
-    | Icon | Description |
-    |---|---|
-    | ![](../../../images/eurd-web-cross-tab-add-filter-header.png) | Adds a field to the **Filter Header** area. This field is available for further customizations. |
-    | ![](../../../images/eurd-web-cross-tab-add-data-header.png) | Adds a field to the **Data Header** area. The summaries will be calculated for all the cells, each cell is identified by a specific column and row. |
-    | ![](../../../images/eurd-web-cross-tab-add-column-header.png) | Adds a field to the **Column Header** area. This field's values will represent column headers. |
-    | ![](../../../images/eurd-web-cross-tab-add-row-header.png) | Adds a field to the **Row Header** area. This field's values will represent row headers.|
+![](../../../images/eurd-web-cross-tab-format-data-result.png)
 
-    Use these buttons to define the Pivot Grid's layout.
 
-    ![](../../../images/eurd-web-cross-tab-pivot-grid-layout.png)
+## Customize Appearance
 
-2. To adjust a Pivot Grid field, select the required grid field on the design surface, switch to the **Properties panel** and expand the **Actions** category. Specify the **Data Column Name** property to bind a grid field to a data source field.
+1. Select the entire Cross Tab control, switch to the Properties window, and expand the **STYLES** section. Expand the **GENERAL STYLE** section and set the Border Color to 160, 160, 160. This value applies to all Cross Tab cells.
 
-    ![](../../../images/eurd-web-cross-tab-pivot-grid-content.png)
+    ![](../../../images/eurd-web-cross-tab-styles.png)
 
-    You can also specify the field position, using the **Area** property or change the order of fields within their area, specifying the **Area Index** property. If required, it is possible to customize many other properties for the Pivot Grid and its fields.
+2. Expand sections for the **HEADER AREA**, **DATA AREA** and **TOTAL AREA** styles and adjust the appearance as your needs dictate.
 
-## Adjust the Pivot Grid's Layout
+## Adjust the Content Size
 
-Set the report's **Vertical Content Splitting** property to **Smart** to split the Pivot Grid along the column borders if it does not fit the report's page in Print Preview.
+Select the column bound to the **FullName** field and set the `ColumnAutoWidthMode` property to **ShrinkAndGrow**. The column width varies depending on the content.
 
-![](../../../images/eurd-web-cross-tab-vertical-content-splitting.png)
+![Set Column Auto Width Property](../../../images/eurd-web-cross-tab-report-column-auto-width-mode.png)
 
+## Adjust the Report Layout
 
-## Specify the Pivot Grid's Print Options
-Use the **Options** category's **Print Options** section to specify print options and define which Pivot Grid elements are printed.
+Specify the **Landscape** page orientation and set the **Vertical Content Splitting** option to `Smart` to prevent content from being split across pages.
 
-* Set the **Print Data Headers** property to **No** to prevent data fields' headers from being printed.
+![Adjust the Layout](../../../images/eurd-web-cross-tab-report-adjust-layout.png)
 
-* Enable the **Print Row Area On Every Page** property to repeat row headers on each document page when the Pivot Grid's layout is divided horizontally across several pages.
+## Observe the Result
 
-![](../../../images/eurd-web-cross-tab-print-options.png)
+Switch to the **Report Viewer**. The resulting report is shown below:
 
-Switch to [Print Preview](../preview-print-and-export-reports.md) to see the resulting report.
+![Resulting Report](../../../images/eurd-web-cross-tab-report-final-result.png)

interface-elements-for-web/articles/report-designer/lay-out-dynamic-report-content/keep-content-together.md

@@ -17,6 +17,6 @@ Enabling this property for a single control makes the same band's controls behav
 Use the band's **Keep Together** property to enable this feature for all controls within a specific band.
 
 > [!NOTE]
-> This feature is not available for the [Chart](../use-report-elements/use-charts-and-pivot-grids/use-charts-in-reports.md), [Sparkline](../use-report-elements/use-gauges-and-sparklines/add-sparklines-to-a-report.md) and [Subreport](../use-report-elements/use-basic-report-controls/subreport.md) controls.
+> This feature is not available for the [Chart](../use-report-elements/use-charts.md), [Sparkline](../use-report-elements/use-gauges-and-sparklines/add-sparklines-to-a-report.md) and [Subreport](../use-report-elements/use-basic-report-controls/subreport.md) controls.
 
 In a master-detail report, you can print the detail band on the same page as the detail report band using the detail band's **Keep Together with Detail Reports** property.

interface-elements-for-web/articles/report-designer/report-designer-tools/chart-designer.md

@@ -7,7 +7,7 @@ author: Anna Vekhina
 
 ## Chart Designer Overview
 
-The **Chart Designer** allows you to quickly create and customize [charts](../use-report-elements/use-charts-and-pivot-grids.md) in the [End-User Report Designer](../../report-designer.md).
+The **Chart Designer** allows you to quickly create and customize [charts](../use-report-elements/use-charts.md) in the [End-User Report Designer](../../report-designer.md).
 
 ![](../../../images/eurd-web-chart-designer.png)
 

interface-elements-for-web/articles/report-designer/report-designer-tools/toolbox.md

@@ -28,9 +28,9 @@ The following controls are connected to data individually, without accessing a r
 
 
 
-| ![](../../../images/eurd-web-toolbox-chart.png) | ![](../../../images/eurd-web-toolbox-pivot-grid.png) | ![](../../../images/eurd-web-toolbox-sparkline.png) |
+| ![](../../../images/eurd-web-toolbox-chart.png) | ![](../../../images/eurd-web-toolbox-cross-tab.png) | ![](../../../images/eurd-web-toolbox-sparkline.png) |
 | ------------------------------------------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------- |
-| [Chart](..\use-report-elements\use-charts-and-pivot-grids.md) | [Pivot Grid](..\use-report-elements\use-charts-and-pivot-grids.md) | [Sparkline](..\use-report-elements\use-gauges-and-sparklines\add-sparklines-to-a-report.md) |
+| [Chart](..\use-report-elements\use-charts.md) | [Cross Tab](..\create-reports\cross-tab-reports.md) | [Sparkline](..\use-report-elements\use-gauges-and-sparklines\add-sparklines-to-a-report.md) |
 
 
 

interface-elements-for-web/articles/report-designer/shape-report-data/use-report-parameters.md

@@ -48,9 +48,9 @@ Use report parameters in the following cases:
 
     The following controls have internal collections of parameters. You can bind these internal parameters to report parameters.
 
-    * **[Chart](../use-report-elements/use-charts-and-pivot-grids/use-charts-in-reports.md)**
+    * **[Chart](../use-report-elements/use-charts.md)**
 
-	    [Filter chart data](../use-report-elements/use-charts-and-pivot-grids/use-charts-to-visualize-grouped-data.md) by parameters.
+	    [Filter chart data](../use-report-elements/use-charts/use-charts-to-visualize-grouped-data.md) by parameters.
 
     * **[Subreport](../use-report-elements/use-basic-report-controls/subreport.md)**
 

interface-elements-for-web/articles/report-designer/use-expressions.md

@@ -38,7 +38,7 @@ The Expression Editor displays all the errors it finds in the specified expressi
 
 ## Filter Editor
 
-The Report Designer's [Filter Editor](report-designer-tools/filter-editor.md) allows you to specify filter criteria for a report or [Chart](use-report-elements/use-charts-and-pivot-grids.md)'s series.
+The Report Designer's [Filter Editor](report-designer-tools/filter-editor.md) allows you to specify filter criteria for a report.
 
  The Filter Editor provides a visual interface where you can use an unlimited number of conditions and combine them with logical operators to create filter criteria. You can also switch to the Advanced Mode and type a filter string.
 

interface-elements-for-web/articles/report-designer/use-report-elements.md

@@ -13,6 +13,7 @@ The documents in this section describe how to use various controls in a report,
 * [Use Basic Report Controls](use-report-elements/use-basic-report-controls.md)
 * [Use Tables](use-report-elements/use-tables.md)
 * [Use Barcodes](use-report-elements/use-bar-codes.md)
-* [Use Charts and Pivot Grids](use-report-elements/use-charts-and-pivot-grids.md)
+* [Use Charts](use-report-elements/use-charts.md)
+* [Use Cross Tab](create-reports/cross-tab-reports.md)
 * [Use Gauges and Sparklines](use-report-elements/use-gauges-and-sparklines.md)
 * [Draw Lines and Shapes](use-report-elements/draw-lines-and-shapes.md)

interface-elements-for-web/articles/report-designer/use-report-elements/manipulate-report-elements/add-report-controls-to-containers.md

@@ -17,7 +17,7 @@ A [table cell](../use-tables.md) can also act as a container for other controls.
 ![](../../../../images/eurd-web-add-checkbox-to-tablecell.png)
 
 Both panel and table cell cannot contain the following report controls:
-* [Pivot Grid](../use-charts-and-pivot-grids.md)
+* [Cross Tab](../../create-reports/cross-tab-reports.md)
 * [Subreport](../use-basic-report-controls/subreport.md)
 * [Page Break](../use-basic-report-controls/page-break.md)
 * [Table of Contents](../use-basic-report-controls/table-of-contents.md)