diff --git a/book/en/README.md b/book/en/README.md index 05aa9441..32ace513 100644 --- a/book/en/README.md +++ b/book/en/README.md @@ -10,7 +10,7 @@ EFX Grid element and extensions are published under single package. npm install @refinitiv-ui/efx-grid ``` -The element is required theme to instantiate itself in the app. Refinitiv's design system is called Halo theme and you can install it from npm command. +The element is required theme to instantiate itself in the app. LSEG's design system is called Halo theme and you can install it from npm command. ```sh npm install @refinitiv-ui/halo-theme @@ -56,4 +56,4 @@ grid.config = { Please see the license [here](./license.html). ## License for the Halo Theme -The font “Proxima Nova Fin” shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see the license [here](https://www.fontspring.com/lic/fontspring/webfont#license_text). +The font “Proxima Nova Fin” shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see the license [here](https://www.fontspring.com/lic/fontspring/webfont#license_text). diff --git a/book/en/apis/README.html b/book/en/apis/README.html index 191671fc..51f61373 100644 --- a/book/en/apis/README.html +++ b/book/en/apis/README.html @@ -23,7 +23,7 @@

Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/Cell.html b/book/en/apis/core/Cell.html index ec6d0624..7de67b45 100644 --- a/book/en/apis/core/Cell.html +++ b/book/en/apis/core/Cell.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/CellSpans.html b/book/en/apis/core/CellSpans.html index bc8aab2b..e4a91612 100644 --- a/book/en/apis/core/CellSpans.html +++ b/book/en/apis/core/CellSpans.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/ColumnStats.html b/book/en/apis/core/ColumnStats.html index 845e6c0d..7eb8a11e 100644 --- a/book/en/apis/core/ColumnStats.html +++ b/book/en/apis/core/ColumnStats.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/DataCache.html b/book/en/apis/core/DataCache.html index 14237836..2a86e5e6 100644 --- a/book/en/apis/core/DataCache.html +++ b/book/en/apis/core/DataCache.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/DataTable.html b/book/en/apis/core/DataTable.html index 785de1b1..28a78f7d 100644 --- a/book/en/apis/core/DataTable.html +++ b/book/en/apis/core/DataTable.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/DataView.html b/book/en/apis/core/DataView.html index 757d2d5f..42ae439c 100644 --- a/book/en/apis/core/DataView.html +++ b/book/en/apis/core/DataView.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/DragAndDropTitlePlugin.html b/book/en/apis/core/DragAndDropTitlePlugin.html index 55baa29d..1ed3996e 100644 --- a/book/en/apis/core/DragAndDropTitlePlugin.html +++ b/book/en/apis/core/DragAndDropTitlePlugin.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/ElementWrapper.html b/book/en/apis/core/ElementWrapper.html index ed199af3..6aef47db 100644 --- a/book/en/apis/core/ElementWrapper.html +++ b/book/en/apis/core/ElementWrapper.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/EventDispatcher.html b/book/en/apis/core/EventDispatcher.html index 373baea2..246fed55 100644 --- a/book/en/apis/core/EventDispatcher.html +++ b/book/en/apis/core/EventDispatcher.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/Grid.html b/book/en/apis/core/Grid.html index 03f53543..46d11b08 100644 --- a/book/en/apis/core/Grid.html +++ b/book/en/apis/core/Grid.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/HScrollbar.html b/book/en/apis/core/HScrollbar.html index 7f4f95f5..d15c6d72 100644 --- a/book/en/apis/core/HScrollbar.html +++ b/book/en/apis/core/HScrollbar.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/ILayoutGrid.html b/book/en/apis/core/ILayoutGrid.html index 421baed1..7236ac1f 100644 --- a/book/en/apis/core/ILayoutGrid.html +++ b/book/en/apis/core/ILayoutGrid.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/LayoutGrid.html b/book/en/apis/core/LayoutGrid.html index b8c18136..a649df5a 100644 --- a/book/en/apis/core/LayoutGrid.html +++ b/book/en/apis/core/LayoutGrid.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/Scrollbar.html b/book/en/apis/core/Scrollbar.html index fe4cb6ad..93682314 100644 --- a/book/en/apis/core/Scrollbar.html +++ b/book/en/apis/core/Scrollbar.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/SectionSettings.html b/book/en/apis/core/SectionSettings.html index 9ce34186..10456813 100644 --- a/book/en/apis/core/SectionSettings.html +++ b/book/en/apis/core/SectionSettings.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/Segment.html b/book/en/apis/core/Segment.html index 3d501c60..0449e238 100644 --- a/book/en/apis/core/Segment.html +++ b/book/en/apis/core/Segment.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/SegmentCollection.html b/book/en/apis/core/SegmentCollection.html index 3fe17257..03671903 100644 --- a/book/en/apis/core/SegmentCollection.html +++ b/book/en/apis/core/SegmentCollection.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/SortableTitlePlugin.html b/book/en/apis/core/SortableTitlePlugin.html index 537464a0..ad43fa89 100644 --- a/book/en/apis/core/SortableTitlePlugin.html +++ b/book/en/apis/core/SortableTitlePlugin.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/core/VScrollbar.html b/book/en/apis/core/VScrollbar.html index d2ca27e0..3f6d6fc0 100644 --- a/book/en/apis/core/VScrollbar.html +++ b/book/en/apis/core/VScrollbar.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/rt_grid/ColumnDefinition.html b/book/en/apis/rt_grid/ColumnDefinition.html index 30557396..126cd27e 100644 --- a/book/en/apis/rt_grid/ColumnDefinition.html +++ b/book/en/apis/rt_grid/ColumnDefinition.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/rt_grid/Grid.html b/book/en/apis/rt_grid/Grid.html index 4b5a0083..3f860670 100644 --- a/book/en/apis/rt_grid/Grid.html +++ b/book/en/apis/rt_grid/Grid.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/apis/rt_grid/RowDefinition.html b/book/en/apis/rt_grid/RowDefinition.html index 1a19d43a..50bf0db4 100644 --- a/book/en/apis/rt_grid/RowDefinition.html +++ b/book/en/apis/rt_grid/RowDefinition.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    diff --git a/book/en/columns/column-alignment.html b/book/en/columns/column-alignment.html index 42227157..1ca23652 100644 --- a/book/en/columns/column-alignment.html +++ b/book/en/columns/column-alignment.html @@ -23,7 +23,7 @@

    Grid Usage Guide

- +
  • Getting Started
    @@ -290,7 +290,7 @@

    Column Alignment

    }

    Example

    -
    +
    diff --git a/book/en/columns/column-formatter.html b/book/en/columns/column-formatter.html index 766f00b7..9a52d1f5 100644 --- a/book/en/columns/column-formatter.html +++ b/book/en/columns/column-formatter.html @@ -23,7 +23,7 @@

    Grid Usage Guide

    - +
    • Getting Started
      diff --git a/book/en/columns/column-freezing.html b/book/en/columns/column-freezing.html index eced70cc..ddac679e 100644 --- a/book/en/columns/column-freezing.html +++ b/book/en/columns/column-freezing.html @@ -23,7 +23,7 @@

      Grid Usage Guide

    - +
    • Getting Started
      diff --git a/book/en/columns/column-grouping.html b/book/en/columns/column-grouping.html index d9469178..f728d9a8 100644 --- a/book/en/columns/column-grouping.html +++ b/book/en/columns/column-grouping.html @@ -23,7 +23,7 @@

      Grid Usage Guide

    - +
    • Getting Started
      diff --git a/book/en/columns/column-moving.html b/book/en/columns/column-moving.html index b044f286..1557e848 100644 --- a/book/en/columns/column-moving.html +++ b/book/en/columns/column-moving.html @@ -23,7 +23,7 @@

      Grid Usage Guide

    - +
    • Getting Started
      @@ -278,7 +278,7 @@

      Drag and drop

      The ability of drag and drop column is enabled by default. But it can be turned off by setting noColumnDragging to true. The default value is false.

      Drag and drop to move a column example (default)

      -
      +
      @@ -347,7 +347,7 @@

      Drag and drop to move a

      Disabled drag and drop example

      -
      +
      @@ -421,7 +421,7 @@

      Using APIs to move a column

      See available APIs for more details.

      Example

      -
      +
      @@ -542,7 +542,7 @@

      Preventing a column from moving

      By marking a column to be a stationary column, any column on the left and the stationary column will be locked in the position (i.e., columns cannot be moved). A column can still be added to or removed from the stationary section. Once stationary column is removed or unmarked as stationary, the columns in the section will be free to be moved. See Column Definition for more details of column options.

      Example

      -
      +
      diff --git a/book/en/columns/column-pinning.html b/book/en/columns/column-pinning.html index e4712da0..e91059ba 100644 --- a/book/en/columns/column-pinning.html +++ b/book/en/columns/column-pinning.html @@ -23,7 +23,7 @@

      Grid Usage Guide

      - +
      • Getting Started
        diff --git a/book/en/columns/column-reordering.html b/book/en/columns/column-reordering.html index 83ab7f3e..83de4f14 100644 --- a/book/en/columns/column-reordering.html +++ b/book/en/columns/column-reordering.html @@ -23,7 +23,7 @@

        Grid Usage Guide

      - +
      • Getting Started
        diff --git a/book/en/columns/column-resetting.html b/book/en/columns/column-resetting.html index 31eb454a..e0a5f7a6 100644 --- a/book/en/columns/column-resetting.html +++ b/book/en/columns/column-resetting.html @@ -23,7 +23,7 @@

        Grid Usage Guide

      - +
      • Getting Started
        diff --git a/book/en/columns/column-styling.html b/book/en/columns/column-styling.html index 09d3928d..f1aa3207 100644 --- a/book/en/columns/column-styling.html +++ b/book/en/columns/column-styling.html @@ -23,7 +23,7 @@

        Grid Usage Guide

      - +
      • Getting Started
        @@ -277,7 +277,7 @@

        Column Styling

        Columns can be styled by using CSS in the styles property of the column definition.

        Example

        -
        +
        diff --git a/book/en/columns/column-width.html b/book/en/columns/column-width.html index e8bebdb2..7e470086 100644 --- a/book/en/columns/column-width.html +++ b/book/en/columns/column-width.html @@ -23,7 +23,7 @@

        Grid Usage Guide

        - +
        • Getting Started
          @@ -289,7 +289,7 @@

          Preserving Grid's size

          After column resizing if the total columns' width is less than Grid' size, there will be empty space next to last column. In contrast the horizontal scrollbar will be shown. To prevent Grid from this kind of cases the preserving Grid's size mode must be enabled, please see Column Resizing Extension for configuration document.

          Default Grid width with default column width

          -
          +
          @@ -355,7 +355,7 @@

          Default Grid width with de

          Fixed Grid width with default column width

          -
          +
          @@ -424,7 +424,7 @@

          Fixed Grid width with defaul

          Fixed Grid width with fixed column width

          -
          +
          @@ -493,7 +493,7 @@

          Fixed Grid width with fixed co

          Default Grid width with fixed column width

          -
          +
          @@ -560,7 +560,7 @@

          Default Grid width with fixe

          Fixed column width with proportional column width

          -
          +
          @@ -627,7 +627,7 @@

          Fixed column width wi

          Pinning right columns

          -
          +
          @@ -697,7 +697,7 @@

          Pinning right columns

          Pinning both sides

          -
          +
          @@ -767,7 +767,7 @@

          Pinning both sides

          Delayed initialization (after 5 seconds)

          -
          +
          diff --git a/book/en/columns/custom-title-formatter.html b/book/en/columns/custom-title-formatter.html index 4708d484..754de2c7 100644 --- a/book/en/columns/custom-title-formatter.html +++ b/book/en/columns/custom-title-formatter.html @@ -23,7 +23,7 @@

          Grid Usage Guide

          - +
          • Getting Started
            @@ -288,7 +288,7 @@

            Column - Custom Title

            grid.config = configObj;

            Example

            -
            +
            diff --git a/book/en/columns/dynamic-add-insert-column.html b/book/en/columns/dynamic-add-insert-column.html index b2408d4c..f571bf5a 100644 --- a/book/en/columns/dynamic-add-insert-column.html +++ b/book/en/columns/dynamic-add-insert-column.html @@ -23,7 +23,7 @@

            Grid Usage Guide

            - +
            • Getting Started
              @@ -278,7 +278,7 @@

              Insert Column

              Use the insertColumn() methods to insert a column with its configuration.

              Example

              -
              +
              diff --git a/book/en/columns/dynamic-remove-column.html b/book/en/columns/dynamic-remove-column.html index bff4457f..068735c4 100644 --- a/book/en/columns/dynamic-remove-column.html +++ b/book/en/columns/dynamic-remove-column.html @@ -23,7 +23,7 @@

              Grid Usage Guide

              - +
              • Getting Started
                @@ -279,7 +279,7 @@

                Hide/remove Column

                Use the removeColumn(), removeColumns() or removeAllColumns() methods to remove the specified column(s).

                Example

                -
                +
                diff --git a/book/en/data/columns-and-data.html b/book/en/data/columns-and-data.html index 31be3df2..02f45ad2 100644 --- a/book/en/data/columns-and-data.html +++ b/book/en/data/columns-and-data.html @@ -23,7 +23,7 @@

                Grid Usage Guide

                - +
                • Getting Started
                  @@ -302,7 +302,7 @@

                  Clearing data

                  grid.data = null; // Clear all existing data

                  Columns and data property example

                  -
                  +
                  @@ -462,7 +462,7 @@

                  Resetting and updating data in Grid

                  Rows and data property example

                  -
                  +
                  diff --git a/book/en/data/create.html b/book/en/data/create.html index b17ab23a..ab27e242 100644 --- a/book/en/data/create.html +++ b/book/en/data/create.html @@ -23,7 +23,7 @@

                  Grid Usage Guide

                  - +
                  • Getting Started
                    @@ -296,7 +296,7 @@

                    Creating and Adding Data

                    All available APIs can be found here

                    Example

                    -
                    +
                    diff --git a/book/en/data/data-conversion.html b/book/en/data/data-conversion.html index eacf072d..110511cf 100644 --- a/book/en/data/data-conversion.html +++ b/book/en/data/data-conversion.html @@ -23,7 +23,7 @@

                    Grid Usage Guide

                    - +
                    • Getting Started
                      @@ -292,7 +292,7 @@

                      dataComposed event

                      // other grid's options dataComposed: onDataComposed }; -
                      +
                      @@ -429,7 +429,7 @@

                      dataComposed event

                      Auto date conversion

                      When dealing with date-time data it may be hard to handle the various types of incoming data, which can be number, string, ISO date string, seconds or milliseconds. So it is better to enable autoDateConversion in the Grid's configuration and let Grid automatically convert data to JavaScript native Date object. To let Grid know that the column's data is data-time, the dataType: "datatime" should be specified in the column's options.

                      -
                      +
                      diff --git a/book/en/data/delete.html b/book/en/data/delete.html index 279c8fcf..099befee 100644 --- a/book/en/data/delete.html +++ b/book/en/data/delete.html @@ -23,7 +23,7 @@

                      Grid Usage Guide

                      - +
                      • Getting Started
                        @@ -291,7 +291,7 @@

                        Deleting or Removing Data

                        All available APIs can be found here

                        Example

                        -
                        +
                        diff --git a/book/en/data/read.html b/book/en/data/read.html index 31ba8620..3bf8582a 100644 --- a/book/en/data/read.html +++ b/book/en/data/read.html @@ -23,7 +23,7 @@

                        Grid Usage Guide

                        - +
                        • Getting Started
                          @@ -290,7 +290,7 @@

                          APIs

                          grid.api.logDT(); // Rows in original order

                          Example

                          -
                          +
                          diff --git a/book/en/data/update.html b/book/en/data/update.html index dda87fcc..0452404c 100644 --- a/book/en/data/update.html +++ b/book/en/data/update.html @@ -23,7 +23,7 @@

                          Grid Usage Guide

                          - +
                          • Getting Started
                            @@ -307,7 +307,7 @@

                            Updating a row

                            Example

                            The following example use object to map between RIC (text) and RowDefinition created from insertRow method.

                            -
                            +
                            diff --git a/book/en/extensions/README.html b/book/en/extensions/README.html index 43b0ca42..58bb908d 100644 --- a/book/en/extensions/README.html +++ b/book/en/extensions/README.html @@ -23,7 +23,7 @@

                            Grid Usage Guide

                            - +
                            • Getting Started
                              diff --git a/book/en/extensions/column-dragging.html b/book/en/extensions/column-dragging.html index bb9d987c..e0cbe283 100644 --- a/book/en/extensions/column-dragging.html +++ b/book/en/extensions/column-dragging.html @@ -23,7 +23,7 @@

                              Grid Usage Guide

                            - +
                            • Getting Started
                              diff --git a/book/en/extensions/row-segmenting.html b/book/en/extensions/row-segmenting.html index 03f5f8cb..93437ac3 100644 --- a/book/en/extensions/row-segmenting.html +++ b/book/en/extensions/row-segmenting.html @@ -23,7 +23,7 @@

                              Grid Usage Guide

                            - +
                            • Getting Started
                              @@ -278,7 +278,7 @@

                              Grid Usage Guide

                              Row Segmenting

                              The Row Segmenting Extension provides a way to group row content based on row index. By specifying a row index, the row becomes a group header. Any row below the group header can then be added as a group member. This provides more flexibility in how you define a group, unlike Row Grouping Extension where groups are based on strictly defined criteria.

                              -
                              +
                              @@ -406,7 +406,7 @@

                              Grouping criteria

                              Segment Classification (multi-level/nested grouping)

                              With Row Segmenting Extension, you can specify classfication on individual segment to add nested segments. The criteria can be defined by using setSegmentClassification method with array of fields as its parameter.

                              -
                              +
                              @@ -542,7 +542,7 @@

                              Group sorting

                            -
                            +
                            @@ -668,7 +668,7 @@

                            Row Segmenting Extension features

                            Predefined color on the color tags

                            The extension supports color from the predefined colors. To do this you need to assign predefined class object to the predefinedColors property then specify field name of the cssField property.

                            -
                            +
                            @@ -882,7 +882,7 @@

                            Saving and loading segments

                            You can follow in below example for implement save/load functionality.
                            The first example it will be grid that can be change data with click "Save config".
                            And then you can paste this config on the example 2 and click "Start Grid" and both grids look the same.

                            Example 1: saving segment configuration from grid

                            -
                            +
                            @@ -1109,7 +1109,7 @@

                            Example 1: saving segm

                            Example 2: restoring segments

                            -
                            +
                            @@ -1207,7 +1207,7 @@

                            Empty segment filtering

                            By default, segment header cannot be filtered out. However, Row Filtering Extension has emptySegmentFiltering option that allows empty segment to be filtered out. With the option turned on, any segment whose all of its members are not present by filtering will also be hidden. Empty segment will still be visible, if there is no active filter. Collapsing of the segment does not count as having an active filter.

                            separatorFiltering option from Row Filtering Extension also allow separator rows to be filtered as if they were a normal row. Note that the separator rows can be filtered out, while their child rows may ramain visible.

                            -
                            +
                            diff --git a/book/en/extensions/statistics-row.html b/book/en/extensions/statistics-row.html index d1b234b7..9a191f42 100644 --- a/book/en/extensions/statistics-row.html +++ b/book/en/extensions/statistics-row.html @@ -23,7 +23,7 @@

                            Grid Usage Guide

                            - +
                            • Getting Started
                              @@ -278,7 +278,7 @@

                              Grid Usage Guide

                              Statistics Row

                              The Statistics Row Extension provides special rows to show various statistics for the grid's content.

                              -
                              +
                              diff --git a/book/en/extensions/tr-grid-auto-tooltip.html b/book/en/extensions/tr-grid-auto-tooltip.html index d06dc971..5d9922ce 100644 --- a/book/en/extensions/tr-grid-auto-tooltip.html +++ b/book/en/extensions/tr-grid-auto-tooltip.html @@ -23,7 +23,7 @@

                              Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-cell-selection.html b/book/en/extensions/tr-grid-cell-selection.html index 0ea87051..17005173 100644 --- a/book/en/extensions/tr-grid-cell-selection.html +++ b/book/en/extensions/tr-grid-cell-selection.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-checkbox.html b/book/en/extensions/tr-grid-checkbox.html index de994d25..c5708ee6 100644 --- a/book/en/extensions/tr-grid-checkbox.html +++ b/book/en/extensions/tr-grid-checkbox.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-column-fitter.html b/book/en/extensions/tr-grid-column-fitter.html index efff4ea4..300de73a 100644 --- a/book/en/extensions/tr-grid-column-fitter.html +++ b/book/en/extensions/tr-grid-column-fitter.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-column-formatting.html b/book/en/extensions/tr-grid-column-formatting.html index 6660b87c..d27c0009 100644 --- a/book/en/extensions/tr-grid-column-formatting.html +++ b/book/en/extensions/tr-grid-column-formatting.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-column-grouping.html b/book/en/extensions/tr-grid-column-grouping.html index 954ba65c..83b697ba 100644 --- a/book/en/extensions/tr-grid-column-grouping.html +++ b/book/en/extensions/tr-grid-column-grouping.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-column-resizing.html b/book/en/extensions/tr-grid-column-resizing.html index aacc48b8..18297150 100644 --- a/book/en/extensions/tr-grid-column-resizing.html +++ b/book/en/extensions/tr-grid-column-resizing.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-column-selection.html b/book/en/extensions/tr-grid-column-selection.html index 7f632c44..ab637431 100644 --- a/book/en/extensions/tr-grid-column-selection.html +++ b/book/en/extensions/tr-grid-column-selection.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-column-stack.html b/book/en/extensions/tr-grid-column-stack.html index 12499bee..459c821b 100644 --- a/book/en/extensions/tr-grid-column-stack.html +++ b/book/en/extensions/tr-grid-column-stack.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-conditional-coloring.html b/book/en/extensions/tr-grid-conditional-coloring.html index cc88e3ca..37548a72 100644 --- a/book/en/extensions/tr-grid-conditional-coloring.html +++ b/book/en/extensions/tr-grid-conditional-coloring.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-content-wrap.html b/book/en/extensions/tr-grid-content-wrap.html index e0885e95..4530da04 100644 --- a/book/en/extensions/tr-grid-content-wrap.html +++ b/book/en/extensions/tr-grid-content-wrap.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-contextmenu.html b/book/en/extensions/tr-grid-contextmenu.html index 483bdefd..8712736d 100644 --- a/book/en/extensions/tr-grid-contextmenu.html +++ b/book/en/extensions/tr-grid-contextmenu.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                diff --git a/book/en/extensions/tr-grid-filter-input.html b/book/en/extensions/tr-grid-filter-input.html index e4befc29..948127ce 100644 --- a/book/en/extensions/tr-grid-filter-input.html +++ b/book/en/extensions/tr-grid-filter-input.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                @@ -396,6 +396,158 @@

                                Installation and how to imp

                                Installation examples and details of how to import the extension to a project are available on the Overview page.

                                Required dependencies

                                Details of Required dependencies for this extension are available on the Overview page.

                                +

                                Using filter input for fetching data

                                +

                                If you want to fetch data from server side based on the value of the filter input, you can achieve this by listening to the event of the filter input element that we provide in the inputCreated event. You can follow the example below for guidance.

                                + +
                                +
                                + +
                                +
                                +
                                +
                                  +
                                • HTML
                                  • +
                                • JS
                                  • +
                                • CSS
                                  • +
                                +
                                +
                                + 
                                <efx-grid>
+</efx-grid>
                                + 
                                var FilterInput = tr.FilterInputExtension;
+var RowFiltering = tr.RowFilteringExtension;
+var DataGenerator = DataGenerator;
+var fields = ["market", "sentence", "CF_NETCHNG", "CF_LAST"];
+var records = DataGenerator.generateRecords(fields, { numRows: 100, seedd: 0 });
+var filterInputExt = new FilterInput();
+var rowFilteringExt = new RowFiltering();
+
+var configObj = {
+  columns: [{
+      field: fields[0],
+      name: "Market",
+      filterInput: {
+        defaultLogic: function() {
+          // Disable default logic (disable filter to use server side filtering)
+          return true;
+        }
+      }
+    },
+    {
+      field: fields[1],
+      name: "Description",
+      filterInput: {
+        disabled: true
+      }
+    },
+    {
+      field: fields[2],
+      name: "Net Chng.",
+      filterInput: {
+        disabled: true
+      }
+    },
+    {
+      field: fields[3],
+      name: "Last",
+      filterInput: {
+        disabled: true
+      }
+    }
+  ],
+  staticDataRows: records,
+  extensions: [filterInputExt, rowFilteringExt]
+};
+
+var grid = document.getElementsByTagName("efx-grid")[0];
+grid.config = configObj;
+
+filterInputExt.addEventListener("inputCreated", function(e) {
+  var inputEl = e.input;
+  inputEl.addEventListener("value-changed", onFilterInputKeyUp);
+});
+
+var inputVal;
+
+function onFilterInputKeyUp(e) {
+  inputVal = e.detail.value;
+  // Simulate to fetch data from the server
+  conflationdFetch();
+}
+
+// ========== Simulate server side in below ==========
+
+function generateRecords(numRows, seed) {
+  // This function on server side
+  var records = DataGenerator.generateRecords(fields, {
+    numRows: numRows,
+    seed: seed
+  });
+
+  if (inputVal != null) {
+    console.log(inputVal);
+    var filterRecord = records.filter(function(record) {
+      return record[fields[0]].indexOf(inputVal) > -1;
+    });
+    return filterRecord;
+  }
+  return records;
+}
+
+// Define your fetch function
+function fetch() {
+  // Your code to make the server request goes here
+  console.log("Fetching data from the server...");
+  // await data from the server
+  grid.data = generateRecords(1000); // assign data back to grid
+}
+
+// Create a conflation function to prevent excessive data call frequency
+function conflation(func, delay) {
+  let timeoutId;
+  return function() {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(func, delay);
+  };
+}
+var conflationdFetch = conflation(fetch, 500);
                                + 
                                efx-grid {
+  height: 200px;
+}
                                +
                                +
                                +
                                + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

                                API Reference

                                diff --git a/book/en/extensions/tr-grid-filter-input.md b/book/en/extensions/tr-grid-filter-input.md index 92e14854..2c2b64f0 100644 --- a/book/en/extensions/tr-grid-filter-input.md +++ b/book/en/extensions/tr-grid-filter-input.md @@ -88,6 +88,122 @@ Installation examples and details of how to import the extension to a project ar Details of Required dependencies for this extension are available on the [Overview](README.md) page. +### Using filter input for fetching data + +If you want to fetch data from server side based on the value of the filter input, you can achieve this by listening to the event of the filter input element that we provide in the `inputCreated` event. You can follow the example below for guidance. + + +```live + + + +``` + + +

                                API Reference

                                diff --git a/book/en/extensions/tr-grid-heat-map.html b/book/en/extensions/tr-grid-heat-map.html index d006643c..b9339ec2 100644 --- a/book/en/extensions/tr-grid-heat-map.html +++ b/book/en/extensions/tr-grid-heat-map.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                              - +
                              • Getting Started
                                @@ -278,7 +278,7 @@

                                Grid Usage Guide

                                Heat Map

                                The Heat Map Extension provides heat map coloring for column fields, which will be the type set by the heatMap property.

                                -
                                +
                                diff --git a/book/en/extensions/tr-grid-in-cell-editing.html b/book/en/extensions/tr-grid-in-cell-editing.html index 719517f8..69c60f95 100644 --- a/book/en/extensions/tr-grid-in-cell-editing.html +++ b/book/en/extensions/tr-grid-in-cell-editing.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                                - +
                                • Getting Started
                                  @@ -285,7 +285,7 @@

                                  In-Cell Editing

                                • Use openRowEditor API to edit all cells in a row.
                                -
                                +
                                @@ -370,7 +370,7 @@

                                Installation and how to imp

                                Single click for editing

                                The live demo below demonstrates how to open editor with single click event. In this setting, you do not need to double click to open the editor. You can disable double click mode by setting doubleClick to false then handle it with your own implementation like the following example.

                                -
                                +
                                @@ -459,7 +459,7 @@

                                Populating text and data binding

                                Note: more information about adding event listener can be found on this page

                                -
                                +
                                @@ -574,7 +574,7 @@

                                Editor types

                                Note: each editor, except for simple text input, requires different ELF elements to be loaded. See the list of required dependencies on this page.

                                -
                                +
                                @@ -688,7 +688,7 @@

                                Row editor

                                Using the event beforeRowCommit to allow a developer verify the user input before an actual commit process occurs. A developer can mutate the user input or decide to cancel the commit process if the verifying process fails.

                                The live demo below demonstrates how to control the row editor with the openRowEditor, closeRowEditor, toggleRowEditor APIs and beforeRowCommit event.

                                -
                                +
                                @@ -799,7 +799,7 @@

                                Custom cell editor

                                Apart from the default and predefined editors, a custom editor can be easily created by implementing it from the event editorOpened. Since the custom editor is not directly wired to the extension, you will need to commit user input through commitText API.

                                The example below show how to create an editor with yes, no and none options. Note that the predefined "dropdown" editor can be used instead of the custom editor shown in this example.

                                -
                                +
                                @@ -881,6 +881,109 @@

                                Custom cell editor

                                grid.config = configObj; 
                                efx-grid {
   height: 200px;
+}
                                +
                                +
                                +
                                + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                +

                                Preventing rows from moving during editing

                                +

                                By default rows are prevented from moving during editing. This is to avoid confusion of which row is being edited. For instance, if sorting or filtering is active and data have been constantly changed, rows would be moved around a lot. Once editor is opened, grid's view is frozen and rows cannot be moved until the end of editing session.

                                + +
                                +
                                + +
                                +
                                +
                                +
                                  +
                                • HTML
                                  • +
                                • JS
                                  • +
                                • CSS
                                  • +
                                +
                                +
                                + 
                                <efx-grid id="grid">
+</efx-grid>
                                + 
                                var extension = new InCellEditing();
+
+var fields = ["id", "companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
+var colNames = ["Id", "Company", "Market", "Last", "Net. Chng", "Industry"];
+var columns = fields.map(function(f, idx) {
+  return {
+    name: colNames[idx],
+    field: f
+  };
+});
+columns[0].width = 60;
+columns[2].width = 150;
+columns[3].width = 150;
+columns[3].blinking = true;
+columns[4].width = 80;
+
+var configObj = {
+  sorting: {
+    initialSort: {
+      sortOrder: "a",
+      field: fields[3],
+    }
+  },
+  columns: columns,
+  staticDataRows: generateRecords(),
+  inCellEditing: {
+    editableTitle: false,
+    editableContent: true
+  },
+  extensions: [
+    extension
+  ]
+};
+
+var grid = document.getElementById("grid");
+grid.config = configObj;
+
+function generateRecords() {
+  var records = DataGenerator.generateRecords(fields, { numRows: 10 });
+  records.forEach(function(record, idx) {
+    record["id"] = idx;
+  });
+  return records;
+}
+
+setInterval(function() {
+  grid.data = generateRecords();
+}, 2000);
                                + 
                                efx-grid {
+  height: 250px;
 }
                                diff --git a/book/en/extensions/tr-grid-in-cell-editing.md b/book/en/extensions/tr-grid-in-cell-editing.md index 325722e9..fda4eed7 100644 --- a/book/en/extensions/tr-grid-in-cell-editing.md +++ b/book/en/extensions/tr-grid-in-cell-editing.md @@ -404,6 +404,70 @@ The example below show how to create an editor with `yes`, `no` and `none` optio ``` +### Preventing rows from moving during editing + +By default rows are prevented from moving during editing. This is to avoid confusion of which row is being edited. For instance, if sorting or filtering is active and data have been constantly changed, rows would be moved around a lot. Once editor is opened, grid's view is frozen and rows cannot be moved until the end of editing session. + +```live + + + + +``` +
                                diff --git a/book/en/extensions/tr-grid-pagination.html b/book/en/extensions/tr-grid-pagination.html index 6c539039..a600ae6d 100644 --- a/book/en/extensions/tr-grid-pagination.html +++ b/book/en/extensions/tr-grid-pagination.html @@ -23,7 +23,7 @@

                                Grid Usage Guide

                                - +
                                • Getting Started
                                  @@ -278,7 +278,7 @@

                                  Grid Usage Guide

                                  Pagination

                                  The Pagination Extension provides behaviors that allow you to split a huge amount of content within your grid into smaller parts. This extension is for client side pagination, where all data is already available at the client side. For server side pagination, see our pagination usage guide.

                                  -
                                  +
                                  diff --git a/book/en/extensions/tr-grid-percent-bar.html b/book/en/extensions/tr-grid-percent-bar.html index a7fdb5cb..d73235f0 100644 --- a/book/en/extensions/tr-grid-percent-bar.html +++ b/book/en/extensions/tr-grid-percent-bar.html @@ -23,7 +23,7 @@

                                  Grid Usage Guide

                                  - +
                                  • Getting Started
                                    @@ -278,7 +278,7 @@

                                    Grid Usage Guide

                                    Percent Bar

                                    The Percent Bar Extension is an extension that provides formatter for rendering percent bar in column.

                                    -
                                    +
                                    diff --git a/book/en/extensions/tr-grid-range-bar.html b/book/en/extensions/tr-grid-range-bar.html index 6c0a669b..4190e29d 100644 --- a/book/en/extensions/tr-grid-range-bar.html +++ b/book/en/extensions/tr-grid-range-bar.html @@ -23,7 +23,7 @@

                                    Grid Usage Guide

                                    - +
                                    • Getting Started
                                      @@ -278,7 +278,7 @@

                                      Grid Usage Guide

                                      Range Bar

                                      The Range Bar Extension provides graphical bar for last value ranking visualization based on low and high value.

                                      -
                                      +
                                      @@ -564,7 +564,7 @@

                                      Price Graph

                                      The Range Bar Extension provides a powerful solution for integrating the last trade price or value, displayed in relation to the current day's high, low, and Volume Weighted Average Price (VWAP), into a visually comprehensive price graph. This functionality can significantly enhance the capabilities of financial charting applications and tools.

                                      To make the most of the Range Bar Extension, you can simply map the pertinent fields to the range bar options for each individual column. This process enables the effective illustration of price movements and trends, resulting in an easily understandable format that can be seamlessly integrated into their applications. Consequently, users of these applications can gain valuable insights into market behavior, empowering them to make more informed decisions in their trading and investment activities.

                                      -
                                      +
                                      @@ -733,7 +733,7 @@

                                      Price Graph

                                      With Custom Tooltip

                                      If you want to use a customized tooltip for the range bar, you can use it with disabled the rangeBar default tooltip with option and adding a tooltip condition.
                                      For adding condition of tooltip you can import addConditionTooltip from the tooltip dependency and use it with pass condition and renderer function, following in the example below.

                                      -
                                      +
                                      diff --git a/book/en/extensions/tr-grid-row-dragging.html b/book/en/extensions/tr-grid-row-dragging.html index d2397ea8..90586b2e 100644 --- a/book/en/extensions/tr-grid-row-dragging.html +++ b/book/en/extensions/tr-grid-row-dragging.html @@ -23,7 +23,7 @@

                                      Grid Usage Guide

                                      - +
                                      • Getting Started
                                        @@ -278,7 +278,7 @@

                                        Grid Usage Guide

                                        Row Dragging

                                        The Row Dragging Extension allows the user to drag and reorder selected rows.

                                        -
                                        +
                                        @@ -385,7 +385,7 @@

                                        Custom dragbox

                                        Drag and drop content outside grid's area

                                        The Row Dragging Extension can be used together with the RowSelectionPlugin to allow users to drag a selected row and drop it to a target outside of a Grid. Then, add dragEnd handler to perform content copying of the selected rows as illustrated below:

                                        -
                                        +
                                        diff --git a/book/en/extensions/tr-grid-row-filtering.html b/book/en/extensions/tr-grid-row-filtering.html index 970f5ab1..096ae5a8 100644 --- a/book/en/extensions/tr-grid-row-filtering.html +++ b/book/en/extensions/tr-grid-row-filtering.html @@ -23,7 +23,7 @@

                                        Grid Usage Guide

                                        - +
                                        • Getting Started
                                          @@ -281,7 +281,7 @@

                                          Row Filtering

                                          Note that this extension does not provide any UI to do filtering. If you want to have UIs for end users to do filtering, you need to include either Row Filtering Extension or Filter Dialog Widget in addition to this extension.

                                          -
                                          +
                                          @@ -375,7 +375,7 @@

                                          Initializing Grid with a column

                                        The first two formats are recommended for most of the use cases as they are serializable and well understood by both Row Filtering Extension and Filter Dialog.

                                        -
                                        +
                                        @@ -504,7 +504,7 @@

                                        Filtering with a search box example

                                        The addGridFilter can recieve any type in the second parameter. The given input will be passed to the third argument in filter function.

                                        -
                                        +
                                        @@ -611,7 +611,7 @@

                                        Filtering with a search box example

                                        Basic filtering example

                                        -
                                        +
                                        @@ -768,7 +768,7 @@

                                        Filter icon activation modes

                                        -
                                        +
                                        diff --git a/book/en/extensions/tr-grid-row-grouping.html b/book/en/extensions/tr-grid-row-grouping.html index 8a6632d6..c6141112 100644 --- a/book/en/extensions/tr-grid-row-grouping.html +++ b/book/en/extensions/tr-grid-row-grouping.html @@ -23,7 +23,7 @@

                                        Grid Usage Guide

                                        - +
                                        • Getting Started
                                          @@ -278,7 +278,7 @@

                                          Grid Usage Guide

                                          Row Grouping

                                          The Row Grouping Extension uses categorization based on column field. Each group will have arrow button for expansion and collapsing of its members.

                                          -
                                          +
                                          @@ -377,7 +377,7 @@

                                          Basic usage

                                          Initial collapsing state

                                          The initial groups created by the extension are expanded by default. To initially collapse all groups by default, set defaultCollapse property to true

                                          -
                                          +
                                          @@ -465,7 +465,7 @@

                                          Data sorting

                                          Note: Try clicking on column header

                                          -
                                          +
                                          @@ -564,7 +564,7 @@

                                          Group sorting

                                          };

                                          You can now see that DJI has more priority over HKEX.

                                          -
                                          +
                                          @@ -661,7 +661,7 @@

                                          Nested group

                                          groupBy: ["group", "c1"] }, }; -
                                          +
                                          @@ -751,7 +751,7 @@

                                          Rendering group header rows

                                          Example custom style in group header rows

                                          In the example below, we demonstrate how to customize the style of group header rows. With this customization, you can add elements to the group header rows and include additional information from your side.

                                          -
                                          +
                                          @@ -1045,7 +1045,7 @@

                                          Example custom style in group

                                          Example summation row in group header rows

                                          In the example below, we demonstrate how to calculate the summation of row data for each column and display it in the group header rows.

                                          -
                                          +
                                          @@ -1184,7 +1184,7 @@

                                          Null/undefined group hiding

                                          In many cases, a group of data might contain an undefined or null value. This may display an unexpected grouped title.

                                          Example with null/undefined group

                                          -
                                          +
                                          @@ -1297,7 +1297,7 @@

                                          Example with null/undefined group

                                          Example with hidden null/undefined group

                                          -
                                          +
                                          @@ -1405,7 +1405,7 @@

                                          Example with hidden null/undef

                                          Rows in multiple groups

                                          In the case that data used for grouping is an array, the data row will be added to multiple groups according to the array's member. See the following example for an illustration.

                                          -
                                          +
                                          @@ -1505,7 +1505,7 @@

                                          Content as a header

                                          groupBy: ['col1', 'col2'] // Support at most 2 levels of grouping if contentAsHeader is enabled. }, }; -
                                          +
                                          @@ -1617,7 +1617,7 @@

                                          Content as a header

                                          Predefined color

                                          The extension supports color from the predefined colors. To do this you need to assign predefined class object to the predefinedColors property then specify group ID and color mapping object to the groupColors property.

                                          -
                                          +
                                          @@ -1825,7 +1825,7 @@

                                          Statistic Calculation with Row

                                          In the example below, we demonstrate how to leverage the power of row grouping to perform detailed statistical analysis within the grid. By incorporating both header and footer rows, users can easily access relevant group statistics. We achieve optimal performance by utilizing the beforeContentBinding event, which triggers whenever there are data changes. This approach ensures efficient row virtualization, displaying only the necessary data visible to the user. As a result, the application's speed and responsiveness are significantly improved, especially when working with large datasets.

                                          Additionally, the beforeContentBinding feature plays a crucial role in optimizing performance. Whenever there are changes in the underlying data, this event is triggered, allowing you to perform necessary calculations or updates before the content is rendered. This approach enhances efficiency and provides real-time updates, ensuring that users always have access to the most accurate and up-to-date information.

                                          -
                                          +
                                          @@ -2549,6 +2549,13 @@

                                          get

                                          Returns:
                                          boolean
                                          +
                                          +
                                          function
                                          +

                                          getFooterRowCount() → {number}

                                          +
                                          +
                                          Returns:
                                          +
                                          number
                                          +
                                          function

                                          getGroupingCriteria() → {Array.<string>}

                                          diff --git a/book/en/extensions/tr-grid-row-grouping.md b/book/en/extensions/tr-grid-row-grouping.md index bf68c4a5..7f8828de 100644 --- a/book/en/extensions/tr-grid-row-grouping.md +++ b/book/en/extensions/tr-grid-row-grouping.md @@ -1306,7 +1306,7 @@ document.getElementById("update_row").addEventListener("click", function (e) {

                                          API Reference

                                          -

                                          Type Definitions

                                          typedef

                                          GroupCriteria

                                          GroupCriteria can be one of the following values:
                                          null input will clear all existing grouping criteria
                                          string input is treat as column/field name in the data table
                                          Function input is for custom criteria
                                          Array input will create multiple groups in tree like manner (nested group criteria)
                                          Type:
                                          string | Array.<(string|function())>
                                          typedef

                                          GroupingState

                                          state of groupings or JSON String
                                          Type:
                                          Object
                                          Properties:
                                          Name Type Attributes Description
                                          collapsed boolean
                                          groupId number | string <optional>
                                          typedef

                                          GroupSortLogic(grpValA, grpValB, grpDataViewAopt, grpDataViewBopt) → {number}

                                          Method parameters provided by `groupSortLogic` callback
                                          Parameters:
                                          grpValA
                                          *
                                          Group value of the group in left hand side
                                          grpValB
                                          *
                                          Group value of the group in right hand side
                                          grpDataViewA
                                          Object
                                          <optional>
                                          DataView of the group in left hand side
                                          grpDataViewB
                                          Object
                                          <optional>
                                          DataView of the group in right hand side
                                          Returns:
                                          number
                                          typedef

                                          Options

                                          The options can be specified by `rowGrouping` property of the main grid's options
                                          Type:
                                          Object
                                          Properties:
                                          Name Type Attributes Default Description
                                          autoGroupRemoval boolean <optional>
                                          		 false Remove group that has no row member.
                                          autoGroupHiding boolean <optional>
                                          		 false Hide "null" or "undefined" group headers, while keeping the group's items intact.
                                          predefinedGroups Array | Array.<Array> <optional>
                                          		 null Add groups without content rows. Use 2D array for multi-level grouping.
                                          groupBy RowGroupingPlugin~GroupCriteria <optional>
                                          		 null GroupCriteria can be string, function, or array of string.
                                          groupCriteria RowGroupingPlugin~GroupCriteria <optional>
                                          		 null Alias to `groupBy`.
                                          displayColumn number <optional>
                                          		 0 Column Index for group header rendering.
                                          fixedDisplayColumn boolean <optional>
                                          		 false If enabled, displayColumn will remain in the same index, even if columns are shifted by insertion or removal.
                                          noCollapsible boolean <optional>
                                          		 false If enabled, arrows will be hidden and cell is not clickable. This flag takes precedence over `clickableCell` and `hiddenArrow`.
                                          clickableCell boolean <optional>
                                          		 true If disabled, clicking at cell will not expand that group
                                          hiddenArrow boolean | number | Array.<number> <optional>
                                          		 Specify header levels which is a single number start from 1 or an array of number that want to hide arrow icon. If specify true all arrows will be hidden.
                                          contentAsHeader boolean <optional>
                                          		 false If enabled, second level group header rows are hidden, the first content rows become a header, cells are not be clickable, and arrows are hidden.
                                          headerSpanning boolean <optional>
                                          		 true If disabled, every cell on the group header row is displayed
                                          footerSpanning boolean <optional>
                                          		 false If enabled, only cells from the first column will be shown, spanning over other cells
                                          groupSortLogic RowGroupingPlugin~GroupSortLogic <optional>
                                          		 null Logic for group sorting. There is no sorting by default (i.e. groups are placed in order of their creation time)
                                          autoGroupSorting boolean <optional>
                                          		 false If enabled, group sorting will be performed after each `groupAdded` event
                                          indentSize boolean | number | Array.<number> <optional>
                                          		 Use array to define indent for each group level. Use boolean to turn on or off indentation. Use number to define incremental step.
                                          colorTag boolean <optional>
                                          		 If not specified, the color tag will be disabled when using extension without halo theme.
                                          predefinedColors Object <optional>
                                          		 Predefined color object map for color tag
                                          groupColors Object <optional>
                                          		 The object map of group ID and predefined color.
                                          defaultCollapse boolean <optional>
                                          		 false Collapsing groups by default when a group is created
                                          clicked function <optional>
                                          		 null Event handler when user clicks on arrows or cells
                                          groupAdded function <optional>
                                          		 null Event handler
                                          beforeGroupAdded function <optional>
                                          		 null Event handler
                                          groupHeaderBinding function <optional>
                                          		 null Logic that will be executed on each group header row
                                          groupFooterBinding function <optional>
                                          		 null Once defined, footer row will be added on each group
                                          headerBinding function <optional>
                                          		 null Shorthand for `groupHeaderBinding`
                                          footerBinding function <optional>
                                          		 null Shorthand for `groupFooterBinding`
                                          nonGroupBinding function <optional>
                                          		 null This is used to clear any custom styling defined in groupHeaderBinding or groupFooterBinding

                                          Methods

                                          function

                                          beforeProcessOption(optionName, optionVal) → {*}

                                          Convert built-in grid config to extension config
                                          Parameters:
                                          optionName
                                          string
                                          optionVal
                                          *
                                          Returns:
                                          *
                                          The transformed value of the option
                                          function

                                          collapse(groupRowId, opt_collapsedopt)

                                          Parameters:
                                          groupRowId
                                          string
                                          opt_collapsed
                                          boolean
                                          <optional>
                                          function

                                          collapseAll(opt_collapsedopt)

                                          Parameters:
                                          opt_collapsed
                                          boolean
                                          <optional>
                                          function

                                          config(optionsopt)

                                          Parameters:
                                          options
                                          Object
                                          <optional>
                                          Grid configuration object
                                          function

                                          disableClicking(opt_disabledopt)

                                          Parameters:
                                          opt_disabled
                                          boolean
                                          <optional>
                                          function

                                          enableFixedDisplayColumn(opt_enabledopt)

                                          Fixed display column to stay at the same position even though the column has been moved, or shifted by removing and inserting column
                                          Parameters:
                                          opt_enabled
                                          boolean
                                          <optional>
                                          function

                                          enableFooterRow(opt_numopt)

                                          Parameters:
                                          opt_num
                                          boolean | number
                                          <optional>
                                          function

                                          expand(groupRowId, opt_expandedopt)

                                          Parameters:
                                          groupRowId
                                          string
                                          opt_expanded
                                          boolean
                                          <optional>
                                          function

                                          expandAll(opt_expandedopt)

                                          Parameters:
                                          opt_expanded
                                          boolean
                                          <optional>
                                          function

                                          getColumnMenu(colIndex, config) → {Object}

                                          Function for ColumnMenuExtension to collect config of column menu
                                          Parameters:
                                          colIndex
                                          number
                                          Column index
                                          config
                                          Object
                                          Column Menu configuration
                                          Returns:
                                          Object
                                          function

                                          getConfigObject(gridOptionsopt) → {Object}

                                          Parameters:
                                          gridOptions
                                          Object
                                          <optional>
                                          Returns:
                                          Object
                                          function

                                          getDataView() → {Object}

                                          Returns:
                                          Object
                                          DataView instance
                                          function

                                          getDefaultCollapse() → {boolean}

                                          Returns:
                                          boolean
                                          function

                                          getGroupingCriteria() → {Array.<string>}

                                          Returns:
                                          Array.<string>
                                          function

                                          getGroupingStates() → {Array.<RowGroupingPlugin~GroupingState>}

                                          Returns an array of states (collapsed or expanded)
                                          Returns:
                                          Array.<RowGroupingPlugin~GroupingState>
                                          function

                                          getGroupSortingLogic() → {function}

                                          Get the current group sort function. If none specified by setGroupSortingLogic() return
                                          standard string sort function.
                                          Returns:
                                          function
                                          function

                                          getName() → {string}

                                          Returns:
                                          string
                                          function

                                          groupBy(criteria)

                                          Alias for RowGroupingPlugin#setGroupingCriteria
                                          Parameters:
                                          criteria
                                          RowGroupingPlugin~GroupCriteria
                                          See:
                                          function

                                          hasGroupingCriteria() → {boolean}

                                          Returns:
                                          boolean
                                          function

                                          hasMultiTableSupport() → {boolean}

                                          Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
                                          Inherited From:
                                          GridPlugin#hasMultiTableSupport
                                          Returns:
                                          boolean
                                          function

                                          initialize(host, optionsopt)

                                          Parameters:
                                          host
                                          Object
                                          core grid object
                                          options
                                          Object
                                          <optional>
                                          function

                                          setDefaultCollapse(collapse)

                                          Parameters:
                                          collapse
                                          boolean
                                          Predefined color object map
                                          function

                                          setGroupingCriteria(criteria)

                                          Each duplicate values in the given columns will be grouped together. Number of generated groups will equal to number of unique values in the given columns.
                                          Parameters:
                                          criteria
                                          RowGroupingPlugin~GroupCriteria
                                          <br>Null input will clear all existing grouping criteria. <br>String input is treat as column name in data table <br>Array input will create mutilple groups in tree like manner (nested group criteria) <br>Any previous given values will be cleared out after calling this method
                                          function

                                          setGroupingStates(states)

                                          Set state for groups
                                          Parameters:
                                          states
                                          Array.<RowGroupingPlugin~GroupingState> | string
                                          Array state of groupings or JSON String
                                          function

                                          setGroupSortingLogic(sortFunction)

                                          Parameters:
                                          sortFunction
                                          RowGroupingPlugin~GroupSortLogic
                                          Comparer function for comparing the order of 2 groups. The function should take at least 2 parameters. <br>The function should return -1 if the first parameter should comes first, 1 for the other way, and 0 if they are equal. <br>The two first parameters passed to the function are group value that separates group. <br>The two last parameters passed to the function are data views of corresponding group.
                                          Example:
                                          var compare = function(grpA, grpB, dataViewA, dataViewB) {
+
                                              
                                                                                                                  
                                          Type Definitions
                                                                  
                                                      
                                          typedef
                                              
                                          GroupCriteria
                                              GroupCriteria can be one of the following values: 
                                          null input will clear all existing grouping criteria 
                                          string input is treat as column/field name in the data table 
                                          Function input is for custom criteria 
                                          Array input will create multiple groups in tree like manner (nested group criteria)
                                              
                                          Type:
                                              string | Array.<(string|function())>
                                                                                                      
                                                                      
                                                      
                                          typedef
                                              
                                          GroupingState
                                              state of groupings or JSON String
                                              
                                          Type:
                                              Object    
                                          Properties:
                                              
                                                  
                                                          Name                Type                Attributes                        Description    
                                                                                                        
                                                                      collapsed                                                    boolean                                                                                                                                                
                                                      
                                                                      groupId                                                    number | string                                                                                        <optional>
                                                                                                                                    		                                            
                                                  
                                                                                                      
                                                                      
                                                                          
                                          typedef
                                                                  
                                          GroupSortLogic(grpValA, grpValB, grpDataViewAopt, grpDataViewBopt) → {number}
                                                                      
                                                  Method parameters provided by `groupSortLogic` callback    
                                                                      
                                          Parameters:
                                                  
                                                  
                                                                      
                                          grpValA
                                                                  
                                                                      *                        
                                                                      
                                                                                                          
                                                                                              
                                                              Group value of the group in left hand side                
                                                              
                                                          
                                                                      
                                          grpValB
                                                                  
                                                                      *                        
                                                                      
                                                                                                          
                                                                                              
                                                              Group value of the group in right hand side                
                                                              
                                                          
                                                                      
                                          grpDataViewA
                                                                  
                                                                      Object                        
                                                                      
                                                                              <optional>                                                                
                                                                                              
                                                              DataView of the group in left hand side                
                                                              
                                                          
                                                                      
                                          grpDataViewB
                                                                  
                                                                      Object                        
                                                                      
                                                                              <optional>                                                                
                                                                                              
                                                              DataView of the group in right hand side                
                                                              
                                                      
                                                  
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  number    
                                                          
                                                                      
                                                      
                                          typedef
                                              
                                          Options
                                              The options can be specified by `rowGrouping` property of the main grid's options
                                              
                                          Type:
                                              Object    
                                          Properties:
                                              
                                                  
                                                          Name                Type                Attributes                        Default                Description    
                                                                                                        
                                                                      autoGroupRemoval                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            false                                                        Remove group that has no row member.        
                                                      
                                                                      autoGroupHiding                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            false                                                        Hide "null" or "undefined" group headers, while keeping the group's items intact.        
                                                      
                                                                      predefinedGroups                                                    Array | Array.<Array>                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Add groups without content rows. Use 2D array for multi-level grouping.        
                                                      
                                                                      groupBy                                                    RowGroupingPlugin~GroupCriteria                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        GroupCriteria can be string, function, or array of string.        
                                                      
                                                                      groupCriteria                                                    RowGroupingPlugin~GroupCriteria                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Alias to `groupBy`.        
                                                      
                                                                      displayColumn                                                    number                                                                                        <optional>
                                                                                                                                    		                                                                            0                                                        Column Index for group header rendering.        
                                                      
                                                                      fixedDisplayColumn                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            false                                                        If enabled, displayColumn will remain in the same index, even if columns are shifted by insertion or removal.        
                                                      
                                                                      noCollapsible                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            false                                                        If enabled, arrows will be hidden and cell is not clickable. This flag takes precedence over `clickableCell` and `hiddenArrow`.        
                                                      
                                                                      clickableCell                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            true                                                        If disabled, clicking at cell will not expand that group        
                                                      
                                                                      hiddenArrow                                                    boolean | number | Array.<number>                                                                                        <optional>
                                                                                                                                    		                                                                                                Specify header levels which is a single number start from 1 or an array of number that want to hide arrow icon. If specify true all arrows will be hidden.        
                                                      
                                                                      contentAsHeader                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            false                                                        If enabled, second level group header rows are hidden, the first content rows become a header, cells are not be clickable, and arrows are hidden.        
                                                      
                                                                      headerSpanning                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            true                                                        If disabled, every cell on the group header row is displayed        
                                                      
                                                                      footerSpanning                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            false                                                        If enabled, only cells from the first column will be shown, spanning over other cells        
                                                      
                                                                      groupSortLogic                                                    RowGroupingPlugin~GroupSortLogic                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Logic for group sorting. There is no sorting by default (i.e. groups are placed in order of their creation time)        
                                                      
                                                                      autoGroupSorting                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            false                                                        If enabled, group sorting will be performed after each `groupAdded` event        
                                                      
                                                                      indentSize                                                    boolean | number | Array.<number>                                                                                        <optional>
                                                                                                                                    		                                                                                                Use array to define indent for each group level. Use boolean to turn on or off indentation. Use number to define incremental step.        
                                                      
                                                                      colorTag                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                                                If not specified, the color tag will be disabled when using extension without halo theme.        
                                                      
                                                                      predefinedColors                                                    Object                                                                                        <optional>
                                                                                                                                    		                                                                                                Predefined color object map for color tag        
                                                      
                                                                      groupColors                                                    Object                                                                                        <optional>
                                                                                                                                    		                                                                                                The object map of group ID and predefined color.        
                                                      
                                                                      defaultCollapse                                                    boolean                                                                                        <optional>
                                                                                                                                    		                                                                            false                                                        Collapsing groups by default when a group is created        
                                                      
                                                                      clicked                                                    function                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Event handler when user clicks on arrows or cells        
                                                      
                                                                      groupAdded                                                    function                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Event handler        
                                                      
                                                                      beforeGroupAdded                                                    function                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Event handler        
                                                      
                                                                      groupHeaderBinding                                                    function                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Logic that will be executed on each group header row        
                                                      
                                                                      groupFooterBinding                                                    function                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Once defined, footer row will be added on each group        
                                                      
                                                                      headerBinding                                                    function                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Shorthand for `groupHeaderBinding`        
                                                      
                                                                      footerBinding                                                    function                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        Shorthand for `groupFooterBinding`        
                                                      
                                                                      nonGroupBinding                                                    function                                                                                        <optional>
                                                                                                                                    		                                                                            null                                                        This is used to clear any custom styling defined in groupHeaderBinding or groupFooterBinding        
                                                  
                                                                                                      
                                                                      
                                          Methods
                                                              
                                                                          
                                          function
                                                                  
                                          beforeProcessOption(optionName, optionVal) → {*}
                                                                      
                                                  Convert built-in grid config to extension config    
                                                                      
                                          Parameters:
                                                  
                                                  
                                                                      
                                          optionName
                                                                  
                                                                      string                        
                                                                                      
                                                          
                                                                      
                                          optionVal
                                                                  
                                                                      *                        
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  *    
                                              The transformed value of the option
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          collapse(groupRowId, opt_collapsedopt)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          groupRowId
                                                                  
                                                                      string                        
                                                                      
                                                                                                          
                                                                                      
                                                          
                                                                      
                                          opt_collapsed
                                                                  
                                                                      boolean                        
                                                                      
                                                                              <optional>                                                                
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          collapseAll(opt_collapsedopt)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          opt_collapsed
                                                                  
                                                                      boolean                        
                                                                      
                                                                              <optional>                                                                
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          config(optionsopt)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          options
                                                                  
                                                                      Object                        
                                                                      
                                                                              <optional>                                                                
                                                                                              
                                                              Grid configuration object                
                                                              
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          disableClicking(opt_disabledopt)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          opt_disabled
                                                                  
                                                                      boolean                        
                                                                      
                                                                              <optional>                                                                
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          enableFixedDisplayColumn(opt_enabledopt)
                                                                      
                                                  Fixed display column to stay at the same position even though the column has been moved, or shifted by removing and inserting column    
                                                                      
                                          Parameters:
                                                  
                                                  
                                                                      
                                          opt_enabled
                                                                  
                                                                      boolean                        
                                                                      
                                                                              <optional>                                                                
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          enableFooterRow(opt_numopt)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          opt_num
                                                                  
                                                                      boolean | number                        
                                                                      
                                                                              <optional>                                                                
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          expand(groupRowId, opt_expandedopt)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          groupRowId
                                                                  
                                                                      string                        
                                                                      
                                                                                                          
                                                                                      
                                                          
                                                                      
                                          opt_expanded
                                                                  
                                                                      boolean                        
                                                                      
                                                                              <optional>                                                                
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          expandAll(opt_expandedopt)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          opt_expanded
                                                                  
                                                                      boolean                        
                                                                      
                                                                              <optional>                                                                
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          getColumnMenu(colIndex, config) → {Object}
                                                                      
                                                  Function for ColumnMenuExtension to collect config of column menu    
                                                                      
                                          Parameters:
                                                  
                                                  
                                                                      
                                          colIndex
                                                                  
                                                                      number                        
                                                                                              
                                                              Column index                
                                                              
                                                          
                                                                      
                                          config
                                                                  
                                                                      Object                        
                                                                                              
                                                              Column Menu configuration                
                                                              
                                                      
                                                  
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  Object    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          getConfigObject(gridOptionsopt) → {Object}
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          gridOptions
                                                                  
                                                                      Object                        
                                                                      
                                                                              <optional>                                                                
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  Object    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          getDataView() → {Object}
                                                                                      
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  Object    
                                              DataView instance
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          getDefaultCollapse() → {boolean}
                                                                                      
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  boolean    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          getFooterRowCount() → {number}
                                                                                      
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  number    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          getGroupingCriteria() → {Array.<string>}
                                                                                      
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  Array.<string>    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          getGroupingStates() → {Array.<RowGroupingPlugin~GroupingState>}
                                                                      
                                                  Returns an array of states (collapsed or expanded)    
                                                                  
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  Array.<RowGroupingPlugin~GroupingState>    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          getGroupSortingLogic() → {function}
                                                                      
                                                  Get the current group sort function. If none specified by setGroupSortingLogic() return 
                                          standard string sort function.    
                                                                  
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  function    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          getName() → {string}
                                                                                      
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  string    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          groupBy(criteria)
                                                                      
                                                  Alias for RowGroupingPlugin#setGroupingCriteria    
                                                                      
                                          Parameters:
                                                  
                                                  
                                                                      
                                          criteria
                                                                  
                                                                      RowGroupingPlugin~GroupCriteria                        
                                                                                      
                                                      
                                                  
                                                                                                      
                                          See:
                                              
                                                      
                                                  
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          hasGroupingCriteria() → {boolean}
                                                                                      
                                                                                                      
                                                                          
                                          Returns:
                                                              
                                                  boolean    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          hasMultiTableSupport() → {boolean}
                                                                      
                                                  Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.    
                                                                  
                                                          
                                          Inherited From:
                                              
                                                  GridPlugin#hasMultiTableSupport    
                                                                                              
                                                                          
                                          Returns:
                                                              
                                                  boolean    
                                                          
                                                              
                                                                          
                                          function
                                                                  
                                          initialize(host, optionsopt)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          host
                                                                  
                                                                      Object                        
                                                                      
                                                                                                          
                                                                                              
                                                              core grid object                
                                                              
                                                          
                                                                      
                                          options
                                                                  
                                                                      Object                        
                                                                      
                                                                              <optional>                                                                
                                                                                      
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          setDefaultCollapse(collapse)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          collapse
                                                                  
                                                                      boolean                        
                                                                                              
                                                              Predefined color object map                
                                                              
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          setGroupingCriteria(criteria)
                                                                      
                                                  Each duplicate values in the given columns will be grouped together. Number of generated groups will equal to number of unique values in the given columns.    
                                                                      
                                          Parameters:
                                                  
                                                  
                                                                      
                                          criteria
                                                                  
                                                                      RowGroupingPlugin~GroupCriteria                        
                                                                                              
                                                              <br>Null input will clear all existing grouping criteria. <br>String input is treat as column name in data table <br>Array input will create mutilple groups in tree like manner (nested group criteria) <br>Any previous given values will be cleared out after calling this method                
                                                              
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          setGroupingStates(states)
                                                                      
                                                  Set state for groups    
                                                                      
                                          Parameters:
                                                  
                                                  
                                                                      
                                          states
                                                                  
                                                                      Array.<RowGroupingPlugin~GroupingState> | string                        
                                                                                              
                                                              Array state of groupings or JSON String                
                                                              
                                                      
                                                  
                                                                                                      
                                                                              
                                                              
                                                                          
                                          function
                                                                  
                                          setGroupSortingLogic(sortFunction)
                                                                                          
                                          Parameters:
                                                  
                                                  
                                                                      
                                          sortFunction
                                                                  
                                                                      RowGroupingPlugin~GroupSortLogic                        
                                                                                              
                                                              Comparer function for comparing the order of 2 groups. The function should take at least 2 parameters. <br>The function should return -1 if the first parameter should comes first, 1 for the other way, and 0 if they are equal. <br>The two first parameters passed to the function are group value that separates group. <br>The two last parameters passed to the function are data views of corresponding group.                
                                                              
                                                      
                                                  
                                                                                                      
                                                                                      
                                          Example:
                                                      
                                          var compare = function(grpA, grpB, dataViewA, dataViewB) {
   return (grpA <= grpB) ? -1 : 1;
 }
 var dstp = new RowGroupingExtension();
diff --git a/book/en/extensions/tr-grid-row-selection.html b/book/en/extensions/tr-grid-row-selection.html
index a8ebce3d..a903a8be 100644
--- a/book/en/extensions/tr-grid-row-selection.html
+++ b/book/en/extensions/tr-grid-row-selection.html
@@ -23,7 +23,7 @@ 
                                          Grid Usage Guide
                                          
     
                                          
     
                                          
       
                                          
-        
+        
           
                                            
             
                                          • 
               
                                            Getting Started
                                            
@@ -278,7 +278,7 @@ 
                                            Grid Usage Guide
                                            
             
                                            Row Selection
                                            
             
                                            The Row Selection Extension will add the ability to select a single row or multiple rows on Grid. 
                                            
 
-            
                                            
+            
                                            
               
                                            
                 
               
                                            
@@ -356,7 +356,7 @@ 
                                            basedOnContent mode
                                            
             
                                            Normally, when content is sorted and a row changes position, row selection will not change position like the content does (try example above). But if you do want the row selection to relocate itself with the content, you can turn on basedOnContent mode.
                                            
             
                                            For actual result, try to select one or more rows, then click the column header to sort data and see what happens with row selection.
                                            
 
-            
                                            
+            
                                            
               
                                            
                 
               
                                            
@@ -436,7 +436,7 @@ 
                                            basedOnContent mode
                                            
             
                                            Copy text content from seletected rows
                                            
             
                                            You can directly hook native copy event on Grid element to retrieve data and put it on system clipboard. Use the extension's APIs to get currently selected rows. 
                                            
 
-            
                                            
+            
                                            
               
                                            
                 
               
                                            
diff --git a/book/en/extensions/tr-grid-rowcoloring.html b/book/en/extensions/tr-grid-rowcoloring.html
index ba511abc..0c62cd58 100644
--- a/book/en/extensions/tr-grid-rowcoloring.html
+++ b/book/en/extensions/tr-grid-rowcoloring.html
@@ -23,7 +23,7 @@ 
                                            Grid Usage Guide
                                            
     
                                            
     
                                            
       
                                            
-        
+        
           
                                              
             
                                            • 
               
                                              Getting Started
                                              
@@ -278,7 +278,7 @@ 
                                              Grid Usage Guide
                                              
             
                                              Row Coloring
                                              
             
                                              The Row Coloring Extension provides a way to set text color and background color in each row.
                                              
 
-            
                                              
+            
                                              
               
                                              
                 
               
                                              
@@ -376,7 +376,7 @@ 
                                              Installation and how to imp
             
                                              User fields
                                              
             
                                              The extension supports text color and background color from the dataTable. To do this you need to set the bgColorField and textColorField properties in the rowColoring options with your specified field names.
                                              
 
-            
                                              
+            
                                              
               
                                              
                 
               
                                              
@@ -458,7 +458,7 @@ 
                                              User fields
                                              
             
                                              Predefined color mode
                                              
             
                                              The extension also supports text color and background color from the predefined colors. To do this you need to assign predefined class object to the predefinedColors property then set predefinedColoring properties to true and specify field name of the cssField property.
                                              
 
-            
                                              
+            
                                              
               
                                              
                 
               
                                              
diff --git a/book/en/extensions/tr-grid-textformatting.html b/book/en/extensions/tr-grid-textformatting.html
index aa17f15d..b4b963b5 100644
--- a/book/en/extensions/tr-grid-textformatting.html
+++ b/book/en/extensions/tr-grid-textformatting.html
@@ -23,7 +23,7 @@ 
                                              Grid Usage Guide
                                              
     
                                              
     
                                              
       
                                              
-        
+        
           
                                                
             
                                              • 
               
                                                Getting Started
                                                
@@ -278,7 +278,7 @@ 
                                                Grid Usage Guide
                                                
             
                                                Text Formatting
                                                
             
                                                The Text Formatting Extension provides special formatting for presenting actual data. By default, the possible formats are number, scaled, percent, and datetime. However, the custom formatting can also be created to handle particular cases.
                                                
 
-            
                                                
+            
                                                
               
                                                
                 
               
                                                
@@ -453,7 +453,7 @@ 
                                                Formatting custom content
                                                
             
                                                Formatting custom content by using formatLogic
                                                
             
                                                The first way is to use formatLogic. You can specify a function on how to apply formatted text to your custom content. formattedText and cell will be provided through the event argument when formatLogic is executed. Inside the function, you can then put formatted text in your custom content at the appropriate place, as illustrated below:
                                                
 
-            
                                                
+            
                                                
               
                                                
                 
               
                                                
@@ -557,7 +557,7 @@ 
                                                Formatting custom conten
             
                                                Formatting custom content by manual formatting
                                                
             
                                                The second way is to apply the format within your custom rendering/formatter by using the extension's formatText method. This second method requires modification to custom rendering/formatter. First, you have to disable automatic text formatting by setting autoTextFormatting to false, so that your custom content is not overwritten. Secondly, you need to keep reference to the extension instance, so that it will be available within your custom rendering. Lastly, use the extension's formatText to obtain formatted text. The example below shows the same result as the example above, but without using formatLogic: 
                                                
 
-            
                                                
+            
                                                
               
                                                
                 
               
                                                
diff --git a/book/en/extensions/tr-grid-titlewrap.html b/book/en/extensions/tr-grid-titlewrap.html
index 79a49d5a..0cb803e4 100644
--- a/book/en/extensions/tr-grid-titlewrap.html
+++ b/book/en/extensions/tr-grid-titlewrap.html
@@ -23,7 +23,7 @@ 
                                                Grid Usage Guide
                                                
     
                                                
     
                                                
       
                                                
-        
+        
           
                                                  
             
                                                • 
               
                                                  Getting Started
                                                  
@@ -278,7 +278,7 @@ 
                                                  Grid Usage Guide
                                                  
             
                                                  Title Wrap
                                                  
             
                                                  The Title Wrap Extension wraps column headers into multiple lines if the text is too long, instead of cutting off the text.
                                                  
 
-            
                                                  
+            
                                                  
               
                                                  
                 
               
                                                  
@@ -349,7 +349,7 @@ 
                                                  Installation and how to imp
             
                                                  Installation examples and details of how to import the extension to a project are available on the Overview page.
                                                  
             
                                                  Title wrap with no padding top and bottom
                                                  
 
-            
                                                  
+            
                                                  
               
                                                  
                 
               
                                                  
@@ -421,7 +421,7 @@ 
                                                  Title wrap with no padding to
             
                                                  
             
                                                  Title wrap with group column
                                                  
 
-            
                                                  
+            
                                                  
               
                                                  
                 
               
                                                  
@@ -503,7 +503,7 @@ 
                                                  Title wrap with group column
                                                  
             
                                                  
             
                                                  Title wrap with nested group column
                                                  
 
-            
                                                  
+            
                                                  
               
                                                  
                 
               
                                                  
diff --git a/book/en/extensions/zoom.html b/book/en/extensions/zoom.html
index 312b0ce1..d146b60b 100644
--- a/book/en/extensions/zoom.html
+++ b/book/en/extensions/zoom.html
@@ -23,7 +23,7 @@ 
                                                  Grid Usage Guide
                                                  
     
                                                  
     
                                                  
       
                                                  
-        
+        
           
                                                    
             
                                                  • 
               
                                                    Getting Started
                                                    
@@ -278,7 +278,7 @@ 
                                                    Grid Usage Guide
                                                    
             
                                                    Zoom
                                                    
             
                                                    The Zoom Extension adds Grid's ability to zoom in or zoom out.
                                                    
 
-            
                                                    
+            
                                                    
               
                                                    
                 
               
                                                    
diff --git a/book/en/filtering/custom-filter.html b/book/en/filtering/custom-filter.html
index c9a187b5..fe62e4b0 100644
--- a/book/en/filtering/custom-filter.html
+++ b/book/en/filtering/custom-filter.html
@@ -23,7 +23,7 @@ 
                                                    Grid Usage Guide
                                                    
     
                                                    
     
                                                    
       
                                                    
-        
+        
           
                                                      
             
                                                    • 
               
                                                      Getting Started
                                                      
@@ -277,7 +277,7 @@ 
                                                      Custom Filter UI
                                                      
             
                                                      Apart from the built-in filter UIs, Filter Input Extension also supports UI customizations, which allows users to create their UI.
                                                      
             
                                                      The Filter Input Extension provides an inputCreated event callback passed through the extension's configuration and is allowed to modify UI elements in this callback handler. More details about the configuration are available here. The following example shows the first column:
                                                      
 
-            
                                                      
+            
                                                      
               
                                                      
                 
               
                                                      
diff --git a/book/en/filtering/filtering-auto-filter-row.html b/book/en/filtering/filtering-auto-filter-row.html
index a4a73545..5b353d95 100644
--- a/book/en/filtering/filtering-auto-filter-row.html
+++ b/book/en/filtering/filtering-auto-filter-row.html
@@ -23,7 +23,7 @@ 
                                                      Grid Usage Guide
                                                      
     
                                                      
     
                                                      
       
                                                      
-        
+        
           
                                                        
             
                                                      • 
               
                                                        Getting Started
                                                        
@@ -289,7 +289,7 @@ 
                                                        Filter UI
                                                        
             
                                                        Built-in filter UIs
                                                        
             
                                                        The Filter Input Extension provides many types of input UIs. The available UIs are text input, number input, dropdown selector and date-time picker.
                                                        
 
-            
                                                        
+            
                                                        
               
                                                        
                 
               
                                                        
@@ -387,7 +387,7 @@ 
                                                        Built-in filter UIs
                                                        
             
                                                        Custom filter logic
                                                        
             
                                                        In several use cases, we may need more than a default string search which we can achieve by creating a new function that filters data in each row, then attach the function itself to defaultLogic, the property of Filter Input Extension options (Find more available options at Filter Input Extension). Let's see column "rate" in the following example.
                                                        
 
-            
                                                        
+            
                                                        
               
                                                        
                 
               
                                                        
diff --git a/book/en/filtering/filtering-get-reset.html b/book/en/filtering/filtering-get-reset.html
index b5694dc3..860ab4f6 100644
--- a/book/en/filtering/filtering-get-reset.html
+++ b/book/en/filtering/filtering-get-reset.html
@@ -23,7 +23,7 @@ 
                                                        Grid Usage Guide
                                                        
     
                                                        
     
                                                        
       
                                                        
-        
+        
           
                                                          
             
                                                        • 
               
                                                          Getting Started
                                                          
@@ -281,7 +281,7 @@ 
                                                          Get/Reset State
                                                          
             
                                                        
             
                                                        For more details see the Row Filter Extension API documentation.
                                                        
 
-            
                                                        
+            
                                                        
               
                                                        
                 
               
                                                        
diff --git a/book/en/filtering/filtering-programmatically.html b/book/en/filtering/filtering-programmatically.html
index 892c4e74..30bab21b 100644
--- a/book/en/filtering/filtering-programmatically.html
+++ b/book/en/filtering/filtering-programmatically.html
@@ -23,7 +23,7 @@ 
                                                        Grid Usage Guide
                                                        
     
                                                        
     
                                                        
       
                                                        
-        
+        
           
                                                          
             
                                                        • 
               
                                                          Getting Started
                                                          
@@ -288,7 +288,7 @@ 
                                                          Filtering - Programmatic
                                                          
 });

                                          Example

                                          -
                                          +
                                          diff --git a/book/en/general_concept/accessing-data.html b/book/en/general_concept/accessing-data.html index 620703fc..213c2e22 100644 --- a/book/en/general_concept/accessing-data.html +++ b/book/en/general_concept/accessing-data.html @@ -23,7 +23,7 @@

                                          Grid Usage Guide

                                          - +
                                          • Getting Started
                                            diff --git a/book/en/general_concept/basic.html b/book/en/general_concept/basic.html index 85f53d67..00d2d0e6 100644 --- a/book/en/general_concept/basic.html +++ b/book/en/general_concept/basic.html @@ -23,7 +23,7 @@

                                            Grid Usage Guide

                                          - +
                                          • Getting Started
                                            diff --git a/book/en/general_concept/disposing-grid.html b/book/en/general_concept/disposing-grid.html index d9a5768b..56a631e2 100644 --- a/book/en/general_concept/disposing-grid.html +++ b/book/en/general_concept/disposing-grid.html @@ -23,7 +23,7 @@

                                            Grid Usage Guide

                                          - +
                                          • Getting Started
                                            diff --git a/book/en/general_concept/event-listeners.html b/book/en/general_concept/event-listeners.html index 5f7c2887..e5823d74 100644 --- a/book/en/general_concept/event-listeners.html +++ b/book/en/general_concept/event-listeners.html @@ -23,7 +23,7 @@

                                            Grid Usage Guide

                                          - +
                                          • Getting Started
                                            diff --git a/book/en/general_concept/initializing-data.html b/book/en/general_concept/initializing-data.html index 3f4e8bdb..54df1360 100644 --- a/book/en/general_concept/initializing-data.html +++ b/book/en/general_concept/initializing-data.html @@ -23,7 +23,7 @@

                                            Grid Usage Guide

                                          - +
                                          • Getting Started
                                            diff --git a/book/en/getting_started/angular_guide.html b/book/en/getting_started/angular_guide.html index 0134cfa3..bc86177b 100644 --- a/book/en/getting_started/angular_guide.html +++ b/book/en/getting_started/angular_guide.html @@ -23,7 +23,7 @@

                                            Grid Usage Guide

                                          - +
                                          • Getting Started
                                            diff --git a/book/en/getting_started/overview.html b/book/en/getting_started/overview.html index 198b5e23..5365c29b 100644 --- a/book/en/getting_started/overview.html +++ b/book/en/getting_started/overview.html @@ -23,7 +23,7 @@

                                            Grid Usage Guide

                                          - +
                                          • Getting Started
                                            diff --git a/book/en/getting_started/react_guide.html b/book/en/getting_started/react_guide.html index 6ee579ba..2d61e62b 100644 --- a/book/en/getting_started/react_guide.html +++ b/book/en/getting_started/react_guide.html @@ -23,7 +23,7 @@

                                            Grid Usage Guide

                                          - +
                                          • Getting Started
                                            diff --git a/book/en/getting_started/typescript.html b/book/en/getting_started/typescript.html index 3e2717ec..1a3dbd85 100644 --- a/book/en/getting_started/typescript.html +++ b/book/en/getting_started/typescript.html @@ -23,7 +23,7 @@

                                            Grid Usage Guide

                                          - +
                                          • Getting Started
                                            diff --git a/book/en/index.html b/book/en/index.html index 47a9bea1..58cece9e 100644 --- a/book/en/index.html +++ b/book/en/index.html @@ -23,7 +23,7 @@

                                            Grid Usage Guide

                                          - +
                                          • Getting Started
                                            @@ -278,7 +278,7 @@

                                            Grid

                                            Installation

                                            EFX Grid element and extensions are published under single package.

                                            npm install @refinitiv-ui/efx-grid
                                            -

                                            The element is required theme to instantiate itself in the app. Refinitiv's design system is called Halo theme and you can install it from npm command.

                                            +

                                            The element is required theme to instantiate itself in the app. LSEG's design system is called Halo theme and you can install it from npm command.

                                            npm install @refinitiv-ui/halo-theme

                                            Setup guide

                                            Use import syntax to import the Grid and theme into your app.

                                            @@ -305,7 +305,7 @@

                                            Setup guide

                                            License for the Grid

                                            Please see the license here.

                                            License for the Halo Theme

                                            -

                                            The font “Proxima Nova Fin” shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see the license here.

                                            +

                                            The font “Proxima Nova Fin” shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see the license here.

                                          diff --git a/book/en/license.html b/book/en/license.html index dac44bcc..15e4291e 100644 --- a/book/en/license.html +++ b/book/en/license.html @@ -23,7 +23,7 @@

                                          Grid Usage Guide

                                          - +
                                          • Getting Started
                                            @@ -274,14 +274,14 @@

                                            Grid Usage Guide

                                            Grid's License

                                            -

                                            Copyright © 2022 Refinitiv, an LSEG business. All rights reserved.

                                            +

                                            Copyright © 2022 LSEG. All rights reserved.

                                            Permission to use and redistribute this software in source and binary forms, with or without modification (the “Software”) is hereby granted to any person, provided the following conditions are met:

                                            1. -

                                              The person is an active Refinitiv Subscription License holder currently using Refinitiv products or services.

                                              +

                                              The person is an active LSEG Subscription License holder currently using LSEG products or services.

                                            2. -

                                              The Software and its closed source components must only be used within Refinitiv products or services. Any use of the Software and its closed source components outside Refinitiv products or services is not permitted unless explicitly authorized in writing from the copyright holder.

                                              +

                                              The Software and its closed source components must only be used within LSEG products or services. Any use of the Software and its closed source components outside LSEG products or services is not permitted unless explicitly authorized in writing from the copyright holder.

                                            3. Redistribution of the Software in source code in any form must retain the above copyright notice, this list of conditions, and the following disclaimer.

                                              diff --git a/book/en/license.md b/book/en/license.md index c8d90c4b..a82a9d49 100644 --- a/book/en/license.md +++ b/book/en/license.md @@ -1,12 +1,12 @@ # Grid's License -Copyright © 2022 Refinitiv, an LSEG business. All rights reserved. +Copyright © 2022 LSEG. All rights reserved. Permission to use and redistribute this software in source and binary forms, with or without modification (the “Software”) is hereby granted to any person, provided the following conditions are met: -1. The person is an active Refinitiv Subscription License holder currently using Refinitiv products or services. +1. The person is an active LSEG Subscription License holder currently using LSEG products or services. -2. The Software and its closed source components must only be used within Refinitiv products or services. Any use of the Software and its closed source components outside Refinitiv products or services is not permitted unless explicitly authorized in writing from the copyright holder. +2. The Software and its closed source components must only be used within LSEG products or services. Any use of the Software and its closed source components outside LSEG products or services is not permitted unless explicitly authorized in writing from the copyright holder. 3. Redistribution of the Software in source code in any form must retain the above copyright notice, this list of conditions, and the following disclaimer. diff --git a/book/en/migrating/from-emerald-grid.html b/book/en/migrating/from-emerald-grid.html index 3ac0a98d..7fec21c2 100644 --- a/book/en/migrating/from-emerald-grid.html +++ b/book/en/migrating/from-emerald-grid.html @@ -23,7 +23,7 @@

                                              Grid Usage Guide

                                            - +
                                            • Getting Started
                                              diff --git a/book/en/misc/core-apis.html b/book/en/misc/core-apis.html index 9cfb0421..e1c596cb 100644 --- a/book/en/misc/core-apis.html +++ b/book/en/misc/core-apis.html @@ -23,7 +23,7 @@

                                              Grid Usage Guide

                                            - +
                                            • Getting Started
                                              @@ -297,7 +297,7 @@

                                              Getting built-in plugins and ex

                                              The following example shows how you can listen to the columnSorted event fired after each sorting state change from the SortableTitlePlugin.

                                              Example

                                              -
                                              +
                                              diff --git a/book/en/misc/fifty-thosand-rows.html b/book/en/misc/fifty-thosand-rows.html index 9cede61d..421324da 100644 --- a/book/en/misc/fifty-thosand-rows.html +++ b/book/en/misc/fifty-thosand-rows.html @@ -23,7 +23,7 @@

                                              Grid Usage Guide

                                              - +
                                              • Getting Started
                                                @@ -280,7 +280,7 @@

                                                Handling 50,000 Rows

                                                Example

                                                -
                                                +
                                                diff --git a/book/en/misc/loading-mask.html b/book/en/misc/loading-mask.html index 73aee1e4..8660eaeb 100644 --- a/book/en/misc/loading-mask.html +++ b/book/en/misc/loading-mask.html @@ -23,7 +23,7 @@

                                                Grid Usage Guide

                                                - +
                                                • Getting Started
                                                  @@ -277,7 +277,7 @@

                                                  Loading Mask

                                                  Loading mask is not part of Grid. To follow the standard theme, the UI and functionalities are provided by loader component. So, you need to put an overlay on top of the grid and not inside of it. For more advanced UI and behaviors, the implementation has to be done on the application side.

                                                  Basic Example

                                                  -
                                                  +
                                                  @@ -376,7 +376,7 @@

                                                  Basic Example

                                                  Infinite Scrolling with Data Fetching Example

                                                  -
                                                  +
                                                  diff --git a/book/en/misc/pagination.html b/book/en/misc/pagination.html index 545809e4..274f7b90 100644 --- a/book/en/misc/pagination.html +++ b/book/en/misc/pagination.html @@ -23,7 +23,7 @@

                                                  Grid Usage Guide

                                                  - +
                                                  • Getting Started
                                                    @@ -288,7 +288,7 @@

                                                    Example

                                                    function onPageChanged(e) { requestData(e.detail.value, PAGE_SIZE, onServerResponse); } -
                                                    +
                                                    @@ -442,7 +442,7 @@

                                                    Client side pagination

                                                    If you have all the data available on the client side and want to show data in pagination style, you can use the Pagination Extension and the pagination element. The current page and page size can be configured using the pagination option. The pagination behaviors are then implemented by the extension. See Pagination Extension for more details.

                                                    Example

                                                    -
                                                    +
                                                    diff --git a/book/en/misc/row-expansion.html b/book/en/misc/row-expansion.html index 947451ac..9a9c3075 100644 --- a/book/en/misc/row-expansion.html +++ b/book/en/misc/row-expansion.html @@ -23,7 +23,7 @@

                                                    Grid Usage Guide

                                                    - +
                                                    • Getting Started
                                                      @@ -307,7 +307,7 @@

                                                      General Concepts and Row Expans

                                                      The example below shows how to create row expansion when clicking on a normal row. It also shows how to save and load row expansion states.

                                                      -
                                                      +
                                                      @@ -447,7 +447,7 @@

                                                      General Concepts and Row Expans

                                                      Managing states for row expansion

                                                      Since row expansion has no row data to hold its state, the data has to be stored on the expanded row. The example below shows how you can have two different types of content based on the button being clicked.

                                                      -
                                                      +
                                                      @@ -599,7 +599,7 @@

                                                      Handling asynchronous content

                                                      Rows can be shifted and data can be updated during the asynchronous process, such as waiting for a response from a server. It is a good idea to always use the row ID for referencing a row and not assume that rows or elements stay in the same place.

                                                      The example below shows how to render custom content with asynchronous data. The row ID is retrieved and used for referencing after the server response.

                                                      -
                                                      +
                                                      diff --git a/book/en/misc/row-span.html b/book/en/misc/row-span.html index c02d9fe3..c360fcb9 100644 --- a/book/en/misc/row-span.html +++ b/book/en/misc/row-span.html @@ -23,7 +23,7 @@

                                                      Grid Usage Guide

                                                      - +
                                                      • Getting Started
                                                        @@ -280,7 +280,7 @@

                                                        Row virtualization mode

                                                        Grid does not support row span in row virtualization mode. The row virtualization mode can be set using rowVirtualization: false in the configs.

                                                        Example 1: setting row span after initialization

                                                        -
                                                        +
                                                        @@ -354,7 +354,7 @@

                                                        Example 1: setting row

                                                        Example 2: setting row span in data binding

                                                        -
                                                        +
                                                        diff --git a/book/en/misc/text-selection.html b/book/en/misc/text-selection.html index 41ccff8e..54a18cd7 100644 --- a/book/en/misc/text-selection.html +++ b/book/en/misc/text-selection.html @@ -23,7 +23,7 @@

                                                        Grid Usage Guide

                                                        - +
                                                        • Getting Started
                                                          @@ -287,7 +287,7 @@

                                                          Limitation with safari

                                                          Example

                                                          If you use Safari, try clicking the button in column Market from the sample below. You won't be able to receive the click event.

                                                          -
                                                          +
                                                          @@ -368,7 +368,7 @@

                                                          Limitation with row virtualizationText selection with row virtualization cannot select all data in the grid.
                                                          In the example below, the grid has text selection enabled and uses row virtualization.
                                                          When you try to select and copy text from the grid and paste it into a text area, you will see that not all data from the grid is obtained.
                                                          This is because row virtualization render only the rows that is visible in the grid's viewport.
                                                          For example, if you have 50 rows of data, but the grid can only show the first 10 rows at a time, then when you try to select the text, it will only select the first 14 rows (10 rows + buffer rows).
                                                          If you want to know about row virtualization in more detail, you can refer to the Understanding row virtualization section in the Custom Formatter page.

                                                          Example

                                                          -
                                                          +
                                                          @@ -473,7 +473,7 @@

                                                          Copying all cont

                                                          If you want to copy all the data in the grid, you can do it by focusing on the grid element and modifying the clipboard without text selection.
                                                          To do this, you can listen for the click event on the grid element and call the focus method on the grid API to focus on the grid.
                                                          Then, you can listen for the copy event on the grid element and modify the clipboard as shown in the example below.

                                                          Example

                                                          -
                                                          +
                                                          diff --git a/book/en/node_modules/@grid/column-dragging/dist/column-dragging.min.js b/book/en/node_modules/@grid/column-dragging/dist/column-dragging.min.js index 0b7bc908..e8fb792c 100644 --- a/book/en/node_modules/@grid/column-dragging/dist/column-dragging.min.js +++ b/book/en/node_modules/@grid/column-dragging/dist/column-dragging.min.js @@ -1 +1 @@ -!function(e){var t={};function o(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,o),i.l=!0,i.exports}o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)o.d(r,i,function(t){return e[t]}.bind(null,i));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";o.r(t);var r={inherits:function(e,t){function o(){}o.prototype=t.prototype,e.prototype=new o,e.prototype.constructor=e,e.base=function(e,o,r){o||(o="constructor");for(var i=arguments.length,n=new Array(i),l=2;l=0&&(o.splice(r,1),--this._listenerCount)}},i.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},i.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},i.prototype.getListener=function(e,t){if(e){var o=this._events?this._events[e]:null;if(o)return t||(t=0),o[t]||null}return null},i.prototype.addListener=function(e,t){var o=e?e[t]:null;"function"==typeof o&&this.addEventListener(t,o)},i.prototype._prepareEventArguments=function(e,t){return t},i.prototype._dispatch=function(e,t){var o=this._events?this._events[e]:null;if(o){t=this._prepareEventArguments(e,t);for(var r=o.length,i=0;i=0;){var i=this._hosts[r];if(i.getElement().contains(t))return i}return null},s.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},s.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},s.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var o=this.getColumnIndex(e),r=this._realTimeGrid.getColumnDefinition(o);if(r)return r.getName()}return""},s.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},s.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var o,r=this._compositeGrid.getColumnFields(),i=this._compositeGrid.getColumnCount(),n=[],l=0;l=0&&o=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var o=this._realTimeGrid.getColumnDefinition(e);return o?o.getId():""},s.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},s.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},s.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},s.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},s.prototype._moveColumnById=function(e,t){var o=this._hosts,r=o?o.length:0;if(r){for(var i=0,n=0;n=0&&t>=0){var i=this._activeGrid||this._hosts[0],n=i?i.getCell(r.sectionType||"content",e,t):null;r.target=n?n.getElement():null}return r};var a={left:37,right:39,up:38,down:40,tab:9};s.prototype._mockKeyboardEvent=function(e,t){var o=t||{};return o.preventDefault=function(){},o.stopPropagation=function(){},"string"==typeof e&&(e=e.toLowerCase(),e=a[e]),o.keyCode=e,o};var d=function(e,t){var o="number"==typeof t?e.getRowDataAt(t):e.getRowData(t);return o&&o.ROW_DEF||null},u=function(e){return e},c=function(e){return e?e.ROW_DEF.getRowData():null},h=function(e){if(e){var t=e.ROW_DEF;return t?t.getRowData():e}return null},p=function(e,t){return function(e,t,o){if(!e)return null;if(!t||e===t)return e;var r;if(o)for(var i=o.length,n=0;n=16||(o+="0"),o+=i?i.toString(16).toUpperCase():"0"}return o},C={},b=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},x=function(e,t,o){"attributes"===o.type&&(null!=t?o.attributeName===t&&e(o.target.getAttribute(t)):e(o.target))};C._getNewId=function(){return"observer_"+ ++C._id},C._addObserver=function(e,t,o){var r=o;r||(r={}),r.attributes=!0,C._observer.observe(e,r),C._addListener(e,t)},C._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=o),I._components[e]=t}return t},I.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return w[t]?t:""},I.hasTheme=function(e){return e===I.getThemeName()},I.getThemeName=function(e){return I._themeName||(I._themeName=I.getCssVariable("--theme-name",document.documentElement)),I._themeName},I.setThemeName=function(e){I._themeName=e},I.isThemeLoaded=function(){return I._themeLoaded},I.getColors=function(){return I.themeColors},I.isHaloTheme=function(e){return null==e&&(e=I.getThemeName()),!!e&&e.indexOf("halo")>=0},I.injectIcons=function(e,t){if("object"==typeof e){var o=I.getThemeName();e.themeName=o;var r=I.getElfVersion();e.elfVersion=r;var i=I._icons[o];i&&(e.icons=i)}},I.getIconList=function(){var e=I._icons[I.getThemeName()];return e?v(e):[]},I._onIconPreloaded=function(){if(I._dummyIcon){var e=I._dummyIcon.parentNode;e&&e.removeChild(I._dummyIcon),I._dummyIcon=null}},I.prepareIconPreloading=function(){if(!I._iconLoaded){I._iconLoaded=!0;var e=I.getIconList();if(e.length){setTimeout(I._onIconPreloaded,10);var t=I._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},I.getCssVariable=function(e,t){var o="",r=t||document.body;return window&&"string"==typeof e&&1===r.nodeType&&e.match(/^--/)&&(o=(o=window.getComputedStyle(r).getPropertyValue(e)).replace(/[\"\']/g,"")),o},I.getCssVariables=function(e,t){var o=t||document.body;if(window&&1===o.nodeType){var r=window.getComputedStyle(o);for(var i in e){var n=e[i];n&&n.match(/^--/)&&(e[i]=r.getPropertyValue(n).replace(/\"/g,""))}}return e||null},I.setRTK=function(e){null!=e&&(I._rtk=e)},I.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},I._addThemeChangedCallback=function(e){var t=I._callbacks;t.indexOf(e)<0&&t.push(e)},I.reloadThemeColors=function(){return I._deferred&&I._deferred.isFulfilled()?(I._profileName="",I._themeLoaded=!1,I.themeReady=null,I.getThemeColors()):I.themeReady},I.getThemeColors=function(e){if("function"==typeof e&&I._addThemeChangedCallback(e),I.themeReady)return I.themeReady;var t=I._deferred=new l;I.themeReady=t.promise;var o=I.getMovementColorProfile();if(o)o!==I._profileName?setTimeout(I._profileNameRetrieved,100):I._deferred.resolve(I.themeColors);else{var r={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},i=window?window.JET:null;if(I._themeLoaded=!1,I._rtk&&I._rtk.Settings)I._rtk.Settings.getAsync(r).then(I._loadingProfileSuccess).catch(I._loadingProfileFailure);else if(i&&i.Settings)try{i.Settings.read(I._loadingProfileSuccess,r)}catch(e){I._loadingProfileFailure()}else setTimeout(I._profileNameRetrieved,100)}return t.promise};var B=function(e){if(e!==I._profileName){I._retrieveThemeColors(e),I._pendingResolve&&(I._pendingResolve=!1,I._deferred.resolve(I.themeColors));for(var t=I._callbacks,o=0;oo)&&(t=o);--t>=0;)e.removeChild(e.lastChild)}},setContent:function(e,t){if(e)if(t||0===t){var o=t.nodeType;1===o||3===o?t!==e.lastChild&&(G.removeChildren(e),e.appendChild(t)):Array.isArray(t)?(G.removeChildren(e),G.appendChild(e,t)):e.textContent=t}else G.removeChildren(e)},toggleAttribute:function(e,t,o){o?e.setAttribute(t,"string"==typeof o?o:""):null==o?e.hasAttribute(t)?e.removeAttribute(t):e.setAttribute(t,""):e.removeAttribute(t)},toggleClass:function(e,t,o){o?e.classList.add(t):null==o?e.classList.contains(t)?e.classList.remove(t):e.classList.add(t):e.classList.remove(t)},addClasses:function(e,t){if(e)for(var o=Array.isArray(t)?t:arguments,r=o.length,i=0;i=0||(this._hosts.push(e),e.unloadPlugin("DragAndDropTitlePlugin"),e.listen("mousedown",this._onMouseDown),e.listen("dragstart",n),this.config(t),this._dragUI=new T({dragBox:this._dragBox,dragBoxIcon:this._dragBoxIcon}),T.stylePromise?T.applyThemeColor(e):(T.stylePromise=I.getThemeColors()).then(this._onThemeLoaded).catch(this._onThemeLoaded))},R.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(this._hosts.splice(t,1),e.unlisten("mousedown",this._onMouseDown),this._hosts.length||this._dragPulseId&&(window.clearInterval(this._dragPulseId),this._dragPulseId=0),this._dispose())},R.prototype._onThemeLoaded=function(){var e=I.getColors();this._dragUI.onThemeLoaded(e);for(var t=this._hosts.length;--t>=0;)T.applyThemeColor(this._hosts[t])},R.prototype.config=function(e){if(e){var t=e.noColumnDragging;null==t&&null!=e.columnReorder&&(t=!e.columnReorder),null!=t&&(this._disabled=!!t);var o=e.columnDragging;o&&("function"==typeof o.dragBoxRenderer&&(this._dragBoxRenderer=o.dragBoxRenderer,this._dragBox.classList.add("drag-box"),this._dragBox.classList.remove("drag-box-disabled")),this.addListener(o,"dragStart"),this.addListener(o,"drag"),this.addListener(o,"dragEnd"),this.addListener(o,"preColumnMoved"),this.addListener(o,"columnMoved"),this.addListener(o,"dragInterval"))}},R.prototype.getConfigObject=function(e){var t=e||{};this._disabled&&(t.noColumnDragging=!0);var o=t.columnDragging;return o||(o=t.columnDragging={}),t},R.prototype.lockFrozenColumn=function(e){this._lockFrozen=e},R.prototype.disable=function(e){this._disabled=!1!==e},R.prototype.isDisabled=function(){return this._disabled},R.prototype.disableMoving=function(e){this._noColumnMoving=!1!==e},R.prototype.disableDragBox=function(e){this._noDragBox=!1!==e},R.prototype._isAllowed=function(e){var t=this._clickedGrid||this._hosts[0];if(t){var o=t.getStationaryColumnIndex();if(o<0)return!0;if(e<=o)return!1}return!0},R.prototype._onMouseDown=function(e){if(!this._disabled&&!(e.shiftKey||e.ctrlKey||e.altKey||e.button||this._timerId)){var t=this.getRelativeGrid(e);if(t&&(this._pos=t.getRelativePosition(e),!1!==this._pos.hit)){var o=this._pos.section;if(o&&"title"===this._pos.sectionType){var r=this._pos.colIndex;if(this._isAllowed(r)&&(!this._lockFrozen||!t.isPinnedColumn(r))){var i=this._pos.rowIndex,n=this._findMoveableBorder(r,i-1,o),l=this._getSpan(r,i,o);this._clickedGrid=t,this._clickedSection=o,this._clickedRow=i,this._startPos=this._pos,this._startColumn=l.left,this._endColumn=l.right,this._leftMovableBorder=n.left,this._rightMovableBorder=n.right,this._destColumn=this._startColumn,this._timerId=setTimeout(this._onDragStart,300),window.addEventListener("mouseup",this._onMouseUp,!1)}}}}},R.prototype._onMouseUp=function(e){this._timerId&&(window.clearTimeout(this._timerId),window.removeEventListener("mouseup",this._onMouseUp,!1),this._timerId=0,this._clearCache())},R.prototype._onDragStart=function(e){if(!this._disabled&&!this._isDragging&&(this.hasListener("dragStart")&&this._dispatch("dragStart",this._pos),!this._pos.cancel&&(this._timerId=0,window.removeEventListener("mouseup",this._onMouseUp,!1),this._clickedGrid))){this._isDragging=!0,document.body.classList.add("tr-dragging"),window.addEventListener("mousemove",this._onDrag,!1),window.addEventListener("mouseup",this._onDragEnd,!0);var t=this._clickedGrid,o=t.getHeight(),r=this._clickedSection.getBoundingClientRect(),i=this._clickedSection.getCell(this._startColumn,this._clickedRow).getBoundingClientRect(),n=t.getElement();if(this._guideline.style.top=i.top-r.top+"px",this._guideline.style.height=o-1+"px",n.parentNode.classList.add("mouse-dragging"),n.appendChild(this._guideline),this._dragBoxRenderer){var l=p(e),s=this.getColumnId(this._startColumn),a=this.getColumnIndex(s),d=this._getField(this._startColumn);l.dragBox=this._dragBox,l.columnData={index:a,field:d,id:s},this._dragBoxRenderer(l)}this._dimCol(!0),this._renderGuideline(),this._scrollStep=Math.floor(t.getScrollWidth()/25),this._scrollStep<40?this._scrollStep=40:this._scrollStep>400&&(this._scrollStep=400);var u=t.getHScrollbar();this._cacheLeft=u.getLeft()+20,this._cacheWidth=u.getLeft()+u.getWidth()-20,this._dragPulseId=window.setInterval(this._onDragPulse,150)}},R.prototype._onDrag=function(e){if(this._isDragging){n(e),this._pos=this._clickedGrid.getRelativePosition(e);var t=this.getRelativeGrid(e);if(t&&t===this._clickedGrid){var o=this._pos.colIndex;!(o>=this._leftMovableBorder&&o<=this._rightMovableBorder&&this._isAllowed(o))||this._lockFrozen&&t.isPinnedColumn(o)||(e.dragBox=this._dragBox,this._renderGuideline(),this._dispatch("drag",e),this._noDragBox||this._dragUI.renderDragBox(e,this._clickedGrid))}}},R.prototype._onDragEnd=function(e){if(this._isDragging){this._isDragging=!1,document.body.classList.remove("tr-dragging"),this._dimCol(!1);var t=this._guideline.parentNode;t&&t.removeChild(this._guideline),(t=this._dragBox.parentNode)&&t.removeChild(this._dragBox),this._clickedGrid.getElement().parentNode.classList.remove("mouse-dragging"),window.removeEventListener("mousemove",this._onDrag,!1),window.removeEventListener("mouseup",this._onDragEnd,!0),this._dragPulseId&&(window.clearInterval(this._dragPulseId),this._dragPulseId=0);var o=this._pos;this._pos=null,n(e);var r=!1;o.cancel&&(r=!0),this._noDragBox||"void"!==this._dragBoxIcon.icon||(r=!0),this._destColumn>this._startColumn&&--this._destColumn,(!this._destColumn&&0!==this._destColumn||this._destColumn<0||!this._isAllowed(this._destColumn)||this._destColumn>=this._startColumn&&this._destColumn<=this._endColumn)&&(r=!0);var i=null;if(r||(i={startColumnIndex:this._startColumn,destColumnIndex:this._destColumn},this._dispatch("preColumnMoved",i),i.cancel&&(r=!0)),!r){if(!this._noColumnMoving){var l,s,a=this._getPlugin("ColumnGroupingPlugin"),d=this._getPlugin("ColumnStackPlugin"),u=this._destColumn;if(this._startColumn=0;){this._hosts[h].reorderColumns(p,u)}}}this.hasListener("columnMoved")&&this._dispatch("columnMoved",{startColumnIndex:this._startColumn,endColumnIndex:this._endColumn,destColumnIndex:this._destColumn,clickedRow:this._clickedRow})}this._dispatch("dragEnd",o||{}),this._clearCache()}},R.prototype._onDragPulse=function(){if(this._isDragging&&this._pos){this._dispatch("dragInterval",this._pos);var e=this._clickedGrid;if(e&&e.getHScrollbar().isActive()){var t=this._pos.x,o=0;tthis._cacheWidth&&(o=Math.floor(this._scrollStep*(.8+Math.random())));for(var r=this._hosts?this._hosts.length:0,i=0;i=r.left?r:this._findMoveableBorder(e,t-1,o)},R.prototype._renderGuideline=function(){var e=this._pos.colIndex;if(!(null==e||e<0)){for(var t=this._getSpan(e,this._clickedRow,this._clickedSection),o=t.left,r=t.right,i=this._clickedGrid.getColumnLeft(o),n=0,l=o;l<=r;++l)n+=this._clickedGrid.getColumnWidth(l);var s=this._pos.x>i+n/2,a=s?r+1:o,d=this._getPlugin("ColumnStackPlugin");if(d){var u=d.getStackId(a);if(u){var c=d.getStackMemberIndices(u),h=c.length;c&&h&&(a=s?c[h-1]+1:c[0])}}i=this._clickedGrid.getColumnLeft(this._destColumn),athis._rightMovableBorder&&(a=this._rightMovableBorder+1,s&&(i-=4)),this._destColumn=a,this._guideline.style.left=i+"px"}},R.prototype._dimCol=function(e){var t=this._clickedGrid.getSection("title").getColumn(this._startColumn).getCell(0).getElement();e?t.classList.add("drag-indicator"):t.classList.remove("drag-indicator")};!function(e,t){if(e&&t&&t.prototype.getName){var o=t.prototype.getName().replace(/Plugin$/,"");if(o){var r=e.tr;r||(r=e.tr={});var i=r.grid;i||(i=r.grid={}),i[o+"Plugin"]=t,r[o+"Extension"]=t}}}(window,R)}]); \ No newline at end of file +!function(e){var t={};function o(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,o),i.l=!0,i.exports}o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)o.d(r,i,function(t){return e[t]}.bind(null,i));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";o.r(t);var r={inherits:function(e,t){function o(){}o.prototype=t.prototype,e.prototype=new o,e.prototype.constructor=e,e.base=function(e,o,r){o||(o="constructor");for(var i=arguments.length,n=new Array(i),s=2;s=0&&(o.splice(r,1),--this._listenerCount)}},i.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},i.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},i.prototype.getListener=function(e,t){if(e){var o=this._events?this._events[e]:null;if(o)return t||(t=0),o[t]||null}return null},i.prototype.addListener=function(e,t){var o=e?e[t]:null;"function"==typeof o&&this.addEventListener(t,o)},i.prototype._prepareEventArguments=function(e,t){return t},i.prototype._dispatch=function(e,t){var o=this._events?this._events[e]:null;if(o){t=this._prepareEventArguments(e,t);for(var r=o.length,i=0;i=16||(o+="0"),o+=i?i.toString(16).toUpperCase():"0"}return o},g={},_=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},f=function(e,t,o){"attributes"===o.type&&(null!=t?o.attributeName===t&&e(o.target.getAttribute(t)):e(o.target))};g._getNewId=function(){return"observer_"+ ++g._id},g._addObserver=function(e,t,o){var r=o;r||(r={}),r.attributes=!0,g._observer.observe(e,r),g._addListener(e,t)},g._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=o),v._components[e]=t}return t},v.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return m[t]?t:""},v.hasTheme=function(e){return e===v.getThemeName()},v.getThemeName=function(e){return v._themeName||(v._themeName=v.getCssVariable("--theme-name",document.documentElement)),v._themeName},v.setThemeName=function(e){v._themeName=e},v.isThemeLoaded=function(){return v._themeLoaded},v.getColors=function(){return v.themeColors},v.isHaloTheme=function(e){return null==e&&(e=v.getThemeName()),!!e&&e.indexOf("halo")>=0},v.injectIcons=function(e,t){if("object"==typeof e){var o=v.getThemeName();e.themeName=o;var r=v.getElfVersion();e.elfVersion=r;var i=v._icons[o];i&&(e.icons=i)}},v.getIconList=function(){var e=v._icons[v.getThemeName()];return e?h(e):[]},v._onIconPreloaded=function(){if(v._dummyIcon){var e=v._dummyIcon.parentNode;e&&e.removeChild(v._dummyIcon),v._dummyIcon=null}},v.prepareIconPreloading=function(){if(!v._iconLoaded){v._iconLoaded=!0;var e=v.getIconList();if(e.length){setTimeout(v._onIconPreloaded,10);var t=v._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},v.getCssVariable=function(e,t){var o="",r=t||document.body;return window&&"string"==typeof e&&1===r.nodeType&&e.match(/^--/)&&(o=(o=window.getComputedStyle(r).getPropertyValue(e)).replace(/[\"\']/g,"")),o},v.getCssVariables=function(e,t){var o=t||document.body;if(window&&1===o.nodeType){var r=window.getComputedStyle(o);for(var i in e){var n=e[i];n&&n.match(/^--/)&&(e[i]=r.getPropertyValue(n).replace(/\"/g,""))}}return e||null},v.setRTK=function(e){null!=e&&(v._rtk=e)},v.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},v._addThemeChangedCallback=function(e){var t=v._callbacks;t.indexOf(e)<0&&t.push(e)},v.reloadThemeColors=function(){return v._deferred&&v._deferred.isFulfilled()?(v._profileName="",v._themeLoaded=!1,v.themeReady=null,v.getThemeColors()):v.themeReady},v.getThemeColors=function(e){if("function"==typeof e&&v._addThemeChangedCallback(e),v.themeReady)return v.themeReady;var t=v._deferred=new s;v.themeReady=t.promise;var o=v.getMovementColorProfile();if(o)o!==v._profileName?setTimeout(v._profileNameRetrieved,100):v._deferred.resolve(v.themeColors);else{var r={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},i=window?window.JET:null;if(v._themeLoaded=!1,v._rtk&&v._rtk.Settings)v._rtk.Settings.getAsync(r).then(v._loadingProfileSuccess).catch(v._loadingProfileFailure);else if(i&&i.Settings)try{i.Settings.read(v._loadingProfileSuccess,r)}catch(e){v._loadingProfileFailure()}else setTimeout(v._profileNameRetrieved,100)}return t.promise};var y=function(e){if(e!==v._profileName){v._retrieveThemeColors(e),v._pendingResolve&&(v._pendingResolve=!1,v._deferred.resolve(v.themeColors));for(var t=v._callbacks,o=0;o=0;){var i=this._hosts[r];if(i.getElement().contains(t))return i}return null},b.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},b.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},b.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var o=this.getColumnIndex(e),r=this._realTimeGrid.getColumnDefinition(o);if(r)return r.getName()}return""},b.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},b.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var o,r=this._compositeGrid.getColumnFields(),i=this._compositeGrid.getColumnCount(),n=[],s=0;s=0&&o=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var o=this._realTimeGrid.getColumnDefinition(e);return o?o.getId():""},b.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},b.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},b.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},b.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},b.prototype._moveColumnById=function(e,t){var o=this._hosts,r=o?o.length:0;if(r){for(var i=0,n=0;n=0&&t>=0){var i=this._activeGrid||this._hosts[0],n=i?i.getCell(r.sectionType||"content",e,t):null;r.target=n?n.getElement():null}return r};var x={left:37,right:39,up:38,down:40,tab:9};b.prototype._mockKeyboardEvent=function(e,t){var o=t||{};return o.preventDefault=function(){},o.stopPropagation=function(){},"string"==typeof e&&(e=e.toLowerCase(),e=x[e]),o.keyCode=e,o},b._staticStyles={},b._themeLoaders={},b._themeLoadSuccess=function(e,t){var o=this.getName(),r=b._staticStyles[o]=e(t);this.applyStyles(r,o)},b.prototype.applyStaticStyles=function(e){var t=this.getName(),o=b._staticStyles[t];o?this.applyStyles(o,t):e&&(b._themeLoaders[t]||(b._themeLoaders[t]=v.getThemeColors()),b._themeLoaders[t].then(b._themeLoadSuccess.bind(this,e)))},b.prototype.applyStyles=function(e,t,o){t||(t=this.getName());var r,i,n="_style"+t,s=this._hosts,l=s.length;if(l)if(o)for(r=0;ro)&&(t=o);--t>=0;)e.removeChild(e.lastChild)}},setContent:function(e,t){if(e)if(t||0===t){var o=t.nodeType;1===o||3===o?t!==e.lastChild&&(G.removeChildren(e),e.appendChild(t)):Array.isArray(t)?(G.removeChildren(e),G.appendChild(e,t)):e.textContent=t}else G.removeChildren(e)},toggleAttribute:function(e,t,o){o?e.setAttribute(t,"string"==typeof o?o:""):null==o?e.hasAttribute(t)?e.removeAttribute(t):e.setAttribute(t,""):e.removeAttribute(t)},toggleClass:function(e,t,o){o?e.classList.add(t):null==o?e.classList.contains(t)?e.classList.remove(t):e.classList.add(t):e.classList.remove(t)},addClasses:function(e,t){if(e)for(var o=Array.isArray(t)?t:arguments,r=o.length,i=0;i=0||(this._hosts.push(e),e.unloadPlugin("DragAndDropTitlePlugin"),e.listen("mousedown",this._onMouseDown),e.listen("dragstart",n),this.config(t),this._dragUI=new T({dragBox:this._dragBox,dragBoxIcon:this._dragBoxIcon}),T.stylePromise?T.applyThemeColor(e):(T.stylePromise=v.getThemeColors()).then(this._onThemeLoaded).catch(this._onThemeLoaded))},P.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(this._hosts.splice(t,1),e.unlisten("mousedown",this._onMouseDown),this._hosts.length||this._dragPulseId&&(window.clearInterval(this._dragPulseId),this._dragPulseId=0),this._dispose())},P.prototype._onThemeLoaded=function(){var e=v.getColors();this._dragUI.onThemeLoaded(e);for(var t=this._hosts.length;--t>=0;)T.applyThemeColor(this._hosts[t])},P.prototype.config=function(e){if(e){var t=e.noColumnDragging;null==t&&null!=e.columnReorder&&(t=!e.columnReorder),null!=t&&(this._disabled=!!t);var o=e.columnDragging;o&&("function"==typeof o.dragBoxRenderer&&(this._dragBoxRenderer=o.dragBoxRenderer,this._dragBox.classList.add("drag-box"),this._dragBox.classList.remove("drag-box-disabled")),this.addListener(o,"dragStart"),this.addListener(o,"drag"),this.addListener(o,"dragEnd"),this.addListener(o,"preColumnMoved"),this.addListener(o,"columnMoved"),this.addListener(o,"dragInterval"))}},P.prototype.getConfigObject=function(e){var t=e||{};this._disabled&&(t.noColumnDragging=!0);var o=t.columnDragging;return o||(o=t.columnDragging={}),t},P.prototype.lockFrozenColumn=function(e){this._lockFrozen=e},P.prototype.disable=function(e){this._disabled=!1!==e},P.prototype.isDisabled=function(){return this._disabled},P.prototype.disableMoving=function(e){this._noColumnMoving=!1!==e},P.prototype.disableDragBox=function(e){this._noDragBox=!1!==e},P.prototype._isAllowed=function(e){var t=this._clickedGrid||this._hosts[0];if(t){var o=t.getStationaryColumnIndex();if(o<0)return!0;if(e<=o)return!1}return!0},P.prototype._onMouseDown=function(e){if(!this._disabled&&!(e.shiftKey||e.ctrlKey||e.altKey||e.button||this._timerId)){var t=this.getRelativeGrid(e);if(t&&(this._pos=t.getRelativePosition(e),!1!==this._pos.hit)){var o=this._pos.section;if(o&&"title"===this._pos.sectionType){var r=this._pos.colIndex;if(this._isAllowed(r)&&(!this._lockFrozen||!t.isPinnedColumn(r))){var i=this._pos.rowIndex,n=this._findMoveableBorder(r,i-1,o),s=this._getSpan(r,i,o);this._clickedGrid=t,this._clickedSection=o,this._clickedRow=i,this._startPos=this._pos,this._startColumn=s.left,this._endColumn=s.right,this._leftMovableBorder=n.left,this._rightMovableBorder=n.right,this._destColumn=this._startColumn,this._timerId=setTimeout(this._onDragStart,300),window.addEventListener("mouseup",this._onMouseUp,!1)}}}}},P.prototype._onMouseUp=function(e){this._timerId&&(window.clearTimeout(this._timerId),window.removeEventListener("mouseup",this._onMouseUp,!1),this._timerId=0,this._clearCache())},P.prototype._onDragStart=function(e){if(!this._disabled&&!this._isDragging&&(this.hasListener("dragStart")&&this._dispatch("dragStart",this._pos),!this._pos.cancel&&(this._timerId=0,window.removeEventListener("mouseup",this._onMouseUp,!1),this._clickedGrid))){this._isDragging=!0,document.body.classList.add("tr-dragging"),window.addEventListener("mousemove",this._onDrag,!1),window.addEventListener("mouseup",this._onDragEnd,!0);var t=this._clickedGrid,o=t.getHeight(),r=this._clickedSection.getBoundingClientRect(),i=this._clickedSection.getCell(this._startColumn,this._clickedRow).getBoundingClientRect(),n=t.getElement();if(this._guideline.style.top=i.top-r.top+"px",this._guideline.style.height=o-1+"px",n.parentNode.classList.add("mouse-dragging"),n.appendChild(this._guideline),this._dragBoxRenderer){var s=l(e),a=this.getColumnId(this._startColumn),d=this.getColumnIndex(a),u=this._getField(this._startColumn);s.dragBox=this._dragBox,s.columnData={index:d,field:u,id:a},this._dragBoxRenderer(s)}this._dimCol(!0),this._renderGuideline(),this._scrollStep=Math.floor(t.getScrollWidth()/25),this._scrollStep<40?this._scrollStep=40:this._scrollStep>400&&(this._scrollStep=400);var c=t.getHScrollbar();this._cacheLeft=c.getLeft()+20,this._cacheWidth=c.getLeft()+c.getWidth()-20,this._dragPulseId=window.setInterval(this._onDragPulse,150)}},P.prototype._onDrag=function(e){if(this._isDragging){n(e),this._pos=this._clickedGrid.getRelativePosition(e);var t=this.getRelativeGrid(e);if(t&&t===this._clickedGrid){var o=this._pos.colIndex;!(o>=this._leftMovableBorder&&o<=this._rightMovableBorder&&this._isAllowed(o))||this._lockFrozen&&t.isPinnedColumn(o)||(e.dragBox=this._dragBox,this._renderGuideline(),this._dispatch("drag",e),this._noDragBox||this._dragUI.renderDragBox(e,this._clickedGrid))}}},P.prototype._onDragEnd=function(e){if(this._isDragging){this._isDragging=!1,document.body.classList.remove("tr-dragging"),this._dimCol(!1);var t=this._guideline.parentNode;t&&t.removeChild(this._guideline),(t=this._dragBox.parentNode)&&t.removeChild(this._dragBox),this._clickedGrid.getElement().parentNode.classList.remove("mouse-dragging"),window.removeEventListener("mousemove",this._onDrag,!1),window.removeEventListener("mouseup",this._onDragEnd,!0),this._dragPulseId&&(window.clearInterval(this._dragPulseId),this._dragPulseId=0);var o=this._pos;this._pos=null,n(e);var r=!1;o.cancel&&(r=!0),this._noDragBox||"void"!==this._dragBoxIcon.icon||(r=!0),this._destColumn>this._startColumn&&--this._destColumn,(!this._destColumn&&0!==this._destColumn||this._destColumn<0||!this._isAllowed(this._destColumn)||this._destColumn>=this._startColumn&&this._destColumn<=this._endColumn)&&(r=!0);var i=null;if(r||(i={startColumnIndex:this._startColumn,destColumnIndex:this._destColumn},this._dispatch("preColumnMoved",i),i.cancel&&(r=!0)),!r){if(!this._noColumnMoving){var s,l,a=this._getPlugin("ColumnGroupingPlugin"),d=this._getPlugin("ColumnStackPlugin"),u=this._destColumn;if(this._startColumn=0;){this._hosts[h].reorderColumns(p,u)}}}this.hasListener("columnMoved")&&this._dispatch("columnMoved",{startColumnIndex:this._startColumn,endColumnIndex:this._endColumn,destColumnIndex:this._destColumn,clickedRow:this._clickedRow})}this._dispatch("dragEnd",o||{}),this._clearCache()}},P.prototype._onDragPulse=function(){if(this._isDragging&&this._pos){this._dispatch("dragInterval",this._pos);var e=this._clickedGrid;if(e&&e.getHScrollbar().isActive()){var t=this._pos.x,o=0;tthis._cacheWidth&&(o=Math.floor(this._scrollStep*(.8+Math.random())));for(var r=this._hosts?this._hosts.length:0,i=0;i=r.left?r:this._findMoveableBorder(e,t-1,o)},P.prototype._renderGuideline=function(){var e=this._pos.colIndex;if(!(null==e||e<0)){for(var t=this._getSpan(e,this._clickedRow,this._clickedSection),o=t.left,r=t.right,i=this._clickedGrid.getColumnLeft(o),n=0,s=o;s<=r;++s)n+=this._clickedGrid.getColumnWidth(s);var l=this._pos.x>i+n/2,a=l?r+1:o,d=this._getPlugin("ColumnStackPlugin");if(d){var u=d.getStackId(a);if(u){var c=d.getStackMemberIndices(u),h=c.length;c&&h&&(a=l?c[h-1]+1:c[0])}}i=this._clickedGrid.getColumnLeft(this._destColumn),athis._rightMovableBorder&&(a=this._rightMovableBorder+1,l&&(i-=4)),this._destColumn=a,this._guideline.style.left=i+"px"}},P.prototype._dimCol=function(e){var t=this._clickedGrid.getSection("title").getColumn(this._startColumn).getCell(this._clickedRow).getElement();e?t.classList.add("drag-indicator"):t.classList.remove("drag-indicator")};!function(e,t){if(e&&t&&t.prototype.getName){var o=t.prototype.getName().replace(/Plugin$/,"");if(o){var r=e.tr;r||(r=e.tr={});var i=r.grid;i||(i=r.grid={}),i[o+"Plugin"]=t,r[o+"Extension"]=t}}}(window,P)}]); \ No newline at end of file diff --git a/book/en/node_modules/tr-grid-column-selection/dist/tr-grid-column-selection.min.js b/book/en/node_modules/tr-grid-column-selection/dist/tr-grid-column-selection.min.js index dac7a2b7..4abfce99 100644 --- a/book/en/node_modules/tr-grid-column-selection/dist/tr-grid-column-selection.min.js +++ b/book/en/node_modules/tr-grid-column-selection/dist/tr-grid-column-selection.min.js @@ -1 +1 @@ -!function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var o={inherits:function(e,t){function n(){}n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e,e.base=function(e,n,o){n||(n="constructor");for(var i=arguments.length,r=new Array(i),l=2;l=0&&(n.splice(o,1),--this._listenerCount)}},i.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},i.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},i.prototype.getListener=function(e,t){if(e){var n=this._events?this._events[e]:null;if(n)return t||(t=0),n[t]||null}return null},i.prototype.addListener=function(e,t){var n=e?e[t]:null;"function"==typeof n&&this.addEventListener(t,n)},i.prototype._prepareEventArguments=function(e,t){return t},i.prototype._dispatch=function(e,t){var n=this._events?this._events[e]:null;if(n){t=this._prepareEventArguments(e,t);for(var o=n.length,i=0;i=0;){var i=this._hosts[o];if(i.getElement().contains(t))return i}return null},l.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},l.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},l.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var n=this.getColumnIndex(e),o=this._realTimeGrid.getColumnDefinition(n);if(o)return o.getName()}return""},l.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},l.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var n,o=this._compositeGrid.getColumnFields(),i=this._compositeGrid.getColumnCount(),r=[],l=0;l=0&&n=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var n=this._realTimeGrid.getColumnDefinition(e);return n?n.getId():""},l.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},l.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},l.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},l.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},l.prototype._moveColumnById=function(e,t){var n=this._hosts,o=n?n.length:0;if(o){for(var i=0,r=0;r=0&&t>=0){var i=this._activeGrid||this._hosts[0],r=i?i.getCell(o.sectionType||"content",e,t):null;o.target=r?r.getElement():null}return o};var s={left:37,right:39,up:38,down:40,tab:9};l.prototype._mockKeyboardEvent=function(e,t){var n=t||{};return n.preventDefault=function(){},n.stopPropagation=function(){},"string"==typeof e&&(e=e.toLowerCase(),e=s[e]),n.keyCode=e,n};var u=function(e,t){var n="number"==typeof t?e.getRowDataAt(t):e.getRowData(t);return n&&n.ROW_DEF||null},a=function(e){return e},c=function(e){return e?e.ROW_DEF.getRowData():null},d=function(e){if(e){var t=e.ROW_DEF;return t?t.getRowData():e}return null},h={create:function(e,t){var n=document.createElement(e);return t&&(n.className=t),n},div:function(e){return h.create("div",e)},text:function(e,t){var n=h.create("span",t);return(e||0===e)&&(n.textContent=e),n},appendChild:function(e,t){if(!e)return null;var n,o;Array.isArray(arguments[1])?(o=arguments[1],n=0):(o=arguments,n=1);for(var i=o.length;nn)&&(t=n);--t>=0;)e.removeChild(e.lastChild)}},setContent:function(e,t){if(e)if(t||0===t){var n=t.nodeType;1===n||3===n?t!==e.lastChild&&(h.removeChildren(e),e.appendChild(t)):Array.isArray(t)?(h.removeChildren(e),h.appendChild(e,t)):e.textContent=t}else h.removeChildren(e)},toggleAttribute:function(e,t,n){n?e.setAttribute(t,"string"==typeof n?n:""):null==n?e.hasAttribute(t)?e.removeAttribute(t):e.setAttribute(t,""):e.removeAttribute(t)},toggleClass:function(e,t,n){n?e.classList.add(t):null==n?e.classList.contains(t)?e.classList.remove(t):e.classList.add(t):e.classList.remove(t)},addClasses:function(e,t){if(e)for(var n=Array.isArray(t)?t:arguments,o=n.length,i=0;i=16||(n+="0"),n+=i?i.toString(16).toUpperCase():"0"}return n},v={},C=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},y=function(e,t,n){"attributes"===n.type&&(null!=t?n.attributeName===t&&e(n.target.getAttribute(t)):e(n.target))};v._getNewId=function(){return"observer_"+ ++v._id},v._addObserver=function(e,t,n){var o=n;o||(o={}),o.attributes=!0,v._observer.observe(e,o),v._addListener(e,t)},v._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=n),b._components[e]=t}return t},b.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return S[t]?t:""},b.hasTheme=function(e){return e===b.getThemeName()},b.getThemeName=function(e){return b._themeName||(b._themeName=b.getCssVariable("--theme-name",document.documentElement)),b._themeName},b.setThemeName=function(e){b._themeName=e},b.isThemeLoaded=function(){return b._themeLoaded},b.getColors=function(){return b.themeColors},b.isHaloTheme=function(e){return null==e&&(e=b.getThemeName()),!!e&&e.indexOf("halo")>=0},b.injectIcons=function(e,t){if("object"==typeof e){var n=b.getThemeName();e.themeName=n;var o=b.getElfVersion();e.elfVersion=o;var i=b._icons[n];i&&(e.icons=i)}},b.getIconList=function(){var e=b._icons[b.getThemeName()];return e?m(e):[]},b._onIconPreloaded=function(){if(b._dummyIcon){var e=b._dummyIcon.parentNode;e&&e.removeChild(b._dummyIcon),b._dummyIcon=null}},b.prepareIconPreloading=function(){if(!b._iconLoaded){b._iconLoaded=!0;var e=b.getIconList();if(e.length){setTimeout(b._onIconPreloaded,10);var t=b._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},b.getCssVariable=function(e,t){var n="",o=t||document.body;return window&&"string"==typeof e&&1===o.nodeType&&e.match(/^--/)&&(n=(n=window.getComputedStyle(o).getPropertyValue(e)).replace(/[\"\']/g,"")),n},b.getCssVariables=function(e,t){var n=t||document.body;if(window&&1===n.nodeType){var o=window.getComputedStyle(n);for(var i in e){var r=e[i];r&&r.match(/^--/)&&(e[i]=o.getPropertyValue(r).replace(/\"/g,""))}}return e||null},b.setRTK=function(e){null!=e&&(b._rtk=e)},b.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},b._addThemeChangedCallback=function(e){var t=b._callbacks;t.indexOf(e)<0&&t.push(e)},b.reloadThemeColors=function(){return b._deferred&&b._deferred.isFulfilled()?(b._profileName="",b._themeLoaded=!1,b.themeReady=null,b.getThemeColors()):b.themeReady},b.getThemeColors=function(e){if("function"==typeof e&&b._addThemeChangedCallback(e),b.themeReady)return b.themeReady;var t=b._deferred=new r;b.themeReady=t.promise;var n=b.getMovementColorProfile();if(n)n!==b._profileName?setTimeout(b._profileNameRetrieved,100):b._deferred.resolve(b.themeColors);else{var o={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},i=window?window.JET:null;if(b._themeLoaded=!1,b._rtk&&b._rtk.Settings)b._rtk.Settings.getAsync(o).then(b._loadingProfileSuccess).catch(b._loadingProfileFailure);else if(i&&i.Settings)try{i.Settings.read(b._loadingProfileSuccess,o)}catch(e){b._loadingProfileFailure()}else setTimeout(b._profileNameRetrieved,100)}return t.promise};var G=function(e){if(e!==b._profileName){b._retrieveThemeColors(e),b._pendingResolve&&(b._pendingResolve=!1,b._deferred.resolve(b.themeColors));for(var t=b._callbacks,n=0;n=0||(this._hosts.push(e),e.listen("click",this._onClick),e.listen("mousedown",this._onMouseDown),e.listen("keydown",this._onKeyDown),e.listen("columnRemoved",this._onColumnRemoved),e.listen("columnAdded",this._onColumnAdded),e.listen("columnPositionChanged",this._onColumnPositionChanged),e.listen("beforeBatchOperation",this._onBeforeBatchOperation),e.listen("afterBatchOperation",this._onAfterBatchOperation),this.config(t),w._stylePromise?w._applyThemeColor(e):(w._stylePromise=b.getThemeColors()).then(this._onThemeLoaded).catch(this._onThemeLoaded))},w.prototype._onThemeLoaded=function(){if(!w._styles){w._styles=function(e){if(e){var t="";if(Array.isArray(e))t=e.map(p).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,_)}return""}([".column-selection-menu",["position: absolute;","background-color: var(--grid-column-menu-icon-bgcolor);","color: var(--grid-column-menu-icon-color);","z-index: 1;","cursor: pointer;","text-align: center;","width: 16px;","height: 16px;","padding: 6px;"],".column-selection-menu:hover",["background-color: var(--grid-column-menu-icon-hover-bgcolor);"],".column-selection-menu-inside",["padding: 4px;"],".selected-column .cell.selected-group",["background-color: var(--grid-selection-bgcolor);"]])}for(var e=this._hosts.length;--e>=0;)w._applyThemeColor(this._hosts[e])},w._applyThemeColor=function(e){e&&!e._columnSelectionStyles&&w._styles&&(e._columnSelectionStyles=!0,f(w._styles,e.getParent()))},w.prototype._afterInit=function(){this._cgp=this._getPlugin("ColumnGroupingPlugin")},w.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(e.unlisten("click",this._onClick),e.unlisten("mousedown",this._onMouseDown),e.unlisten("keydown",this._onKeyDown),e.unlisten("columnRemoved",this._onColumnRemoved),e.unlisten("columnAdded",this._onColumnAdded),e.unlisten("columnPositionChanged",this._onColumnPositionChanged),this._hosts.splice(t,1),this._hosts.length||this._timerId&&(clearTimeout(this._timerId),this._timerId=0,this._timerMenuId=0),this._dispose())},w.prototype.config=function(e){if(e){var t=e.columnSelection;if(t){if("object"==typeof t){var n=t.singleSelection;n&&(this._singleSelMode=!0),(n=t.clickToggle)&&(this._clickToggleMode=!0),(n=t.menuClicked)&&(this._onMenuClicked=n),(n=t.menuPosition)&&(this._menuPosition=n),this.addListener(t,"selectionChanged")}}else null!=t&&this.disable();var o=e.columns;if(Array.isArray(o))for(var i=o.length,r=0;r=0},w.prototype.getSelectedColumns=function(){var e=[];if(!1!==this._hasSelection)for(var t=this.getColumnCount(),n=0;n=0;)if(this.isSelectedColumn(e))return this._hasSelection=!0,e;return-1},w.prototype.setSelectedColumn=function(e,t,n){var o=this._setSelectedColumn(e,t,n);return o&&this._updateGroupSelection(),o},w.prototype.selectSingleColumn=function(e,t){null==e&&(e=this._anchorCol),e>=0||(e=0);var n=t||this._activeGrid;this.clearAllSelections(),this._setSelectedColumn(e,!0,n)&&(this._anchorCol=e),this._updateGroupSelection()},w.prototype.selectSingleGroup=function(e,t){var n=t||this._activeGrid,o=this._cgp;if(o&&e){var i=o.getChildColumnIndices(e),r=!1;this.clearAllSelections();for(var l=0;l<=i.length;l++)r|=this._setSelectedColumn(i[l],!0,n);r&&(this._anchorCol=i[0]),this._updateGroupSelection()}},w.prototype.selectRange=function(e,t,n){this._anchorCol=e>=0?e:0,this._selectFromAnchorToTarget(this._anchorCol+t)},w.prototype.selectAllColumns=function(){this.selectRange(0,this.getColumnCount())},w.prototype._onColumnPositionChanged=function(e){this._timerMenuId||e.sender&&e.sender===this._activeGrid&&(this._clearMenuIcon(),this._timerMenuId=setTimeout(this._updateMenuIcon,800))},w.prototype._updateMenuIcon=function(){if(this._timerMenuId=0,!this._onMenuClicked)return!1;var e=this.getFirstSelectedColumn(),t=this._activeGrid;if(e<0||!t)return this._clearMenuIcon(),!1;var n,o=t.getParent().parentNode,i=this.getLastSelectedColumn(),r=t.getColumnRect(e,i);if(r.width<=0||r.left>r.gridWidth)return this._clearMenuIcon(),!1;if(!this._menuButton){this._menuButton=document.createElement("div"),this._menuButton.classList.add("column-selection-menu"),"outside"!==this._menuPosition&&this._menuButton.classList.add("column-selection-menu-inside");var l=document.createElement("coral-icon");l.icon="most-detail",this._menuButton.appendChild(l),this._menuButton.addEventListener("click",this._onMenuClicked)}o.appendChild(this._menuButton);var s=28,u=r.leftPinnedIndex,a=0;for(n=0;n<=u;n++)a+=t.getColumnWidth(n);var c=r.left+r.width,d=c,h=r.top;"outside"!==this._menuPosition?(s=24,this._menuButton.classList.add("column-selection-menu-inside"),c+s>=r.scrollViewSize+a&&(d=r.left-s)<0&&(d=r.gridWidth-s)):c>=r.gridWidth&&(d=r.gridWidth);return this._menuButton.style.left=d+"px",this._menuButton.style.top=h+"px",!0},w.prototype._clearMenuIcon=function(){this._menuButton&&this._menuButton.parentNode&&this._menuButton.parentNode.removeChild(this._menuButton)},w.prototype.clearAllSelections=function(){var e=this._hosts.length;if(this.hasSelectedColumn()){for(var t=this.getColumnCount();--t>=0;)if(this.isSelectedColumn(t))for(var n=0;n=0;)this.setSelectedColumn(e[t],!1);else"number"==typeof e&&this.setSelectedColumn(e,!1);else this.clearAllSelections()},w.prototype.selectAll=w.prototype.selectAllColumns,w.prototype.deselectAll=w.prototype.clearSelection,w.prototype.isSelectedColumn=function(e){return!!this._activeGrid&&this._activeGrid.isSelectedColumn(e)},w.prototype.getActiveGrid=function(){return this._activeGrid},w.prototype._setSelectedColumn=function(e,t,n){if(!(e>=0))return!1;if(n&&n!==this._activeGrid&&(this._activeGrid=n),!this._activeGrid&&(this._activeGrid=this._hosts[0],!this._activeGrid))return!1;if(e>=this.getColumnCount())return!1;var o=!!t;if(o&&this._getColumnOption(e,"unselectable"))return!1;this._hasSelection=!!o||null,this._pendingSelectionOnAdded=-1,this._pendingSelectionOnRemoved=-1;for(var i=this._hosts.length,r=0;r=d&&this._anchorCol<=h?(this._anchorCol=d,l=h):this._anchorCol>d?l=d:this._anchorCol0&&t=this.getColumnCount()&&(t=this.getColumnCount()-1),this._pendingSelectionOnRemoved=t),this._timerId=setTimeout(this._onReselection,10)):this._pendingSelectionOnRemoved=n}},w.prototype._onColumnAdded=function(e){this._timerId?this._pendingSelectionOnAdded=e.colIndex:this._hasSelection&&(this.clearAllSelections(),this._pendingSelectionOnAdded<0&&(this._pendingSelectionOnAdded=e.colIndex),this._timerId=setTimeout(this._onReselection,10))},w.prototype._onReselection=function(e){this._timerId=0;var t=this._pendingSelectionOnAdded>-1?this._pendingSelectionOnAdded:this._pendingSelectionOnRemoved;this.setSelectedColumn(t,!0),this._pendingSelectionOnAdded=-1,this._pendingSelectionOnRemoved=-1,this._activeGrid||(this._activeGrid=this._hosts[0]),this._activeGrid.focus()},w.prototype._onBeforeBatchOperation=function(e){var t=this._activeGrid;if(this._hasSelection&&"reset"===e.batchType){for(var n=this.getColumnCount(),o=0;o=o){if(this._gotoNextGrid())return!0;n=o-1}return this.selectSingleColumn(n),this._activeGrid.scrollToColumn(n),!0},w.prototype._selectByKey=function(e,t){var n=e<0?this.getFirstSelectedColumn():this.getLastSelectedColumn();if(n<0)return!1;var o=this.getColumnCount(),i=this._getNextSelection(n,e);if(i<0){if(!t.shiftKey&&this._gotoPrevGrid())return h.preventDefault(t),!0;i=0}else if(i>=o){if(!t.shiftKey&&this._gotoNextGrid())return h.preventDefault(t),!0;i=o-1}return!!this._activeGrid.isColumnVisible(i)&&(h.preventDefault(t),t.shiftKey&&!this._singleSelMode?this._selectFromAnchorToTarget(i):this.selectSingleColumn(i),this._activeGrid.scrollToColumn(i),!0)},w.prototype._getNextSelection=function(e,t){for(var n=e+t,o=this.getColumnCount();!this._activeGrid.isColumnVisible(n)&&!(n<0||n>=o);)n+=t;return n},w.prototype._gotoPrevGrid=function(){if(this._activeGrid===this._hosts[0])return this._gotoContent();var e=this._hosts.indexOf(this._activeGrid);return e>0&&(this.selectSingleColumn(this._getNextSelection(this.getColumnCount(),-1),this._hosts[e-1]),!0)},w.prototype._gotoNextGrid=function(){var e=this._hosts.length-1;if(this._activeGrid===this._hosts[e])return this._gotoContent();var t=this._hosts.indexOf(this._activeGrid);return t>=0&&(this.selectSingleColumn(this._getNextSelection(-1,1),this._hosts[t+1]),!0)},w.prototype._gotoContent=function(){if(this._activeGrid){var e=this._getPlugin("RowSelectionPlugin");if(e)return setTimeout(function(e,t,n){e.selectSingleRow(0,t,n)}.bind(null,e,this._activeGrid.getSectionSettings("content"),this._activeGrid),10),this.clearAllSelections(),!0}return!1},w.prototype._selectFromAnchorToTarget=function(e){if(this._anchorCol<0)this.selectSingleColumn(e);else{var t,n=this._activeGrid;if(this.clearAllSelections(),e<=this._anchorCol)for(t=e;t<=this._anchorCol;++t)this._setSelectedColumn(t,!0,n);else for(t=this._anchorCol;t<=e;++t)this._setSelectedColumn(t,!0,n);this._updateGroupSelection()}},w.prototype._dispatchSelectionChanged=function(e,t){if(this._activeGrid){var n=this._getPlugin("RowSelectionPlugin");n&&n.clearSelectedRows();var o=this._getPlugin("CellEditingPlugin");o&&o.closeCellEditor(),(o=this._getPlugin("InCellEditingPlugin"))&&o.closeCellEditor()}this._dispatch("selectionChanged",{selectedCols:this.getSelectedColumns(),colIndex:t,grid:this._activeGrid,event:e})},w.prototype.dispatchSelectionChanged=function(){var e=this.getSelectedColumns(),t=e.length?e[0]:-1;this._dispatch("selectionChanged",{selectedCols:e,colIndex:t,grid:this._activeGrid})},w.prototype.selectByMouse=function(e,t){t||(t={}),t.sectionType="title";var n=this._mockMouseEvent(e,0,t);this._onClick(n)},w.prototype.selectByKey=function(e,t){var n=this._mockKeyboardEvent(e,t);this._onKeyDown(n)};!function(e,t){if(e&&t&&t.prototype.getName){var n=t.prototype.getName().replace(/Plugin$/,"");if(n){var o=e.tr;o||(o=e.tr={});var i=o.grid;i||(i=o.grid={}),i[n+"Plugin"]=t,o[n+"Extension"]=t}}}(window,w)}]); \ No newline at end of file +!function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var o={inherits:function(e,t){function n(){}n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e,e.base=function(e,n,o){n||(n="constructor");for(var i=arguments.length,r=new Array(i),l=2;l=0&&(n.splice(o,1),--this._listenerCount)}},i.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},i.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},i.prototype.getListener=function(e,t){if(e){var n=this._events?this._events[e]:null;if(n)return t||(t=0),n[t]||null}return null},i.prototype.addListener=function(e,t){var n=e?e[t]:null;"function"==typeof n&&this.addEventListener(t,n)},i.prototype._prepareEventArguments=function(e,t){return t},i.prototype._dispatch=function(e,t){var n=this._events?this._events[e]:null;if(n){t=this._prepareEventArguments(e,t);for(var o=n.length,i=0;i=16||(n+="0"),n+=i?i.toString(16).toUpperCase():"0"}return n},d={},h=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},p=function(e,t,n){"attributes"===n.type&&(null!=t?n.attributeName===t&&e(n.target.getAttribute(t)):e(n.target))};d._getNewId=function(){return"observer_"+ ++d._id},d._addObserver=function(e,t,n){var o=n;o||(o={}),o.attributes=!0,d._observer.observe(e,o),d._addListener(e,t)},d._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=n),f._components[e]=t}return t},f.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return _[t]?t:""},f.hasTheme=function(e){return e===f.getThemeName()},f.getThemeName=function(e){return f._themeName||(f._themeName=f.getCssVariable("--theme-name",document.documentElement)),f._themeName},f.setThemeName=function(e){f._themeName=e},f.isThemeLoaded=function(){return f._themeLoaded},f.getColors=function(){return f.themeColors},f.isHaloTheme=function(e){return null==e&&(e=f.getThemeName()),!!e&&e.indexOf("halo")>=0},f.injectIcons=function(e,t){if("object"==typeof e){var n=f.getThemeName();e.themeName=n;var o=f.getElfVersion();e.elfVersion=o;var i=f._icons[n];i&&(e.icons=i)}},f.getIconList=function(){var e=f._icons[f.getThemeName()];return e?a(e):[]},f._onIconPreloaded=function(){if(f._dummyIcon){var e=f._dummyIcon.parentNode;e&&e.removeChild(f._dummyIcon),f._dummyIcon=null}},f.prepareIconPreloading=function(){if(!f._iconLoaded){f._iconLoaded=!0;var e=f.getIconList();if(e.length){setTimeout(f._onIconPreloaded,10);var t=f._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},f.getCssVariable=function(e,t){var n="",o=t||document.body;return window&&"string"==typeof e&&1===o.nodeType&&e.match(/^--/)&&(n=(n=window.getComputedStyle(o).getPropertyValue(e)).replace(/[\"\']/g,"")),n},f.getCssVariables=function(e,t){var n=t||document.body;if(window&&1===n.nodeType){var o=window.getComputedStyle(n);for(var i in e){var r=e[i];r&&r.match(/^--/)&&(e[i]=o.getPropertyValue(r).replace(/\"/g,""))}}return e||null},f.setRTK=function(e){null!=e&&(f._rtk=e)},f.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},f._addThemeChangedCallback=function(e){var t=f._callbacks;t.indexOf(e)<0&&t.push(e)},f.reloadThemeColors=function(){return f._deferred&&f._deferred.isFulfilled()?(f._profileName="",f._themeLoaded=!1,f.themeReady=null,f.getThemeColors()):f.themeReady},f.getThemeColors=function(e){if("function"==typeof e&&f._addThemeChangedCallback(e),f.themeReady)return f.themeReady;var t=f._deferred=new r;f.themeReady=t.promise;var n=f.getMovementColorProfile();if(n)n!==f._profileName?setTimeout(f._profileNameRetrieved,100):f._deferred.resolve(f.themeColors);else{var o={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},i=window?window.JET:null;if(f._themeLoaded=!1,f._rtk&&f._rtk.Settings)f._rtk.Settings.getAsync(o).then(f._loadingProfileSuccess).catch(f._loadingProfileFailure);else if(i&&i.Settings)try{i.Settings.read(f._loadingProfileSuccess,o)}catch(e){f._loadingProfileFailure()}else setTimeout(f._profileNameRetrieved,100)}return t.promise};var m=function(e){if(e!==f._profileName){f._retrieveThemeColors(e),f._pendingResolve&&(f._pendingResolve=!1,f._deferred.resolve(f.themeColors));for(var t=f._callbacks,n=0;n=0;){var i=this._hosts[o];if(i.getElement().contains(t))return i}return null},g.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},g.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},g.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var n=this.getColumnIndex(e),o=this._realTimeGrid.getColumnDefinition(n);if(o)return o.getName()}return""},g.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},g.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var n,o=this._compositeGrid.getColumnFields(),i=this._compositeGrid.getColumnCount(),r=[],l=0;l=0&&n=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var n=this._realTimeGrid.getColumnDefinition(e);return n?n.getId():""},g.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},g.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},g.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},g.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},g.prototype._moveColumnById=function(e,t){var n=this._hosts,o=n?n.length:0;if(o){for(var i=0,r=0;r=0&&t>=0){var i=this._activeGrid||this._hosts[0],r=i?i.getCell(o.sectionType||"content",e,t):null;o.target=r?r.getElement():null}return o};var v={left:37,right:39,up:38,down:40,tab:9};g.prototype._mockKeyboardEvent=function(e,t){var n=t||{};return n.preventDefault=function(){},n.stopPropagation=function(){},"string"==typeof e&&(e=e.toLowerCase(),e=v[e]),n.keyCode=e,n},g._staticStyles={},g._themeLoaders={},g._themeLoadSuccess=function(e,t){var n=this.getName(),o=g._staticStyles[n]=e(t);this.applyStyles(o,n)},g.prototype.applyStaticStyles=function(e){var t=this.getName(),n=g._staticStyles[t];n?this.applyStyles(n,t):e&&(g._themeLoaders[t]||(g._themeLoaders[t]=f.getThemeColors()),g._themeLoaders[t].then(g._themeLoadSuccess.bind(this,e)))},g.prototype.applyStyles=function(e,t,n){t||(t=this.getName());var o,i,r="_style"+t,l=this._hosts,s=l.length;if(s)if(n)for(o=0;on)&&(t=n);--t>=0;)e.removeChild(e.lastChild)}},setContent:function(e,t){if(e)if(t||0===t){var n=t.nodeType;1===n||3===n?t!==e.lastChild&&(G.removeChildren(e),e.appendChild(t)):Array.isArray(t)?(G.removeChildren(e),G.appendChild(e,t)):e.textContent=t}else G.removeChildren(e)},toggleAttribute:function(e,t,n){n?e.setAttribute(t,"string"==typeof n?n:""):null==n?e.hasAttribute(t)?e.removeAttribute(t):e.setAttribute(t,""):e.removeAttribute(t)},toggleClass:function(e,t,n){n?e.classList.add(t):null==n?e.classList.contains(t)?e.classList.remove(t):e.classList.add(t):e.classList.remove(t)},addClasses:function(e,t){if(e)for(var n=Array.isArray(t)?t:arguments,o=n.length,i=0;i=0||(this._hosts.push(e),e.listen("click",this._onClick),e.listen("mousedown",this._onMouseDown),e.listen("keydown",this._onKeyDown),e.listen("columnRemoved",this._onColumnRemoved),e.listen("columnAdded",this._onColumnAdded),e.listen("columnPositionChanged",this._onColumnPositionChanged),e.listen("beforeBatchOperation",this._onBeforeBatchOperation),e.listen("afterBatchOperation",this._onAfterBatchOperation),this.config(t),this.applyStaticStyles(w._styleCalculator))},w.prototype._afterInit=function(){this._cgp=this._getPlugin("ColumnGroupingPlugin")},w.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(e.unlisten("click",this._onClick),e.unlisten("mousedown",this._onMouseDown),e.unlisten("keydown",this._onKeyDown),e.unlisten("columnRemoved",this._onColumnRemoved),e.unlisten("columnAdded",this._onColumnAdded),e.unlisten("columnPositionChanged",this._onColumnPositionChanged),this._hosts.splice(t,1),this._hosts.length||this._timerId&&(clearTimeout(this._timerId),this._timerId=0,this._timerMenuId=0),this._dispose())},w.prototype.config=function(e){if(e){var t=e.columnSelection;if(t){if("object"==typeof t){var n=t.singleSelection;n&&(this._singleSelMode=!0),(n=t.clickToggle)&&(this._clickToggleMode=!0),(n=t.menuClicked)&&(this._onMenuClicked=n),(n=t.menuPosition)&&(this._menuPosition=n),this.addListener(t,"selectionChanged")}}else null!=t&&this.disable();var o=e.columns;if(Array.isArray(o))for(var i=o.length,r=0;r=0},w.prototype.getSelectedColumns=function(){var e=[];if(!1!==this._hasSelection)for(var t=this.getColumnCount(),n=0;n=0;)if(this.isSelectedColumn(e))return this._hasSelection=!0,e;return-1},w.prototype.setSelectedColumn=function(e,t,n){var o=this._setSelectedColumn(e,t,n);return o&&this._updateGroupSelection(),o},w.prototype.selectSingleColumn=function(e,t){null==e&&(e=this._anchorCol),e>=0||(e=0);var n=t||this._activeGrid;this.clearAllSelections(),this._setSelectedColumn(e,!0,n)&&(this._anchorCol=e),this._updateGroupSelection()},w.prototype.selectSingleGroup=function(e,t){var n=t||this._activeGrid,o=this._cgp;if(o&&e){var i=o.getChildColumnIndices(e),r=!1;this.clearAllSelections();for(var l=0;l<=i.length;l++)r|=this._setSelectedColumn(i[l],!0,n);r&&(this._anchorCol=i[0]),this._updateGroupSelection()}},w.prototype.selectRange=function(e,t,n){this._anchorCol=e>=0?e:0,this._selectFromAnchorToTarget(this._anchorCol+t)},w.prototype.selectAllColumns=function(){this.selectRange(0,this.getColumnCount())},w.prototype._onColumnPositionChanged=function(e){this._timerMenuId||e.sender&&e.sender===this._activeGrid&&(this._clearMenuIcon(),this._timerMenuId=setTimeout(this._updateMenuIcon,800))},w.prototype._updateMenuIcon=function(){if(this._timerMenuId=0,!this._onMenuClicked)return!1;var e=this.getFirstSelectedColumn(),t=this._activeGrid;if(e<0||!t)return this._clearMenuIcon(),!1;var n,o=t.getParent().parentNode,i=this.getLastSelectedColumn(),r=t.getColumnRect(e,i);if(r.width<=0||r.left>r.gridWidth)return this._clearMenuIcon(),!1;if(!this._menuButton){this._menuButton=document.createElement("div"),this._menuButton.classList.add("column-selection-menu"),"outside"!==this._menuPosition&&this._menuButton.classList.add("column-selection-menu-inside");var l=document.createElement("coral-icon");l.icon="most-detail",this._menuButton.appendChild(l),this._menuButton.addEventListener("click",this._onMenuClicked)}o.appendChild(this._menuButton);var s=28,u=r.leftPinnedIndex,a=0;for(n=0;n<=u;n++)a+=t.getColumnWidth(n);var c=r.left+r.width,d=c,h=r.top;"outside"!==this._menuPosition?(s=24,this._menuButton.classList.add("column-selection-menu-inside"),c+s>=r.scrollViewSize+a&&(d=r.left-s)<0&&(d=r.gridWidth-s)):c>=r.gridWidth&&(d=r.gridWidth);return this._menuButton.style.left=d+"px",this._menuButton.style.top=h+"px",!0},w.prototype._clearMenuIcon=function(){this._menuButton&&this._menuButton.parentNode&&this._menuButton.parentNode.removeChild(this._menuButton)},w.prototype.clearAllSelections=function(){var e=this._hosts.length;if(this.hasSelectedColumn()){for(var t=this.getColumnCount();--t>=0;)if(this.isSelectedColumn(t))for(var n=0;n=0;)this.setSelectedColumn(e[t],!1);else"number"==typeof e&&this.setSelectedColumn(e,!1);else this.clearAllSelections()},w.prototype.selectAll=w.prototype.selectAllColumns,w.prototype.deselectAll=w.prototype.clearSelection,w.prototype.isSelectedColumn=function(e){return!!this._activeGrid&&this._activeGrid.isSelectedColumn(e)},w.prototype.getActiveGrid=function(){return this._activeGrid},w.prototype._setSelectedColumn=function(e,t,n){if(!(e>=0))return!1;if(n&&n!==this._activeGrid&&(this._activeGrid=n),!this._activeGrid&&(this._activeGrid=this._hosts[0],!this._activeGrid))return!1;if(e>=this.getColumnCount())return!1;var o=!!t;if(o&&this._getColumnOption(e,"unselectable"))return!1;this._hasSelection=!!o||null,this._pendingSelectionOnAdded=-1,this._pendingSelectionOnRemoved=-1;for(var i=this._hosts.length,r=0;r=d&&this._anchorCol<=h?(this._anchorCol=d,l=h):this._anchorCol>d?l=d:this._anchorCol0&&t=this.getColumnCount()&&(t=this.getColumnCount()-1),this._pendingSelectionOnRemoved=t),this._timerId=setTimeout(this._onReselection,10)):this._pendingSelectionOnRemoved=n}},w.prototype._onColumnAdded=function(e){this._timerId?this._pendingSelectionOnAdded=e.colIndex:this._hasSelection&&(this.clearAllSelections(),this._pendingSelectionOnAdded<0&&(this._pendingSelectionOnAdded=e.colIndex),this._timerId=setTimeout(this._onReselection,10))},w.prototype._onReselection=function(e){this._timerId=0;var t=this._pendingSelectionOnAdded>-1?this._pendingSelectionOnAdded:this._pendingSelectionOnRemoved;this.setSelectedColumn(t,!0),this._pendingSelectionOnAdded=-1,this._pendingSelectionOnRemoved=-1,this._activeGrid||(this._activeGrid=this._hosts[0]),this._activeGrid.focus()},w.prototype._onBeforeBatchOperation=function(e){var t=this._activeGrid;if(this._hasSelection&&"reset"===e.batchType){for(var n=this.getColumnCount(),o=0;o=o){if(this._gotoNextGrid())return!0;n=o-1}return this.selectSingleColumn(n),this._activeGrid.scrollToColumn(n),!0},w.prototype._selectByKey=function(e,t){var n=e<0?this.getFirstSelectedColumn():this.getLastSelectedColumn();if(n<0)return!1;var o=this.getColumnCount(),i=this._getNextSelection(n,e);if(i<0){if(!t.shiftKey&&this._gotoPrevGrid())return G.preventDefault(t),!0;i=0}else if(i>=o){if(!t.shiftKey&&this._gotoNextGrid())return G.preventDefault(t),!0;i=o-1}return!!this._activeGrid.isColumnVisible(i)&&(G.preventDefault(t),t.shiftKey&&!this._singleSelMode?this._selectFromAnchorToTarget(i):this.selectSingleColumn(i),this._activeGrid.scrollToColumn(i),!0)},w.prototype._getNextSelection=function(e,t){for(var n=e+t,o=this.getColumnCount();!this._activeGrid.isColumnVisible(n)&&!(n<0||n>=o);)n+=t;return n},w.prototype._gotoPrevGrid=function(){if(this._activeGrid===this._hosts[0])return this._gotoContent();var e=this._hosts.indexOf(this._activeGrid);return e>0&&(this.selectSingleColumn(this._getNextSelection(this.getColumnCount(),-1),this._hosts[e-1]),!0)},w.prototype._gotoNextGrid=function(){var e=this._hosts.length-1;if(this._activeGrid===this._hosts[e])return this._gotoContent();var t=this._hosts.indexOf(this._activeGrid);return t>=0&&(this.selectSingleColumn(this._getNextSelection(-1,1),this._hosts[t+1]),!0)},w.prototype._gotoContent=function(){if(this._activeGrid){var e=this._getPlugin("RowSelectionPlugin");if(e)return setTimeout(function(e,t,n){e.selectSingleRow(0,t,n)}.bind(null,e,this._activeGrid.getSectionSettings("content"),this._activeGrid),10),this.clearAllSelections(),!0}return!1},w.prototype._selectFromAnchorToTarget=function(e){if(this._anchorCol<0)this.selectSingleColumn(e);else{var t,n=this._activeGrid;if(this.clearAllSelections(),e<=this._anchorCol)for(t=e;t<=this._anchorCol;++t)this._setSelectedColumn(t,!0,n);else for(t=this._anchorCol;t<=e;++t)this._setSelectedColumn(t,!0,n);this._updateGroupSelection()}},w.prototype._dispatchSelectionChanged=function(e,t){if(this._activeGrid){var n=this._getPlugin("RowSelectionPlugin");n&&n.clearSelectedRows();var o=this._getPlugin("CellEditingPlugin");o&&o.closeCellEditor(),(o=this._getPlugin("InCellEditingPlugin"))&&o.closeCellEditor()}this._dispatch("selectionChanged",{selectedCols:this.getSelectedColumns(),colIndex:t,grid:this._activeGrid,event:e})},w.prototype.dispatchSelectionChanged=function(){var e=this.getSelectedColumns(),t=e.length?e[0]:-1;this._dispatch("selectionChanged",{selectedCols:e,colIndex:t,grid:this._activeGrid})},w.prototype.selectByMouse=function(e,t){t||(t={}),t.sectionType="title";var n=this._mockMouseEvent(e,0,t);this._onClick(n)},w.prototype.selectByKey=function(e,t){var n=this._mockKeyboardEvent(e,t);this._onKeyDown(n)};!function(e,t){if(e&&t&&t.prototype.getName){var n=t.prototype.getName().replace(/Plugin$/,"");if(n){var o=e.tr;o||(o=e.tr={});var i=o.grid;i||(i=o.grid={}),i[n+"Plugin"]=t,o[n+"Extension"]=t}}}(window,w)}]); \ No newline at end of file diff --git a/book/en/node_modules/tr-grid-contextmenu/dist/tr-grid-contextmenu.min.js b/book/en/node_modules/tr-grid-contextmenu/dist/tr-grid-contextmenu.min.js index 07b27c10..4a123427 100644 --- a/book/en/node_modules/tr-grid-contextmenu/dist/tr-grid-contextmenu.min.js +++ b/book/en/node_modules/tr-grid-contextmenu/dist/tr-grid-contextmenu.min.js @@ -1 +1 @@ -!function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=6)}([function(e,t,o){"use strict";o.r(t),o.d(t,"ElfUtil",(function(){return u}));var n=o(1),r=o(4),i={},l=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},s=function(e,t,o){"attributes"===o.type&&(null!=t?o.attributeName===t&&e(o.target.getAttribute(t)):e(o.target))};i._getNewId=function(){return"observer_"+ ++i._id},i._addObserver=function(e,t,o){var n=o;n||(n={}),n.attributes=!0,i._observer.observe(e,n),i._addListener(e,t)},i._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=o),u._components[e]=t}return t},u.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return a[t]?t:""},u.hasTheme=function(e){return e===u.getThemeName()},u.getThemeName=function(e){return u._themeName||(u._themeName=u.getCssVariable("--theme-name",document.documentElement)),u._themeName},u.setThemeName=function(e){u._themeName=e},u.isThemeLoaded=function(){return u._themeLoaded},u.getColors=function(){return u.themeColors},u.isHaloTheme=function(e){return null==e&&(e=u.getThemeName()),!!e&&e.indexOf("halo")>=0},u.injectIcons=function(e,t){if("object"==typeof e){var o=u.getThemeName();e.themeName=o;var n=u.getElfVersion();e.elfVersion=n;var r=u._icons[o];r&&(e.icons=r)}},u.getIconList=function(){var e=u._icons[u.getThemeName()];return e?Object(n.nestedObjectToArray)(e):[]},u._onIconPreloaded=function(){if(u._dummyIcon){var e=u._dummyIcon.parentNode;e&&e.removeChild(u._dummyIcon),u._dummyIcon=null}},u.prepareIconPreloading=function(){if(!u._iconLoaded){u._iconLoaded=!0;var e=u.getIconList();if(e.length){setTimeout(u._onIconPreloaded,10);var t=u._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},u.getCssVariable=function(e,t){var o="",n=t||document.body;return window&&"string"==typeof e&&1===n.nodeType&&e.match(/^--/)&&(o=(o=window.getComputedStyle(n).getPropertyValue(e)).replace(/[\"\']/g,"")),o},u.getCssVariables=function(e,t){var o=t||document.body;if(window&&1===o.nodeType){var n=window.getComputedStyle(o);for(var r in e){var i=e[r];i&&i.match(/^--/)&&(e[r]=n.getPropertyValue(i).replace(/\"/g,""))}}return e||null},u.setRTK=function(e){null!=e&&(u._rtk=e)},u.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},u._addThemeChangedCallback=function(e){var t=u._callbacks;t.indexOf(e)<0&&t.push(e)},u.reloadThemeColors=function(){return u._deferred&&u._deferred.isFulfilled()?(u._profileName="",u._themeLoaded=!1,u.themeReady=null,u.getThemeColors()):u.themeReady},u.getThemeColors=function(e){if("function"==typeof e&&u._addThemeChangedCallback(e),u.themeReady)return u.themeReady;var t=u._deferred=new r.a;u.themeReady=t.promise;var o=u.getMovementColorProfile();if(o)o!==u._profileName?setTimeout(u._profileNameRetrieved,100):u._deferred.resolve(u.themeColors);else{var n={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},i=window?window.JET:null;if(u._themeLoaded=!1,u._rtk&&u._rtk.Settings)u._rtk.Settings.getAsync(n).then(u._loadingProfileSuccess).catch(u._loadingProfileFailure);else if(i&&i.Settings)try{i.Settings.read(u._loadingProfileSuccess,n)}catch(e){u._loadingProfileFailure()}else setTimeout(u._profileNameRetrieved,100)}return t.promise};var d=function(e){if(e!==u._profileName){u._retrieveThemeColors(e),u._pendingResolve&&(u._pendingResolve=!1,u._deferred.resolve(u.themeColors));for(var t=u._callbacks,o=0;o=300)&&(console.log("Response "+e.status+": "+e.statusText),!0)},_post:function(e,t,o){var n={method:t?"POST":"GET",headers:{"Content-Type":o||"application/json"}};return t&&(n.body="string"==typeof t?t:JSON.stringify(t)),fetch(e,n)}},r=function(e,t,o){if(!e)return null;if(!t||e===t)return e;var n;if(o)for(var r=o.length,i=0;i1?Array.prototype.push.apply(n,o):n.push(o[0])):n.push(o)}return n},p=function(e){return Array.isArray(e)?"{\n"+e.join("\n")+"\n}":e},c=function(e){return e.replace(/\n+/g,"\n\t").replace(/\n\t}$/,"\n}")},h=function(e){if(e){var t="";if(Array.isArray(e))t=e.map(p).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,c)}return""},_=function(e){var t;if(e&&(e.shadowRoot?t=e.shadowRoot:e.getRootNode&&(t=e.getRootNode()),t&&t!==document&&t!==e))return t;return null},f=function(e,t){if(!e)return null;var o=document.createElement("style");o.textContent="\n"+e+"\n";var n,r=_(t),i=!0;return r||(i=!1,r=document.head),i&&r.children&&r.children.length&&(n=r.children[0]),n?r.insertBefore(o,n):r.appendChild(o),o},m=function(){var e=window.navigator.userAgent;return e.indexOf("MSIE ")>0||e.indexOf("Trident/")>0||e.indexOf("Edge/")>0},g=function(){return/Mac/.test(navigator.platform)},v=function(){return!!(navigator.maxTouchPoints&&navigator.maxTouchPoints<256||navigator.msMaxTouchPoints&&navigator.msMaxTouchPoints<256)},y=function(e,t){for(var o in t||(t=[]),e){var n=e[o];"object"==typeof n?y(n,t):t.push(n)}return t},C=function(e){if(!e||"string"!=typeof e)return"";if("#"===e.charAt(0))return e;var t=e.match(/\d+/g);if(!t||t.length<3)return e;for(var o="#",n=0;n<3;n++){var r=+t[n];r>=16||(o+="0"),o+=r?r.toString(16).toUpperCase():"0"}return o},b=function(e){if(null==e)return"";var t="string"==typeof e?e:e.toString();return t.length?(t.indexOf("\n")>=0&&(t=t.replace(/[\r\n]/g," ")),t.indexOf("\t")>=0&&(t=t.replace(/\t/g," "))," "!==t.charAt(0)&&" "!==t.charAt(t.length-1)||(t=t.trim()),t):""};t.default=n},function(e,t,o){"use strict";o.r(t),o.d(t,"Ext",(function(){return n}));var n={inherits:function(e,t){function o(){}o.prototype=t.prototype,e.prototype=new o,e.prototype.constructor=e,e.base=function(e,o,n){o||(o="constructor");for(var r=arguments.length,i=new Array(r),l=2;l=0&&(o.splice(n,1),--this._listenerCount)}},n.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},n.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},n.prototype.getListener=function(e,t){if(e){var o=this._events?this._events[e]:null;if(o)return t||(t=0),o[t]||null}return null},n.prototype.addListener=function(e,t){var o=e?e[t]:null;"function"==typeof o&&this.addEventListener(t,o)},n.prototype._prepareEventArguments=function(e,t){return t},n.prototype._dispatch=function(e,t){var o=this._events?this._events[e]:null;if(o){t=this._prepareEventArguments(e,t);for(var n=o.length,r=0;r=0;){var r=this._hosts[n];if(r.getElement().contains(t))return r}return null},l.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},l.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},l.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var o=this.getColumnIndex(e),n=this._realTimeGrid.getColumnDefinition(o);if(n)return n.getName()}return""},l.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},l.prototype.getColumnIndices=function(e){if(this._compositeGrid){for(var t,o=this._compositeGrid.getColumnFields(),n=this._compositeGrid.getColumnCount(),r=[],i=0;i=0&&t=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var o=this._realTimeGrid.getColumnDefinition(e);return o?o.getId():""},l.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},l.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},l.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},l.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},l.prototype._moveColumnById=function(e,t){var o=this._hosts,n=o?o.length:0;if(n){for(var r=0,i=0;i=0||(o._hosts.push(e),e.listen("postSectionRender",o._onPostSectionRender),e.listen("contextmenu",o._rightClickedHandler),o.config(t),c._styles?c._applyThemeColor(e):(c._stylePromise||(c._stylePromise=u.ElfUtil.getThemeColors()),c._stylePromise.then(o._onThemeLoaded).catch(o._onThemeLoaded)))},c.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(e.unlisten("postSectionRender",this._onPostSectionRender),e.unlisten("contextmenu",this._rightClickedHandler),this._hosts.splice(t,1),this._dispose(),this._hosts.length||(this._csp=this._rsp=null))},c.prototype.config=function(e){if(e){var t=this,o=e.contextMenu;null!=o&&("object"===(void 0===o?"undefined":n(o))?(t._menuAPI=new l.default(o),o.items||(o.items={})):"function"==typeof o&&(o={contextmenu:o}),this.addListener(o,"contextmenu"),t._contextMenu=o,t._disabled=!o)}},c.prototype.getConfigObject=function(e){var t=e||{};return t.contextMenu=this._contextMenu,t},c.prototype.getMenuModel=function(){return this._contextMenu},c.prototype._configureMouseInfo=function(e){var t=this._hosts[0].getRelativePosition(e);t.context=this._contextMap[t.sectionType]||"";var o=t.colIndex,n=t.columnDef={};if(t.field=n.field=this.getColumnField(o),t.colId=n.id=this.getColumnId(o),this._csp||(this._csp=this._getPlugin("ColumnSelectionPlugin")),this._rsp||(this._rsp=this._getPlugin("RowSelectionPlugin")),this._csp){var r=this._csp.getSelectedColumns();t.selectedColumns=r&&r.length?r:null}else t.selectedColumns=null;if(this._rsp){var i=this._rsp.getSelectedRows();t.selectedRows=i&&i.length?i:null}else t.selectedRows=null;return t.mouseEvent=e,t},c.prototype._rightClickedHandler=function(e){var t=this,o=t._hosts[0];if(o&&null!=o.getRelativePosition(e).rowIndex){e.preventDefault();var n=t._mouseInfo=t._configureMouseInfo(e),r=t._contextMenu;if(r&&!t._disabled){if(t._menuAPI){var i;if(n.items=r.items,t._menuAPI.clear(),n.menu=t._menuAPI,r.onMenu&&(r.onMenu(n),i=n.menu.getMenuItems()),!i||!i.length)return;t._popup&&!t._popup.isDisposed()&&t._popup.dispose();var l=o.getElement();t._popup=new s.default(l),t._popup.setMenu(i),t._popup.setPosition("custom",e.pageX,e.pageY),t._popup.addEventListener("itemClicked",t._onItemClicked),t._popup.show()}t._dispatch("contextmenu",n),delete n.mouseEvent}}},c.prototype._onItemClicked=function(e){var t=e.item,o=t.items;if(!o||!o.length){var n=this._menuAPI.findItem(t.id);if(n)for(var r=n.length,i=0;i=0;)c._applyThemeColor(this._hosts[s])},c._applyThemeColor=function(e){e&&!e._contextMenuStyles&&c._styles&&(e._contextMenuStyles=!0,(0,a.injectCss)(c._styles,e.getElement()))},t.default=c,t.ContextMenuPlugin=c},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e){this._model=e,this._items=[],this._runningId=0};n.prototype.clear=function(){this._items.length=0,this._runningId=0},n.prototype.addItem=function(e){this._addItem(e,0)},n.prototype.addItems=function(e){this._addItem(e,0)},n.prototype._addItem=function(e,t){if(e)if(t>=10)console.warn("Circular reference detected");else if("string"==typeof e)"SEPARATOR"===e||e.match(/-{3,}/)?this.addSeparator():this._addItem(this._model.items[e],t+1);else if(Array.isArray(e))for(var o=e.length,n=0;na&&(t=a-d),o+p>u&&(o=u-p),n._popup._elem.style.left=t-l+"px",n._popup._elem.style.top=o-s+"px"}},a.prototype.addPopupChild=function(e,t){t instanceof a&&(t.attachTo(e,"right"),this._popup.addFocusElement(t._popup),this._children.push(t))},a.prototype.setMenu=function(e){if(e&&Array.isArray(e)){var t=this;Array.isArray(t._menuItems)&&t._disposeChildren(),t._menuItems=e;for(var o=0;o":3,"<=":3,">=":3,"!=":3,"=":3,"==":3,"===":3,"+":4,"-":4,"*":5,"%":6,"/":6},a={"+":function(e,t){return e+t},"-":function(e,t){return e-t},"*":function(e,t){return e*t},"/":function(e,t){return e/t},"%":function(e,t){return e%t},"<":function(e,t){return e":function(e,t){return e>t},"<=":function(e,t){return e<=t},">=":function(e,t){return e>=t},"==":function(e,t){return e==t},"!=":function(e,t){return e!=t},"&&":function(e,t){return e&&t},"||":function(e,t){return e||t}},u=function(e,t,o,n){var r={value:t,type:o};return n&&(r.dataType=n),"operator"===o&&(r.precedence=s[t]),e.push(r),e.length-1},d={_tokens:[],_withString:function(e){return" #"+u(d._tokens,e.substring(1,e.length-1),"literal","string")+"#"},_withField:function(e){return" #"+u(d._tokens,e,"literal","variable")+"#"},_withFieldInBrackets:function(e){return d._withField(e.substring(1,e.length-1))},_withNegativeNumber:function(e){var t=+e;return t==t?" #"+u(d._tokens,t,"literal","number")+"#":""},_withPositiveNumber:function(e){return 35===e.charCodeAt(0)?e:d._withNegativeNumber(e)},_withOperator:function(e){return s[e]?("="!=e&&"==="!=e||(e="=="),"#"+u(d._tokens,e,"operator")+"#"):""},_withParenthesis:function(e){return"#"+u(d._tokens,e,"parenthesis")+"#"},_tester:function(e){for(var t=e._rpn,o=t.length,n=0,r=0,i=0;i=2))return console.warn("Cannot parse an expression with insufficient number of operands"),!0;n-=2}++n>r&&(r=n)}return 1!==n||(e._stackSize=r,!1)},_filter:function(e,t){for(var o,n=e._rpn,r=new Array(e._stackSize),i=n.length,l=0,s=0;s&|]+/g,d._withOperator)).replace(/[()]/g,d._withParenthesis);var o=d._tokens,n=o.length;if(!n)return null;var r,i,l,s=[],a=t.match(/#[0-9]+#/g);for(r=0;r=0&&p._painters.splice(e,1),this.reset(),this._conditions=null,this._scopes.length=0,this._blinkCondition=null},p.prototype.reset=function(){this._setColoringType(0);var e=this._scopes.length;if(e){for(var t=0;t0)return 1;if(o<0)return-1}return"u"},p._tickColorTextCondition=function(e,t){var o=n[t[e]];if(o)return o},p._heatMapCondition=function(e,t,o){var n=e[this.field],r=n||0===n?n-this.midPoint:NaN;if(0===r||r!=r)return 0;var i=1;return r>0?(i=o-this.midPoint)<0&&(i=t-this.midPoint):(i=t-this.midPoint)>0&&(i=o-this.midPoint),i<0&&(i=-i),r/i},p._tickBlinkCondition=function(e){var t=n[e];if(t)return t},p._fieldBlinkCondition=function(e,t){return e>t?1:e0?p.blendColor(l.baseColor,l.upColor,a):p.blendColor(l.baseColor,l.downColor,-a),l.textMode?(p._colorObj.color=p.num2Hex(i),p._colorObj):(p._bgObj.backgroundColor=p.num2Hex(i),p._bgObj.color=p.blackAndWhite(i),p._bgObj)):this._coloringType===p.ColoringTypes.TEXT?(l.cssClass=a>0?l.upClass:a<0?l.downClass:this._levelColorDisabled?"":l.levelClass,l.cssClass=l.cssClass||"",l):l}return p._emptyObj},p.blendColor=function(e,t,o){o>1?o=1:o<0&&(o=0);for(var n=p.hex2Num(e),r=p.hex2Num(t),i=[],l=0;l<3;++l){var s=(r[l]-n[l])*o;i.push(n[l]+s)}return i},p.blackAndWhite=function(e){return Math.sqrt(e[0]*e[0]*.241+e[1]*e[1]*.691+e[2]*e[2]*.068)>=135?"#000000":"#FFFFFF"},p.rgb2Hex=i.rgb2Hex,p.num2Hex=function(e){return"#"+(16777216+(e[2]|e[1]<<8|e[0]<<16)).toString(16).slice(1)},p.num2Rgb=function(e){return"rgb("+e[0]+", "+e[1]+", "+e[2]+")"},p.hex2Num=function(e){var t=parseInt(e.replace(/[^0-9A-F]/gi,""),16);return[t>>16&255,t>>8&255,255&t]},p.hex2Rgb=function(e){if(e){var t=parseInt(e.replace(/[^0-9A-F]/gi,""),16);return"rgb("+(t>>16&255)+", "+(t>>8&255)+", "+(255&t)+")"}return""},p.themeChanged=function(){},p.setThemeColors=function(){},p._onThemeChanged=function(){for(var e=p._painters,t=e.length;--t>=0;)e[t].applyThemeColor()},p.loadThemeColors=function(){return p.themeReady||(p.themeReady=l.ElfUtil.getThemeColors(p._onThemeChanged).then(p._onThemeChanged).catch(p._onThemeChanged)),p.themeReady},p.reloadThemeColors=function(){return p.themeReady=l.ElfUtil.reloadThemeColors().then(p._onThemeChanged).catch(p._onThemeChanged),p.themeReady},p.clearCellStyle=function(e,t){var o=e.getElement();if(o){var n=e.blinking;n&&(p._clearBlinkTimer(n),delete e.blinking,n.cell=null),o._coloringCssClass&&o.classList.remove(o._coloringCssClass);for(var r=(t=t||p.supportedStyles).length;--r>=0;)o.style[t[r]]=""}},p._setUpDownColors=function(e,t,o,n,r){e.upColor=t,null!=t&&r&&(e.contrastUpColor=p.getOppositeColor(t)),e.downColor=o,null!=o&&r&&(e.contrastDownColor=p.getOppositeColor(o)),e.levelColor=n,null!=n&&r&&(e.contrastLevelColor=p.getOppositeColor(n))},p._clearBlinkTimer=function(e,t){return!!e.blinkTimer&&(clearTimeout(e.blinkTimer),e.blinkTimer=0,!0)},p.getOppositeColor=function(e){if("string"==typeof e){if("#"===e.charAt(0)){var t=p.hex2Num(e);return p.blackAndWhite(t)}}else if(Array.isArray(e))return p.blackAndWhite(e);return""},p.prototype.render=function(e,t,o,n,r){null!=o&&o==o?this._paintCell(e,t,o,n):this._conditions.length&&this._coloringType===p.ColoringTypes.CONDITIONAL&&this._paintCell(e,t)},p.prototype.renderHeatMap=function(e,t,o,n){this._paintCell(e,t,o,n)},p.prototype.renderColoring=function(e,t){this._paintCell(e,t)},p.prototype._paintCell=function(e,t,o,n){if(e){var r=e.getElement();if(r){var i,l=this._blinkCondition;if(!(l&&(i=e.blinking)&&i.blinkTimer)||l.border){var s=this._getStyles(t,o,n),a=s.cssClass;if(null!=a)r._coloringCssClass&&r._coloringCssClass!==a&&(r.classList.remove(r._coloringCssClass),r._coloringCssClass=null),a&&(r.classList.add(a),r._coloringCssClass=a);else{r._coloringCssClass&&(r.classList.remove(r._coloringCssClass),r._coloringCssClass=null);for(var u=p.bgStyles,d=r.style,c=u.length;--c>=0;){var h=u[c];d[h]=s[h]||""}}}}}},p.prototype.blink=function(e,t,o){this._blinkCell(e,o,t)},p.prototype.blinkCell=function(e,t,o,n){if(!this._blinkCondition)return!1;var r=this._blinkCondition._fn(t,o);return this._blinkCell(e,n,r)},p.prototype._blinkCell=function(e,t,o){if(!e)return!1;if(this._levelColorDisabled&&!o)return!1;var n=e.getElement();if(!n)return!1;var r=this._blinkCondition;if(!r)return!1;var i,l,s=e.blinking;if(s||((s={}).cell=e,e.blinking=s,this._scopes.push(s)),s.blinkId!==r.blinkId){s.blinkId=r.blinkId,s.field=r.field;var a=r.border?p._borderRestorer:p._cellRestorer;s._restorer=a.bind(this,s)}s.rowData=t,o>0?(i=r.upColor,l=r.contrastUpColor):o<0?(i=r.downColor,l=r.contrastDownColor):(i=r.levelColor,l=r.contrastLevelColor);var u=!0;return r.border?(n.style.border="1px solid "+i,u=!1):(n.style.backgroundColor=i,n.style.color=l),p._clearBlinkTimer(s),s.blinkTimer=setTimeout(s._restorer,p._blinkingDuration),u},p.prototype.verifyBlinking=function(e,t){var o=e.blinking;o&&o.blinkTimer&&o.rowData!==t&&(o.rowData=t,p._clearBlinkTimer(o)&&o._restorer())},p.prototype.disableLevelColor=function(e){this._levelColorDisabled=!1!==e};t.default=p},function(e,t,o){"use strict";o.r(t),o.d(t,"Popup",(function(){return s})),o.d(t,"containElements",(function(){return l}));var n=o(2),r=o(3),i={create:function(e,t){var o=document.createElement(e);return t&&(o.className=t),o},div:function(e){return i.create("div",e)},text:function(e,t){var o=i.create("span",t);return(e||0===e)&&(o.textContent=e),o},appendChild:function(e,t){if(!e)return null;var o,n;Array.isArray(arguments[1])?(n=arguments[1],o=0):(n=arguments,o=1);for(var r=n.length;oo)&&(t=o);--t>=0;)e.removeChild(e.lastChild)}},setContent:function(e,t){if(e)if(t||0===t){var o=t.nodeType;1===o||3===o?t!==e.lastChild&&(i.removeChildren(e),e.appendChild(t)):Array.isArray(t)?(i.removeChildren(e),i.appendChild(e,t)):e.textContent=t}else i.removeChildren(e)},toggleAttribute:function(e,t,o){o?e.setAttribute(t,"string"==typeof o?o:""):null==o?e.hasAttribute(t)?e.removeAttribute(t):e.setAttribute(t,""):e.removeAttribute(t)},toggleClass:function(e,t,o){o?e.classList.add(t):null==o?e.classList.contains(t)?e.classList.remove(t):e.classList.add(t):e.classList.remove(t)},addClasses:function(e,t){if(e)for(var o=Array.isArray(t)?t:arguments,n=o.length,r=0;r=0||e.contains(o[0])}return e.contains(t.target)},s=function(e,t){var o=this;o.show=o.show=o.show.bind(o),o.hide=o.hide=o.hide.bind(o),o.toggle=o.toggle=o.toggle.bind(o),o._onBlur=o._onBlur.bind(o),o._onBlurTimer=o._onBlurTimer.bind(o),o._onResize=o._onResize.bind(o),o.updatePosition=o.updatePosition.bind(o),o._onScroll=o._onScroll.bind(o),o._onMouseOver=o._onMouseOver.bind(o),o._onMouseOut=o._onMouseOut.bind(o),o._onMouseOverTimeout=o._onMouseOverTimeout.bind(o),e&&1!==e.nodeType&&(t=e,e=null),e?(o._elem=e,i.removeParent(e)):o._elem=document.createElement("div"),o._elem.style.position="fixed",o._elem.style.left="0",o._elem.style.top="0",o._elem.style.display="inline-block",o._focusElements=[o._elem],o._children=[],o._evtArg={target:o._elem,currentTarget:o._elem},o._parentElement=document.body,o.init(t)};n.Ext.inherits(s,r.EventDispatcher),s.prototype._elem=null,s.prototype._disabled=!1,s.prototype._inDoc=!1,s.prototype._autoHiding=!0,s.prototype._blurTimer=0,s.prototype._resizeTimer=0,s.prototype._attachedElem=null,s.prototype._positioning="under",s.prototype._focusElements,s.prototype._parentElement,s.prototype._children,s.prototype._evtArg,s.prototype._autoClipping=!0,s.prototype._origW=null,s.prototype._origH=null,s.prototype._hoverToShow=!1,s.prototype._hoverTimer=0,s.prototype._gap=0,s.prototype._uiBlocking=!1,s.prototype._hideOnScroll=!0,s.prototype._autoRepositioning=!0,s.prototype.dispose=function(){this._removeEventListeners(),this._clearMouseOverTimer();for(var e=this._children.length;--e>=0;)this._children[e].dispose();this._inDoc=!1,i.removeParent(this._elem),i.removeParent(this._overlay),this._elem=null},s.prototype.getElement=function(){return this._elem},s.prototype.appendChild=function(e){e&&this._elem.appendChild(e)},s.prototype.disable=function(e){this._disabled=!1!==e},s.prototype.enable=function(e){this._disabled=!1===e},s.prototype.init=function(e){if(e){e.positioning&&(this._positioning=e.positioning),null!=e.autoHiding&&(this._autoHiding=!!e.autoHiding),null!=e.uiBlocking&&this.enableUIBlocking(e.uiBlocking),null!=e.hoverToShow&&(this._hoverToShow=!!e.hoverToShow),null!=e.autoClipping&&(this._autoClipping=!!e.autoClipping),null!=e.attachedElement&&this.attachTo(e.attachedElement),null!=e.contentElement&&this.appendChild(e.contentElement),null!=e.parentElement&&this.setParentElement(e.parentElement),null!=e.popupChild&&this.addPopupChild(e.popupChild),0==e.hideOnScroll&&(this._hideOnScroll=!1),0==e.autoRepositioning&&(this._autoRepositioning=!1),this.addListener(e,"show"),this.addListener(e,"hide"),this.addListener(e,"shown"),this.addListener(e,"hidden");var t=e.focusElement||e.focusElements;if(t)if(Array.isArray(t))for(var o=t.length;--o>=0;)this.addFocusElement(t[o]);else this.addFocusElement(t)}},s.prototype.attachTo=function(e,t){e||(e=null),this._attachedElem!==e&&(this._hoverToShow&&this._attachedElem&&(this._attachedElem.removeEventListener("mouseover",this._onMouseOver,!1),this._attachedElem.removeEventListener("mouseout",this._onMouseOut,!1)),this.removeFocusElement(this._attachedElem),this._attachedElem=e,this.addFocusElement(this._attachedElem),this._hoverToShow&&this._attachedElem&&(this._attachedElem.addEventListener("mouseover",this._onMouseOver,!1),this._attachedElem.addEventListener("mouseout",this._onMouseOut,!1))),null!=t&&this.setPositioning(t)},s.prototype.setAttachedElement=s.prototype.attachTo,s.prototype.addFocusElement=function(e){e&&this._focusElements.indexOf(e)<0&&this._focusElements.push(e)},s.prototype.removeFocusElement=function(e){if(e){var t=this._focusElements.indexOf(e);t>=0&&this._focusElements.splice(t,1)}},s.prototype.addPopupChild=function(e){return e||((e=new s).setPositioning("right"),e.attachTo(this._elem)),this.addFocusElement(e.getElement()),this._children.push(e),e},s.prototype.setPopupGap=function(e){this._gap="number"==typeof e?e:0},s.prototype.setParentElement=function(e){return e instanceof Element?this._parentElement=e:this._parentElement||(this._parentElement=document.body),this._parentElement},s.prototype.show=function(e,t){var o=this;if(o._clearMouseOverTimer(),!o._disabled){var n=!1!==e;if(o._inDoc!==n){var r=n?"show":"hide";if(o._evtArg.type=r,o._dispatch(r,o._evtArg),o._evtArg.cancel)o._evtArg.cancel=!1;else{if(n)o._inDoc=!0,t instanceof Element||(t=o._parentElement),o._uiBlocking&&o._attachOverlay(t),t.appendChild(o._elem),t.addEventListener("scroll",o._onScroll,!0),o._autoHiding&&(window.addEventListener("mousedown",o._onBlur,!0),window.addEventListener("touchstart",o._onBlur,!0)),window.addEventListener("resize",o._onResize,!1),window.addEventListener("scroll",o._onScroll,!0);else if(o._inDoc){o._removeEventListeners(),o._restoreElementSize();for(var l=o._children.length;--l>=0;)o._children[l].hide();o._inDoc=!1,i.removeParent(o._elem),i.removeParent(o._overlay)}r=n?"shown":"hidden",o._evtArg.type=r,o._dispatch(r,o._evtArg),n&&o.updatePosition()}}else o.updatePosition()}},s.prototype.hide=function(e){this.show(!1===e)},s.prototype.toggle=function(e,t){null==e&&(e=!this._inDoc),e?this.show(!0,t):this.hide()},s.prototype.isShown=function(){return this._inDoc},s.prototype.isHidden=function(){return!this._inDoc},s.prototype.contains=function(e){if(e){e=Array.isArray(e)?e:[e];for(var t=this._focusElements,o=t.length;--o>=0;)if(e.indexOf(t[o])>=0||t[o].contains(e[0]))return!0}return!1},s.prototype.setPositioning=function(e){this._positioning!==e&&(this._positioning=e,this.updatePosition())},s.prototype.disableAutoHiding=function(e){var t=!1===e;this._autoHiding!==t&&(this._autoHiding=t,this._inDoc&&(t?(window.addEventListener("mousedown",this._onBlur,!0),window.addEventListener("touchstart",this._onBlur,!0)):(window.removeEventListener("mousedown",this._onBlur,!0),window.removeEventListener("touchstart",this._onBlur,!0))))},s.prototype.disableAutoRepositioning=function(e){var t=!1===e;this._autoRepositioning!==t&&(this._autoRepositioning=t)},s.prototype.disableAutoClipping=function(e){var t=!1===e;this._autoClipping!==t&&(this._autoClipping=t)},s.prototype.disableHideOnScroll=function(e){var t=!1===e;this._hideOnScroll!==t&&(this._hideOnScroll=t)},s.prototype.updatePosition=function(e){null==e&&(e=!0);var t=this;if(t._resizeTimer=0,t._inDoc){if(t._attachedElem){if(!t._attachedElem.offsetWidth)return;t._autoClipping&&t._restoreElementSize();var o=document.body;"over"===t._positioning&&(o=document.documentElement);var n,r,l=i.getRelativePosition(t._attachedElem,o),s=l.x,a=l.y,u=window.innerWidth,d=window.innerHeight,p=null!=window.scrollX?window.scrollX:window.pageXOffset,c=null!=window.scrollY?window.scrollY:window.pageYOffset,h=u+p,_=d+c,f=t._attachedElem.offsetWidth,m=t._attachedElem.offsetHeight,g=t._elem.offsetWidth,v=t._elem.offsetHeight;"right"==t._positioning?(n=s+f+this._gap,r=a):"over"==t._positioning?(n=s,r=a):(n=s,r=a+m),e&&("right"==t._positioning?(n+g>h&&s-g>p&&(n=s-g-this._gap),r+v>_&&a+m-v>c&&(r=a+m-v)):"over"==t._positioning?(n+g>h&&s+f-g>p&&(n=s+f-g),r+v>_&&a+f-v>c&&(r=a+f-v)):(n+g>h&&s+f-g>p&&(n=s+f-g),r+v>_&&(a-v>c?r=a-v:(r-=r+v-_)<0&&(r=0)))),t._autoClipping&&(n+g>h&&(null==t._origW&&(t._origW=t._elem.style.width),t._elem.style.width=h-n+"px"),r+v>_&&(null==t._origH&&(t._origH=t._elem.style.height),t._elem.style.height=_-r+"px")),t._elem.style.left=Math.floor(n-p)+"px",t._elem.style.top=Math.floor(r-c)+"px"}else"fixed"!=t._positioning&&"custom"!=t._positioning&&(t._elem.style.left="calc(50vw - "+Math.floor(t._elem.offsetWidth/2)+"px)",t._elem.style.top="calc(46vh - "+Math.floor(t._elem.offsetHeight/2)+"px)");t._evtArg.type="positioning",t._dispatch("positioning",t._evtArg)}},s.prototype.enableUIBlocking=function(e){var t=this._uiBlocking;return this._uiBlocking=!1!==e,t},s.prototype._attachOverlay=function(e){if(!this._overlay){var t=(this._overlay=document.createElement("div")).style;t.height="100%",t.width="100%",t.top="0",t.left="0",t.backgroundColor="rgba(0, 0, 0, 0)"}e===document.body?this._overlay.style.position="fixed":this._overlay.style.position="absolute",e.appendChild(this._overlay)},s.prototype._onBlur=function(e){if(!this._blurTimer&&this._inDoc){if(e)if(e.composedPath){if(this.contains(e.composedPath()))return}else if(this.contains(e.target))return;this._blurTimer=setTimeout(this._onBlurTimer,10)}},s.prototype._onBlurTimer=function(){this._blurTimer=0,this.contains(document.activeElement)||this.hide()},s.prototype._onResize=function(){!this._resizeTimer&&this._inDoc&&this._autoRepositioning&&(this._resizeTimer=setTimeout(this.updatePosition,50))},s.prototype._onScroll=function(e){!this.contains(e.target)&&this._hideOnScroll&&this.hide()},s.prototype._onMouseOver=function(e){this._hoverTimer||this._inDoc||(this._hoverTimer=setTimeout(this._onMouseOverTimeout,500))},s.prototype._onMouseOut=function(e){this._hoverTimer&&(e.currentTarget.contains(e.relatedTarget)||this._clearMouseOverTimer())},s.prototype._onMouseOverTimeout=function(){this._hoverTimer=0,this.show()},s.prototype._clearMouseOverTimer=function(){this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=0)},s.prototype._restoreElementSize=function(){null!=this._origW&&(this._elem.style.width=this._origW,this._origW=null),null!=this._origH&&(this._elem.style.height=this._origH,this._origH=null)},s.prototype._removeEventListeners=function(){this._blurTimer&&(clearTimeout(this._blurTimer),this._blurTimer=0),this._resizeTimer&&(clearTimeout(this._resizeTimer),this._resizeTimer=0),window.removeEventListener("mousedown",this._onBlur,!0),window.removeEventListener("touchstart",this._onBlur,!0),window.removeEventListener("resize",this._onResize,!1),window.removeEventListener("scroll",this._onScroll,!0),this._elem.parentElement&&this._elem.parentElement.removeEventListener("scroll",this._onScroll,!0)};t.default=s}]); \ No newline at end of file +!function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=6)}([function(e,t,o){"use strict";o.r(t),o.d(t,"Util",(function(){return n})),o.d(t,"extendObject",(function(){return r})),o.d(t,"cloneObject",(function(){return i})),o.d(t,"isEmptyObject",(function(){return l})),o.d(t,"deepEqual",(function(){return u})),o.d(t,"arrayToObject",(function(){return s})),o.d(t,"extendProperty",(function(){return a})),o.d(t,"extendArrayProperty",(function(){return d})),o.d(t,"prettifyCss",(function(){return h})),o.d(t,"getShadowRoot",(function(){return f})),o.d(t,"injectCss",(function(){return _})),o.d(t,"isIE",(function(){return m})),o.d(t,"isMac",(function(){return g})),o.d(t,"isTouchDevice",(function(){return v})),o.d(t,"nestedObjectToArray",(function(){return y})),o.d(t,"rgb2Hex",(function(){return C})),o.d(t,"prepareTSVContent",(function(){return b}));var n={post:function(e,t){return n._post(e,t).then(n.toJSON)},requestText:function(e,t){return n._post(e,t,"text/plain").then(n.toText)},requestByUrlEncoded:function(e,t){return n._post(e,t,"application/x-www-form-urlencoded").then(n.toJSON)},toJSON:function(e){return n._logError(e)?Promise.reject(e):e.json()},toText:function(e){return n._logError(e)?Promise.reject(e):e.text()},_logError:function(e){return!!(e&&e.status>=300)&&(console.log("Response "+e.status+": "+e.statusText),!0)},_post:function(e,t,o){var n={method:t?"POST":"GET",headers:{"Content-Type":o||"application/json"}};return t&&(n.body="string"==typeof t?t:JSON.stringify(t)),fetch(e,n)}},r=function(e,t,o){if(!e)return null;if(!t||e===t)return e;var n;if(o)for(var r=o.length,i=0;i1?Array.prototype.push.apply(n,o):n.push(o[0])):n.push(o)}return n},p=function(e){return Array.isArray(e)?"{\n"+e.join("\n")+"\n}":e},c=function(e){return e.replace(/\n+/g,"\n\t").replace(/\n\t}$/,"\n}")},h=function(e){if(e){var t="";if(Array.isArray(e))t=e.map(p).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,c)}return""},f=function(e){var t;if(e&&(e.shadowRoot?t=e.shadowRoot:e.getRootNode&&(t=e.getRootNode()),t&&t!==document&&t!==e))return t;return null},_=function(e,t){if(!e)return null;var o=document.createElement("style");o.textContent="\n"+e+"\n";var n,r=f(t),i=!0;return r||(i=!1,r=document.head),i&&r.children&&r.children.length&&(n=r.children[0]),n?r.insertBefore(o,n):r.appendChild(o),o},m=function(){var e=window.navigator.userAgent;return e.indexOf("MSIE ")>0||e.indexOf("Trident/")>0||e.indexOf("Edge/")>0},g=function(){return/Mac/.test(navigator.platform)},v=function(){return!!(navigator.maxTouchPoints&&navigator.maxTouchPoints<256||navigator.msMaxTouchPoints&&navigator.msMaxTouchPoints<256)},y=function(e,t){for(var o in t||(t=[]),e){var n=e[o];"object"==typeof n?y(n,t):t.push(n)}return t},C=function(e){if(!e||"string"!=typeof e)return"";if("#"===e.charAt(0))return e;var t=e.match(/\d+/g);if(!t||t.length<3)return e;for(var o="#",n=0;n<3;n++){var r=+t[n];r>=16||(o+="0"),o+=r?r.toString(16).toUpperCase():"0"}return o},b=function(e){if(null==e)return"";var t="string"==typeof e?e:e.toString();return t.length?(t.indexOf("\n")>=0&&(t=t.replace(/[\r\n]/g," ")),t.indexOf("\t")>=0&&(t=t.replace(/\t/g," "))," "!==t.charAt(0)&&" "!==t.charAt(t.length-1)||(t=t.trim()),t):""};t.default=n},function(e,t,o){"use strict";o.d(t,"a",(function(){return u}));var n=o(0),r=o(4),i={},l=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},s=function(e,t,o){"attributes"===o.type&&(null!=t?o.attributeName===t&&e(o.target.getAttribute(t)):e(o.target))};i._getNewId=function(){return"observer_"+ ++i._id},i._addObserver=function(e,t,o){var n=o;n||(n={}),n.attributes=!0,i._observer.observe(e,n),i._addListener(e,t)},i._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=o),u._components[e]=t}return t},u.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return a[t]?t:""},u.hasTheme=function(e){return e===u.getThemeName()},u.getThemeName=function(e){return u._themeName||(u._themeName=u.getCssVariable("--theme-name",document.documentElement)),u._themeName},u.setThemeName=function(e){u._themeName=e},u.isThemeLoaded=function(){return u._themeLoaded},u.getColors=function(){return u.themeColors},u.isHaloTheme=function(e){return null==e&&(e=u.getThemeName()),!!e&&e.indexOf("halo")>=0},u.injectIcons=function(e,t){if("object"==typeof e){var o=u.getThemeName();e.themeName=o;var n=u.getElfVersion();e.elfVersion=n;var r=u._icons[o];r&&(e.icons=r)}},u.getIconList=function(){var e=u._icons[u.getThemeName()];return e?Object(n.nestedObjectToArray)(e):[]},u._onIconPreloaded=function(){if(u._dummyIcon){var e=u._dummyIcon.parentNode;e&&e.removeChild(u._dummyIcon),u._dummyIcon=null}},u.prepareIconPreloading=function(){if(!u._iconLoaded){u._iconLoaded=!0;var e=u.getIconList();if(e.length){setTimeout(u._onIconPreloaded,10);var t=u._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},u.getCssVariable=function(e,t){var o="",n=t||document.body;return window&&"string"==typeof e&&1===n.nodeType&&e.match(/^--/)&&(o=(o=window.getComputedStyle(n).getPropertyValue(e)).replace(/[\"\']/g,"")),o},u.getCssVariables=function(e,t){var o=t||document.body;if(window&&1===o.nodeType){var n=window.getComputedStyle(o);for(var r in e){var i=e[r];i&&i.match(/^--/)&&(e[r]=n.getPropertyValue(i).replace(/\"/g,""))}}return e||null},u.setRTK=function(e){null!=e&&(u._rtk=e)},u.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},u._addThemeChangedCallback=function(e){var t=u._callbacks;t.indexOf(e)<0&&t.push(e)},u.reloadThemeColors=function(){return u._deferred&&u._deferred.isFulfilled()?(u._profileName="",u._themeLoaded=!1,u.themeReady=null,u.getThemeColors()):u.themeReady},u.getThemeColors=function(e){if("function"==typeof e&&u._addThemeChangedCallback(e),u.themeReady)return u.themeReady;var t=u._deferred=new r.a;u.themeReady=t.promise;var o=u.getMovementColorProfile();if(o)o!==u._profileName?setTimeout(u._profileNameRetrieved,100):u._deferred.resolve(u.themeColors);else{var n={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},i=window?window.JET:null;if(u._themeLoaded=!1,u._rtk&&u._rtk.Settings)u._rtk.Settings.getAsync(n).then(u._loadingProfileSuccess).catch(u._loadingProfileFailure);else if(i&&i.Settings)try{i.Settings.read(u._loadingProfileSuccess,n)}catch(e){u._loadingProfileFailure()}else setTimeout(u._profileNameRetrieved,100)}return t.promise};var d=function(e){if(e!==u._profileName){u._retrieveThemeColors(e),u._pendingResolve&&(u._pendingResolve=!1,u._deferred.resolve(u.themeColors));for(var t=u._callbacks,o=0;o=0&&(o.splice(n,1),--this._listenerCount)}},n.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},n.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},n.prototype.getListener=function(e,t){if(e){var o=this._events?this._events[e]:null;if(o)return t||(t=0),o[t]||null}return null},n.prototype.addListener=function(e,t){var o=e?e[t]:null;"function"==typeof o&&this.addEventListener(t,o)},n.prototype._prepareEventArguments=function(e,t){return t},n.prototype._dispatch=function(e,t){var o=this._events?this._events[e]:null;if(o){t=this._prepareEventArguments(e,t);for(var n=o.length,r=0;r=0;){var r=this._hosts[n];if(r.getElement().contains(t))return r}return null},a.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},a.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},a.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var o=this.getColumnIndex(e),n=this._realTimeGrid.getColumnDefinition(o);if(n)return n.getName()}return""},a.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},a.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var o,n=this._compositeGrid.getColumnFields(),r=this._compositeGrid.getColumnCount(),i=[],l=0;l=0&&o=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var o=this._realTimeGrid.getColumnDefinition(e);return o?o.getId():""},a.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},a.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},a.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},a.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},a.prototype._moveColumnById=function(e,t){var o=this._hosts,n=o?o.length:0;if(n){for(var r=0,i=0;i=0&&t>=0){var r=this._activeGrid||this._hosts[0],i=r?r.getCell(n.sectionType||"content",e,t):null;n.target=i?i.getElement():null}return n};var u={left:37,right:39,up:38,down:40,tab:9};a.prototype._mockKeyboardEvent=function(e,t){var o=t||{};return o.preventDefault=function(){},o.stopPropagation=function(){},"string"==typeof e&&(e=e.toLowerCase(),e=u[e]),o.keyCode=e,o},a._staticStyles={},a._themeLoaders={},a._themeLoadSuccess=function(e,t){var o=this.getName(),n=a._staticStyles[o]=e(t);this.applyStyles(n,o)},a.prototype.applyStaticStyles=function(e){var t=this.getName(),o=a._staticStyles[t];o?this.applyStyles(o,t):e&&(a._themeLoaders[t]||(a._themeLoaders[t]=s.a.getThemeColors()),a._themeLoaders[t].then(a._themeLoadSuccess.bind(this,e)))},a.prototype.applyStyles=function(e,t,o){t||(t=this.getName());var n,r,i="_style"+t,s=this._hosts,a=s.length;if(a)if(o)for(n=0;n=0||(o._hosts.push(e),e.listen("postSectionRender",o._onPostSectionRender),e.listen("contextmenu",o._rightClickedHandler),o.config(t),o.applyStaticStyles(p._styleCalculator))},p.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(e.unlisten("postSectionRender",this._onPostSectionRender),e.unlisten("contextmenu",this._rightClickedHandler),this._hosts.splice(t,1),this._dispose(),this._hosts.length||(this._csp=this._rsp=null))},p.prototype.config=function(e){if(e){var t=this,o=e.contextMenu;null!=o&&("object"===(void 0===o?"undefined":n(o))?(t._menuAPI=new l.default(o),o.items||(o.items={})):"function"==typeof o&&(o={contextmenu:o}),this.addListener(o,"contextmenu"),t._contextMenu=o,t._disabled=!o)}},p.prototype.getConfigObject=function(e){var t=e||{};return t.contextMenu=this._contextMenu,t},p.prototype.getMenuModel=function(){return this._contextMenu},p.prototype._configureMouseInfo=function(e){var t=this._hosts[0].getRelativePosition(e);t.context=this._contextMap[t.sectionType]||"";var o=t.colIndex,n=t.columnDef={};if(t.field=n.field=this.getColumnField(o),t.colId=n.id=this.getColumnId(o),this._csp||(this._csp=this._getPlugin("ColumnSelectionPlugin")),this._rsp||(this._rsp=this._getPlugin("RowSelectionPlugin")),this._csp){var r=this._csp.getSelectedColumns();t.selectedColumns=r&&r.length?r:null}else t.selectedColumns=null;if(this._rsp){var i=this._rsp.getSelectedRows();t.selectedRows=i&&i.length?i:null}else t.selectedRows=null;return t.mouseEvent=e,t},p.prototype._rightClickedHandler=function(e){var t=this,o=t._hosts[0];if(o&&null!=o.getRelativePosition(e).rowIndex){e.preventDefault();var n=t._mouseInfo=t._configureMouseInfo(e),r=t._contextMenu;if(r&&!t._disabled){if(t._menuAPI){var i;if(n.items=r.items,t._menuAPI.clear(),n.menu=t._menuAPI,r.onMenu&&(r.onMenu(n),i=n.menu.getMenuItems()),!i||!i.length)return;t._popup&&!t._popup.isDisposed()&&t._popup.dispose();var l=o.getElement();t._popup=new s.default(l),t._popup.setMenu(i),t._popup.setPosition("custom",e.pageX,e.pageY),t._popup.addEventListener("itemClicked",t._onItemClicked),t._popup.show()}t._dispatch("contextmenu",n),delete n.mouseEvent}}},p.prototype._onItemClicked=function(e){var t=e.item,o=t.items;if(!o||!o.length){var n=this._menuAPI.findItem(t.id);if(n)for(var r=n.length,i=0;i=10)console.warn("Circular reference detected");else if("string"==typeof e)"SEPARATOR"===e||e.match(/-{3,}/)?this.addSeparator():this._addItem(this._model.items[e],t+1);else if(Array.isArray(e))for(var o=e.length,n=0;na&&(t=a-d),o+p>u&&(o=u-p),n._popup._elem.style.left=t-l+"px",n._popup._elem.style.top=o-s+"px"}},a.prototype.addPopupChild=function(e,t){t instanceof a&&(t.attachTo(e,"right"),this._popup.addFocusElement(t._popup),this._children.push(t))},a.prototype.setMenu=function(e){if(e&&Array.isArray(e)){var t=this;Array.isArray(t._menuItems)&&t._disposeChildren(),t._menuItems=e;for(var o=0;o":3,"<=":3,">=":3,"!=":3,"=":3,"==":3,"===":3,"+":4,"-":4,"*":5,"%":6,"/":6,"!":7,"!!":7},a={"+":function(e,t){return e+t},"-":function(e,t){return e-t},"*":function(e,t){return e*t},"/":function(e,t){return e/t},"%":function(e,t){return e%t},"<":function(e,t){return e":function(e,t){return e>t},"<=":function(e,t){return e<=t},">=":function(e,t){return e>=t},"==":function(e,t){return e==t},"!=":function(e,t){return e!=t},"&&":function(e,t){return e&&t},"||":function(e,t){return e||t},"!":function(e,t){return!e},"!!":function(e,t){return!!e}},u={"+":2,"-":2,"*":2,"/":2,"%":2,"<":2,">":2,"<=":2,">=":2,"==":2,"!=":2,"&&":2,"||":2,"!":1,"!!":1},d=function(e,t,o,n){var r={value:t,type:o};return n&&(r.dataType=n),"operator"===o?r.precedence=s[t]:"parenthesis"===o&&(r.precedence=0),e.push(r),e.length-1},p={_tokens:[],_withString:function(e){return" #"+d(p._tokens,e.substring(1,e.length-1),"literal","string")+"#"},_withField:function(e){return" #"+d(p._tokens,e,"literal","variable")+"#"},_withFieldInBrackets:function(e){return p._withField(e.substring(1,e.length-1))},_withNegativeNumber:function(e){var t=+e;return t==t?" #"+d(p._tokens,t,"literal","number")+"#":""},_withPositiveNumber:function(e){return 35===e.charCodeAt(0)?e:p._withNegativeNumber(e)},_withOperator:function(e){return s[e]?("="!=e&&"==="!=e||(e="=="),"#"+d(p._tokens,e,"operator")+"#"):""},_withParenthesis:function(e){return"#"+d(p._tokens,e,"parenthesis")+"#"},_tester:function(e){for(var t=e._rpn,o=t.length,n=0,r=0,i=0;i=s))return console.warn("Cannot parse an expression with insufficient number of operands"),!0;n-=s}++n>r&&(r=n)}return 1!==n||(e._stackSize=r,!1)},_filter:function(e,t){for(var o,n=e._rpn,r=new Array(e._stackSize),i=n.length,l=0,s=0;s&|]+/g,p._withOperator)).replace(/[()]/g,p._withParenthesis);var o=p._tokens,n=o.length;if(!n)return null;var r,i,l,s=[],a=t.match(/#[0-9]+#/g);for(r=0;rf[f.length-1].precedence);)h.push(f.pop());f.push(i)}for(m=!1;f.length;)"("===(_=f.pop()).value&&"parenthesis"===_.type?m=!0:h.push(_);if(m&&console.warn("No right parenthesis paired with the left one"),!h.length)return null;var g={_rpn:h};return p._tester(g)?null:p._filter.bind(null,g)}},c=function(){this._conditions=[],this._scopes=[],c._painters.push(this)};c.ColoringTypes={TEXT:1,HEATMAP:2,CONDITIONAL:3},c.prototype._coloringType=0,c.prototype._conditions=null,c.prototype._effectiveStyles=null,c.prototype._blinkCondition=null,c.prototype._scopes,c.prototype._columnStats=null,c.prototype._levelColorDisabled=!1,c.prototype._blinkingDuration=250,c._runningBlinkId=0,c._painters=[],c._emptyAry=[],c._emptyObj={},c._bgObj={backgroundColor:"",color:""},c._colorObj={color:""},c.bgStyles=["backgroundColor","color"],c.nonBgStyles=["fontSize","fontWeight","fontStyle","textAlign","textDecoration"],c.supportedStyles=c.bgStyles.concat(c.nonBgStyles),c.themeReady=null,c.parse=p.parse,c.prototype.dispose=function(){var e=c._painters.indexOf(this);e>=0&&c._painters.splice(e,1),this.reset(),this._conditions=null,this._scopes.length=0,this._blinkCondition=null},c.prototype.reset=function(){this._setColoringType(0);var e=this._scopes.length;if(e){for(var t=0;t0)return 1;if(o<0)return-1}return"u"},c._tickColorTextCondition=function(e,t){var o=n[t[e]];if(o)return o},c._heatMapCondition=function(e,t,o){var n=e[this.field],r=n||0===n?n-this.midPoint:NaN;if(0===r||r!=r)return 0;var i=1;return r>0?(i=o-this.midPoint)<0&&(i=t-this.midPoint):(i=t-this.midPoint)>0&&(i=o-this.midPoint),i<0&&(i=-i),r/i},c._tickBlinkCondition=function(e){var t=n[e];if(t)return t},c._fieldBlinkCondition=function(e,t){return e>t?1:e0?c.blendColor(l.baseColor,l.upColor,a):c.blendColor(l.baseColor,l.downColor,-a),l.textMode?(c._colorObj.color=c.num2Hex(i),c._colorObj):(c._bgObj.backgroundColor=c.num2Hex(i),c._bgObj.color=c.blackAndWhite(i),c._bgObj)):this._coloringType===c.ColoringTypes.TEXT?(l.cssClass=a>0?l.upClass:a<0?l.downClass:this._levelColorDisabled?"":l.levelClass,l.cssClass=l.cssClass||"",l):l}return c._emptyObj},c.blendColor=function(e,t,o){o>1?o=1:o<0&&(o=0);for(var n=c.hex2Num(e),r=c.hex2Num(t),i=[],l=0;l<3;++l){var s=(r[l]-n[l])*o;i.push(n[l]+s)}return i},c.blackAndWhite=function(e){return Math.sqrt(e[0]*e[0]*.241+e[1]*e[1]*.691+e[2]*e[2]*.068)>=135?"#000000":"#FFFFFF"},c.rgb2Hex=i.rgb2Hex,c.num2Hex=function(e){return"#"+(16777216+(e[2]|e[1]<<8|e[0]<<16)).toString(16).slice(1)},c.num2Rgb=function(e){return"rgb("+e[0]+", "+e[1]+", "+e[2]+")"},c.hex2Num=function(e){var t=parseInt(e.replace(/[^0-9A-F]/gi,""),16);return[t>>16&255,t>>8&255,255&t]},c.hex2Rgb=function(e){if(e){var t=parseInt(e.replace(/[^0-9A-F]/gi,""),16);return"rgb("+(t>>16&255)+", "+(t>>8&255)+", "+(255&t)+")"}return""},c.themeChanged=function(){},c.setThemeColors=function(){},c._onThemeChanged=function(){for(var e=c._painters,t=e.length;--t>=0;)e[t].applyThemeColor()},c.loadThemeColors=function(){return c.themeReady||(c.themeReady=l.a.getThemeColors(c._onThemeChanged).then(c._onThemeChanged).catch(c._onThemeChanged)),c.themeReady},c.reloadThemeColors=function(){return c.themeReady=l.a.reloadThemeColors().then(c._onThemeChanged).catch(c._onThemeChanged),c.themeReady},c.clearCellStyle=function(e,t){var o=e.getElement();if(o){var n=e.blinking;if(n&&(c._clearBlinkTimer(n),delete e.blinking,n.cell=null),o._coloringCssClass&&o.classList.remove(o._coloringCssClass),t||(t=c.supportedStyles),Array.isArray(t))for(var r=t.length;--r>=0;)o.style[t[r]]="";else for(var i in t)o.style[i]=""}},c._setUpDownColors=function(e,t,o,n,r){e.upColor=t,null!=t&&r&&(e.contrastUpColor=c.getOppositeColor(t)),e.downColor=o,null!=o&&r&&(e.contrastDownColor=c.getOppositeColor(o)),e.levelColor=n,null!=n&&r&&(e.contrastLevelColor=c.getOppositeColor(n))},c._clearBlinkTimer=function(e,t){return!!e.blinkTimer&&(clearTimeout(e.blinkTimer),e.blinkTimer=0,!0)},c.getOppositeColor=function(e){if("string"==typeof e){if("#"===e.charAt(0)){var t=c.hex2Num(e);return c.blackAndWhite(t)}}else if(Array.isArray(e))return c.blackAndWhite(e);return""},c.prototype.render=function(e,t,o,n,r){null!=o&&o==o?this._paintCell(e,t,o,n):this._conditions.length&&this._coloringType===c.ColoringTypes.CONDITIONAL&&this._paintCell(e,t)},c.prototype.renderHeatMap=function(e,t,o,n){this._paintCell(e,t,o,n)},c.prototype.renderColoring=function(e,t){this._paintCell(e,t)},c.prototype._paintCell=function(e,t,o,n){if(e){var r=e.getElement();if(r){var i,l=this._blinkCondition;if(!(l&&(i=e.blinking)&&i.blinkTimer)||l.border){var s=this._getStyles(t,o,n),a=r.style,u=s.cssClass;r._coloringCssClass&&r._coloringCssClass!==u&&(r.classList.remove(r._coloringCssClass),r._coloringCssClass=null),null!=u?u&&(r.classList.add(u),r._coloringCssClass=u):(s.backgroundColor?a.backgroundColor=s.backgroundColor:this._effectiveStyles&&!this._effectiveStyles.backgroundColor||(a.backgroundColor=""),s.color?a.color=s.color:this._effectiveStyles&&!this._effectiveStyles.color||(a.color=""))}}}},c.prototype.blink=function(e,t,o){this._blinkCell(e,o,t)},c.prototype.blinkCell=function(e,t,o,n){if(!this._blinkCondition)return!1;var r=this._blinkCondition._fn(t,o);return this._blinkCell(e,n,r)},c.prototype._blinkCell=function(e,t,o){if(!e)return!1;if(this._levelColorDisabled&&!o)return!1;var n=e.getElement();if(!n)return!1;var r=this._blinkCondition;if(!r)return!1;var i,l,s=e.blinking;if(s||((s={}).cell=e,e.blinking=s,this._scopes.push(s)),s.blinkId!==r.blinkId){s.blinkId=r.blinkId,s.field=r.field;var a=r.border?c._borderRestorer:c._cellRestorer;s._restorer=a.bind(this,s)}s.rowData=t,o>0?(i=r.upColor,l=r.contrastUpColor):o<0?(i=r.downColor,l=r.contrastDownColor):(i=r.levelColor,l=r.contrastLevelColor);var u=!0;return r.border?(n.style.border="1px solid "+i,u=!1):(n.style.backgroundColor=i,n.style.color=l),c._clearBlinkTimer(s),s.blinkTimer=setTimeout(s._restorer,this._blinkingDuration),u},c.prototype.verifyBlinking=function(e,t){var o=e.blinking;o&&o.blinkTimer&&o.rowData!==t&&(o.rowData=t,c._clearBlinkTimer(o)&&o._restorer())},c.prototype.disableLevelColor=function(e){this._levelColorDisabled=!1!==e},c.prototype.setBlinkingDuration=function(e){"number"==typeof e&&(this._blinkingDuration=e)};t.default=c},function(e,t,o){"use strict";o.r(t),o.d(t,"Popup",(function(){return s})),o.d(t,"containElements",(function(){return l}));var n=o(2),r=o(3),i={create:function(e,t){var o=document.createElement(e);return t&&(o.className=t),o},div:function(e){return i.create("div",e)},text:function(e,t){var o=i.create("span",t);return(e||0===e)&&(o.textContent=e),o},appendChild:function(e,t){if(!e)return null;var o,n;Array.isArray(arguments[1])?(n=arguments[1],o=0):(n=arguments,o=1);for(var r=n.length;oo)&&(t=o);--t>=0;)e.removeChild(e.lastChild)}},setContent:function(e,t){if(e)if(t||0===t){var o=t.nodeType;1===o||3===o?t!==e.lastChild&&(i.removeChildren(e),e.appendChild(t)):Array.isArray(t)?(i.removeChildren(e),i.appendChild(e,t)):e.textContent=t}else i.removeChildren(e)},toggleAttribute:function(e,t,o){o?e.setAttribute(t,"string"==typeof o?o:""):null==o?e.hasAttribute(t)?e.removeAttribute(t):e.setAttribute(t,""):e.removeAttribute(t)},toggleClass:function(e,t,o){o?e.classList.add(t):null==o?e.classList.contains(t)?e.classList.remove(t):e.classList.add(t):e.classList.remove(t)},addClasses:function(e,t){if(e)for(var o=Array.isArray(t)?t:arguments,n=o.length,r=0;r=0||e.contains(o[0])}return e.contains(t.target)},s=function(e,t){var o=this;o.show=o.show=o.show.bind(o),o.hide=o.hide=o.hide.bind(o),o.toggle=o.toggle=o.toggle.bind(o),o._onBlur=o._onBlur.bind(o),o._onBlurTimer=o._onBlurTimer.bind(o),o._onResize=o._onResize.bind(o),o.updatePosition=o.updatePosition.bind(o),o._onScroll=o._onScroll.bind(o),o._onMouseOver=o._onMouseOver.bind(o),o._onMouseOut=o._onMouseOut.bind(o),o._onMouseOverTimeout=o._onMouseOverTimeout.bind(o),e&&1!==e.nodeType&&(t=e,e=null),e?(o._elem=e,i.removeParent(e)):o._elem=document.createElement("div"),o._elem.style.position="fixed",o._elem.style.left="0",o._elem.style.top="0",o._elem.style.display="inline-block",o._focusElements=[o._elem],o._children=[],o._evtArg={target:o._elem,currentTarget:o._elem},o._parentElement=document.body,o.init(t)};n.Ext.inherits(s,r.EventDispatcher),s.prototype._elem=null,s.prototype._disabled=!1,s.prototype._inDoc=!1,s.prototype._autoHiding=!0,s.prototype._blurTimer=0,s.prototype._resizeTimer=0,s.prototype._attachedElem=null,s.prototype._positioning="under",s.prototype._focusElements,s.prototype._parentElement,s.prototype._children,s.prototype._evtArg,s.prototype._autoClipping=!0,s.prototype._origW=null,s.prototype._origH=null,s.prototype._hoverToShow=!1,s.prototype._hoverTimer=0,s.prototype._gap=0,s.prototype._uiBlocking=!1,s.prototype._hideOnScroll=!0,s.prototype._autoRepositioning=!0,s.prototype.dispose=function(){this._removeEventListeners(),this._clearMouseOverTimer();for(var e=this._children.length;--e>=0;)this._children[e].dispose();this._inDoc=!1,i.removeParent(this._elem),i.removeParent(this._overlay),this._elem=null},s.prototype.getElement=function(){return this._elem},s.prototype.appendChild=function(e){e&&this._elem.appendChild(e)},s.prototype.disable=function(e){this._disabled=!1!==e},s.prototype.enable=function(e){this._disabled=!1===e},s.prototype.init=function(e){if(e){e.positioning&&(this._positioning=e.positioning),null!=e.autoHiding&&(this._autoHiding=!!e.autoHiding),null!=e.uiBlocking&&this.enableUIBlocking(e.uiBlocking),null!=e.hoverToShow&&(this._hoverToShow=!!e.hoverToShow),null!=e.autoClipping&&(this._autoClipping=!!e.autoClipping),null!=e.attachedElement&&this.attachTo(e.attachedElement),null!=e.contentElement&&this.appendChild(e.contentElement),null!=e.parentElement&&this.setParentElement(e.parentElement),null!=e.popupChild&&this.addPopupChild(e.popupChild),0==e.hideOnScroll&&(this._hideOnScroll=!1),0==e.autoRepositioning&&(this._autoRepositioning=!1),this.addListener(e,"show"),this.addListener(e,"hide"),this.addListener(e,"shown"),this.addListener(e,"hidden");var t=e.focusElement||e.focusElements;if(t)if(Array.isArray(t))for(var o=t.length;--o>=0;)this.addFocusElement(t[o]);else this.addFocusElement(t)}},s.prototype.attachTo=function(e,t){e||(e=null),this._attachedElem!==e&&(this._hoverToShow&&this._attachedElem&&(this._attachedElem.removeEventListener("mouseover",this._onMouseOver,!1),this._attachedElem.removeEventListener("mouseout",this._onMouseOut,!1)),this.removeFocusElement(this._attachedElem),this._attachedElem=e,this.addFocusElement(this._attachedElem),this._hoverToShow&&this._attachedElem&&(this._attachedElem.addEventListener("mouseover",this._onMouseOver,!1),this._attachedElem.addEventListener("mouseout",this._onMouseOut,!1))),null!=t&&this.setPositioning(t)},s.prototype.setAttachedElement=s.prototype.attachTo,s.prototype.addFocusElement=function(e){e&&this._focusElements.indexOf(e)<0&&this._focusElements.push(e)},s.prototype.removeFocusElement=function(e){if(e){var t=this._focusElements.indexOf(e);t>=0&&this._focusElements.splice(t,1)}},s.prototype.addPopupChild=function(e){return e||((e=new s).setPositioning("right"),e.attachTo(this._elem)),this.addFocusElement(e.getElement()),this._children.push(e),e},s.prototype.setPopupGap=function(e){this._gap="number"==typeof e?e:0},s.prototype.setParentElement=function(e){return e instanceof Element?this._parentElement=e:this._parentElement||(this._parentElement=document.body),this._parentElement},s.prototype.show=function(e,t){var o=this;if(o._clearMouseOverTimer(),!o._disabled){var n=!1!==e;if(o._inDoc!==n){var r=n?"show":"hide";if(o._evtArg.type=r,o._dispatch(r,o._evtArg),o._evtArg.cancel)o._evtArg.cancel=!1;else{if(n)o._inDoc=!0,t instanceof Element||(t=o._parentElement),o._uiBlocking&&o._attachOverlay(t),t.appendChild(o._elem),t.addEventListener("scroll",o._onScroll,!0),o._autoHiding&&(window.addEventListener("mousedown",o._onBlur,!0),window.addEventListener("touchstart",o._onBlur,!0)),window.addEventListener("resize",o._onResize,!1),window.addEventListener("scroll",o._onScroll,!0);else if(o._inDoc){o._removeEventListeners(),o._restoreElementSize();for(var l=o._children.length;--l>=0;)o._children[l].hide();o._inDoc=!1,i.removeParent(o._elem),i.removeParent(o._overlay)}r=n?"shown":"hidden",o._evtArg.type=r,o._dispatch(r,o._evtArg),n&&o.updatePosition()}}else o.updatePosition()}},s.prototype.hide=function(e){this.show(!1===e)},s.prototype.toggle=function(e,t){null==e&&(e=!this._inDoc),e?this.show(!0,t):this.hide()},s.prototype.isShown=function(){return this._inDoc},s.prototype.isHidden=function(){return!this._inDoc},s.prototype.contains=function(e){if(e){e=Array.isArray(e)?e:[e];for(var t=this._focusElements,o=t.length;--o>=0;)if(e.indexOf(t[o])>=0||t[o].contains(e[0]))return!0}return!1},s.prototype.setPositioning=function(e){this._positioning!==e&&(this._positioning=e,this.updatePosition())},s.prototype.disableAutoHiding=function(e){var t=!1===e;this._autoHiding!==t&&(this._autoHiding=t,this._inDoc&&(t?(window.addEventListener("mousedown",this._onBlur,!0),window.addEventListener("touchstart",this._onBlur,!0)):(window.removeEventListener("mousedown",this._onBlur,!0),window.removeEventListener("touchstart",this._onBlur,!0))))},s.prototype.disableAutoRepositioning=function(e){var t=!1===e;this._autoRepositioning!==t&&(this._autoRepositioning=t)},s.prototype.disableAutoClipping=function(e){var t=!1===e;this._autoClipping!==t&&(this._autoClipping=t)},s.prototype.disableHideOnScroll=function(e){var t=!1===e;this._hideOnScroll!==t&&(this._hideOnScroll=t)},s.prototype.updatePosition=function(e){null==e&&(e=!0);var t=this;if(t._resizeTimer=0,t._inDoc){if(t._attachedElem){if(!t._attachedElem.offsetWidth)return;t._autoClipping&&t._restoreElementSize();var o=document.body;"over"===t._positioning&&(o=document.documentElement);var n,r,l=i.getRelativePosition(t._attachedElem,o),s=l.x,a=l.y,u=window.innerWidth,d=window.innerHeight,p=null!=window.scrollX?window.scrollX:window.pageXOffset,c=null!=window.scrollY?window.scrollY:window.pageYOffset,h=u+p,f=d+c,_=t._attachedElem.offsetWidth,m=t._attachedElem.offsetHeight,g=t._elem.offsetWidth,v=t._elem.offsetHeight;"right"==t._positioning?(n=s+_+this._gap,r=a):"over"==t._positioning?(n=s,r=a):(n=s,r=a+m),e&&("right"==t._positioning?(n+g>h&&s-g>p&&(n=s-g-this._gap),r+v>f&&a+m-v>c&&(r=a+m-v)):"over"==t._positioning?(n+g>h&&s+_-g>p&&(n=s+_-g),r+v>f&&a+_-v>c&&(r=a+_-v)):(n+g>h&&s+_-g>p&&(n=s+_-g),r+v>f&&(a-v>c?r=a-v:(r-=r+v-f)<0&&(r=0)))),t._autoClipping&&(n+g>h&&(null==t._origW&&(t._origW=t._elem.style.width),t._elem.style.width=h-n+"px"),r+v>f&&(null==t._origH&&(t._origH=t._elem.style.height),t._elem.style.height=f-r+"px")),t._elem.style.left=Math.floor(n-p)+"px",t._elem.style.top=Math.floor(r-c)+"px"}else"fixed"!=t._positioning&&"custom"!=t._positioning&&(t._elem.style.left="calc(50vw - "+Math.floor(t._elem.offsetWidth/2)+"px)",t._elem.style.top="calc(46vh - "+Math.floor(t._elem.offsetHeight/2)+"px)");t._evtArg.type="positioning",t._dispatch("positioning",t._evtArg)}},s.prototype.enableUIBlocking=function(e){var t=this._uiBlocking;return this._uiBlocking=!1!==e,t},s.prototype._attachOverlay=function(e){if(!this._overlay){var t=(this._overlay=document.createElement("div")).style;t.height="100%",t.width="100%",t.top="0",t.left="0",t.backgroundColor="rgba(0, 0, 0, 0)"}e===document.body?this._overlay.style.position="fixed":this._overlay.style.position="absolute",e.appendChild(this._overlay)},s.prototype._onBlur=function(e){if(!this._blurTimer&&this._inDoc){if(e)if(e.composedPath){if(this.contains(e.composedPath()))return}else if(this.contains(e.target))return;this._blurTimer=setTimeout(this._onBlurTimer,10)}},s.prototype._onBlurTimer=function(){this._blurTimer=0,this.contains(document.activeElement)||this.hide()},s.prototype._onResize=function(){!this._resizeTimer&&this._inDoc&&this._autoRepositioning&&(this._resizeTimer=setTimeout(this.updatePosition,50))},s.prototype._onScroll=function(e){!this.contains(e.target)&&this._hideOnScroll&&this.hide()},s.prototype._onMouseOver=function(e){this._hoverTimer||this._inDoc||(this._hoverTimer=setTimeout(this._onMouseOverTimeout,500))},s.prototype._onMouseOut=function(e){this._hoverTimer&&(e.currentTarget.contains(e.relatedTarget)||this._clearMouseOverTimer())},s.prototype._onMouseOverTimeout=function(){this._hoverTimer=0,this.show()},s.prototype._clearMouseOverTimer=function(){this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=0)},s.prototype._restoreElementSize=function(){null!=this._origW&&(this._elem.style.width=this._origW,this._origW=null),null!=this._origH&&(this._elem.style.height=this._origH,this._origH=null)},s.prototype._removeEventListeners=function(){this._blurTimer&&(clearTimeout(this._blurTimer),this._blurTimer=0),this._resizeTimer&&(clearTimeout(this._resizeTimer),this._resizeTimer=0),window.removeEventListener("mousedown",this._onBlur,!0),window.removeEventListener("touchstart",this._onBlur,!0),window.removeEventListener("resize",this._onResize,!1),window.removeEventListener("scroll",this._onScroll,!0),this._elem.parentElement&&this._elem.parentElement.removeEventListener("scroll",this._onScroll,!0)};t.default=s}]); \ No newline at end of file diff --git a/book/en/node_modules/tr-grid-row-grouping/dist/tr-grid-row-grouping.min.js b/book/en/node_modules/tr-grid-row-grouping/dist/tr-grid-row-grouping.min.js index a5f19395..18c8dfca 100644 --- a/book/en/node_modules/tr-grid-row-grouping/dist/tr-grid-row-grouping.min.js +++ b/book/en/node_modules/tr-grid-row-grouping/dist/tr-grid-row-grouping.min.js @@ -1 +1 @@ -!function(e){var t={};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(r,n,function(t){return e[t]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";o.r(t);var r={inherits:function(e,t){function o(){}o.prototype=t.prototype,e.prototype=new o,e.prototype.constructor=e,e.base=function(e,o,r){o||(o="constructor");for(var n=arguments.length,i=new Array(n),l=2;l=0&&(o.splice(r,1),--this._listenerCount)}},n.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},n.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},n.prototype.getListener=function(e,t){if(e){var o=this._events?this._events[e]:null;if(o)return t||(t=0),o[t]||null}return null},n.prototype.addListener=function(e,t){var o=e?e[t]:null;"function"==typeof o&&this.addEventListener(t,o)},n.prototype._prepareEventArguments=function(e,t){return t},n.prototype._dispatch=function(e,t){var o=this._events?this._events[e]:null;if(o){t=this._prepareEventArguments(e,t);for(var r=o.length,n=0;n=0;){var n=this._hosts[r];if(n.getElement().contains(t))return n}return null},l.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},l.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},l.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var o=this.getColumnIndex(e),r=this._realTimeGrid.getColumnDefinition(o);if(r)return r.getName()}return""},l.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},l.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var o,r=this._compositeGrid.getColumnFields(),n=this._compositeGrid.getColumnCount(),i=[],l=0;l=0&&o=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var o=this._realTimeGrid.getColumnDefinition(e);return o?o.getId():""},l.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},l.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},l.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},l.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},l.prototype._moveColumnById=function(e,t){var o=this._hosts,r=o?o.length:0;if(r){for(var n=0,i=0;i=0&&t>=0){var n=this._activeGrid||this._hosts[0],i=n?n.getCell(r.sectionType||"content",e,t):null;r.target=i?i.getElement():null}return r};var s={left:37,right:39,up:38,down:40,tab:9};l.prototype._mockKeyboardEvent=function(e,t){var o=t||{};return o.preventDefault=function(){},o.stopPropagation=function(){},"string"==typeof e&&(e=e.toLowerCase(),e=s[e]),o.keyCode=e,o};var a=function(e,t){var o="number"==typeof t?e.getRowDataAt(t):e.getRowData(t);return o&&o.ROW_DEF||null},u=function(e){return e},d=function(e){return e?e.ROW_DEF.getRowData():null},p=function(e){if(e){var t=e.ROW_DEF;return t?t.getRowData():e}return null},c=function(){};r.inherits(c,n),c.prototype._elem=null,c.prototype.getElement=function(){return this._elem},c.prototype.setParent=function(e){e?(e.getElement&&(e=e.getElement()),e.appendChild(this._elem)):(e=this._elem.parentNode)&&e.removeChild(this._elem)},c.prototype.getBoundingClientRect=function(){return this._elem.getBoundingClientRect()},c.prototype.getMousePosition=function(e,t){t||(t={});var o=this.getBoundingClientRect();return t.x=e.clientX-o.left,t.y=e.clientY-o.top,t},c.prototype.addEventListener=function(e,t){c.base(this,"addEventListener",e,t),void 0!==this._elem["on"+e]&&this._elem.addEventListener(e,t,!1)},c.prototype.removeEventListener=function(e,t){c.base(this,"removeEventListener",e,t),void 0!==this._elem["on"+e]&&this._elem.removeEventListener(e,t,!1)};var h=function(e){return Array.isArray(e)?"{\n"+e.join("\n")+"\n}":e},_=function(e){return e.replace(/\n+/g,"\n\t").replace(/\n\t}$/,"\n}")},g=function(e){if(e){var t="";if(Array.isArray(e))t=e.map(h).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,_)}return""},f=function(e,t){if(!e)return null;var o=document.createElement("style");o.textContent="\n"+e+"\n";var r,n=function(e){var t;if(e&&(e.shadowRoot?t=e.shadowRoot:e.getRootNode&&(t=e.getRootNode()),t&&t!==document&&t!==e))return t;return null}(t),i=!0;return n||(i=!1,n=document.head),i&&n.children&&n.children.length&&(r=n.children[0]),r?n.insertBefore(o,r):n.appendChild(o),o},m=function(e,t){for(var o in t||(t=[]),e){var r=e[o];"object"==typeof r?m(r,t):t.push(r)}return t},C=function(e){if(!e||"string"!=typeof e)return"";if("#"===e.charAt(0))return e;var t=e.match(/\d+/g);if(!t||t.length<3)return e;for(var o="#",r=0;r<3;r++){var n=+t[r];n>=16||(o+="0"),o+=n?n.toString(16).toUpperCase():"0"}return o},y={},v=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},b=function(e,t,o){"attributes"===o.type&&(null!=t?o.attributeName===t&&e(o.target.getAttribute(t)):e(o.target))};y._getNewId=function(){return"observer_"+ ++y._id},y._addObserver=function(e,t,o){var r=o;r||(r={}),r.attributes=!0,y._observer.observe(e,r),y._addListener(e,t)},y._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=o),w._components[e]=t}return t},w.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return G[t]?t:""},w.hasTheme=function(e){return e===w.getThemeName()},w.getThemeName=function(e){return w._themeName||(w._themeName=w.getCssVariable("--theme-name",document.documentElement)),w._themeName},w.setThemeName=function(e){w._themeName=e},w.isThemeLoaded=function(){return w._themeLoaded},w.getColors=function(){return w.themeColors},w.isHaloTheme=function(e){return null==e&&(e=w.getThemeName()),!!e&&e.indexOf("halo")>=0},w.injectIcons=function(e,t){if("object"==typeof e){var o=w.getThemeName();e.themeName=o;var r=w.getElfVersion();e.elfVersion=r;var n=w._icons[o];n&&(e.icons=n)}},w.getIconList=function(){var e=w._icons[w.getThemeName()];return e?m(e):[]},w._onIconPreloaded=function(){if(w._dummyIcon){var e=w._dummyIcon.parentNode;e&&e.removeChild(w._dummyIcon),w._dummyIcon=null}},w.prepareIconPreloading=function(){if(!w._iconLoaded){w._iconLoaded=!0;var e=w.getIconList();if(e.length){setTimeout(w._onIconPreloaded,10);var t=w._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},w.getCssVariable=function(e,t){var o="",r=t||document.body;return window&&"string"==typeof e&&1===r.nodeType&&e.match(/^--/)&&(o=(o=window.getComputedStyle(r).getPropertyValue(e)).replace(/[\"\']/g,"")),o},w.getCssVariables=function(e,t){var o=t||document.body;if(window&&1===o.nodeType){var r=window.getComputedStyle(o);for(var n in e){var i=e[n];i&&i.match(/^--/)&&(e[n]=r.getPropertyValue(i).replace(/\"/g,""))}}return e||null},w.setRTK=function(e){null!=e&&(w._rtk=e)},w.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},w._addThemeChangedCallback=function(e){var t=w._callbacks;t.indexOf(e)<0&&t.push(e)},w.reloadThemeColors=function(){return w._deferred&&w._deferred.isFulfilled()?(w._profileName="",w._themeLoaded=!1,w.themeReady=null,w.getThemeColors()):w.themeReady},w.getThemeColors=function(e){if("function"==typeof e&&w._addThemeChangedCallback(e),w.themeReady)return w.themeReady;var t=w._deferred=new i;w.themeReady=t.promise;var o=w.getMovementColorProfile();if(o)o!==w._profileName?setTimeout(w._profileNameRetrieved,100):w._deferred.resolve(w.themeColors);else{var r={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},n=window?window.JET:null;if(w._themeLoaded=!1,w._rtk&&w._rtk.Settings)w._rtk.Settings.getAsync(r).then(w._loadingProfileSuccess).catch(w._loadingProfileFailure);else if(n&&n.Settings)try{n.Settings.read(w._loadingProfileSuccess,r)}catch(e){w._loadingProfileFailure()}else setTimeout(w._profileNameRetrieved,100)}return t.promise};var S=function(e){if(e!==w._profileName){w._retrieveThemeColors(e),w._pendingResolve&&(w._pendingResolve=!1,w._deferred.resolve(w.themeColors));for(var t=w._callbacks,o=0;o0?e.indentSize+"px":"")},A.prototype._clearCellContent=function(e,t,o,r,n){if(!this._segmentMode)for(var i=t;i0?o+"px":""),t.enableClass("color-tag",!e.nonGroupRow),A._applyColorTagClass(t,e.colorTagClass);var r=e.section;r&&r.enableRowClass(e.rowIndex,"group-member",!e.nonGroupRow)},A.prototype._menuIconClicked=function(e){e.stopPropagation(),this._headerMenuClicked(e)};var k=function(e){var t=this;t._onColumnIndexChanged=t._onColumnIndexChanged.bind(t),t._getRowsForContentAsHeader=t._getRowsForContentAsHeader.bind(t),t._onPostSectionDataBinding=t._onPostSectionDataBinding.bind(t),t._onCellClicked=t._onCellClicked.bind(t),t._onMapCriteria=t._onMapCriteria.bind(t),t._onGroupCriteriaChanged=t._onGroupCriteriaChanged.bind(t),t._onGroupAdded=t._onGroupAdded.bind(t),t._onBeforeGroupAdded=t._onBeforeGroupAdded.bind(t),t._updateCursor=t._updateCursor.bind(t),t.updateHeaders=t.updateHeaders.bind(t),t.sortGroups=t.sortGroups.bind(t),t._onItemGroupColumnClicked=t._onItemGroupColumnClicked.bind(t),t._onItemUnGroupColumnClicked=t._onItemUnGroupColumnClicked.bind(t),t._onItemExpandAllClicked=t._onItemExpandAllClicked.bind(t),t._onItemCollapseAllClicked=t._onItemCollapseAllClicked.bind(t),t._criteria=[],t._criteriaFuncs=[],t._hosts=[],t.config({rowGrouping:e})};function D(e){return!!e&&"function"!=typeof e}r.inherits(k,l),k.prototype._dirty=!1,k.prototype._shouldUpdateDisplayColumn=!0,k.prototype._criteria,k.prototype._criteriaFuncs,k.prototype._predefinedGroups=null,k.prototype._groupSortFunction,k.prototype._disabled=!1,k.prototype._fixedDisplayColumn=-1,k.prototype._displayColumn=0,k.prototype._headerColumn=-1,k.prototype._headerColumnField="",k.prototype._indentSizes=null,k.prototype._arrowSize=9,k.prototype._noCollapsible=!1,k.prototype._headerSpanning=!0,k.prototype._footerSpanning=!1,k.prototype._autoGroupSorting=!1,k.prototype._sortingTimer=0,k.prototype._footerRows=0,k.prototype._autoGroupRemoval=!1,k.prototype._autoGroupHiding=!1,k.prototype._contentAsHeader=!1,k.prototype._timerId=0,k._iconName="",k.prototype._clickableCell=!0,k.prototype._hiddenArrow=!1,k.prototype._clickDisabled=!1,k.prototype._rowPainter=null,k.prototype._colorTag=null,k.prototype._predefinedColors=null,k.prototype._groupColors=null,k._controlClass="predefined-color-tag",k.prototype._styleTag=null,k.prototype._criteriaGetter=null,k._defaultCriteriaGetter=function(e,t){var o=t[e];return k._toArrayOfString(o)},k._rowDefCriteriaGetter=function(e,t){var o=t.ROW_DEF.getRowData()[e];return k._toArrayOfString(o)},k._toArrayOfString=function(e){return Array.isArray(e)?e.map(String):[e+""]},k.prototype._findCheckboxColumnIndexFromConfig=function(e){if(!Array.isArray(e))return-1;for(var t=-1,o=e.length,r=0;r=0)){this._hosts.push(e),I.loadExpanderStyles(),e.unloadPlugin("CollapsibleHeaderPlugin"),e.listen("columnMoved",this._onColumnIndexChanged),e.listen("columnAdded",this._onColumnIndexChanged),e.listen("columnRemoved",this._onColumnIndexChanged),e.listen("postSectionDataBinding",this._onPostSectionDataBinding),this.config(t);var o=null!=this._colorTag?this._colorTag:w.isHaloTheme();A.disableColorTag(e,!1===o),null!=this._predefinedColors&&(this._injectStyles(this._predefinedColors),e.enableClass(k._controlClass)),A.applyGroupingStyles(e),this._applyGrouping()}},k.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(e.unlisten("columnMoved",this._onColumnIndexChanged),e.unlisten("columnAdded",this._onColumnIndexChanged),e.unlisten("columnRemoved",this._onColumnIndexChanged),e.unlisten("postSectionDataBinding",this._onPostSectionDataBinding),this._hosts.splice(t,1),this._dispose(),this._hosts.length||(this._compositeGrid=null,this._timerId&&(clearTimeout(this._timerId),this._timerId=0),this._sortingTimer&&(clearTimeout(this._sortingTimer),this._sortingTimer=0)))},k.prototype.config=function(e){if(e){var t=e.rowGrouping;if(t){if(null!=t.autoGroupRemoval&&(this._autoGroupRemoval=!!t.autoGroupRemoval),null!=t.autoGroupHiding&&(this._autoGroupHiding=!!t.autoGroupHiding),null!=t.headerSpanning&&(this._headerSpanning=!!t.headerSpanning),null!=t.footerSpanning&&(this._footerSpanning=!!t.footerSpanning),null!=t.autoGroupSorting&&(this._autoGroupSorting=!!t.autoGroupSorting),null!=t.defaultCollapse&&this.setDefaultCollapse(t.defaultCollapse),null!=t.predefinedGroups&&this.setPredefinedGroups(t.predefinedGroups),(t.groupBy||t.groupCriteria)&&this.setGroupingCriteria(t.groupBy||t.groupCriteria),"number"==typeof t.displayColumn&&(this._displayColumn=t.displayColumn),null!=t.fixedDisplayColumn&&(this._fixedDisplayColumn=t.fixedDisplayColumn?this._displayColumn:-1),"function"==typeof t.groupSortLogic&&this.setGroupSortingLogic(t.groupSortLogic),!t.groupHeaderBinding&&t.headerBinding&&(t.groupHeaderBinding=t.headerBinding),!t.groupFooterBinding&&t.footerBinding&&(t.groupFooterBinding=t.footerBinding),null!=t.hiddenArrow){var o=t.hiddenArrow;if(Array.isArray(o)){var r=o.length;this._hiddenArrow={};for(var n=0;n=0&&s<=this._displayColumn&&this._displayColumn++}}},k.prototype.getConfigObject=function(e){var t=e||{},o=t.rowGrouping;o||(o=t.rowGrouping={}),this._autoGroupRemoval&&(o.autoGroupRemoval=this._autoGroupRemoval),this._autoGroupHiding&&(o.autoGroupHiding=this._autoGroupHiding),this._predefinedGroups&&(o.predefinedGroups=this._predefinedGroups);var r=this._criteria.filter(D);if(r.length&&(o.groupBy=r),this._displayColumn>0&&(o.displayColumn=this._displayColumn),this._fixedDisplayColumn>=0&&(o.fixedDisplayColumn=!0),this._noCollapsible&&(o.noCollapsible=this._noCollapsible),o.clickableCell=this._clickableCell,this._hiddenArrow)if(!0===this._hiddenArrow)o.hiddenArrow=!0;else{var n=o.hiddenArrow=[];for(var i in this._hiddenArrow)n.push(+i)}this._contentAsHeader&&(o.contentAsHeader=this._contentAsHeader),this._headerSpanning||(o.headerSpanning=this._headerSpanning),this._footerSpanning&&(o.headerSpanning=this._footerSpanning),this._autoGroupSorting&&(o.autoGroupSorting=this._autoGroupSorting),this._indentSizes&&(o.indentSize=this._indentSizes),null!=this._colorTag&&(o.colorTag=this._colorTag),null!=this._groupColors&&(o.groupColors=this._groupColors),null!=this._predefinedColors&&(o.predefinedColors=this._predefinedColors);var l=this.getDefaultCollapse();return null!=l&&(o.defaultCollapse=l),t},k.prototype.getColumnMenu=function(e,t){t||(t={});var o=t.menus;o||(o=t.menus=[]);var r=o[0];r||(r=o[0]={menuItems:[]});var n=this._getField(e),i=this.hasGroupingCriteria(),l=[{indexScore:200,label:"Group",group:"FREQUENTLY_USED",subMenu:{menuItems:[{indexScore:220,label:"Expand All",group:"FREQUENTLY_USED",click:this._onItemExpandAllClicked,disabled:!i},{indexScore:210,label:"Collapse All",group:"FREQUENTLY_USED",click:this._onItemCollapseAllClicked,disabled:!i}]}}];return this._hasInGroupCriteria(n)?l[0].subMenu.menuItems.push({indexScore:230,label:"Un-Group by This Column",group:"FREQUENTLY_USED",value:{colIndex:e},click:this._onItemUnGroupColumnClicked}):l[0].subMenu.menuItems.push({indexScore:230,label:"Group by This Column",group:"FREQUENTLY_USED",value:{colIndex:e},click:this._onItemGroupColumnClicked}),Array.prototype.push.apply(r.menuItems,l),t},k.prototype._injectStyles=function(e){var t,o=".tr-grid."+k._controlClass+" .tr-lg .cell",r=[];for(var n in e)r.push(o+"."+n+"::before"),(t=e[n].backgroundColor)&&r.push(["background-color: "+t+";"]);var i=this._hosts[0];this._styleTag&&(this._styleTag.parentNode&&this._styleTag.parentNode.removeChild(this._styleTag),this._styleTag=null),this._styleTag=f(g(r),i.getElement())},k.prototype._onItemGroupColumnClicked=function(e){var t=this._getField(e.currentTarget.value.colIndex);this._addGroup(t),this._hideColumnMenu()},k.prototype._onItemUnGroupColumnClicked=function(e){var t=this._getField(e.currentTarget.value.colIndex);this._ungroup(t),this._hideColumnMenu()},k.prototype._onItemExpandAllClicked=function(e){this.expandAll(),this._hideColumnMenu()},k.prototype._onItemCollapseAllClicked=function(e){this.collapseAll(),this._hideColumnMenu()},k.prototype._hideColumnMenu=function(){var e=this._hosts[0].getPlugin("ColumnMenuPlugin");e&&e.hide()},k.prototype._addGroup=function(e){var t=this.getGroupingCriteria();t.indexOf(e)<0&&t.push(e),this._dirty=!0,this._applyGrouping()},k.prototype._ungroup=function(e){var t=this.getGroupingCriteria(),o=t.indexOf(e);o>=0&&t.splice(o,1),this._dirty=!0,this._applyGrouping()},k.prototype.getGroupingCriteria=function(){return this._criteria},k.prototype.hasGroupingCriteria=function(){return this._criteria.length>0},k.prototype._hasInGroupCriteria=function(e){return this._criteria.indexOf(e)>=0},k.prototype.setGroupingCriteria=function(e){this._criteria.length>0&&(this._dirty=!0,this._criteria.length=0),"string"==typeof e||"function"==typeof e?(this._dirty=!0,this._criteria.push(e)):Array.isArray(e)&&(this._dirty=!0,this._criteria=e.concat()),this._applyGrouping()},k.prototype.groupBy=k.prototype.setGroupingCriteria,k.prototype._applyGrouping=function(){if(this._dirty&&this._criteriaGetter){var e=this.getDataView();e&&("function"==typeof e.enableContentAsHeader&&e.enableContentAsHeader(this._contentAsHeader),this._criteria.length?(e.listen("groupCriteriaChanged",this._onGroupCriteriaChanged),e.listen("groupAdded",this._onGroupAdded),e.listen("beforeGroupAdded",this._onBeforeGroupAdded),this._autoGroupRemoval&&e.enableAutoGroupRemoval&&e.enableAutoGroupRemoval(),this._autoGroupHiding&&e.enableAutoGroupHiding&&e.enableAutoGroupHiding(),this._predefinedGroups&&e.setPredefinedGroups(this._predefinedGroups),this._criteriaFuncs=this._criteria.map(this._onMapCriteria),e.groupBy(this._criteriaFuncs),this.sortGroups()):(this._clearSectionStyles(this._headerColumn),e.groupBy(null)),this._dirty=!1)}},k.prototype.getDataView=function(){var e=this._hosts[0];return e?e.getDataSource():null},k.prototype.setGroupSortingLogic=function(e){this._groupSortFunction=e},k.prototype.getGroupSortingLogic=function(){return this._groupSortFunction?this._groupSortFunction:k._standardGroupSortFunction},k.prototype.setPredefinedGroups=function(e){if(!e||Array.isArray(e)){this._predefinedGroups=e;var t=this.getDataView();t&&t.setPredefinedGroups(this._predefinedGroups)}},k.prototype.setPredefinedColors=function(e){null!=e&&"object"==typeof e&&(this._predefinedColors=e,this._injectStyles(e))},k.prototype.setDefaultCollapse=function(e){var t=this.getDataView();t&&t.setDefaultCollapse(e)},k.prototype.getDefaultCollapse=function(){var e=this.getDataView();return!!e&&e.getDefaultCollapse()},k.prototype.sortGroups=function(){if(this._sortingTimer=0,this._groupSortFunction){var e=this.getDataView();e&&e.sortGroups(this._groupSortFunction)}},k.prototype._onPostSectionDataBinding=function(e){this._disabled||this._updateHeader(e.sectionSettings,e.fromRowIndex,e.toRowIndex-1)},k._standardGroupSortFunction=function(e,t){var o=""+e,r=""+t;return or?1:0},k.prototype._isArrowHidden=function(e){if(this._hiddenArrow&&e){if(!0===this._hiddenArrow)return!0;var t=e.getGroupLevel();if(this._hiddenArrow[t])return!0}return!1},k.prototype._hasGroupHeader=function(e){if(e&&"content"===e.getType()){var t=e.getDataSource();if(t)return t.hasGroup()}return!1},k.prototype._clearSectionStyles=function(e){var t=this._hosts[0];if(t&&e>=0)for(var o=t.getAllSections("content"),r=this._rowPainter,n=o.length;--n>=0;)for(var i=o[n],l=i.getFirstIndexInView(),s=i.getLastIndexInView(),a=l;a<=s;a++)r.removeAllStyles(i,e,a)},k.prototype._getHeaderColumnIndex=function(){for(var e=this.getColumnCount(),t=0;t=this.getColumnCount()||this._getHeaderColumnIndex()<0)&&(this._shouldUpdateDisplayColumn=!0,this._updateDisplayColumn()):(this._shouldUpdateDisplayColumn=!0,this._updateDisplayColumn())},k.prototype._onGroupAdded=function(e){this._footerRows&&e.newGroup.addFooter(this._footerRows);var t=e.newGroup;!this._contentAsHeader&&t.disableCollapsing&&this._isArrowHidden(t)&&t.disableCollapsing(),this._dispatch("groupAdded",e),this._autoGroupSorting&&(this._sortingTimer||(this._sortingTimer=setTimeout(this.sortGroups,100)))},k.prototype._onBeforeGroupAdded=function(e){this._contentAsHeader&&e.dataView.getGroupLevel()>=this._criteria.length-1&&(e.hideHeaderRow=!0),this._dispatch("beforeGroupAdded",e)},k.prototype._updateDisplayColumn=function(){if(this._shouldUpdateDisplayColumn){this._shouldUpdateDisplayColumn=!1;var e,t=this._hosts[0],o=t.getColumnCount();if(this._headerColumn=this._getHeaderColumnIndex(),this._displayColumn<0)if(this._headerColumn<0){for(e=0;e=0)for(e=this._displayColumn;e=0){var n=this._getColumnData(this._headerColumn);n&&(n.isHeaderColumn=!1)}r>=0&&((n=this._newColumnData(r)).isHeaderColumn=!0,this._headerColumnField=this._getField(r)),this._headerColumn=r}}return this._headerColumn},k.prototype._updateHeader=function(e,t,o){if(this._hasGroupHeader(e)){var r=this._updateDisplayColumn();if(!(r<0)&&this._getColumnOption(r,"isHeaderColumn")){var n=e.getDataSource(),i=e.getSection(),l=null!=t?t:i.getFirstIndexInView(),s=null!=o?o:i.getLastIndexInView(),a=this._getRowsForContentAsHeader(),u=-1,d=i.getCell(r,0,!1);!this._headerSpanning&&d&&(u=d.getWidth()-27);for(var p,c=i.getColumnCount(),h=this.hasListener("nonGroupBinding"),_=n.getGroupLevel(l),g={section:i,colCount:c},f=this._autoGroupHiding||this._contentAsHeader,m=0;m=0;g.groupId=S.getGroupId(),g.dataSource=S,g.collapsed=S.isCollapsed(),g.hiddenArrow=!(!I&&!this._isArrowHidden(S))}else f?_=(p=n.getGroup(b)).getGroupLevel():p||(p=n.getGroup(b)),(w||h)&&(g.dataSource=n,g.footerIndex=null,g.groupId=null,w&&(g.collapsed=w.isCollapsed()),h&&(g.rowData=this._rowGetter(n.getRowData(b)))),w?v=-2:this._contentAsHeader&&this._criteria.length>1&&(v=-1);g.groupLevel=_;var x=0,A=this._autoGroupHiding&&null==p.getGroupValue()&&1===_&&!this._contentAsHeader;g.nonGroupRow=A,x=g.noIndent||A?0:S?_-1:_+v;var k=0;if(this._indentSizes){if(k=this._indentSizes[0],x>0){var D=this._indentSizes.length;k=x0&&(k=8+4*x,S||(k+=this._arrowSize));if(u>-1&&u1)for(var R=_;R>1;R--)T=T.getDataSource();var E=T.getGroupId();g.colorTagClass=this._groupColors[E]}S?(C.applyHeaderStyle(g),this._dispatch(I?"groupFooterBinding":"groupHeaderBinding",g)):(C.removeHeaderStyle(i,r,y),w&&C.applyContentAsHeaderStyle(g),C.applyRowStyle(g),this._dispatch("nonGroupBinding",g))}}this._updateCursorTimer||(this._updateCursorTimer=setTimeout(this._updateCursor,100))}}},k.prototype._getRowsForContentAsHeader=function(){if(!this._contentAsHeader)return{};var e={},t=this.getDataView().getAllGroups();for(var o in t){var r=t[o];if(!r.hasGroup()){var n=r.getAllRowIds(!0)[0];n&&(e[n]=r)}}return e},k.prototype._onColumnIndexChanged=function(e){this._fixedDisplayColumn>=0?(this._displayColumn=this._fixedDisplayColumn,this.updateHeaders()):(this._headerColumn>=0&&(this._displayColumn=-1),this._timerId||(this._timerId=setTimeout(this.updateHeaders,50)))},k.prototype.updateHeaders=function(){this._timerId=0,this._shouldUpdateDisplayColumn=!0;var e=this._hosts[0];if(e&&!this._disabled)for(var t=e.getAllSectionSettings("content"),o=t.length;--o>=0;)this._updateHeader(t[o])},k.prototype._collapseDataRowId=function(e,t){if(this.getDataView()){var o=this._getRowsForContentAsHeader()[e];o&&o.collapse(t)}},k.prototype._onCellClicked=function(e){if(!this._clickDisabled){var t=!1,o=this._hosts[0].getRelativePosition(e),r=o.cell?o.cell.getElement():null;if(r){var n=r.classList.contains("closed"),i=o.rowIndex,l=o.sectionSettings.getDataSource(),s=l.getRowId(i),a=l.getGroupByRowId(s);if(a){if(t=!0,a.isCollapsible&&!a.isCollapsible())return;a.collapse(!n)}else this._contentAsHeader&&(t=!0,this._collapseDataRowId(s,!n));t&&(n?r.classList.remove("closed"):r.classList.add("closed")),o.expanded=n,o.group=a,this._dispatch("clicked",o)}}},k.prototype._updateCursor=function(){var e=this._hosts[0];if(e){var t=!1,o=!1;this._clickableCell||(o=!0),this._clickDisabled&&(t=!0,o=!0),t?e.addClass("expander-disabled"):e.removeClass("expander-disabled"),o?e.addClass("folder-disabled"):e.removeClass("folder-disabled")}this._updateCursorTimer=0},k.prototype._onMapCriteria=function(e){return"string"==typeof e?this._criteriaGetter.bind(null,e):e},k.prototype.expandAll=function(e){this.collapseAll(!1===e)},k.prototype.collapseAll=function(e){var t=this.getDataView();t&&t.collapseAllGroups(e)},k.prototype.expand=function(e,t){this.collapse(e,!1===t)},k.prototype.collapse=function(e,t){var o=this.getDataView();if(o){var r=o.getGroup(e);r&&r.collapse(t)}},k.prototype.disableClicking=function(e){this._clickDisabled=!1!==e,this._updateCursor()},k.prototype.getGroupingStates=function(){return this.getDataView().getAllGroups().map((function(e){return{groupId:e.getGroupId(),collapsed:e.isCollapsed()}}))},k.prototype.setGroupingStates=function(e){"string"==typeof e&&(e=JSON.parse(e));for(var t=0;t=0&&(o.splice(r,1),--this._listenerCount)}},n.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},n.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},n.prototype.getListener=function(e,t){if(e){var o=this._events?this._events[e]:null;if(o)return t||(t=0),o[t]||null}return null},n.prototype.addListener=function(e,t){var o=e?e[t]:null;"function"==typeof o&&this.addEventListener(t,o)},n.prototype._prepareEventArguments=function(e,t){return t},n.prototype._dispatch=function(e,t){var o=this._events?this._events[e]:null;if(o){t=this._prepareEventArguments(e,t);for(var r=o.length,n=0;n=0;){var n=this._hosts[r];if(n.getElement().contains(t))return n}return null},l.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},l.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},l.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var o=this.getColumnIndex(e),r=this._realTimeGrid.getColumnDefinition(o);if(r)return r.getName()}return""},l.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},l.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var o,r=this._compositeGrid.getColumnFields(),n=this._compositeGrid.getColumnCount(),i=[],l=0;l=0&&o=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var o=this._realTimeGrid.getColumnDefinition(e);return o?o.getId():""},l.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},l.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},l.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},l.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},l.prototype._moveColumnById=function(e,t){var o=this._hosts,r=o?o.length:0;if(r){for(var n=0,i=0;i=0&&t>=0){var n=this._activeGrid||this._hosts[0],i=n?n.getCell(r.sectionType||"content",e,t):null;r.target=i?i.getElement():null}return r};var s={left:37,right:39,up:38,down:40,tab:9};l.prototype._mockKeyboardEvent=function(e,t){var o=t||{};return o.preventDefault=function(){},o.stopPropagation=function(){},"string"==typeof e&&(e=e.toLowerCase(),e=s[e]),o.keyCode=e,o};var a=function(e,t){var o="number"==typeof t?e.getRowDataAt(t):e.getRowData(t);return o&&o.ROW_DEF||null},u=function(e){return e},d=function(e){return e?e.ROW_DEF.getRowData():null},p=function(e){if(e){var t=e.ROW_DEF;return t?t.getRowData():e}return null},c=function(){};r.inherits(c,n),c.prototype._elem=null,c.prototype.getElement=function(){return this._elem},c.prototype.setParent=function(e){e?(e.getElement&&(e=e.getElement()),e.appendChild(this._elem)):(e=this._elem.parentNode)&&e.removeChild(this._elem)},c.prototype.getBoundingClientRect=function(){return this._elem.getBoundingClientRect()},c.prototype.getMousePosition=function(e,t){t||(t={});var o=this.getBoundingClientRect();return t.x=e.clientX-o.left,t.y=e.clientY-o.top,t},c.prototype.addEventListener=function(e,t){c.base(this,"addEventListener",e,t),void 0!==this._elem["on"+e]&&this._elem.addEventListener(e,t,!1)},c.prototype.removeEventListener=function(e,t){c.base(this,"removeEventListener",e,t),void 0!==this._elem["on"+e]&&this._elem.removeEventListener(e,t,!1)};var h=function(e){return Array.isArray(e)?"{\n"+e.join("\n")+"\n}":e},_=function(e){return e.replace(/\n+/g,"\n\t").replace(/\n\t}$/,"\n}")},g=function(e){if(e){var t="";if(Array.isArray(e))t=e.map(h).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,_)}return""},f=function(e,t){if(!e)return null;var o=document.createElement("style");o.textContent="\n"+e+"\n";var r,n=function(e){var t;if(e&&(e.shadowRoot?t=e.shadowRoot:e.getRootNode&&(t=e.getRootNode()),t&&t!==document&&t!==e))return t;return null}(t),i=!0;return n||(i=!1,n=document.head),i&&n.children&&n.children.length&&(r=n.children[0]),r?n.insertBefore(o,r):n.appendChild(o),o},m=function(e,t){for(var o in t||(t=[]),e){var r=e[o];"object"==typeof r?m(r,t):t.push(r)}return t},C=function(e){if(!e||"string"!=typeof e)return"";if("#"===e.charAt(0))return e;var t=e.match(/\d+/g);if(!t||t.length<3)return e;for(var o="#",r=0;r<3;r++){var n=+t[r];n>=16||(o+="0"),o+=n?n.toString(16).toUpperCase():"0"}return o},y={},v=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},b=function(e,t,o){"attributes"===o.type&&(null!=t?o.attributeName===t&&e(o.target.getAttribute(t)):e(o.target))};y._getNewId=function(){return"observer_"+ ++y._id},y._addObserver=function(e,t,o){var r=o;r||(r={}),r.attributes=!0,y._observer.observe(e,r),y._addListener(e,t)},y._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=o),w._components[e]=t}return t},w.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return G[t]?t:""},w.hasTheme=function(e){return e===w.getThemeName()},w.getThemeName=function(e){return w._themeName||(w._themeName=w.getCssVariable("--theme-name",document.documentElement)),w._themeName},w.setThemeName=function(e){w._themeName=e},w.isThemeLoaded=function(){return w._themeLoaded},w.getColors=function(){return w.themeColors},w.isHaloTheme=function(e){return null==e&&(e=w.getThemeName()),!!e&&e.indexOf("halo")>=0},w.injectIcons=function(e,t){if("object"==typeof e){var o=w.getThemeName();e.themeName=o;var r=w.getElfVersion();e.elfVersion=r;var n=w._icons[o];n&&(e.icons=n)}},w.getIconList=function(){var e=w._icons[w.getThemeName()];return e?m(e):[]},w._onIconPreloaded=function(){if(w._dummyIcon){var e=w._dummyIcon.parentNode;e&&e.removeChild(w._dummyIcon),w._dummyIcon=null}},w.prepareIconPreloading=function(){if(!w._iconLoaded){w._iconLoaded=!0;var e=w.getIconList();if(e.length){setTimeout(w._onIconPreloaded,10);var t=w._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},w.getCssVariable=function(e,t){var o="",r=t||document.body;return window&&"string"==typeof e&&1===r.nodeType&&e.match(/^--/)&&(o=(o=window.getComputedStyle(r).getPropertyValue(e)).replace(/[\"\']/g,"")),o},w.getCssVariables=function(e,t){var o=t||document.body;if(window&&1===o.nodeType){var r=window.getComputedStyle(o);for(var n in e){var i=e[n];i&&i.match(/^--/)&&(e[n]=r.getPropertyValue(i).replace(/\"/g,""))}}return e||null},w.setRTK=function(e){null!=e&&(w._rtk=e)},w.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},w._addThemeChangedCallback=function(e){var t=w._callbacks;t.indexOf(e)<0&&t.push(e)},w.reloadThemeColors=function(){return w._deferred&&w._deferred.isFulfilled()?(w._profileName="",w._themeLoaded=!1,w.themeReady=null,w.getThemeColors()):w.themeReady},w.getThemeColors=function(e){if("function"==typeof e&&w._addThemeChangedCallback(e),w.themeReady)return w.themeReady;var t=w._deferred=new i;w.themeReady=t.promise;var o=w.getMovementColorProfile();if(o)o!==w._profileName?setTimeout(w._profileNameRetrieved,100):w._deferred.resolve(w.themeColors);else{var r={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},n=window?window.JET:null;if(w._themeLoaded=!1,w._rtk&&w._rtk.Settings)w._rtk.Settings.getAsync(r).then(w._loadingProfileSuccess).catch(w._loadingProfileFailure);else if(n&&n.Settings)try{n.Settings.read(w._loadingProfileSuccess,r)}catch(e){w._loadingProfileFailure()}else setTimeout(w._profileNameRetrieved,100)}return t.promise};var S=function(e){if(e!==w._profileName){w._retrieveThemeColors(e),w._pendingResolve&&(w._pendingResolve=!1,w._deferred.resolve(w.themeColors));for(var t=w._callbacks,o=0;o0?e.indentSize+"px":"")},A.prototype._clearCellContent=function(e,t,o,r,n){if(!this._segmentMode)for(var i=t;i0?o+"px":""),t.enableClass("color-tag",!e.nonGroupRow),A._applyColorTagClass(t,e.colorTagClass);var r=e.section;r&&r.enableRowClass(e.rowIndex,"group-member",!e.nonGroupRow)},A.prototype._menuIconClicked=function(e){e.stopPropagation(),this._headerMenuClicked(e)};var k=function(e){var t=this;t._onColumnIndexChanged=t._onColumnIndexChanged.bind(t),t._getRowsForContentAsHeader=t._getRowsForContentAsHeader.bind(t),t._onPostSectionDataBinding=t._onPostSectionDataBinding.bind(t),t._onCellClicked=t._onCellClicked.bind(t),t._onMapCriteria=t._onMapCriteria.bind(t),t._onGroupCriteriaChanged=t._onGroupCriteriaChanged.bind(t),t._onGroupAdded=t._onGroupAdded.bind(t),t._onBeforeGroupAdded=t._onBeforeGroupAdded.bind(t),t._updateCursor=t._updateCursor.bind(t),t.updateHeaders=t.updateHeaders.bind(t),t.sortGroups=t.sortGroups.bind(t),t._onItemGroupColumnClicked=t._onItemGroupColumnClicked.bind(t),t._onItemUnGroupColumnClicked=t._onItemUnGroupColumnClicked.bind(t),t._onItemExpandAllClicked=t._onItemExpandAllClicked.bind(t),t._onItemCollapseAllClicked=t._onItemCollapseAllClicked.bind(t),t._criteria=[],t._criteriaFuncs=[],t._hosts=[],t.config({rowGrouping:e})};function D(e){return!!e&&"function"!=typeof e}r.inherits(k,l),k.prototype._dirty=!1,k.prototype._shouldUpdateDisplayColumn=!0,k.prototype._criteria,k.prototype._criteriaFuncs,k.prototype._predefinedGroups=null,k.prototype._groupSortFunction,k.prototype._disabled=!1,k.prototype._fixedDisplayColumn=-1,k.prototype._displayColumn=0,k.prototype._headerColumn=-1,k.prototype._headerColumnField="",k.prototype._indentSizes=null,k.prototype._arrowSize=9,k.prototype._noCollapsible=!1,k.prototype._headerSpanning=!0,k.prototype._footerSpanning=!1,k.prototype._autoGroupSorting=!1,k.prototype._sortingTimer=0,k.prototype._footerRows=0,k.prototype._autoGroupRemoval=!1,k.prototype._autoGroupHiding=!1,k.prototype._contentAsHeader=!1,k.prototype._timerId=0,k._iconName="",k.prototype._clickableCell=!0,k.prototype._hiddenArrow=!1,k.prototype._clickDisabled=!1,k.prototype._rowPainter=null,k.prototype._colorTag=null,k.prototype._predefinedColors=null,k.prototype._groupColors=null,k._controlClass="predefined-color-tag",k.prototype._styleTag=null,k.prototype._criteriaGetter=null,k._defaultCriteriaGetter=function(e,t){var o=t[e];return k._toArrayOfString(o)},k._rowDefCriteriaGetter=function(e,t){var o=t.ROW_DEF.getRowData()[e];return k._toArrayOfString(o)},k._toArrayOfString=function(e){return Array.isArray(e)?e.map(String):[e+""]},k.prototype._findCheckboxColumnIndexFromConfig=function(e){if(!Array.isArray(e))return-1;for(var t=-1,o=e.length,r=0;r=0)){this._hosts.push(e),I.loadExpanderStyles(),e.unloadPlugin("CollapsibleHeaderPlugin"),e.listen("columnMoved",this._onColumnIndexChanged),e.listen("columnAdded",this._onColumnIndexChanged),e.listen("columnRemoved",this._onColumnIndexChanged),e.listen("postSectionDataBinding",this._onPostSectionDataBinding),this.config(t);var o=null!=this._colorTag?this._colorTag:w.isHaloTheme();A.disableColorTag(e,!1===o),null!=this._predefinedColors&&(this._injectStyles(this._predefinedColors),e.enableClass(k._controlClass)),A.applyGroupingStyles(e),this._applyGrouping()}},k.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(e.unlisten("columnMoved",this._onColumnIndexChanged),e.unlisten("columnAdded",this._onColumnIndexChanged),e.unlisten("columnRemoved",this._onColumnIndexChanged),e.unlisten("postSectionDataBinding",this._onPostSectionDataBinding),this._hosts.splice(t,1),this._dispose(),this._hosts.length||(this._compositeGrid=null,this._timerId&&(clearTimeout(this._timerId),this._timerId=0),this._sortingTimer&&(clearTimeout(this._sortingTimer),this._sortingTimer=0)))},k.prototype.config=function(e){if(e){var t=e.rowGrouping;if(t){if(null!=t.autoGroupRemoval&&(this._autoGroupRemoval=!!t.autoGroupRemoval),null!=t.autoGroupHiding&&(this._autoGroupHiding=!!t.autoGroupHiding),null!=t.headerSpanning&&(this._headerSpanning=!!t.headerSpanning),null!=t.footerSpanning&&(this._footerSpanning=!!t.footerSpanning),null!=t.autoGroupSorting&&(this._autoGroupSorting=!!t.autoGroupSorting),null!=t.defaultCollapse&&this.setDefaultCollapse(t.defaultCollapse),null!=t.predefinedGroups&&this.setPredefinedGroups(t.predefinedGroups),(t.groupBy||t.groupCriteria)&&this.setGroupingCriteria(t.groupBy||t.groupCriteria),"number"==typeof t.displayColumn&&(this._displayColumn=t.displayColumn),null!=t.fixedDisplayColumn&&(this._fixedDisplayColumn=t.fixedDisplayColumn?this._displayColumn:-1),"function"==typeof t.groupSortLogic&&this.setGroupSortingLogic(t.groupSortLogic),!t.groupHeaderBinding&&t.headerBinding&&(t.groupHeaderBinding=t.headerBinding),!t.groupFooterBinding&&t.footerBinding&&(t.groupFooterBinding=t.footerBinding),null!=t.hiddenArrow){var o=t.hiddenArrow;if(Array.isArray(o)){var r=o.length;this._hiddenArrow={};for(var n=0;n=0&&s<=this._displayColumn&&this._displayColumn++}}},k.prototype.getConfigObject=function(e){var t=e||{},o=t.rowGrouping;o||(o=t.rowGrouping={}),this._autoGroupRemoval&&(o.autoGroupRemoval=this._autoGroupRemoval),this._autoGroupHiding&&(o.autoGroupHiding=this._autoGroupHiding),this._predefinedGroups&&(o.predefinedGroups=this._predefinedGroups);var r=this._criteria.filter(D);if(r.length&&(o.groupBy=r),this._displayColumn>0&&(o.displayColumn=this._displayColumn),this._fixedDisplayColumn>=0&&(o.fixedDisplayColumn=!0),this._noCollapsible&&(o.noCollapsible=this._noCollapsible),o.clickableCell=this._clickableCell,this._hiddenArrow)if(!0===this._hiddenArrow)o.hiddenArrow=!0;else{var n=o.hiddenArrow=[];for(var i in this._hiddenArrow)n.push(+i)}this._contentAsHeader&&(o.contentAsHeader=this._contentAsHeader),this._headerSpanning||(o.headerSpanning=this._headerSpanning),this._footerSpanning&&(o.footerSpanning=this._footerSpanning),this._autoGroupSorting&&(o.autoGroupSorting=this._autoGroupSorting),this._indentSizes&&(o.indentSize=this._indentSizes),null!=this._colorTag&&(o.colorTag=this._colorTag),null!=this._groupColors&&(o.groupColors=this._groupColors),null!=this._predefinedColors&&(o.predefinedColors=this._predefinedColors);var l=this.getDefaultCollapse();return null!=l&&(o.defaultCollapse=l),t},k.prototype.getColumnMenu=function(e,t){t||(t={});var o=t.menus;o||(o=t.menus=[]);var r=o[0];r||(r=o[0]={menuItems:[]});var n=this._getField(e),i=this.hasGroupingCriteria(),l=[{indexScore:200,label:"Group",group:"FREQUENTLY_USED",subMenu:{menuItems:[{indexScore:220,label:"Expand All",group:"FREQUENTLY_USED",click:this._onItemExpandAllClicked,disabled:!i},{indexScore:210,label:"Collapse All",group:"FREQUENTLY_USED",click:this._onItemCollapseAllClicked,disabled:!i}]}}];return this._hasInGroupCriteria(n)?l[0].subMenu.menuItems.push({indexScore:230,label:"Un-Group by This Column",group:"FREQUENTLY_USED",value:{colIndex:e},click:this._onItemUnGroupColumnClicked}):l[0].subMenu.menuItems.push({indexScore:230,label:"Group by This Column",group:"FREQUENTLY_USED",value:{colIndex:e},click:this._onItemGroupColumnClicked}),Array.prototype.push.apply(r.menuItems,l),t},k.prototype._injectStyles=function(e){var t,o=".tr-grid."+k._controlClass+" .tr-lg .cell",r=[];for(var n in e)r.push(o+"."+n+"::before"),(t=e[n].backgroundColor)&&r.push(["background-color: "+t+";"]);var i=this._hosts[0];this._styleTag&&(this._styleTag.parentNode&&this._styleTag.parentNode.removeChild(this._styleTag),this._styleTag=null),this._styleTag=f(g(r),i.getElement())},k.prototype._onItemGroupColumnClicked=function(e){var t=this._getField(e.currentTarget.value.colIndex);this._addGroup(t),this._hideColumnMenu()},k.prototype._onItemUnGroupColumnClicked=function(e){var t=this._getField(e.currentTarget.value.colIndex);this._ungroup(t),this._hideColumnMenu()},k.prototype._onItemExpandAllClicked=function(e){this.expandAll(),this._hideColumnMenu()},k.prototype._onItemCollapseAllClicked=function(e){this.collapseAll(),this._hideColumnMenu()},k.prototype._hideColumnMenu=function(){var e=this._hosts[0].getPlugin("ColumnMenuPlugin");e&&e.hide()},k.prototype._addGroup=function(e){var t=this.getGroupingCriteria();t.indexOf(e)<0&&t.push(e),this._dirty=!0,this._applyGrouping()},k.prototype._ungroup=function(e){var t=this.getGroupingCriteria(),o=t.indexOf(e);o>=0&&t.splice(o,1),this._dirty=!0,this._applyGrouping()},k.prototype.getGroupingCriteria=function(){return this._criteria},k.prototype.hasGroupingCriteria=function(){return this._criteria.length>0},k.prototype._hasInGroupCriteria=function(e){return this._criteria.indexOf(e)>=0},k.prototype.setGroupingCriteria=function(e){this._criteria.length>0&&(this._dirty=!0,this._criteria.length=0),"string"==typeof e||"function"==typeof e?(this._dirty=!0,this._criteria.push(e)):Array.isArray(e)&&(this._dirty=!0,this._criteria=e.concat()),this._applyGrouping()},k.prototype.groupBy=k.prototype.setGroupingCriteria,k.prototype._applyGrouping=function(){if(this._dirty&&this._criteriaGetter){var e=this.getDataView();e&&("function"==typeof e.enableContentAsHeader&&e.enableContentAsHeader(this._contentAsHeader),this._criteria.length?(e.listen("groupCriteriaChanged",this._onGroupCriteriaChanged),e.listen("groupAdded",this._onGroupAdded),e.listen("beforeGroupAdded",this._onBeforeGroupAdded),this._autoGroupRemoval&&e.enableAutoGroupRemoval&&e.enableAutoGroupRemoval(),this._autoGroupHiding&&e.enableAutoGroupHiding&&e.enableAutoGroupHiding(),this._predefinedGroups&&e.setPredefinedGroups(this._predefinedGroups),this._criteriaFuncs=this._criteria.map(this._onMapCriteria),e.groupBy(this._criteriaFuncs),this.sortGroups()):(this._clearSectionStyles(this._headerColumn),e.groupBy(null)),this._dirty=!1)}},k.prototype.getDataView=function(){var e=this._hosts[0];return e?e.getDataSource():null},k.prototype.setGroupSortingLogic=function(e){this._groupSortFunction=e},k.prototype.getGroupSortingLogic=function(){return this._groupSortFunction?this._groupSortFunction:k._standardGroupSortFunction},k.prototype.setPredefinedGroups=function(e){if(!e||Array.isArray(e)){this._predefinedGroups=e;var t=this.getDataView();t&&t.setPredefinedGroups(this._predefinedGroups)}},k.prototype.setPredefinedColors=function(e){null!=e&&"object"==typeof e&&(this._predefinedColors=e,this._injectStyles(e))},k.prototype.setDefaultCollapse=function(e){var t=this.getDataView();t&&t.setDefaultCollapse(e)},k.prototype.getDefaultCollapse=function(){var e=this.getDataView();return!!e&&e.getDefaultCollapse()},k.prototype.sortGroups=function(){if(this._sortingTimer=0,this._groupSortFunction){var e=this.getDataView();e&&e.sortGroups(this._groupSortFunction)}},k.prototype._onPostSectionDataBinding=function(e){this._disabled||this._updateHeader(e.sectionSettings,e.fromRowIndex,e.toRowIndex-1)},k._standardGroupSortFunction=function(e,t){var o=""+e,r=""+t;return or?1:0},k.prototype._isArrowHidden=function(e){if(this._hiddenArrow&&e){if(!0===this._hiddenArrow)return!0;var t=e.getGroupLevel();if(this._hiddenArrow[t])return!0}return!1},k.prototype._hasGroupHeader=function(e){if(e&&"content"===e.getType()){var t=e.getDataSource();if(t)return t.hasGroup()}return!1},k.prototype._clearSectionStyles=function(e){var t=this._hosts[0];if(t&&e>=0)for(var o=t.getAllSections("content"),r=this._rowPainter,n=o.length;--n>=0;)for(var i=o[n],l=i.getFirstIndexInView(),s=i.getLastIndexInView(),a=l;a<=s;a++)r.removeAllStyles(i,e,a)},k.prototype._getHeaderColumnIndex=function(){for(var e=this.getColumnCount(),t=0;t=this.getColumnCount()||this._getHeaderColumnIndex()<0)&&(this._shouldUpdateDisplayColumn=!0,this._updateDisplayColumn()):(this._shouldUpdateDisplayColumn=!0,this._updateDisplayColumn())},k.prototype._onGroupAdded=function(e){this._footerRows&&e.newGroup.addFooter(this._footerRows);var t=e.newGroup;!this._contentAsHeader&&t.disableCollapsing&&this._isArrowHidden(t)&&t.disableCollapsing(),this._dispatch("groupAdded",e),this._autoGroupSorting&&(this._sortingTimer||(this._sortingTimer=setTimeout(this.sortGroups,100)))},k.prototype._onBeforeGroupAdded=function(e){this._contentAsHeader&&e.dataView.getGroupLevel()>=this._criteria.length-1&&(e.hideHeaderRow=!0),this._dispatch("beforeGroupAdded",e)},k.prototype._updateDisplayColumn=function(){if(this._shouldUpdateDisplayColumn){this._shouldUpdateDisplayColumn=!1;var e,t=this._hosts[0],o=t.getColumnCount();if(this._headerColumn=this._getHeaderColumnIndex(),this._displayColumn<0)if(this._headerColumn<0){for(e=0;e=0)for(e=this._displayColumn;e=0){var n=this._getColumnData(this._headerColumn);n&&(n.isHeaderColumn=!1)}r>=0&&((n=this._newColumnData(r)).isHeaderColumn=!0,this._headerColumnField=this._getField(r)),this._headerColumn=r}}return this._headerColumn},k.prototype._updateHeader=function(e,t,o){if(this._hasGroupHeader(e)){var r=this._updateDisplayColumn();if(!(r<0)&&this._getColumnOption(r,"isHeaderColumn")){var n=e.getDataSource(),i=e.getSection(),l=null!=t?t:i.getFirstIndexInView(),s=null!=o?o:i.getLastIndexInView(),a=this._getRowsForContentAsHeader(),u=-1,d=i.getCell(r,0,!1);!this._headerSpanning&&d&&(u=d.getWidth()-27);for(var p,c=i.getColumnCount(),h=this.hasListener("nonGroupBinding"),_=n.getGroupLevel(l),g={section:i,colCount:c},f=this._autoGroupHiding||this._contentAsHeader,m=0;m=0;g.groupId=S.getGroupId(),g.dataSource=S,g.collapsed=S.isCollapsed(),g.hiddenArrow=!(!I&&!this._isArrowHidden(S))}else f?_=(p=n.getGroup(b)).getGroupLevel():p||(p=n.getGroup(b)),(w||h)&&(g.dataSource=n,g.footerIndex=null,g.groupId=null,w&&(g.collapsed=w.isCollapsed()),h&&(g.rowData=this._rowGetter(n.getRowData(b)))),w?v=-2:this._contentAsHeader&&this._criteria.length>1&&(v=-1);g.groupLevel=_;var x=0,A=this._autoGroupHiding&&null==p.getGroupValue()&&1===_&&!this._contentAsHeader;g.nonGroupRow=A,x=g.noIndent||A?0:S?_-1:_+v;var k=0;if(this._indentSizes){if(k=this._indentSizes[0],x>0){var D=this._indentSizes.length;k=x0&&(k=8+4*x,S||(k+=this._arrowSize));if(u>-1&&u1)for(var R=_;R>1;R--)T=T.getDataSource();var E=T.getGroupId();g.colorTagClass=this._groupColors[E]}S?(C.applyHeaderStyle(g),this._dispatch(I?"groupFooterBinding":"groupHeaderBinding",g)):(C.removeHeaderStyle(i,r,y),w&&C.applyContentAsHeaderStyle(g),C.applyRowStyle(g),this._dispatch("nonGroupBinding",g))}}this._updateCursorTimer||(this._updateCursorTimer=setTimeout(this._updateCursor,100))}}},k.prototype._getRowsForContentAsHeader=function(){if(!this._contentAsHeader)return{};var e={},t=this.getDataView().getAllGroups();for(var o in t){var r=t[o];if(!r.hasGroup()){var n=r.getAllRowIds(!0)[0];n&&(e[n]=r)}}return e},k.prototype._onColumnIndexChanged=function(e){this._fixedDisplayColumn>=0?(this._displayColumn=this._fixedDisplayColumn,this.updateHeaders()):(this._headerColumn>=0&&(this._displayColumn=-1),this._timerId||(this._timerId=setTimeout(this.updateHeaders,50)))},k.prototype.updateHeaders=function(){this._timerId=0,this._shouldUpdateDisplayColumn=!0;var e=this._hosts[0];if(e&&!this._disabled)for(var t=e.getAllSectionSettings("content"),o=t.length;--o>=0;)this._updateHeader(t[o])},k.prototype._collapseDataRowId=function(e,t){if(this.getDataView()){var o=this._getRowsForContentAsHeader()[e];o&&o.collapse(t)}},k.prototype._onCellClicked=function(e){if(!this._clickDisabled){var t=!1,o=this._hosts[0].getRelativePosition(e),r=o.cell?o.cell.getElement():null;if(r){var n=r.classList.contains("closed"),i=o.rowIndex,l=o.sectionSettings.getDataSource(),s=l.getRowId(i),a=l.getGroupByRowId(s);if(a){if(t=!0,a.isCollapsible&&!a.isCollapsible())return;a.collapse(!n)}else this._contentAsHeader&&(t=!0,this._collapseDataRowId(s,!n));t&&(n?r.classList.remove("closed"):r.classList.add("closed")),o.expanded=n,o.group=a,this._dispatch("clicked",o)}}},k.prototype._updateCursor=function(){var e=this._hosts[0];if(e){var t=!1,o=!1;this._clickableCell||(o=!0),this._clickDisabled&&(t=!0,o=!0),t?e.addClass("expander-disabled"):e.removeClass("expander-disabled"),o?e.addClass("folder-disabled"):e.removeClass("folder-disabled")}this._updateCursorTimer=0},k.prototype._onMapCriteria=function(e){return"string"==typeof e?this._criteriaGetter.bind(null,e):e},k.prototype.expandAll=function(e){this.collapseAll(!1===e)},k.prototype.collapseAll=function(e){var t=this.getDataView();t&&t.collapseAllGroups(e)},k.prototype.expand=function(e,t){this.collapse(e,!1===t)},k.prototype.collapse=function(e,t){var o=this.getDataView();if(o){var r=o.getGroup(e);r&&r.collapse(t)}},k.prototype.disableClicking=function(e){this._clickDisabled=!1!==e,this._updateCursor()},k.prototype.getGroupingStates=function(){return this.getDataView().getAllGroups().map((function(e){return{groupId:e.getGroupId(),collapsed:e.isCollapsed()}}))},k.prototype.setGroupingStates=function(e){"string"==typeof e&&(e=JSON.parse(e));for(var t=0;t=0&&(i.splice(o,1),--this._listenerCount)}},n.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},n.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},n.prototype.getListener=function(e,t){if(e){var i=this._events?this._events[e]:null;if(i)return t||(t=0),i[t]||null}return null},n.prototype.addListener=function(e,t){var i=e?e[t]:null;"function"==typeof i&&this.addEventListener(t,i)},n.prototype._prepareEventArguments=function(e,t){return t},n.prototype._dispatch=function(e,t){var i=this._events?this._events[e]:null;if(i){t=this._prepareEventArguments(e,t);for(var o=i.length,n=0;n=0;){var n=this._hosts[o];if(n.getElement().contains(t))return n}return null},s.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},s.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},s.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var i=this.getColumnIndex(e),o=this._realTimeGrid.getColumnDefinition(i);if(o)return o.getName()}return""},s.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},s.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var i,o=this._compositeGrid.getColumnFields(),n=this._compositeGrid.getColumnCount(),r=[],s=0;s=0&&i=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var i=this._realTimeGrid.getColumnDefinition(e);return i?i.getId():""},s.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},s.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},s.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},s.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},s.prototype._moveColumnById=function(e,t){var i=this._hosts,o=i?i.length:0;if(o){for(var n=0,r=0;r=0&&t>=0){var n=this._activeGrid||this._hosts[0],r=n?n.getCell(o.sectionType||"content",e,t):null;o.target=r?r.getElement():null}return o};var l={left:37,right:39,up:38,down:40,tab:9};s.prototype._mockKeyboardEvent=function(e,t){var i=t||{};return i.preventDefault=function(){},i.stopPropagation=function(){},"string"==typeof e&&(e=e.toLowerCase(),e=l[e]),i.keyCode=e,i};var a=function(e,t){var i="number"==typeof t?e.getRowDataAt(t):e.getRowData(t);return i&&i.ROW_DEF||null},c=function(e){return e},u=function(e){return e?e.ROW_DEF.getRowData():null},d=function(e){if(e){var t=e.ROW_DEF;return t?t.getRowData():e}return null},h=function(e){return Array.isArray(e)?"{\n"+e.join("\n")+"\n}":e},_=function(e){return e.replace(/\n+/g,"\n\t").replace(/\n\t}$/,"\n}")},p=function(e,t){if(!e)return null;var i=document.createElement("style");i.textContent="\n"+e+"\n";var o,n=function(e){var t;if(e&&(e.shadowRoot?t=e.shadowRoot:e.getRootNode&&(t=e.getRootNode()),t&&t!==document&&t!==e))return t;return null}(t),r=!0;return n||(r=!1,n=document.head),r&&n.children&&n.children.length&&(o=n.children[0]),o?n.insertBefore(i,o):n.appendChild(i),i},f=function(e,t){for(var i in t||(t=[]),e){var o=e[i];"object"==typeof o?f(o,t):t.push(o)}return t},g=function(e){if(!e||"string"!=typeof e)return"";if("#"===e.charAt(0))return e;var t=e.match(/\d+/g);if(!t||t.length<3)return e;for(var i="#",o=0;o<3;o++){var n=+t[o];n>=16||(i+="0"),i+=n?n.toString(16).toUpperCase():"0"}return i},m=function(e){if(null==e)return"";var t="string"==typeof e?e:e.toString();return t.length?(t.indexOf("\n")>=0&&(t=t.replace(/[\r\n]/g," ")),t.indexOf("\t")>=0&&(t=t.replace(/\t/g," "))," "!==t.charAt(0)&&" "!==t.charAt(t.length-1)||(t=t.trim()),t):""},v={},y=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},w=function(e,t,i){"attributes"===i.type&&(null!=t?i.attributeName===t&&e(i.target.getAttribute(t)):e(i.target))};v._getNewId=function(){return"observer_"+ ++v._id},v._addObserver=function(e,t,i){var o=i;o||(o={}),o.attributes=!0,v._observer.observe(e,o),v._addListener(e,t)},v._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=i),S._components[e]=t}return t},S.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return C[t]?t:""},S.hasTheme=function(e){return e===S.getThemeName()},S.getThemeName=function(e){return S._themeName||(S._themeName=S.getCssVariable("--theme-name",document.documentElement)),S._themeName},S.setThemeName=function(e){S._themeName=e},S.isThemeLoaded=function(){return S._themeLoaded},S.getColors=function(){return S.themeColors},S.isHaloTheme=function(e){return null==e&&(e=S.getThemeName()),!!e&&e.indexOf("halo")>=0},S.injectIcons=function(e,t){if("object"==typeof e){var i=S.getThemeName();e.themeName=i;var o=S.getElfVersion();e.elfVersion=o;var n=S._icons[i];n&&(e.icons=n)}},S.getIconList=function(){var e=S._icons[S.getThemeName()];return e?f(e):[]},S._onIconPreloaded=function(){if(S._dummyIcon){var e=S._dummyIcon.parentNode;e&&e.removeChild(S._dummyIcon),S._dummyIcon=null}},S.prepareIconPreloading=function(){if(!S._iconLoaded){S._iconLoaded=!0;var e=S.getIconList();if(e.length){setTimeout(S._onIconPreloaded,10);var t=S._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},S.getCssVariable=function(e,t){var i="",o=t||document.body;return window&&"string"==typeof e&&1===o.nodeType&&e.match(/^--/)&&(i=(i=window.getComputedStyle(o).getPropertyValue(e)).replace(/[\"\']/g,"")),i},S.getCssVariables=function(e,t){var i=t||document.body;if(window&&1===i.nodeType){var o=window.getComputedStyle(i);for(var n in e){var r=e[n];r&&r.match(/^--/)&&(e[n]=o.getPropertyValue(r).replace(/\"/g,""))}}return e||null},S.setRTK=function(e){null!=e&&(S._rtk=e)},S.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},S._addThemeChangedCallback=function(e){var t=S._callbacks;t.indexOf(e)<0&&t.push(e)},S.reloadThemeColors=function(){return S._deferred&&S._deferred.isFulfilled()?(S._profileName="",S._themeLoaded=!1,S.themeReady=null,S.getThemeColors()):S.themeReady},S.getThemeColors=function(e){if("function"==typeof e&&S._addThemeChangedCallback(e),S.themeReady)return S.themeReady;var t=S._deferred=new r;S.themeReady=t.promise;var i=S.getMovementColorProfile();if(i)i!==S._profileName?setTimeout(S._profileNameRetrieved,100):S._deferred.resolve(S.themeColors);else{var o={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},n=window?window.JET:null;if(S._themeLoaded=!1,S._rtk&&S._rtk.Settings)S._rtk.Settings.getAsync(o).then(S._loadingProfileSuccess).catch(S._loadingProfileFailure);else if(n&&n.Settings)try{n.Settings.read(S._loadingProfileSuccess,o)}catch(e){S._loadingProfileFailure()}else setTimeout(S._profileNameRetrieved,100)}return t.promise};var R=function(e){if(e!==S._profileName){S._retrieveThemeColors(e),S._pendingResolve&&(S._pendingResolve=!1,S._deferred.resolve(S.themeColors));for(var t=S._callbacks,i=0;i0||t.indexOf("Trident/")>0||t.indexOf("Edge/")>0,i._textRange=document.createRange(),e&&i.config({rowSelection:e})};o.inherits(G,s),G.prototype._activeGrid=null,G.prototype._anchorSection=null,G.prototype._disabled=!1,G.prototype._singleSelMode=!1,G.prototype._clickToggleMode=!1,G.prototype._pendingClickIndex=-1,G.prototype._basedOnContent=!1,G.prototype._selectionField="SELECTED_ROW",G.prototype._anchorRowId="",G.prototype._isIE=!1,G.prototype._textRange=null,G.prototype._onMenuClicked=null,G.prototype._menuButton=null,G.prototype._menuPosition="outside",G.prototype._timerId=0,G.prototype._timerMenuId=0,G.prototype._pendingSelection=null,G.prototype.getName=function(){return"RowSelectionPlugin"},G.prototype.hasMultiTableSupport=function(){return!0},G.prototype.initialize=function(e,t){if(!(this._hosts.indexOf(e)>=0)){this._hosts.push(e),e.listen("mousedown",this._onMouseDown),e.listen("click",this._onClick),e.listen("keydown",this._onKeyDown),e.listen("postSectionDataBinding",this._onPostSectionDataBinding),e.listen("rowPositionChanged",this._onRowPositionChanged);var i=this.getGridApi(e);i&&i.listen("beforeRowRemoved",this._onBeforeRowRemoved),this.config(t),this._onMenuClicked&&(G._stylePromise?G._applyThemeColor(e):(G._stylePromise=S.getThemeColors()).then(this._onThemeLoaded).catch(this._onThemeLoaded))}},G.prototype._onThemeLoaded=function(){if(!G._styles){G._styles=function(e){if(e){var t="";if(Array.isArray(e))t=e.map(h).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,_)}return""}([".row-selection-menu",["position: absolute;","background-color: var(--grid-column-menu-icon-bgcolor);","color: var(--grid-column-menu-icon-color);","z-index: 1;","cursor: pointer;","text-align: center;","width: 16px;","height: 16px;","padding: 6px;"],".row-selection-menu:hover",["background-color: var(--grid-column-menu-icon-hover-bgcolor);"],".row-selection-menu-inside",["padding: 4px;"]])}for(var e=this._hosts.length;--e>=0;)G._applyThemeColor(this._hosts[e])},G._applyThemeColor=function(e){e&&!e._rowSelectionStyles&&G._styles&&(e._rowSelectionStyles=!0,p(G._styles,e.getParent()))},G.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(e.unlisten("mousedown",this._onMouseDown),e.unlisten("copy",this._onCopy),e.unlisten("cut",this._onCopy),e.unlisten("click",this._onClick),e.unlisten("keydown",this._onKeyDown),e.unlisten("postSectionDataBinding",this._onPostSectionDataBinding),e.unlisten("rowPositionChanged",this._onRowPositionChanged),this._hosts.splice(t,1),this._hosts.length||this._timerId&&(clearTimeout(this._timerId),this._timerId=0,this._timerMenuId=0,this._pendingSelection=null),this._dispose())},G.prototype.config=function(e){if(e){var t=e.rowSelection;if(t){if("object"==typeof t){t.singleSelection&&(this._singleSelMode=!0),t.clickToggle&&(this._clickToggleMode=!0),t.basedOnContent&&(this._basedOnContent=!0),t.selectionField&&(this._selectionField=t.selectionField);var i=t.menuClicked;"function"==typeof i&&(this._onMenuClicked=i),(i=t.menuPosition)&&(this._menuPosition=i)}else"single"===t&&(this._singleSelMode=!0);this.addListener(t,"selectionChanged"),this.addListener(t,"beforeSelection")}else null!=t&&this.disable()}},G.prototype.getConfigObject=function(e){var t=e||{},i=t.rowSelection;return i||(i=t.rowSelection={}),this._singleSelMode&&(i.singleSelection=this._singleSelMode),this._clickToggleMode&&(i.clickToggle=this._clickToggleMode),this._basedOnContent&&(i.basedOnContent=this._basedOnContent),"SELECTED_ROW"!==this._selectionField&&(i.selectionField=this._selectionField),t},G.prototype.clearAllSelections=function(e,t){null==e&&(e=!0),this._clearSelectedRows(e),t&&(this._activeGrid=t)},G.prototype.clearSelectedRows=G.prototype.clearAllSelections,G.prototype.clearSelection=G.prototype.clearAllSelections,G.prototype.getActiveGrid=function(){return this._activeGrid},G.prototype.getRowAnchor=function(e){if(this._basedOnContent){var t=this._activeGrid?this._activeGrid.getDataSource():null;if(t&&this._anchorRowId)return t.getRowIndex(this._anchorRowId)}else{var i=this._getSection(e);if(i&&i.getRowAnchor)return i.getRowAnchor()}return-1},G.prototype.getFirstSelectedIndex=function(e){var t=this._getSection(e);if(t){if(this._basedOnContent){var i=this._activeGrid?this._activeGrid.getDataSource():null;if(!i)return null;for(var o,n=i.getVisibleRowIds(!0),r=i.getMultipleRowData(n),s=r.length,l=0;l=0;s--)if((o=this._rowGetter(r[s]))&&o[this._selectionField])return s;return null}return t.getLastSelectedRow()}return null},G.prototype.getSelectedRows=function(e){var t=this._getSection(e);if(t){if(this._basedOnContent){var i=this._activeGrid?this._activeGrid.getDataSource():null;if(!i)return null;for(var o,n=i.getVisibleRowIds(!0),r=i.getMultipleRowData(n),s=r.length,l=[],a=0;a=0))return!1;var o=i?this._activeGrid:null;o&&(this._clearSelectedRows(),this._activeGrid=i);var n=this._getSection(t);return this._selectSingleRow(n,e)?(this._scrollToRow(e),!0):(o&&(this._activeGrid=o),!1)},G.prototype.selectAllRows=function(e){if(e?this._activeGrid=e:this._activeGrid||(this._activeGrid=this._hosts[0]),this._activeGrid)for(var t=this._activeGrid.getAllSections("content"),i=t.length;--i>=0;)this._selectRowRange(null,null,t[i]),0==i&&(this._anchorSection=t[i]);this._updateMenuIcon()},G.prototype.selectRowRange=function(e,t,i,o){this._selectRowRange(e,t,i),o&&this._scrollToRow(e),this._updateMenuIcon()},G.prototype.disable=function(e){this._disabled=!1!==e},G.prototype.isEnabled=function(){return!this._disabled},G.prototype.disableMultiSelection=function(e){this._singleSelMode=!1!==e},G.prototype._onClick=function(e){if(this._pendingClickIndex>=0&&this._anchorSection){this._selectSingleRow(this._anchorSection,this._pendingClickIndex);var t=this.getRelativeGrid(e);this._clearPendingClickIndex(t),this._basedOnContent||this._updateMenuIcon(),this._dispatchSelectionChanged(e)}null!=this._activeGrid&&((this._isIE?document.selection.createRange().htmlText:window.getSelection().toString())||this._activeGrid.focus())},G.prototype.selectByMouse=function(e,t){var i=this._mockMouseEvent(0,e,t);this._onMouseDown(i)},G.prototype.selectByKey=function(e,t){var i=this._mockKeyboardEvent(e,t);this._onKeyDown(i)},G.prototype._onMouseDown=function(e){if(!this._disabled&&(2!==e.button||!e.shiftKey&&!e.ctrlKey)){var t=this.getRelativeGrid(e);if(this._clearPendingClickIndex(t),t){var i=t.getRelativePosition(e);if(i.hit&&"content"===i.sectionType){if(2===e.button){var o=this._getPlugin("ColumnSelectionPlugin");if(o&&o.isEnabled()&&o.isSelectedColumn(i.colIndex))return}var n=i.dataSource,r=i.rowIndex;if(this._basedOnContent)if(!this._getRow(n,r))return;if(!this._dispatchBeforeSelection(e,i)){var s=this._singleSelMode||!this._activeGrid||this._activeGrid!==t,l=i.section;if(s||(e.shiftKey?this._selectFromAnchorToTarget(l,r):e.ctrlKey&&!b||b&&!e.ctrlKey&&e.metaKey?this._sectionSetSelectedRow(l,r,!l.isSelectedRow(r)):s=!0),s){if(this._anchorSection=l,l.isSelectedRow(r))return void this._setPendingClickIndex(r,t);this._activeGrid!==t&&(this._clearSelectedRows(!0),this._activeGrid=t),this._selectSingleRow(this._anchorSection,r)}var a=t.getHiddenInput();if(a){this._textRange.setStart(a.parentNode,0),this._textRange.setEnd(a,0);var c=window.getSelection();c.removeAllRanges(),c.addRange(this._textRange),this._isIE&&t.getParent().focus()}this._basedOnContent||this._updateMenuIcon(),this._dispatchSelectionChanged(e,r,l)}}}}},G.prototype._onMouseMove=function(e){var t=this.getRelativeGrid(e);this._clearPendingClickIndex(t)},G.prototype._setPendingClickIndex=function(e,t){this._pendingClickIndex=e,t&&t.listen("mousemove",this._onMouseMove)},G.prototype._clearPendingClickIndex=function(e){this._pendingClickIndex=-1,e&&e.unlisten("mousemove",this._onMouseMove)},G.prototype._onKeyDown=function(e){if(this._activeGrid)switch(e.keyCode){case 33:this._selectByKey(-1,e,!0);break;case 34:case 35:this._selectByKey(1,e,!0);break;case 36:this._selectByKey(-1,e,!0);break;case 37:if(this._dispatchBeforeSelection(e))return;this._gotoPrevGrid()&&n.preventDefault(e);break;case 38:this._selectByKey(-1,e);break;case 39:if(this._dispatchBeforeSelection(e))return;this._gotoNextGrid()&&n.preventDefault(e);break;case 40:this._selectByKey(1,e)}},G.prototype._onBeforeRowRemoved=function(e){this._timerId||(this._pendingSelection=this.getFirstSelectedIndex(),this._timerId=setTimeout(this._onReselection,10))},G.prototype._onReselection=function(e){(this._timerId=0,null!=this._pendingSelection)&&(null==this.getFirstSelectedIndex()&&this.setSelectedRow(this._pendingSelection,!0));this._pendingSelection=null},G.prototype._onCopy=function(e){var t,i;e.clipboardData?(t=e.clipboardData,i="text/plain"):(t=window.clipboardData,i="Text");var o=this.getSelectedText();o&&t.setData(i,o),e.preventDefault()},G.prototype._onPostSectionDataBinding=function(e){if(this._basedOnContent&&"content"===e.sectionType&&this._activeGrid){var t=e.section,i=e.dataSource,o=this._selectionField;t.clearSelectedRows();for(var n=t.getFirstIndexInView(),r=t.getLastIndexInView(),s=n;s<=r;++s){var l=this._rowGetter(i.getRowDataAt(s));l&&l[o]&&t.setSelectedRow(s,!0)}this._updateMenuIcon()}},G.prototype._onRowPositionChanged=function(e){this._timerMenuId||e.sender&&e.sender===this._activeGrid&&(this._clearMenuIcon(),this._timerMenuId=setTimeout(this._updateMenuIcon,800))},G.prototype.getSelectedText=function(){if(!this._compositeGrid&&!this._realTimeGrid)return"";for(var e=this.getSelectedRows(),t=e.length,i=this.getColumnCount(),o="",n=this._activeGrid.getDataSource(),r=0;r0&&(o+="\t");var c=this._getField(a);o+=m(l[c])}}}return o},G.prototype._getSection=function(e){return this._activeGrid||(this._activeGrid=this._hosts[0],this._activeGrid&&(this._anchorSection=this._activeGrid.getSection("content"),this._anchorSection||(this._activeGrid=null))),e?this._activeGrid.getSection(e):(this._anchorSection&&(this._anchorSection.getElement()||(this._anchorSection=null)),this._anchorSection)},G.prototype._clearSelectedRows=function(e){if(this._activeGrid){if(this._basedOnContent){var t=this._activeGrid.getDataSource();if(t){var i=t.getDataSource();this._setColumnData(i,this._selectionField,!1)}}else for(var o=this._activeGrid.getAllSections("content"),n=o.length;--n>=0;)this._sectionClearSelectedRows(o[n],e);e||(this._anchorSection=null),this._clearPendingClickIndex(this._activeGrid),this._clearMenuIcon()}},G.prototype._selectByKey=function(e,t,i){if(t.preventDefault(),this._anchorSection){null!=this._activeGrid&&this._activeGrid.focus();var o=t.shiftKey,n=0,r=this._anchorSection.getRowCount()-1;if(i){var s=this._activeGrid.getVScrollView();-1===e?s&&(n=this.getFirstSelectedIndex(this._anchorSection)<=s.firstFullRow?s.prevPageRowIndex:s.firstFullRow):n=s?this.getLastSelectedIndex(this._anchorSection)>=s.lastFullRow?s.nextPageRowIndex:s.lastFullRow:r}else n=-1===e?this.getFirstSelectedIndex(this._anchorSection)+e:this.getLastSelectedIndex(this._anchorSection)+e;if(n<0){var l=this._getPlugin("ColumnSelectionPlugin");return!o&&l&&l.isEnabled()?(l.selectSingleColumn(null,this._activeGrid),void this.clearAllSelections()):void this._scrollToRow(0)}n>r?this._scrollToRow(r):this._dispatchBeforeSelection(t)||(o&&!this._singleSelMode?this._selectFromAnchorToTarget(this._anchorSection,n):this._selectSingleRow(this._anchorSection,n),this._scrollToRow(n),this._basedOnContent||this._updateMenuIcon(),this._dispatchSelectionChanged(t,n))}},G.prototype._sectionSetSelectedRow=function(e,t,i){if(this._basedOnContent){var o=this._activeGrid?this._activeGrid.getDataSource():null;if(o)this._getRow(o,t)&&(this._setData(o,t,this._selectionField,i),i&&(this._anchorRowId=o.getRowId(t)))}else e.setSelectedRow(t,i);this._pendingSelection=null},G.prototype._selectRangeOnSection=function(e,t,i){if(null==t&&(t=0),this._basedOnContent){var o=this._activeGrid?this._activeGrid.getDataSource():null;if(o){var n=o.getVisibleRowIds(!0);null==i&&(i=n.length);var r=t+i;r>n.length&&(r=n.length);for(var s=[],l=[],a=t;a=s.scrollViewSize&&(a=s.scrollViewSize)),this._menuButton.style.left=l+"px",this._menuButton.style.top=a+"px",!0},G.prototype._clearMenuIcon=function(){this._menuButton&&this._menuButton.parentNode&&this._menuButton.parentNode.removeChild(this._menuButton)},G.prototype._selectRowRange=function(e,t,i){var o=this._getSection(i);o&&this._selectRangeOnSection(o,e,t)},G.prototype._selectFromAnchorToTarget=function(e,t){if(this._anchorSection===e){var i=this.getRowAnchor(this._anchorSection);if(i!==t){this._clearSelectedRows(!0);var o=1,n=i,r=t-i;r<0&&(o=-1,n=t),this._selectRangeOnSection(e,n,r*o+1),!this._basedOnContent&&this._anchorSection.setRowAnchor&&this._anchorSection.setRowAnchor(i)}}},G.prototype._gotoPrevGrid=function(){if(!this._activeGrid)return!1;if(this._activeGrid===this._hosts[0])return!1;var e=this._hosts.indexOf(this._activeGrid);return e>0&&(this._gotoGrid(e-1),!0)},G.prototype._gotoNextGrid=function(){if(!this._activeGrid)return!1;var e=this._hosts.length-1;if(this._activeGrid===this._hosts[e])return!1;var t=this._hosts.indexOf(this._activeGrid);return t>=0&&(this._gotoGrid(t+1),!0)},G.prototype._gotoGrid=function(e){var t=this.getRowAnchor(this._anchorSection),i=this._anchorSection.getIndex();this.clearSelectedRows(),this.selectSingleRow(t,i,this._hosts[e]),null!=this._activeGrid&&this._activeGrid.focus()},G.prototype._scrollToRow=function(e){var t=this._hosts[0];t&&t.scrollToRow(null,e)},G.prototype._dispatchBeforeSelection=function(e,t){if(this.hasListener("beforeSelection")){if(!t){var i=this._activeGrid||this._hosts[0];t=i?i.getRelativePosition(e):{}}if(t.event=e,this._dispatch("beforeSelection",t),t.cancel)return!0}return!1},G.prototype._dispatchSelectionChanged=function(e,t,i){if(this._activeGrid){var o=this._getPlugin("ColumnSelectionPlugin");o&&o.isEnabled()&&o.clearSelection();var n=this._getPlugin("CellEditingPlugin");n&&n.closeCellEditor(),(n=this._getPlugin("InCellEditingPlugin"))&&n.closeCellEditor()}if(this.hasListener("selectionChanged")){var r={};r.selectedRows=this.getSelectedRows(),r.rowIndex=null!=t?t:this.getRowAnchor(this._anchorSection),r.section=null!=i?i:this._anchorSection,r.event=e,r.grid=this._activeGrid,this._dispatch("selectionChanged",r)}};!function(e,t){if(e&&t&&t.prototype.getName){var i=t.prototype.getName().replace(/Plugin$/,"");if(i){var o=e.tr;o||(o=e.tr={});var n=o.grid;n||(n=o.grid={}),n[i+"Plugin"]=t,o[i+"Extension"]=t}}}(window,G)}]); \ No newline at end of file +!function(e){var t={};function i(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=t,i.d=function(e,t,o){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(o,n,function(t){return e[t]}.bind(null,n));return o},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=0)}([function(e,t,i){"use strict";i.r(t);var o={inherits:function(e,t){function i(){}i.prototype=t.prototype,e.prototype=new i,e.prototype.constructor=e,e.base=function(e,i,o){i||(i="constructor");for(var n=arguments.length,r=new Array(n),s=2;s=0&&(i.splice(o,1),--this._listenerCount)}},n.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},n.prototype.hasListener=function(e){if(this._listenerCount){if(e){var t=this._events?this._events[e]:null;return!!t&&t.length>0}return!0}return!1},n.prototype.getListener=function(e,t){if(e){var i=this._events?this._events[e]:null;if(i)return t||(t=0),i[t]||null}return null},n.prototype.addListener=function(e,t){var i=e?e[t]:null;"function"==typeof i&&this.addEventListener(t,i)},n.prototype._prepareEventArguments=function(e,t){return t},n.prototype._dispatch=function(e,t){var i=this._events?this._events[e]:null;if(i){t=this._prepareEventArguments(e,t);for(var o=i.length,n=0;n=16||(i+="0"),i+=n?n.toString(16).toUpperCase():"0"}return i},d=function(e){if(null==e)return"";var t="string"==typeof e?e:e.toString();return t.length?(t.indexOf("\n")>=0&&(t=t.replace(/[\r\n]/g," ")),t.indexOf("\t")>=0&&(t=t.replace(/\t/g," "))," "!==t.charAt(0)&&" "!==t.charAt(t.length-1)||(t=t.trim()),t):""},h={},_=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},p=function(e,t,i){"attributes"===i.type&&(null!=t?i.attributeName===t&&e(i.target.getAttribute(t)):e(i.target))};h._getNewId=function(){return"observer_"+ ++h._id},h._addObserver=function(e,t,i){var o=i;o||(o={}),o.attributes=!0,h._observer.observe(e,o),h._addListener(e,t)},h._onMutationCallback=function(e){for(var t=0;t1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=i),g._components[e]=t}return t},g.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return f[t]?t:""},g.hasTheme=function(e){return e===g.getThemeName()},g.getThemeName=function(e){return g._themeName||(g._themeName=g.getCssVariable("--theme-name",document.documentElement)),g._themeName},g.setThemeName=function(e){g._themeName=e},g.isThemeLoaded=function(){return g._themeLoaded},g.getColors=function(){return g.themeColors},g.isHaloTheme=function(e){return null==e&&(e=g.getThemeName()),!!e&&e.indexOf("halo")>=0},g.injectIcons=function(e,t){if("object"==typeof e){var i=g.getThemeName();e.themeName=i;var o=g.getElfVersion();e.elfVersion=o;var n=g._icons[i];n&&(e.icons=n)}},g.getIconList=function(){var e=g._icons[g.getThemeName()];return e?c(e):[]},g._onIconPreloaded=function(){if(g._dummyIcon){var e=g._dummyIcon.parentNode;e&&e.removeChild(g._dummyIcon),g._dummyIcon=null}},g.prepareIconPreloading=function(){if(!g._iconLoaded){g._iconLoaded=!0;var e=g.getIconList();if(e.length){setTimeout(g._onIconPreloaded,10);var t=g._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},g.getCssVariable=function(e,t){var i="",o=t||document.body;return window&&"string"==typeof e&&1===o.nodeType&&e.match(/^--/)&&(i=(i=window.getComputedStyle(o).getPropertyValue(e)).replace(/[\"\']/g,"")),i},g.getCssVariables=function(e,t){var i=t||document.body;if(window&&1===i.nodeType){var o=window.getComputedStyle(i);for(var n in e){var r=e[n];r&&r.match(/^--/)&&(e[n]=o.getPropertyValue(r).replace(/\"/g,""))}}return e||null},g.setRTK=function(e){null!=e&&(g._rtk=e)},g.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},g._addThemeChangedCallback=function(e){var t=g._callbacks;t.indexOf(e)<0&&t.push(e)},g.reloadThemeColors=function(){return g._deferred&&g._deferred.isFulfilled()?(g._profileName="",g._themeLoaded=!1,g.themeReady=null,g.getThemeColors()):g.themeReady},g.getThemeColors=function(e){if("function"==typeof e&&g._addThemeChangedCallback(e),g.themeReady)return g.themeReady;var t=g._deferred=new r;g.themeReady=t.promise;var i=g.getMovementColorProfile();if(i)i!==g._profileName?setTimeout(g._profileNameRetrieved,100):g._deferred.resolve(g.themeColors);else{var o={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},n=window?window.JET:null;if(g._themeLoaded=!1,g._rtk&&g._rtk.Settings)g._rtk.Settings.getAsync(o).then(g._loadingProfileSuccess).catch(g._loadingProfileFailure);else if(n&&n.Settings)try{n.Settings.read(g._loadingProfileSuccess,o)}catch(e){g._loadingProfileFailure()}else setTimeout(g._profileNameRetrieved,100)}return t.promise};var m=function(e){if(e!==g._profileName){g._retrieveThemeColors(e),g._pendingResolve&&(g._pendingResolve=!1,g._deferred.resolve(g.themeColors));for(var t=g._callbacks,i=0;i=0;){var n=this._hosts[o];if(n.getElement().contains(t))return n}return null},v.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},v.prototype.getGridApi=function(e){if(null==e)return this._compositeGrid||this._realTimeGrid;var t="number"==typeof e?this._hosts[e]:e;return t&&t._wrapper||null},v.prototype.getColumnName=function(e){if(this._compositeGrid){var t=this._compositeGrid.getColumnModel(e);if(t)return t.title?t.title:t.field}else{var i=this.getColumnIndex(e),o=this._realTimeGrid.getColumnDefinition(i);if(o)return o.getName()}return""},v.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid){var t=this._compositeGrid.getColumnFields().indexOf(e);return t>-1?t:this._compositeGrid.getColumnIndex(e)}return this._realTimeGrid.getColumnIndex(e)},v.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var i,o=this._compositeGrid.getColumnFields(),n=this._compositeGrid.getColumnCount(),r=[],s=0;s=0&&i=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var i=this._realTimeGrid.getColumnDefinition(e);return i?i.getId():""},v.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},v.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},v.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},v.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},v.prototype._moveColumnById=function(e,t){var i=this._hosts,o=i?i.length:0;if(o){for(var n=0,r=0;r=0&&t>=0){var n=this._activeGrid||this._hosts[0],r=n?n.getCell(o.sectionType||"content",e,t):null;o.target=r?r.getElement():null}return o};var y={left:37,right:39,up:38,down:40,tab:9};v.prototype._mockKeyboardEvent=function(e,t){var i=t||{};return i.preventDefault=function(){},i.stopPropagation=function(){},"string"==typeof e&&(e=e.toLowerCase(),e=y[e]),i.keyCode=e,i},v._staticStyles={},v._themeLoaders={},v._themeLoadSuccess=function(e,t){var i=this.getName(),o=v._staticStyles[i]=e(t);this.applyStyles(o,i)},v.prototype.applyStaticStyles=function(e){var t=this.getName(),i=v._staticStyles[t];i?this.applyStyles(i,t):e&&(v._themeLoaders[t]||(v._themeLoaders[t]=g.getThemeColors()),v._themeLoaders[t].then(v._themeLoadSuccess.bind(this,e)))},v.prototype.applyStyles=function(e,t,i){t||(t=this.getName());var o,n,r="_style"+t,s=this._hosts,l=s.length;if(l)if(i)for(o=0;o0||t.indexOf("Trident/")>0||t.indexOf("Edge/")>0,i._textRange=document.createRange(),e&&i.config({rowSelection:e})};o.inherits(G,v),G.prototype._activeGrid=null,G.prototype._anchorSection=null,G.prototype._disabled=!1,G.prototype._singleSelMode=!1,G.prototype._clickToggleMode=!1,G.prototype._pendingClickIndex=-1,G.prototype._basedOnContent=!1,G.prototype._selectionField="SELECTED_ROW",G.prototype._anchorRowId="",G.prototype._isIE=!1,G.prototype._textRange=null,G.prototype._onMenuClicked=null,G.prototype._menuButton=null,G.prototype._menuPosition="outside",G.prototype._timerId=0,G.prototype._timerMenuId=0,G.prototype._pendingSelection=null,G._styleCalculator=function(){return function(e){if(e){var t="";if(Array.isArray(e))t=e.map(s).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,l)}return""}([".row-selection-menu",["position: absolute;","background-color: var(--grid-column-menu-icon-bgcolor);","color: var(--grid-column-menu-icon-color);","z-index: 1;","cursor: pointer;","text-align: center;","width: 16px;","height: 16px;","padding: 6px;"],".row-selection-menu:hover",["background-color: var(--grid-column-menu-icon-hover-bgcolor);"],".row-selection-menu-inside",["padding: 4px;"]])},G.prototype.getName=function(){return"RowSelectionPlugin"},G.prototype.hasMultiTableSupport=function(){return!0},G.prototype.initialize=function(e,t){if(!(this._hosts.indexOf(e)>=0)){this._hosts.push(e),e.listen("mousedown",this._onMouseDown),e.listen("click",this._onClick),e.listen("keydown",this._onKeyDown),e.listen("postSectionDataBinding",this._onPostSectionDataBinding),e.listen("rowPositionChanged",this._onRowPositionChanged);var i=this.getGridApi(e);i&&i.listen("beforeRowRemoved",this._onBeforeRowRemoved),this.config(t),this._onMenuClicked&&this.applyStaticStyles(G._styleCalculator)}},G.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(e.unlisten("mousedown",this._onMouseDown),e.unlisten("copy",this._onCopy),e.unlisten("cut",this._onCopy),e.unlisten("click",this._onClick),e.unlisten("keydown",this._onKeyDown),e.unlisten("postSectionDataBinding",this._onPostSectionDataBinding),e.unlisten("rowPositionChanged",this._onRowPositionChanged),this._hosts.splice(t,1),this._hosts.length||this._timerId&&(clearTimeout(this._timerId),this._timerId=0,this._timerMenuId=0,this._pendingSelection=null),this._dispose())},G.prototype.config=function(e){if(e){var t=e.rowSelection;if(t){if("object"==typeof t){t.singleSelection&&(this._singleSelMode=!0),t.clickToggle&&(this._clickToggleMode=!0),t.basedOnContent&&(this._basedOnContent=!0),t.selectionField&&(this._selectionField=t.selectionField);var i=t.menuClicked;"function"==typeof i&&(this._onMenuClicked=i),(i=t.menuPosition)&&(this._menuPosition=i)}else"single"===t&&(this._singleSelMode=!0);this.addListener(t,"selectionChanged"),this.addListener(t,"beforeSelection")}else null!=t&&this.disable()}},G.prototype.getConfigObject=function(e){var t=e||{},i=t.rowSelection;return i||(i=t.rowSelection={}),this._singleSelMode&&(i.singleSelection=this._singleSelMode),this._clickToggleMode&&(i.clickToggle=this._clickToggleMode),this._basedOnContent&&(i.basedOnContent=this._basedOnContent),"SELECTED_ROW"!==this._selectionField&&(i.selectionField=this._selectionField),t},G.prototype.clearAllSelections=function(e,t){null==e&&(e=!0),this._clearSelectedRows(e),t&&(this._activeGrid=t)},G.prototype.clearSelectedRows=G.prototype.clearAllSelections,G.prototype.clearSelection=G.prototype.clearAllSelections,G.prototype.getActiveGrid=function(){return this._activeGrid},G.prototype.getRowAnchor=function(e){if(this._basedOnContent){var t=this._activeGrid?this._activeGrid.getDataSource():null;if(t&&this._anchorRowId)return t.getRowIndex(this._anchorRowId)}else{var i=this._getSection(e);if(i&&i.getRowAnchor)return i.getRowAnchor()}return-1},G.prototype.getFirstSelectedIndex=function(e){var t=this._getSection(e);if(t){if(this._basedOnContent){var i=this._activeGrid?this._activeGrid.getDataSource():null;if(!i)return null;for(var o,n=i.getVisibleRowIds(!0),r=i.getMultipleRowData(n),s=r.length,l=0;l=0;s--)if((o=this._rowGetter(r[s]))&&o[this._selectionField])return s;return null}return t.getLastSelectedRow()}return null},G.prototype.getSelectedRows=function(e){var t=this._getSection(e);if(t){if(this._basedOnContent){var i=this._activeGrid?this._activeGrid.getDataSource():null;if(!i)return null;for(var o,n=i.getVisibleRowIds(!0),r=i.getMultipleRowData(n),s=r.length,l=[],a=0;a=0))return!1;var o=i?this._activeGrid:null;o&&(this._clearSelectedRows(),this._activeGrid=i);var n=this._getSection(t);return this._selectSingleRow(n,e)?(this._scrollToRow(e),!0):(o&&(this._activeGrid=o),!1)},G.prototype.selectAllRows=function(e){if(e?this._activeGrid=e:this._activeGrid||(this._activeGrid=this._hosts[0]),this._activeGrid)for(var t=this._activeGrid.getAllSections("content"),i=t.length;--i>=0;)this._selectRowRange(null,null,t[i]),0==i&&(this._anchorSection=t[i]);this._updateMenuIcon()},G.prototype.selectRowRange=function(e,t,i,o){this._selectRowRange(e,t,i),o&&this._scrollToRow(e),this._updateMenuIcon()},G.prototype.disable=function(e){this._disabled=!1!==e},G.prototype.isEnabled=function(){return!this._disabled},G.prototype.disableMultiSelection=function(e){this._singleSelMode=!1!==e},G.prototype._onClick=function(e){if(this._pendingClickIndex>=0&&this._anchorSection){this._selectSingleRow(this._anchorSection,this._pendingClickIndex);var t=this.getRelativeGrid(e);this._clearPendingClickIndex(t),this._basedOnContent||this._updateMenuIcon(),this._dispatchSelectionChanged(e)}null!=this._activeGrid&&((this._isIE?document.selection.createRange().htmlText:window.getSelection().toString())||this._activeGrid.focus())},G.prototype.selectByMouse=function(e,t){var i=this._mockMouseEvent(0,e,t);this._onMouseDown(i)},G.prototype.selectByKey=function(e,t){var i=this._mockKeyboardEvent(e,t);this._onKeyDown(i)},G.prototype._onMouseDown=function(e){if(!this._disabled&&(2!==e.button||!e.shiftKey&&!e.ctrlKey)){var t=this.getRelativeGrid(e);if(this._clearPendingClickIndex(t),t){var i=t.getRelativePosition(e);if(i.hit&&"content"===i.sectionType){if(2===e.button){var o=this._getPlugin("ColumnSelectionPlugin");if(o&&o.isEnabled()&&o.isSelectedColumn(i.colIndex))return}var n=i.dataSource,r=i.rowIndex;if(this._basedOnContent)if(!this._getRow(n,r))return;if(!this._dispatchBeforeSelection(e,i)){var s=this._singleSelMode||!this._activeGrid||this._activeGrid!==t,l=i.section;if(s||(e.shiftKey?this._selectFromAnchorToTarget(l,r):e.ctrlKey&&!b||b&&!e.ctrlKey&&e.metaKey?this._sectionSetSelectedRow(l,r,!l.isSelectedRow(r)):s=!0),s){if(this._anchorSection=l,l.isSelectedRow(r))return void this._setPendingClickIndex(r,t);this._activeGrid!==t&&(this._clearSelectedRows(!0),this._activeGrid=t),this._selectSingleRow(this._anchorSection,r)}var a=t.getHiddenInput();if(a){this._textRange.setStart(a.parentNode,0),this._textRange.setEnd(a,0);var c=window.getSelection();c.removeAllRanges(),c.addRange(this._textRange),this._isIE&&t.getParent().focus()}this._basedOnContent||this._updateMenuIcon(),this._dispatchSelectionChanged(e,r,l)}}}}},G.prototype._onMouseMove=function(e){var t=this.getRelativeGrid(e);this._clearPendingClickIndex(t)},G.prototype._setPendingClickIndex=function(e,t){this._pendingClickIndex=e,t&&t.listen("mousemove",this._onMouseMove)},G.prototype._clearPendingClickIndex=function(e){this._pendingClickIndex=-1,e&&e.unlisten("mousemove",this._onMouseMove)},G.prototype._onKeyDown=function(e){if(this._activeGrid)switch(e.keyCode){case 33:this._selectByKey(-1,e,!0);break;case 34:case 35:this._selectByKey(1,e,!0);break;case 36:this._selectByKey(-1,e,!0);break;case 37:if(this._dispatchBeforeSelection(e))return;this._gotoPrevGrid()&&n.preventDefault(e);break;case 38:this._selectByKey(-1,e);break;case 39:if(this._dispatchBeforeSelection(e))return;this._gotoNextGrid()&&n.preventDefault(e);break;case 40:this._selectByKey(1,e)}},G.prototype._onBeforeRowRemoved=function(e){this._timerId||(this._pendingSelection=this.getFirstSelectedIndex(),this._timerId=setTimeout(this._onReselection,10))},G.prototype._onReselection=function(e){(this._timerId=0,null!=this._pendingSelection)&&(null==this.getFirstSelectedIndex()&&this.setSelectedRow(this._pendingSelection,!0));this._pendingSelection=null},G.prototype._onCopy=function(e){var t,i;e.clipboardData?(t=e.clipboardData,i="text/plain"):(t=window.clipboardData,i="Text");var o=this.getSelectedText();o&&t.setData(i,o),e.preventDefault()},G.prototype._onPostSectionDataBinding=function(e){if(this._basedOnContent&&"content"===e.sectionType&&this._activeGrid){var t=e.section,i=e.dataSource,o=this._selectionField;t.clearSelectedRows();for(var n=t.getFirstIndexInView(),r=t.getLastIndexInView(),s=n;s<=r;++s){var l=this._rowGetter(i.getRowDataAt(s));l&&l[o]&&t.setSelectedRow(s,!0)}this._updateMenuIcon()}},G.prototype._onRowPositionChanged=function(e){this._timerMenuId||e.sender&&e.sender===this._activeGrid&&(this._clearMenuIcon(),this._timerMenuId=setTimeout(this._updateMenuIcon,800))},G.prototype.getSelectedText=function(){if(!this._compositeGrid&&!this._realTimeGrid)return"";for(var e=this.getSelectedRows(),t=e.length,i=this.getColumnCount(),o="",n=this._activeGrid.getDataSource(),r=0;r0&&(o+="\t");var c=this._getField(a);o+=d(l[c])}}}return o},G.prototype._getSection=function(e){return this._activeGrid||(this._activeGrid=this._hosts[0],this._activeGrid&&(this._anchorSection=this._activeGrid.getSection("content"),this._anchorSection||(this._activeGrid=null))),e?this._activeGrid.getSection(e):(this._anchorSection&&(this._anchorSection.getElement()||(this._anchorSection=null)),this._anchorSection)},G.prototype._clearSelectedRows=function(e){if(this._activeGrid){if(this._basedOnContent){var t=this._activeGrid.getDataSource();if(t){var i=t.getDataSource();this._setColumnData(i,this._selectionField,!1)}}else for(var o=this._activeGrid.getAllSections("content"),n=o.length;--n>=0;)this._sectionClearSelectedRows(o[n],e);e||(this._anchorSection=null),this._clearPendingClickIndex(this._activeGrid),this._clearMenuIcon()}},G.prototype._selectByKey=function(e,t,i){if(t.preventDefault(),this._anchorSection){null!=this._activeGrid&&this._activeGrid.focus();var o=t.shiftKey,n=0,r=this._anchorSection.getRowCount()-1;if(i){var s=this._activeGrid.getVScrollView();-1===e?s&&(n=this.getFirstSelectedIndex(this._anchorSection)<=s.firstFullRow?s.prevPageRowIndex:s.firstFullRow):n=s?this.getLastSelectedIndex(this._anchorSection)>=s.lastFullRow?s.nextPageRowIndex:s.lastFullRow:r}else n=-1===e?this.getFirstSelectedIndex(this._anchorSection)+e:this.getLastSelectedIndex(this._anchorSection)+e;if(n<0){var l=this._getPlugin("ColumnSelectionPlugin");return!o&&l&&l.isEnabled()?(l.selectSingleColumn(null,this._activeGrid),void this.clearAllSelections()):void this._scrollToRow(0)}n>r?this._scrollToRow(r):this._dispatchBeforeSelection(t)||(o&&!this._singleSelMode?this._selectFromAnchorToTarget(this._anchorSection,n):this._selectSingleRow(this._anchorSection,n),this._scrollToRow(n),this._basedOnContent||this._updateMenuIcon(),this._dispatchSelectionChanged(t,n))}},G.prototype._sectionSetSelectedRow=function(e,t,i){if(this._basedOnContent){var o=this._activeGrid?this._activeGrid.getDataSource():null;if(o)this._getRow(o,t)&&(this._setData(o,t,this._selectionField,i),i&&(this._anchorRowId=o.getRowId(t)))}else e.setSelectedRow(t,i);this._pendingSelection=null},G.prototype._selectRangeOnSection=function(e,t,i){if(null==t&&(t=0),this._basedOnContent){var o=this._activeGrid?this._activeGrid.getDataSource():null;if(o){var n=o.getVisibleRowIds(!0);null==i&&(i=n.length);var r=t+i;r>n.length&&(r=n.length);for(var s=[],l=[],a=t;a=s.scrollViewSize&&(a=s.scrollViewSize)),this._menuButton.style.left=l+"px",this._menuButton.style.top=a+"px",!0},G.prototype._clearMenuIcon=function(){this._menuButton&&this._menuButton.parentNode&&this._menuButton.parentNode.removeChild(this._menuButton)},G.prototype._selectRowRange=function(e,t,i){var o=this._getSection(i);o&&this._selectRangeOnSection(o,e,t)},G.prototype._selectFromAnchorToTarget=function(e,t){if(this._anchorSection===e){var i=this.getRowAnchor(this._anchorSection);if(i!==t){this._clearSelectedRows(!0);var o=1,n=i,r=t-i;r<0&&(o=-1,n=t),this._selectRangeOnSection(e,n,r*o+1),!this._basedOnContent&&this._anchorSection.setRowAnchor&&this._anchorSection.setRowAnchor(i)}}},G.prototype._gotoPrevGrid=function(){if(!this._activeGrid)return!1;if(this._activeGrid===this._hosts[0])return!1;var e=this._hosts.indexOf(this._activeGrid);return e>0&&(this._gotoGrid(e-1),!0)},G.prototype._gotoNextGrid=function(){if(!this._activeGrid)return!1;var e=this._hosts.length-1;if(this._activeGrid===this._hosts[e])return!1;var t=this._hosts.indexOf(this._activeGrid);return t>=0&&(this._gotoGrid(t+1),!0)},G.prototype._gotoGrid=function(e){var t=this.getRowAnchor(this._anchorSection),i=this._anchorSection.getIndex();this.clearSelectedRows(),this.selectSingleRow(t,i,this._hosts[e]),null!=this._activeGrid&&this._activeGrid.focus()},G.prototype._scrollToRow=function(e){var t=this._hosts[0];t&&t.scrollToRow(null,e)},G.prototype._dispatchBeforeSelection=function(e,t){if(this.hasListener("beforeSelection")){if(!t){var i=this._activeGrid||this._hosts[0];t=i?i.getRelativePosition(e):{}}if(t.event=e,this._dispatch("beforeSelection",t),t.cancel)return!0}return!1},G.prototype._dispatchSelectionChanged=function(e,t,i){if(this._activeGrid){var o=this._getPlugin("ColumnSelectionPlugin");o&&o.isEnabled()&&o.clearSelection();var n=this._getPlugin("CellEditingPlugin");n&&n.closeCellEditor(),(n=this._getPlugin("InCellEditingPlugin"))&&n.closeCellEditor()}if(this.hasListener("selectionChanged")){var r={};r.selectedRows=this.getSelectedRows(),r.rowIndex=null!=t?t:this.getRowAnchor(this._anchorSection),r.section=null!=i?i:this._anchorSection,r.event=e,r.grid=this._activeGrid,this._dispatch("selectionChanged",r)}};!function(e,t){if(e&&t&&t.prototype.getName){var i=t.prototype.getName().replace(/Plugin$/,"");if(i){var o=e.tr;o||(o=e.tr={});var n=o.grid;n||(n=o.grid={}),n[i+"Plugin"]=t,o[i+"Extension"]=t}}}(window,G)}]); \ No newline at end of file diff --git a/book/en/node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js b/book/en/node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js index b6155149..6150f867 100644 --- a/book/en/node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js +++ b/book/en/node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js @@ -10659,7 +10659,7 @@ Recommended fix: /* harmony export */q: () => /* binding */VERSION /* harmony export */ }); - const VERSION = '7.3.2'; + const VERSION = '7.4.0'; /***/ }, @@ -10789,7 +10789,7 @@ Recommended fix: dispatchEvent(new CustomEvent('ef.nativeStyles.define', { detail: { name: 'html', - styles: 'html{height:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;--color-scheme-primary:#334BFF;--color-scheme-secondary:#6678FF;--color-scheme-tertiary:#FAFAFA;--color-scheme-complementary:#0D0D0D;--color-scheme-negative:#B63243;--color-scheme-neutral:#404040;--color-scheme-positive:#246B3E;--color-scheme-tickup:#246B3E;--color-scheme-tickdown:#B63243;--color-scheme-ticktext:#FFFFFF;scrollbar-width:auto;--theme-name:\'halo-theme\';--theme-version:\'7.0.3\'}html[movement-color-profile=asian1]{--color-scheme-negative:#246B3E;--color-scheme-neutral:#404040;--color-scheme-positive:#B63243;--color-scheme-tickup:#B63243;--color-scheme-tickdown:#246B3E}html[movement-color-profile=asian2],html[movement-color-profile=european]{--color-scheme-negative:#B63243;--color-scheme-neutral:#246B3E;--color-scheme-positive:#334BFF;--color-scheme-tickup:#246B3E;--color-scheme-tickdown:#B63243}::-moz-selection{color:#fff;background:#334bff}::selection{color:#fff;background:#334bff}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #fff;border-bottom:1px solid #fff}::-webkit-scrollbar-track:vertical{border-left:1px solid #fff;border-right:1px solid #fff}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:none;border:1px solid #fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #fff}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#fff}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#fff}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#fff}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#fff}' + styles: 'html{height:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;--color-scheme-primary:#334BFF;--color-scheme-secondary:#6678FF;--color-scheme-tertiary:#FAFAFA;--color-scheme-complementary:#0D0D0D;--color-scheme-negative:#B63243;--color-scheme-neutral:#404040;--color-scheme-positive:#246B3E;--color-scheme-tickup:#246B3E;--color-scheme-tickdown:#B63243;--color-scheme-ticktext:#FFFFFF;scrollbar-width:auto;--theme-name:\'halo-theme\';--theme-version:\'7.0.4\'}html[movement-color-profile=asian1]{--color-scheme-negative:#246B3E;--color-scheme-neutral:#404040;--color-scheme-positive:#B63243;--color-scheme-tickup:#B63243;--color-scheme-tickdown:#246B3E}html[movement-color-profile=asian2],html[movement-color-profile=european]{--color-scheme-negative:#B63243;--color-scheme-neutral:#246B3E;--color-scheme-positive:#334BFF;--color-scheme-tickup:#246B3E;--color-scheme-tickdown:#B63243}::-moz-selection{color:#fff;background:#334bff}::selection{color:#fff;background:#334bff}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #fff;border-bottom:1px solid #fff}::-webkit-scrollbar-track:vertical{border-left:1px solid #fff;border-right:1px solid #fff}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:none;border:1px solid #fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #fff}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#fff}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#fff}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#fff}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#fff}' } })); @@ -32090,924 +32090,6 @@ Recommended fix: /* harmony default export */ const es6_Deferred = /* unused pure expression or super */null && Deferred; - ; // CONCATENATED MODULE: ./node_modules/@refinitiv-ui/efx-grid/lib/tr-grid-util/es6/GridPlugin.js - - /** This class is designed to be a base class for other tr.Grid plug-ins. It provide commonly used functionalities by the plug-ins. - * @constructor - * @extends {EventDispatcher} - * @example - * import {Ext} from "../../node_modules/tr-grid-util/src/Ext.js"; - * import {GridPlugin} from "../../node_modules/tr-grid-util/src/GridPlugin.js"; - * - * var SomePlugin = function() {}; - * Ext.inherits(SomePlugin, GridPlugin); - */ - var GridPlugin = function () {}; - Ext.inherits(GridPlugin, EventDispatcher); - - /** @type {Array.} - * @protected - * @ignore - */ - GridPlugin.prototype._hosts = null; - /** This is for backward compatible with tr.CompositeGrid - * @type {tr.CompositeGrid} - * @protected - * @ignore - */ - GridPlugin.prototype._compositeGrid = null; - /** @type {tr.rt.Grid} - * @protected - * @ignore - */ - GridPlugin.prototype._realTimeGrid = null; - /** @type {Function} - * @protected - * @ignore - */ - GridPlugin.prototype._rowGetter = null; - /** Indicates that columns, rows, and components in the primary grid have been initialized - * @type {boolean} - * @protected - * @ignore - */ - GridPlugin.prototype._initializedGrid = false; - - /** Alias to {@link EventDispatcher#addEventListener} - * @public - * @function - * @param {string} type Event name - * @param {Function} handler Event handler - */ - GridPlugin.prototype.listen = GridPlugin.prototype.addEventListener; - /** Alias to {@link EventDispatcher#removeEventListener} - * @public - * @function - * @param {string} type Event name - * @param {Function} handler Event handler - */ - GridPlugin.prototype.unlisten = GridPlugin.prototype.removeEventListener; - - /** This is for Composite Grid support. Do NOT override this method. Use protected _afterInit() instead. - * @public - * @param {Element=} elem Root element - * @param {Object=} model Composite grid object model - * @param {tr.CompositeGrid=} grid Composite grid control - */ - GridPlugin.prototype.afterInit = function (elem, model, grid) { - var core = null; - if (grid && grid["getCoreGrid"]) { - core = grid["getCoreGrid"](); - } - if (core) { - if (!this.getGridApi()) { - this.setGridWrapper("compositegrid", grid); // Plugin is loaded in afterInit for composite grid - } - - if (this._compositeGrid) { - core.loadPlugin(this, model); // Allow sharing extension/plugin - } - } - - if (!this._initializedGrid) { - // Calling _afterInit only once per extension/plugin - this._initializedGrid = true; - this._rowGetter = this._realTimeGrid ? rowDefRowGetter : defaultRowGetter; - this._afterInit(); - } - }; - /** This method guarantees that grid (host) and config have been set. It should be used to update any setting that requires different implementation between Composite grid and Real-time grid - * @protected - * @ignore - */ - GridPlugin.prototype._afterInit = function () {}; - - /** This method is meant to be used by a derived class to release any resource hold by GridPlugin. Do not override this method. - * @protected - * @ignore - */ - GridPlugin.prototype._dispose = function () { - if (this._hosts) { - if (!this._hosts.length) { - this._compositeGrid = this._realTimeGrid = null; - this._initializedGrid = false; - } - } - }; - - /** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables. - * @public - * @return {boolean} - */ - GridPlugin.prototype.hasMultiTableSupport = function () { - return false; - }; - - /** Executed before dispatching, allowing modification of user's event argument object. - * @protected - * @ignore - * @param {string} type Event name - * @param {Object} eventArg User's event argument object - * @return {Object} New event argument object - */ - GridPlugin.prototype._prepareEventArguments = function (type, eventArg) { - if (!eventArg) { - eventArg = {}; - } - eventArg.api = this.getGridApi(); - return eventArg; - }; - - /** Get plugin/extension name. This should be unique as it will be used for duplicate protection. Derived class must override this method. - * @public - * @return {string} - */ - GridPlugin.prototype.getName = function () { - return "GridPlugin"; // Readonly - }; - /** This is the entry point where Core grid instance has been initialized and grid configuration object is passed to the extension. Derived class should override this method to keep reference of Core grid for later referencing. - * @public - * @param {tr.Grid} host Core grid instance - * @param {Object=} gridOptions Grid configuration object - */ - GridPlugin.prototype.initialize = function (host, gridOptions) {}; - /** This is where Core grid instance is being disposed. Derived class should override this method to release any resource hold by this plugin/extension, if the last core grid is being disposed (there will be multiple instances for multi-table mode). - * @public - * @param {tr.Grid=} host Core grid instance - */ - GridPlugin.prototype.unload = function (host) { - this._dispose(); - }; - - /** Get Core grid instance from the given object (usually an Event Argument object). - * @public - * @param {Event|Element|tr.IElementControl} e - * @return {tr.Grid} - */ - GridPlugin.prototype.getRelativeGrid = function (e) { - var targetEl = null; - if (e.target) { - // The Given object is an Event - targetEl = /** @type{Element} */e.target; - var gridAPI = targetEl["api"]; - if (gridAPI && gridAPI["getCoreGrid"]) { - return (/** @type{tr.Grid} */gridAPI["getCoreGrid"]() - ); - } - } else if (e["getElement"]) { - // The Given object is implementing tr.IElementControl - targetEl = /** @type{Element} */e["getElement"](); - } else if (e.nodeType === 1) { - // The Given object is just an element - targetEl = /** @type{Element} */e; - } - if (targetEl) { - for (var i = this._hosts.length; --i >= 0;) { - var host = this._hosts[i]; - if (host.getElement().contains(targetEl)) { - return host; - } - } - } - return null; - }; - - /** @public - * @param {string} gridType - * @param {*} wrapperInstance - */ - GridPlugin.prototype.setGridWrapper = function (gridType, wrapperInstance) { - if (gridType) { - gridType = gridType.toLowerCase(); - if (gridType === "compositegrid") { - this._compositeGrid = wrapperInstance; - } else if (gridType === "realtimegrid") { - this._realTimeGrid = wrapperInstance; - } - } - }; - /** Get JavaScript wrapper instance. This could be either composite grid or real-time grid. - * @public - * @param {(number|Object)=} coreRef An index of the core grid or an instance of the core grid - * @return {*} wrapperInstance - */ - GridPlugin.prototype.getGridApi = function (coreRef) { - if (coreRef == null) { - return this._compositeGrid || this._realTimeGrid; - } else { - var host = typeof coreRef == "number" ? this._hosts[coreRef] : coreRef; - return host ? host._wrapper || null : null; - } - }; - - /** Get user specified column label (e.g. name) or field, if name does not exist - * @public - * @param {number|string} colRef Column index or column Id - * @return {string} - */ - GridPlugin.prototype.getColumnName = function (colRef) { - if (this._compositeGrid) { - var colOptions = this._compositeGrid.getColumnModel(colRef); - if (colOptions) { - if (colOptions.title) { - return colOptions.title; - } else { - return colOptions.field; - } - } - } else { - var colIndex = this.getColumnIndex(colRef); - var colDef = this._realTimeGrid.getColumnDefinition(colIndex); - if (colDef) { - return colDef.getName(); - } - } - return ""; - }; - /** @public - * @param {number|string} colRef Column id, field name or column index - * @return {number} - */ - GridPlugin.prototype.getColumnIndex = function (colRef) { - // TODO: Unify the below logics - if (typeof colRef === "number") { - return colRef; - } - if (this._compositeGrid) { - var allFields = this._compositeGrid.getColumnFields(); - var colIndex = allFields.indexOf(colRef); - if (colIndex > -1) { - return colIndex; - } else { - return this._compositeGrid.getColumnIndex(colRef); - } - } else { - return this._realTimeGrid.getColumnIndex(colRef); - } - }; - /** @public - * @param {Array.} colRefs A collection of column ids, field names or column indices - * @return {Array.} column indices - */ - GridPlugin.prototype.getColumnIndices = function (colRefs) { - var api = this.getGridApi(); - if (api.getColumnIndices) { - return api.getColumnIndices(colRefs); - } - - // TODO: Unify the below logics - if (this._compositeGrid) { - var allFields = this._compositeGrid.getColumnFields(); - var columnCount = this._compositeGrid.getColumnCount(); - var columnIndices = []; - var colRef; - for (var i = 0; i < colRefs.length; i++) { - colRef = colRefs[i]; - if (typeof colRef === 'number') { - // When user pass index - if (colRef >= 0 && colRef < columnCount) { - columnIndices.push(colRef); - } - } else { - var columnIndex = allFields.indexOf(colRef); // Looping check column index of colRefs field - if (columnIndex !== -1) { - columnIndices.push(columnIndex); - } - } - } - return columnIndices; - } else { - return this._realTimeGrid.getColumnIndices(colRefs); - } - }; - /** @public - * @param {number|string} colIndex Column index or column Id - * @return {string} - */ - GridPlugin.prototype.getColumnId = function (colIndex) { - // TODO: Unify the below logics - if (typeof colIndex === "string") { - return colIndex; - } - var colCount = this.getColumnCount(); - if (colIndex < 0 || colIndex >= colCount) { - // Avoid creating undesired column definitions in Core Grid. - return ""; - } - if (this._compositeGrid) { - return this._compositeGrid.getColumnId(colIndex); - } else { - var colDef = this._realTimeGrid.getColumnDefinition(colIndex); - if (colDef) { - return colDef.getId(); - } - } - return ""; - }; - /** @public - * @return {!Array.} Return all column ids from existing column - */ - GridPlugin.prototype.getColumnIds = function () { - if (this._hosts && this._hosts.length) { - return this._hosts[0].getColumnIds(); - } - return []; - }; - /** @public - * @param {number} colIndex - * @return {string} Return empty string if the specified column does not exist - */ - GridPlugin.prototype.getColumnField = function (colIndex) { - if (this._hosts && this._hosts.length) { - return this._hosts[0].getColumnField(colIndex); - } - return ""; - }; - /** @public - * @return {!Array.} Return all column fields from existing column - */ - GridPlugin.prototype.getColumnFields = function () { - if (this._hosts && this._hosts.length) { - return this._hosts[0].getColumnFields(); - } - return []; - }; - /** @public - * @return {number} - */ - GridPlugin.prototype.getColumnCount = function () { - if (this._hosts) { - var g = this._hosts[0]; - return g ? g.getColumnCount() : 0; - } - return 0; - }; - /** @protected - * @ignore - * @param {number|string} srcCol Column Id or index - * @param {(number|string)=} destCol Column Id or index of the destination - * @return {boolean} - */ - GridPlugin.prototype._moveColumnById = function (srcCol, destCol) { - var hosts = this._hosts; - var len = hosts ? hosts.length : 0; - if (len) { - var dirty = 0; - for (var i = 0; i < len; ++i) { - dirty |= hosts[i].moveColumnById(srcCol, destCol); - } - return dirty ? true : false; - } - return false; - }; - /** @protected - * @ignore - * @param {number|string|Array.} colRefs List of column index or column id to be moved - * @param {(number|string)=} destCol Destination position where the moved columns will be placed BEFORE the specified position. This can be column id or index - * @return {boolean} Return true if there is any change, and false otherwise - */ - GridPlugin.prototype._reorderColumns = function (colRefs, destCol) { - var hosts = this._hosts; - var len = hosts ? hosts.length : 0; - if (len) { - var dirty = 0; - for (var i = 0; i < len; ++i) { - dirty |= hosts[i].reorderColumns(colRefs, destCol); - } - return dirty ? true : false; - } - return false; - }; - - /** @protected - * @deprecated - * @ignore - * @param {*} curPlugin - * @param {tr.Grid} host - * @param {string} pluginName - * @return {*} curPlugin - */ - GridPlugin.prototype._loadPlugin = function (curPlugin, host, pluginName) { - if (!curPlugin) { - curPlugin = host.getPlugin(pluginName); - if (!curPlugin) { - curPlugin = host.loadPlugin(pluginName); - if (curPlugin && this._initializedGrid) { - curPlugin._initializedGrid = true; // WARNING: Accessing private member - } - } - } - - return curPlugin; - }; - /** WARNING: Call this method only in _afterInit method to ensure existence of composite grid and real-time grid - * @protected - * @ignore - * @param {tr.Grid} host - * @param {*} pluginRef - * @param {Object=} configObj - * @return {Promise} - */ - GridPlugin.prototype._requestPlugin = function (host, pluginRef, configObj) { - if (this._initializedGrid) { - return GridPlugin.requestPlugin(host, pluginRef, configObj, this._compositeGrid, this._realTimeGrid); - } - return Promise.reject("Plugin should be requested after the initialization"); - }; - /** Make a request to load a plugin/extension into the given core grid (tr-grid). Return a promise of plugin/extension instance - * @public - * @param {*} ref This can be ef-grid, atlas-blotter, composite grid, real-time grid, or core grid. - * @param {*} pluginRef Plugin/Extension name or instance - * @param {Object=} configObj - * @param {*=} compositeGrid - * @param {*=} realTimeGrid - * @return {Promise} - */ - GridPlugin.requestPlugin = function (ref, pluginRef, configObj, compositeGrid, realTimeGrid) { - var core = null; - if (ref) { - var gridWrapper = null; - if (ref.nodeType === 1) { - // This is an element - // TODO: Support delayed resolving - gridWrapper = ref.api; // Grid element must already be initialized and configured - } else if (ref.getCoreGrid) { - gridWrapper = ref; - } else if (ref.getPlugin) { - core = ref; - } - if (gridWrapper) { - core = gridWrapper.getCoreGrid(); - if (!compositeGrid && !realTimeGrid) { - if (gridWrapper.getModel) { - compositeGrid = gridWrapper; - } else { - realTimeGrid = gridWrapper; - } - } - } - } - if (!core) { - return Promise.reject("Cannot find grid element"); - } - var curPlugin = core.getPlugin(pluginRef); - if (curPlugin) { - return Promise.resolve(curPlugin); - } else { - var d = new Deferred(); - setTimeout(GridPlugin._onPluginRequested.bind(null, { - grid: core, - pluginRef: pluginRef, - compositeGrid: compositeGrid, - realTimeGrid: realTimeGrid, - config: configObj, - deferred: d - }), 10); - return d.promise; - } - }; - /** @private - * @param {Object} ctx - * @return {Promise.<*>} Promise of plugin object - */ - GridPlugin._onPluginRequested = function (ctx) { - var grid = ctx.grid; - if (!grid.getElement()) { - return ctx.deferred.reject("Grid has been disposed before the plugin is fully loaded: " + ctx.pluginRef); - } - var curPlugin = grid.getPlugin(ctx.pluginRef); - if (curPlugin) { - return ctx.deferred.resolve(curPlugin); - } - var beforeInitPerformed = false; - if (ctx.pluginRef.beforeInit) { - // WARNING: beforeInit is usually performed before the actual loading - beforeInitPerformed = true; - ctx.pluginRef.beforeInit(grid.getElement(), ctx.config, true); - } - curPlugin = grid.loadPlugin(ctx.pluginRef, ctx.config); - if (!curPlugin) { - return ctx.deferred.reject("Unable to load required dependency: " + ctx.pluginRef); - } - if (!beforeInitPerformed && curPlugin.beforeInit) { - // WARNING: beforeInit is usually performed before the actual loading - beforeInitPerformed = true; - curPlugin.beforeInit(grid.getElement(), ctx.config); - } - if (curPlugin.setGridWrapper) { - if (ctx.compositeGrid) { - curPlugin.setGridWrapper("compositegrid", ctx.compositeGrid); - } else if (ctx.realTimeGrid) { - curPlugin.setGridWrapper("realtimegrid", ctx.realTimeGrid); - } - } - if (curPlugin.afterInit) { - curPlugin.afterInit(); - } - return ctx.deferred.resolve(curPlugin); - }; - /** @protected - * @ignore - * @param {string} pluginName - * @param {tr.Grid=} grid - * @return {*} - */ - GridPlugin.prototype._getPlugin = function (pluginName, grid) { - if (grid == null) { - grid = this._hosts[0]; - } - return grid ? grid.getPlugin(pluginName) : null; - }; - - /** @protected - * @ignore - * @param {number} colIndex - * @param {tr.Grid=} grid - * @return {Object} - */ - GridPlugin.prototype._getColumnData = function (colIndex, grid) { - if (grid == null) { - grid = this._hosts[0]; - } - return grid ? grid.getColumnData(colIndex) : null; - }; - /** @protected - * @ignore - * @param {number} colIndex - * @param {string} prop - * @param {tr.Grid=} grid - * @return {*} - */ - GridPlugin.prototype._getColumnOption = function (colIndex, prop, grid) { - var colData = this._getColumnData(colIndex, grid); - if (colData) { - return colData[prop]; - } - return null; - }; - /** @protected - * @ignore - * @param {number} colIndex - * @param {tr.Grid=} grid - * @return {!Object} - */ - GridPlugin.prototype._newColumnData = function (colIndex, grid) { - if (grid == null) { - grid = this._hosts[0]; - } - if (!grid) { - return {}; - } - var colData = grid.getColumnData(colIndex); - if (!colData) { - colData = grid.setColumnData(colIndex, {}); - } - return colData; - }; - /** @protected - * @ignore - * @param {number} colIndex - * @return {string} - */ - GridPlugin.prototype._getField = function (colIndex) { - var gridInst = this._compositeGrid || this._realTimeGrid; - if (gridInst) { - return gridInst.getColumnField(colIndex); - } - return ""; - }; - /** Note that this method is quite misleading and not consistent with other API method. Please avoid using it. We will deprecate this in the future.
                                                          - * Use _rowGetter instead - * @protected - * @ignore - * @deprecated - * @param {Object} dvRowData { "a": 10, "c": 21 } - * @return {Object} - */ - GridPlugin.prototype._getRowData = function (dvRowData) { - if (this._realTimeGrid) { - if (dvRowData) { - return dvRowData["ROW_DEF"].getRowData(); - } - } - return dvRowData; - }; - /** @protected - * @ignore - * @param {tr.DataView} dv - * @param {number} rowIndex - * @return {Object} dvRowData - */ - GridPlugin.prototype._getRow = function (dv, rowIndex) { - return rowGetter(dv.getRowDataAt(rowIndex)); - }; - /** @protected - * @ignore - * @param {tr.DataView} dv - * @param {number} rowIndex - * @param {string} field - * @return {*} - */ - GridPlugin.prototype._getData = function (dv, rowIndex, field) { - var row = this._getRow(dv, rowIndex); - return row ? row[field] : undefined; // eslint-disable-line - }; - /** @protected - * @ignore - * @param {tr.DataView|tr.DataTable} dv - * @param {number|string} rowRef Row index or row id - * @param {string} field - * @param {*} val - */ - GridPlugin.prototype._setData = function (dv, rowRef, field, val) { - if (this._realTimeGrid) { - var rowDef = _toRowDef(dv, rowRef); - if (rowDef) { - rowDef.setData(field, val); - } - } else { - if (typeof rowRef === "number") { - dv.setDataAt(rowRef, field, val); - } else { - dv.setData(rowRef, field, val); - } - } - }; - /** @protected - * @ignore - * @param {tr.DataView|tr.DataTable} dv - * @param {number|string} rowRef Row index or row id - * @param {Object} rowData - */ - GridPlugin.prototype._setRowData = function (dv, rowRef, rowData) { - if (this._realTimeGrid) { - var rowDef = _toRowDef(dv, rowRef); - if (rowDef) { - rowDef.setRowData(rowData); - } - } else { - if (typeof rowRef === "number") { - dv.setRowDataAt(rowRef, rowData); - } else { - dv.setRowData(rowRef, rowData); - } - } - }; - /** @protected - * @ignore - * @param {tr.DataView|tr.DataTable} dv - * @param {number|string} rowRef Row index or row id - * @param {string} field - * @param {*} value - */ - GridPlugin.prototype._setStaticData = function (dv, rowRef, field, value) { - if (this._realTimeGrid) { - var rowDef = _toRowDef(dv, rowRef); - if (rowDef) { - rowDef.setStaticData(field, value); - } - } else { - // TODO: composite grid should be has staticValues when get configObject, wait for request feature - this._setData(dv, rowRef, field, value); - } - }; - - /** Set data in a column manner. This is faster than repeatedly calling this._setData - * @protected - * @ignore - * @param {tr.DataView|tr.DataTable} dv - * @param {string} cid - * @param {*} valueList - * @param {Array.=} ridList Specify row id to be set corresponding to the data item - * @example - * this._setColumnData(dv, "column 1", ["data1", "data2", "data3"]); - * this._setColumnData(dv, "column 1", 10, ["rowId1", "rowId2]); - */ - GridPlugin.prototype._setColumnData = function (dv, cid, valueList, ridList) { - // Data changed event may be dispatched - if (!cid) { - return; - } - var rids = Array.isArray(ridList) ? ridList : dv.getAllRowIds(true); - var rowCount = rids ? rids.length : 0; - if (!rowCount) { - return; - } - if (rowCount === 1) { - this._setData(dv, rids[0], cid, Array.isArray(valueList) ? valueList[0] : valueList); - return; - } - var vals = Array.isArray(valueList) ? valueList : rids.map(function () { - return valueList; - }); - if (this._realTimeGrid) { - for (var i = 0; i < rowCount; ++i) { - var dvRowData = dv.getRowData(rids[i]); - if (dvRowData) { - var rowDef = dvRowData["ROW_DEF"]; - if (rowDef) { - // WARNING: This does not trigger dataChanged and dataComposed on the DataCache - rowDef.getRowData()[cid] = vals[i]; - } - } - } - if (!dv.dispatchGlobalChange) { - dv = dv.getDataSource(); // Get DataTable - } - // Force rendering by dispatching global change - if (dv && dv.dispatchGlobalChange) { - dv.dispatchGlobalChange(); - } - } else { - dv.setColumnData(cid, vals, rids); - } - }; - - /** @protected - * @ignore - * @param {number} colIndex - * @param {string=} id - * @param {Function=} renderer - */ - GridPlugin.prototype._activateColumnRenderer = function (colIndex, id, renderer) { - // TODO: Support multiple Grids - if (colIndex == null) { - return; - } - var rtGrid = this._realTimeGrid; - if (rtGrid) { - rtGrid.activateColumnRenderer(colIndex, id, renderer); - } else { - if (typeof renderer === "function") { - this._hosts[0].setColumnDataBindingHandler(colIndex, renderer); - } else { - this._hosts[0].setColumnDataBindingHandler(colIndex, null); - } - } - }; - - /** @private - * @param {number=} colIndex - * @param {number=} rowIndex - * @param {Object=} context - * @return {!Object} - */ - GridPlugin.prototype._mockMouseEvent = function (colIndex, rowIndex, context) { - if (colIndex == null) { - colIndex = 0; - } - if (rowIndex == null) { - rowIndex = 0; - } - var evt = context ? context : {}; - if (colIndex >= 0 && rowIndex >= 0) { - var grid = this._activeGrid || this._hosts[0]; - var cell = grid ? grid.getCell(evt.sectionType || "content", colIndex, rowIndex) : null; - evt.target = cell ? cell.getElement() : null; - } - return evt; - }; - var keyMap = { - "left": 37, - "right": 39, - "up": 38, - "down": 40, - "tab": 9 - }; - - /** @private - * @param {number|string} keyCode - * @param {Object=} context - * @return {!Object} - */ - GridPlugin.prototype._mockKeyboardEvent = function (keyCode, context) { - var evt = context ? context : {}; - evt.preventDefault = function () {}; - evt.stopPropagation = function () {}; - if (typeof keyCode === "string") { - keyCode = keyCode.toLowerCase(); - keyCode = keyMap[keyCode]; - } - evt.keyCode = keyCode; - return evt; - }; - /** Export the plugin to the given object by attaching it to tr and tr.grid namespaces - * @public - * @function - * @param {Window|Object} winObj - * @param {GridPlugin} plugin - * @example - * import {exportExtension} from "../node_modules/tr-grid-util/src/GridPlugin.js"; - * import {SomePlugin} from "./js/SomePlugin.js"; - * exportExtension(window, SomePlugin); - * console.log(tr.grid.SomePlugin); // tr.grid.SomePlugin is added to window scope - * console.log(tr.SomeExtension); // tr.SomeExtension is added to window scope - */ - var exportExtension = function (winObj, plugin) { - if (!winObj || !plugin) { - return; - } - if (!plugin.prototype["getName"]) { - return; - } - var pluginName = plugin.prototype["getName"]().replace(/Plugin$/, ""); - if (!pluginName) { - return; - } - var trNamespace = winObj["tr"]; // For supporting composite grid extension scheme - if (!trNamespace) { - trNamespace = winObj["tr"] = {}; - } - var gridNamespace = trNamespace["grid"]; // For supporting grid plugin scheme - if (!gridNamespace) { - gridNamespace = trNamespace["grid"] = {}; - } - gridNamespace[pluginName + "Plugin"] = plugin; - trNamespace[pluginName + "Extension"] = plugin; - }; - - /** @private - * @function - * @param {tr.DataView|tr.DataTable} dv - * @param {number|string} rowRef Row index or row id - * @return {*} RowDefinition instance - */ - var _toRowDef = function (dv, rowRef) { - var dvRowData = typeof rowRef === "number" ? dv.getRowDataAt(rowRef) : dv.getRowData(rowRef); - if (dvRowData) { - return dvRowData["ROW_DEF"] || null; - } - return null; - }; - - /** @public - * @function - * @param {string} field - * @param {Object} dvRowData Row data from tr.DataView - * @return {*} Data value returned from the specified row and field - */ - var defaultDataGetter = function (field, dvRowData) { - return dvRowData[field]; - }; - /** @public - * @function - * @param {string} field - * @param {Object} dvRowData Row data from tr.DataView - * @return {*} Data value returned from the specified row and field - */ - var rowDefDataGetter = function (field, dvRowData) { - var rowData = dvRowData["ROW_DEF"].getRowData(); - return rowData ? rowData[field] : null; - }; - /** @public - * @function - * @param {Object} dvRowData - * @return {Object} Row data Nothing is changed - */ - var defaultRowGetter = function (dvRowData) { - return dvRowData; - }; - /** @public - * @function - * @param {Object} dvRowData Row data from tr.DataView - * @return {Object} Row data - */ - var rowDefRowGetter = function (dvRowData) { - return dvRowData ? dvRowData["ROW_DEF"].getRowData() : null; - }; - /** This is slower version of row getter. It is intended for ease of use. - * @public - * @function - * @param {Object} dvRowData Row data from tr.DataView - * @return {Object} Row data - */ - var rowGetter = function (dvRowData) { - if (dvRowData) { - var rowDef = dvRowData["ROW_DEF"]; - return rowDef ? rowDef.getRowData() : dvRowData; - } - return null; - }; - - /** @public - * @function - * @param {string} field - * @param {tr.DataTable} dt - * @return {!Array.} Array of row data - */ - var colDataGetter = function (field, dt) { - var rowDefs = dt.getAllRowData(); - var rowCount = rowDefs.length; - var rows = new Array(rowCount); - for (var i = 0; i < rowCount; ++i) { - // WARNING: No data checking - rows[i] = rowDefDataGetter(field, rowDefs[i]); - } - return rows; - }; - - /* harmony default export */ - const es6_GridPlugin = /* unused pure expression or super */null && GridPlugin; ; // CONCATENATED MODULE: ./node_modules/@refinitiv-ui/efx-grid/lib/tr-grid-util/es6/Util.js /** @namespace */ var Util = {}; @@ -34261,6 +33343,1012 @@ Recommended fix: /* harmony default export */ const es6_ElfUtil = ElfUtil; + ; // CONCATENATED MODULE: ./node_modules/@refinitiv-ui/efx-grid/lib/tr-grid-util/es6/GridPlugin.js + + /** This class is designed to be a base class for other tr.Grid plug-ins. It provide commonly used functionalities by the plug-ins. + * @constructor + * @extends {EventDispatcher} + * @example + * import {Ext} from "../../node_modules/tr-grid-util/src/Ext.js"; + * import {GridPlugin} from "../../node_modules/tr-grid-util/src/GridPlugin.js"; + * + * var SomePlugin = function() {}; + * Ext.inherits(SomePlugin, GridPlugin); + */ + var GridPlugin = function () {}; + Ext.inherits(GridPlugin, EventDispatcher); + + /** @type {Array.} + * @protected + * @ignore + */ + GridPlugin.prototype._hosts = null; + /** This is for backward compatible with tr.CompositeGrid + * @type {tr.CompositeGrid} + * @protected + * @ignore + */ + GridPlugin.prototype._compositeGrid = null; + /** @type {tr.rt.Grid} + * @protected + * @ignore + */ + GridPlugin.prototype._realTimeGrid = null; + /** @type {Function} + * @protected + * @ignore + */ + GridPlugin.prototype._rowGetter = null; + /** Indicates that columns, rows, and components in the primary grid have been initialized + * @type {boolean} + * @protected + * @ignore + */ + GridPlugin.prototype._initializedGrid = false; + + /** Alias to {@link EventDispatcher#addEventListener} + * @public + * @function + * @param {string} type Event name + * @param {Function} handler Event handler + */ + GridPlugin.prototype.listen = GridPlugin.prototype.addEventListener; + /** Alias to {@link EventDispatcher#removeEventListener} + * @public + * @function + * @param {string} type Event name + * @param {Function} handler Event handler + */ + GridPlugin.prototype.unlisten = GridPlugin.prototype.removeEventListener; + + /** This is for Composite Grid support. Do NOT override this method. Use protected _afterInit() instead. + * @public + * @param {Element=} elem Root element + * @param {Object=} model Composite grid object model + * @param {tr.CompositeGrid=} grid Composite grid control + */ + GridPlugin.prototype.afterInit = function (elem, model, grid) { + var core = null; + if (grid && grid["getCoreGrid"]) { + core = grid["getCoreGrid"](); + } + if (core) { + if (!this.getGridApi()) { + this.setGridWrapper("compositegrid", grid); // Plugin is loaded in afterInit for composite grid + } + + if (this._compositeGrid) { + core.loadPlugin(this, model); // Allow sharing extension/plugin + } + } + + if (!this._initializedGrid) { + // Calling _afterInit only once per extension/plugin + this._initializedGrid = true; + this._rowGetter = this._realTimeGrid ? rowDefRowGetter : defaultRowGetter; + this._afterInit(); + } + }; + /** This method guarantees that grid (host) and config have been set. It should be used to update any setting that requires different implementation between Composite grid and Real-time grid + * @protected + * @ignore + */ + GridPlugin.prototype._afterInit = function () {}; + + /** This method is meant to be used by a derived class to release any resource hold by GridPlugin. Do not override this method. + * @protected + * @ignore + */ + GridPlugin.prototype._dispose = function () { + if (this._hosts) { + if (!this._hosts.length) { + this._compositeGrid = this._realTimeGrid = null; + this._initializedGrid = false; + } + } + }; + + /** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables. + * @public + * @return {boolean} + */ + GridPlugin.prototype.hasMultiTableSupport = function () { + return false; + }; + + /** Executed before dispatching, allowing modification of user's event argument object. + * @protected + * @ignore + * @param {string} type Event name + * @param {Object} eventArg User's event argument object + * @return {Object} New event argument object + */ + GridPlugin.prototype._prepareEventArguments = function (type, eventArg) { + if (!eventArg) { + eventArg = {}; + } + eventArg.api = this.getGridApi(); + return eventArg; + }; + + /** Get plugin/extension name. This should be unique as it will be used for duplicate protection. Derived class must override this method. + * @public + * @return {string} + */ + GridPlugin.prototype.getName = function () { + return "GridPlugin"; // Readonly + }; + /** This is the entry point where Core grid instance has been initialized and grid configuration object is passed to the extension. Derived class should override this method to keep reference of Core grid for later referencing. + * @public + * @param {tr.Grid} host Core grid instance + * @param {Object=} gridOptions Grid configuration object + */ + GridPlugin.prototype.initialize = function (host, gridOptions) {}; + /** This is where Core grid instance is being disposed. Derived class should override this method to release any resource hold by this plugin/extension, if the last core grid is being disposed (there will be multiple instances for multi-table mode). + * @public + * @param {tr.Grid=} host Core grid instance + */ + GridPlugin.prototype.unload = function (host) { + this._dispose(); + }; + + /** Get Core grid instance from the given object (usually an Event Argument object). + * @public + * @param {Event|Element|tr.IElementControl} e + * @return {tr.Grid} + */ + GridPlugin.prototype.getRelativeGrid = function (e) { + var targetEl = null; + if (e.target) { + // The Given object is an Event + targetEl = /** @type{Element} */e.target; + var gridAPI = targetEl["api"]; + if (gridAPI && gridAPI["getCoreGrid"]) { + return (/** @type{tr.Grid} */gridAPI["getCoreGrid"]() + ); + } + } else if (e["getElement"]) { + // The Given object is implementing tr.IElementControl + targetEl = /** @type{Element} */e["getElement"](); + } else if (e.nodeType === 1) { + // The Given object is just an element + targetEl = /** @type{Element} */e; + } + if (targetEl) { + for (var i = this._hosts.length; --i >= 0;) { + var host = this._hosts[i]; + if (host.getElement().contains(targetEl)) { + return host; + } + } + } + return null; + }; + + /** @public + * @param {string} gridType + * @param {*} wrapperInstance + */ + GridPlugin.prototype.setGridWrapper = function (gridType, wrapperInstance) { + if (gridType) { + gridType = gridType.toLowerCase(); + if (gridType === "compositegrid") { + this._compositeGrid = wrapperInstance; + } else if (gridType === "realtimegrid") { + this._realTimeGrid = wrapperInstance; + } + } + }; + /** Get JavaScript wrapper instance. This could be either composite grid or real-time grid. + * @public + * @param {(number|Object)=} coreRef An index of the core grid or an instance of the core grid + * @return {*} wrapperInstance + */ + GridPlugin.prototype.getGridApi = function (coreRef) { + if (coreRef == null) { + return this._compositeGrid || this._realTimeGrid; + } else { + var host = typeof coreRef == "number" ? this._hosts[coreRef] : coreRef; + return host ? host._wrapper || null : null; + } + }; + + /** Get user specified column label (e.g. name) or field, if name does not exist + * @public + * @param {number|string} colRef Column index or column Id + * @return {string} + */ + GridPlugin.prototype.getColumnName = function (colRef) { + if (this._compositeGrid) { + var colOptions = this._compositeGrid.getColumnModel(colRef); + if (colOptions) { + if (colOptions.title) { + return colOptions.title; + } else { + return colOptions.field; + } + } + } else { + var colIndex = this.getColumnIndex(colRef); + var colDef = this._realTimeGrid.getColumnDefinition(colIndex); + if (colDef) { + return colDef.getName(); + } + } + return ""; + }; + /** @public + * @param {number|string} colRef Column id, field name or column index + * @return {number} + */ + GridPlugin.prototype.getColumnIndex = function (colRef) { + // TODO: Unify the below logics + if (typeof colRef === "number") { + return colRef; + } + if (this._compositeGrid) { + var allFields = this._compositeGrid.getColumnFields(); + var colIndex = allFields.indexOf(colRef); + if (colIndex > -1) { + return colIndex; + } else { + return this._compositeGrid.getColumnIndex(colRef); + } + } else { + return this._realTimeGrid.getColumnIndex(colRef); + } + }; + /** @public + * @param {Array.} colRefs A collection of column ids, field names or column indices + * @return {Array.} column indices + */ + GridPlugin.prototype.getColumnIndices = function (colRefs) { + var api = this.getGridApi(); + if (api.getColumnIndices) { + return api.getColumnIndices(colRefs); + } + + // TODO: Unify the below logics + if (this._compositeGrid) { + var allFields = this._compositeGrid.getColumnFields(); + var columnCount = this._compositeGrid.getColumnCount(); + var columnIndices = []; + var colRef; + for (var i = 0; i < colRefs.length; i++) { + colRef = colRefs[i]; + if (typeof colRef === 'number') { + // When user pass index + if (colRef >= 0 && colRef < columnCount) { + columnIndices.push(colRef); + } + } else { + var columnIndex = allFields.indexOf(colRef); // Looping check column index of colRefs field + if (columnIndex !== -1) { + columnIndices.push(columnIndex); + } + } + } + return columnIndices; + } else { + return this._realTimeGrid.getColumnIndices(colRefs); + } + }; + /** @public + * @param {number|string} colIndex Column index or column Id + * @return {string} + */ + GridPlugin.prototype.getColumnId = function (colIndex) { + // TODO: Unify the below logics + if (typeof colIndex === "string") { + return colIndex; + } + var colCount = this.getColumnCount(); + if (colIndex < 0 || colIndex >= colCount) { + // Avoid creating undesired column definitions in Core Grid. + return ""; + } + if (this._compositeGrid) { + return this._compositeGrid.getColumnId(colIndex); + } else { + var colDef = this._realTimeGrid.getColumnDefinition(colIndex); + if (colDef) { + return colDef.getId(); + } + } + return ""; + }; + /** @public + * @return {!Array.} Return all column ids from existing column + */ + GridPlugin.prototype.getColumnIds = function () { + if (this._hosts && this._hosts.length) { + return this._hosts[0].getColumnIds(); + } + return []; + }; + /** @public + * @param {number} colIndex + * @return {string} Return empty string if the specified column does not exist + */ + GridPlugin.prototype.getColumnField = function (colIndex) { + if (this._hosts && this._hosts.length) { + return this._hosts[0].getColumnField(colIndex); + } + return ""; + }; + /** @public + * @return {!Array.} Return all column fields from existing column + */ + GridPlugin.prototype.getColumnFields = function () { + if (this._hosts && this._hosts.length) { + return this._hosts[0].getColumnFields(); + } + return []; + }; + /** @public + * @return {number} + */ + GridPlugin.prototype.getColumnCount = function () { + if (this._hosts) { + var g = this._hosts[0]; + return g ? g.getColumnCount() : 0; + } + return 0; + }; + /** @protected + * @ignore + * @param {number|string} srcCol Column Id or index + * @param {(number|string)=} destCol Column Id or index of the destination + * @return {boolean} + */ + GridPlugin.prototype._moveColumnById = function (srcCol, destCol) { + var hosts = this._hosts; + var len = hosts ? hosts.length : 0; + if (len) { + var dirty = 0; + for (var i = 0; i < len; ++i) { + dirty |= hosts[i].moveColumnById(srcCol, destCol); + } + return dirty ? true : false; + } + return false; + }; + /** @protected + * @ignore + * @param {number|string|Array.} colRefs List of column index or column id to be moved + * @param {(number|string)=} destCol Destination position where the moved columns will be placed BEFORE the specified position. This can be column id or index + * @return {boolean} Return true if there is any change, and false otherwise + */ + GridPlugin.prototype._reorderColumns = function (colRefs, destCol) { + var hosts = this._hosts; + var len = hosts ? hosts.length : 0; + if (len) { + var dirty = 0; + for (var i = 0; i < len; ++i) { + dirty |= hosts[i].reorderColumns(colRefs, destCol); + } + return dirty ? true : false; + } + return false; + }; + + /** @protected + * @deprecated + * @ignore + * @param {*} curPlugin + * @param {tr.Grid} host + * @param {string} pluginName + * @return {*} curPlugin + */ + GridPlugin.prototype._loadPlugin = function (curPlugin, host, pluginName) { + if (!curPlugin) { + curPlugin = host.getPlugin(pluginName); + if (!curPlugin) { + curPlugin = host.loadPlugin(pluginName); + if (curPlugin && this._initializedGrid) { + curPlugin._initializedGrid = true; // WARNING: Accessing private member + } + } + } + + return curPlugin; + }; + /** WARNING: Call this method only in _afterInit method to ensure existence of composite grid and real-time grid + * @protected + * @ignore + * @param {tr.Grid} host + * @param {*} pluginRef + * @param {Object=} configObj + * @return {Promise} + */ + GridPlugin.prototype._requestPlugin = function (host, pluginRef, configObj) { + if (this._initializedGrid) { + return GridPlugin.requestPlugin(host, pluginRef, configObj, this._compositeGrid, this._realTimeGrid); + } + return Promise.reject("Plugin should be requested after the initialization"); + }; + /** Make a request to load a plugin/extension into the given core grid (tr-grid). Return a promise of plugin/extension instance + * @public + * @param {*} ref This can be ef-grid, atlas-blotter, composite grid, real-time grid, or core grid. + * @param {*} pluginRef Plugin/Extension name or instance + * @param {Object=} configObj + * @param {*=} compositeGrid + * @param {*=} realTimeGrid + * @return {Promise} + */ + GridPlugin.requestPlugin = function (ref, pluginRef, configObj, compositeGrid, realTimeGrid) { + var core = null; + if (ref) { + var gridWrapper = null; + if (ref.nodeType === 1) { + // This is an element + // TODO: Support delayed resolving + gridWrapper = ref.api; // Grid element must already be initialized and configured + } else if (ref.getCoreGrid) { + gridWrapper = ref; + } else if (ref.getPlugin) { + core = ref; + } + if (gridWrapper) { + core = gridWrapper.getCoreGrid(); + if (!compositeGrid && !realTimeGrid) { + if (gridWrapper.getModel) { + compositeGrid = gridWrapper; + } else { + realTimeGrid = gridWrapper; + } + } + } + } + if (!core) { + return Promise.reject("Cannot find grid element"); + } + var curPlugin = core.getPlugin(pluginRef); + if (curPlugin) { + return Promise.resolve(curPlugin); + } else { + var d = new Deferred(); + setTimeout(GridPlugin._onPluginRequested.bind(null, { + grid: core, + pluginRef: pluginRef, + compositeGrid: compositeGrid, + realTimeGrid: realTimeGrid, + config: configObj, + deferred: d + }), 10); + return d.promise; + } + }; + /** @private + * @param {Object} ctx + * @return {Promise.<*>} Promise of plugin object + */ + GridPlugin._onPluginRequested = function (ctx) { + var grid = ctx.grid; + if (!grid.getElement()) { + return ctx.deferred.reject("Grid has been disposed before the plugin is fully loaded: " + ctx.pluginRef); + } + var curPlugin = grid.getPlugin(ctx.pluginRef); + if (curPlugin) { + return ctx.deferred.resolve(curPlugin); + } + var beforeInitPerformed = false; + if (ctx.pluginRef.beforeInit) { + // WARNING: beforeInit is usually performed before the actual loading + beforeInitPerformed = true; + ctx.pluginRef.beforeInit(grid.getElement(), ctx.config, true); + } + curPlugin = grid.loadPlugin(ctx.pluginRef, ctx.config); + if (!curPlugin) { + return ctx.deferred.reject("Unable to load required dependency: " + ctx.pluginRef); + } + if (!beforeInitPerformed && curPlugin.beforeInit) { + // WARNING: beforeInit is usually performed before the actual loading + beforeInitPerformed = true; + curPlugin.beforeInit(grid.getElement(), ctx.config); + } + if (curPlugin.setGridWrapper) { + if (ctx.compositeGrid) { + curPlugin.setGridWrapper("compositegrid", ctx.compositeGrid); + } else if (ctx.realTimeGrid) { + curPlugin.setGridWrapper("realtimegrid", ctx.realTimeGrid); + } + } + if (curPlugin.afterInit) { + curPlugin.afterInit(); + } + return ctx.deferred.resolve(curPlugin); + }; + /** @protected + * @ignore + * @param {string} pluginName + * @param {tr.Grid=} grid + * @return {*} + */ + GridPlugin.prototype._getPlugin = function (pluginName, grid) { + if (grid == null) { + grid = this._hosts[0]; + } + return grid ? grid.getPlugin(pluginName) : null; + }; + + /** @protected + * @ignore + * @param {number} colIndex + * @param {tr.Grid=} grid + * @return {Object} + */ + GridPlugin.prototype._getColumnData = function (colIndex, grid) { + if (grid == null) { + grid = this._hosts[0]; + } + return grid ? grid.getColumnData(colIndex) : null; + }; + /** @protected + * @ignore + * @param {number} colIndex + * @param {string} prop + * @param {tr.Grid=} grid + * @return {*} + */ + GridPlugin.prototype._getColumnOption = function (colIndex, prop, grid) { + var colData = this._getColumnData(colIndex, grid); + if (colData) { + return colData[prop]; + } + return null; + }; + /** @protected + * @ignore + * @param {number} colIndex + * @param {tr.Grid=} grid + * @return {!Object} + */ + GridPlugin.prototype._newColumnData = function (colIndex, grid) { + if (grid == null) { + grid = this._hosts[0]; + } + if (!grid) { + return {}; + } + var colData = grid.getColumnData(colIndex); + if (!colData) { + colData = grid.setColumnData(colIndex, {}); + } + return colData; + }; + /** @protected + * @ignore + * @param {number} colIndex + * @return {string} + */ + GridPlugin.prototype._getField = function (colIndex) { + var gridInst = this._compositeGrid || this._realTimeGrid; + if (gridInst) { + return gridInst.getColumnField(colIndex); + } + return ""; + }; + /** Note that this method is quite misleading and not consistent with other API method. Please avoid using it. We will deprecate this in the future.
                                                          + * Use _rowGetter instead + * @protected + * @ignore + * @deprecated + * @param {Object} dvRowData { "a": 10, "c": 21 } + * @return {Object} + */ + GridPlugin.prototype._getRowData = function (dvRowData) { + if (this._realTimeGrid) { + if (dvRowData) { + return dvRowData["ROW_DEF"].getRowData(); + } + } + return dvRowData; + }; + /** @protected + * @ignore + * @param {tr.DataView} dv + * @param {number} rowIndex + * @return {Object} dvRowData + */ + GridPlugin.prototype._getRow = function (dv, rowIndex) { + return rowGetter(dv.getRowDataAt(rowIndex)); + }; + /** @protected + * @ignore + * @param {tr.DataView} dv + * @param {number} rowIndex + * @param {string} field + * @return {*} + */ + GridPlugin.prototype._getData = function (dv, rowIndex, field) { + var row = this._getRow(dv, rowIndex); + return row ? row[field] : undefined; // eslint-disable-line + }; + /** @protected + * @ignore + * @param {tr.DataView|tr.DataTable} dv + * @param {number|string} rowRef Row index or row id + * @param {string} field + * @param {*} val + */ + GridPlugin.prototype._setData = function (dv, rowRef, field, val) { + if (this._realTimeGrid) { + var rowDef = _toRowDef(dv, rowRef); + if (rowDef) { + rowDef.setData(field, val); + } + } else { + if (typeof rowRef === "number") { + dv.setDataAt(rowRef, field, val); + } else { + dv.setData(rowRef, field, val); + } + } + }; + /** @protected + * @ignore + * @param {tr.DataView|tr.DataTable} dv + * @param {number|string} rowRef Row index or row id + * @param {Object} rowData + */ + GridPlugin.prototype._setRowData = function (dv, rowRef, rowData) { + if (this._realTimeGrid) { + var rowDef = _toRowDef(dv, rowRef); + if (rowDef) { + rowDef.setRowData(rowData); + } + } else { + if (typeof rowRef === "number") { + dv.setRowDataAt(rowRef, rowData); + } else { + dv.setRowData(rowRef, rowData); + } + } + }; + /** @protected + * @ignore + * @param {tr.DataView|tr.DataTable} dv + * @param {number|string} rowRef Row index or row id + * @param {string} field + * @param {*} value + */ + GridPlugin.prototype._setStaticData = function (dv, rowRef, field, value) { + if (this._realTimeGrid) { + var rowDef = _toRowDef(dv, rowRef); + if (rowDef) { + rowDef.setStaticData(field, value); + } + } else { + // TODO: composite grid should be has staticValues when get configObject, wait for request feature + this._setData(dv, rowRef, field, value); + } + }; + + /** Set data in a column manner. This is faster than repeatedly calling this._setData + * @protected + * @ignore + * @param {tr.DataView|tr.DataTable} dv + * @param {string} cid + * @param {*} valueList + * @param {Array.=} ridList Specify row id to be set corresponding to the data item + * @example + * this._setColumnData(dv, "column 1", ["data1", "data2", "data3"]); + * this._setColumnData(dv, "column 1", 10, ["rowId1", "rowId2]); + */ + GridPlugin.prototype._setColumnData = function (dv, cid, valueList, ridList) { + // Data changed event may be dispatched + if (!cid) { + return; + } + var rids = Array.isArray(ridList) ? ridList : dv.getAllRowIds(true); + var rowCount = rids ? rids.length : 0; + if (!rowCount) { + return; + } + if (rowCount === 1) { + this._setData(dv, rids[0], cid, Array.isArray(valueList) ? valueList[0] : valueList); + return; + } + var vals = Array.isArray(valueList) ? valueList : rids.map(function () { + return valueList; + }); + if (this._realTimeGrid) { + for (var i = 0; i < rowCount; ++i) { + var dvRowData = dv.getRowData(rids[i]); + if (dvRowData) { + var rowDef = dvRowData["ROW_DEF"]; + if (rowDef) { + // WARNING: This does not trigger dataChanged and dataComposed on the DataCache + rowDef.getRowData()[cid] = vals[i]; + } + } + } + if (!dv.dispatchGlobalChange) { + dv = dv.getDataSource(); // Get DataTable + } + // Force rendering by dispatching global change + if (dv && dv.dispatchGlobalChange) { + dv.dispatchGlobalChange(); + } + } else { + dv.setColumnData(cid, vals, rids); + } + }; + + /** @protected + * @ignore + * @param {number} colIndex + * @param {string=} id + * @param {Function=} renderer + */ + GridPlugin.prototype._activateColumnRenderer = function (colIndex, id, renderer) { + // TODO: Support multiple Grids + if (colIndex == null) { + return; + } + var rtGrid = this._realTimeGrid; + if (rtGrid) { + rtGrid.activateColumnRenderer(colIndex, id, renderer); + } else { + if (typeof renderer === "function") { + this._hosts[0].setColumnDataBindingHandler(colIndex, renderer); + } else { + this._hosts[0].setColumnDataBindingHandler(colIndex, null); + } + } + }; + + /** @private + * @param {number=} colIndex + * @param {number=} rowIndex + * @param {Object=} context + * @return {!Object} + */ + GridPlugin.prototype._mockMouseEvent = function (colIndex, rowIndex, context) { + if (colIndex == null) { + colIndex = 0; + } + if (rowIndex == null) { + rowIndex = 0; + } + var evt = context ? context : {}; + if (colIndex >= 0 && rowIndex >= 0) { + var grid = this._activeGrid || this._hosts[0]; + var cell = grid ? grid.getCell(evt.sectionType || "content", colIndex, rowIndex) : null; + evt.target = cell ? cell.getElement() : null; + } + return evt; + }; + var keyMap = { + "left": 37, + "right": 39, + "up": 38, + "down": 40, + "tab": 9 + }; + + /** @private + * @param {number|string} keyCode + * @param {Object=} context + * @return {!Object} + */ + GridPlugin.prototype._mockKeyboardEvent = function (keyCode, context) { + var evt = context ? context : {}; + evt.preventDefault = function () {}; + evt.stopPropagation = function () {}; + if (typeof keyCode === "string") { + keyCode = keyCode.toLowerCase(); + keyCode = keyMap[keyCode]; + } + evt.keyCode = keyCode; + return evt; + }; + + /** @type {Object} + * @private + */ + GridPlugin._staticStyles = {}; + + /** @type {Object} + * @private + */ + GridPlugin._themeLoaders = {}; + + /** @private + * @param {Function} styleCalculator + * @param {Object} colors + */ + GridPlugin._themeLoadSuccess = function (styleCalculator, colors) { + var extName = this.getName(); + var styles = GridPlugin._staticStyles[extName] = styleCalculator(colors); + this.applyStyles(styles, extName); + }; + + /** @public + * @param {Function} styleCalculator + */ + GridPlugin.prototype.applyStaticStyles = function (styleCalculator) { + var extName = this.getName(); + var styles = GridPlugin._staticStyles[extName]; + if (!styles) { + if (styleCalculator) { + if (!GridPlugin._themeLoaders[extName]) { + GridPlugin._themeLoaders[extName] = ElfUtil.getThemeColors(); + } + GridPlugin._themeLoaders[extName].then(GridPlugin._themeLoadSuccess.bind(this, styleCalculator)); + } + } else { + this.applyStyles(styles, extName); + } + }; + + /** @public + * @param {string} cssString + * @param {string=} nameSpace + * @param {boolean=} replaceable + */ + GridPlugin.prototype.applyStyles = function (cssString, nameSpace, replaceable) { + if (!nameSpace) { + nameSpace = this.getName(); + } + var intNameSpace = "_style" + nameSpace; + var hosts = this._hosts; + var len = hosts.length; + if (!len) { + return; + } + var i, host; + if (!replaceable) { + for (i = 0; i < len; i++) { + host = hosts[i]; + if (!host[intNameSpace]) { + injectCss(cssString, host.getElement()); + host[intNameSpace] = true; + } + } + } else { + for (i = 0; i < len; i++) { + host = hosts[i]; + this.revokeStyles(host, nameSpace); + host[intNameSpace] = injectCss(cssString, host.getElement()); + } + } + }; + + /** @public + * @param {Object} host + * @param {string} nameSpace + */ + GridPlugin.prototype.revokeStyles = function (host, nameSpace) { + if (!host || !nameSpace) { + return; + } + nameSpace = "_style" + nameSpace; + var styleTag = host[nameSpace]; + if (styleTag && styleTag.nodeType === 1) { + styleTag.parentNode.removeChild(styleTag); + host[nameSpace] = null; + } + }; + + /** Export the plugin to the given object by attaching it to tr and tr.grid namespaces + * @public + * @function + * @param {Window|Object} winObj + * @param {GridPlugin} plugin + * @example + * import {exportExtension} from "../node_modules/tr-grid-util/src/GridPlugin.js"; + * import {SomePlugin} from "./js/SomePlugin.js"; + * exportExtension(window, SomePlugin); + * console.log(tr.grid.SomePlugin); // tr.grid.SomePlugin is added to window scope + * console.log(tr.SomeExtension); // tr.SomeExtension is added to window scope + */ + var exportExtension = function (winObj, plugin) { + if (!winObj || !plugin) { + return; + } + if (!plugin.prototype["getName"]) { + return; + } + var pluginName = plugin.prototype["getName"]().replace(/Plugin$/, ""); + if (!pluginName) { + return; + } + var trNamespace = winObj["tr"]; // For supporting composite grid extension scheme + if (!trNamespace) { + trNamespace = winObj["tr"] = {}; + } + var gridNamespace = trNamespace["grid"]; // For supporting grid plugin scheme + if (!gridNamespace) { + gridNamespace = trNamespace["grid"] = {}; + } + gridNamespace[pluginName + "Plugin"] = plugin; + trNamespace[pluginName + "Extension"] = plugin; + }; + + /** @private + * @function + * @param {tr.DataView|tr.DataTable} dv + * @param {number|string} rowRef Row index or row id + * @return {*} RowDefinition instance + */ + var _toRowDef = function (dv, rowRef) { + var dvRowData = typeof rowRef === "number" ? dv.getRowDataAt(rowRef) : dv.getRowData(rowRef); + if (dvRowData) { + return dvRowData["ROW_DEF"] || null; + } + return null; + }; + + /** @public + * @function + * @param {string} field + * @param {Object} dvRowData Row data from tr.DataView + * @return {*} Data value returned from the specified row and field + */ + var defaultDataGetter = function (field, dvRowData) { + return dvRowData[field]; + }; + /** @public + * @function + * @param {string} field + * @param {Object} dvRowData Row data from tr.DataView + * @return {*} Data value returned from the specified row and field + */ + var rowDefDataGetter = function (field, dvRowData) { + var rowData = dvRowData["ROW_DEF"].getRowData(); + return rowData ? rowData[field] : null; + }; + /** @public + * @function + * @param {Object} dvRowData + * @return {Object} Row data Nothing is changed + */ + var defaultRowGetter = function (dvRowData) { + return dvRowData; + }; + /** @public + * @function + * @param {Object} dvRowData Row data from tr.DataView + * @return {Object} Row data + */ + var rowDefRowGetter = function (dvRowData) { + return dvRowData ? dvRowData["ROW_DEF"].getRowData() : null; + }; + /** This is slower version of row getter. It is intended for ease of use. + * @public + * @function + * @param {Object} dvRowData Row data from tr.DataView + * @return {Object} Row data + */ + var rowGetter = function (dvRowData) { + if (dvRowData) { + var rowDef = dvRowData["ROW_DEF"]; + return rowDef ? rowDef.getRowData() : dvRowData; + } + return null; + }; + + /** @public + * @function + * @param {string} field + * @param {tr.DataTable} dt + * @return {!Array.} Array of row data + */ + var colDataGetter = function (field, dt) { + var rowDefs = dt.getAllRowData(); + var rowCount = rowDefs.length; + var rows = new Array(rowCount); + for (var i = 0; i < rowCount; ++i) { + // WARNING: No data checking + rows[i] = rowDefDataGetter(field, rowDefs[i]); + } + return rows; + }; + + /* harmony default export */ + const es6_GridPlugin = /* unused pure expression or super */null && GridPlugin; ; // CONCATENATED MODULE: ./node_modules/@refinitiv-ui/efx-grid/lib/tr-grid-util/es6/Dom.js /** @namespace */ var Dom = {}; @@ -41874,12 +41962,12 @@ Recommended fix: } }; /** @private - * @param {Object} sectionSettings Grid sectionSettings object + * @param {Object} sectionSettings Section or SectionSettings * @param {number} rowIndex * @return {Element} */ CheckboxPlugin.prototype._getCheckbox = function (sectionSettings, rowIndex) { - var section = sectionSettings.getSection(); + var section = sectionSettings.getSection ? sectionSettings.getSection() : sectionSettings; var chkbox = /** @type{Element} */section.getCellContent(this._displayColumn, rowIndex); if (!chkbox) { return null; @@ -42202,10 +42290,31 @@ Recommended fix: * @param {Event} e */ CheckboxPlugin.prototype._onCheckboxKeydown = function (e) { - if (e.keyCode === 32) { + var keyCode = e.keyCode; + if (keyCode === 32) { + this._onCheckboxMousedown(e); // Set anchor if no shift key is pressed this._onCheckboxChanged(e, true); e.preventDefault(); } + if (keyCode === 38 || keyCode === 40) { + // Arrow key up and down + var host = this._hosts[0]; + var pos = host.getRelativePosition(e.currentTarget); + if (pos.sectionType === "content") { + var dv = host.getDataSource(); + var offset = keyCode === 38 ? -1 : 1; + var nextIndex = pos.rowIndex + offset; + var rowId = dv.getRowId(nextIndex); + if (rowId) { + host.scrollToRow(null, nextIndex); + var chkbox = this._getCheckbox(pos.section, nextIndex); + if (chkbox) { + chkbox.focus(); + } + e.preventDefault(); + } + } + } }; /** @private * @param {Event} e @@ -66575,7 +66684,7 @@ Recommended fix: extOptions.headerSpanning = this._headerSpanning; } if (this._footerSpanning) { - extOptions.headerSpanning = this._footerSpanning; + extOptions.footerSpanning = this._footerSpanning; } if (this._autoGroupSorting) { extOptions.autoGroupSorting = this._autoGroupSorting; @@ -67075,6 +67184,13 @@ Recommended fix: if (this._footerRows) { e.newGroup.addFooter(this._footerRows); } + var newGroup = e.newGroup; + // WARNING: contentAsHeader mode is overwrite arrow hidden to boolean + if (!this._contentAsHeader && newGroup.disableCollapsing) { + if (this._isArrowHidden(newGroup)) { + newGroup.disableCollapsing(); + } + } this._dispatch("groupAdded", e); if (this._autoGroupSorting) { if (!this._sortingTimer) { @@ -67397,6 +67513,10 @@ Recommended fix: var grpView = dv.getGroupByRowId(rowId); if (grpView) { changed = true; + if (grpView.isCollapsible && !grpView.isCollapsible()) { + // Prevent applied styles + return; + } grpView.collapse(!collapsed); } else if (this._contentAsHeader) { changed = true; @@ -67548,6 +67668,13 @@ Recommended fix: this._footerRows = /** @type{number} */opt_num; }; + /** @public + * @return {number} + */ + RowGroupingPlugin.prototype.getFooterRowCount = function () { + return this._footerRows; + }; + /** @function * @param {Object} obj * @return {boolean} @@ -73526,6 +73653,9 @@ Recommended fix: var TextFormatter_onElementUpdated = function (element, ctx) { element.textContent = ctx.value; }; + var TextFormatter_onElementCreated = function (element, ctx) { + element.classList.add("text"); + }; /** @constructor * @param {*=} options @@ -73540,7 +73670,8 @@ Recommended fix: var defaultOpt = { tagName: "div", refName: "TextFormatter", - onElementUpdated: TextFormatter_onElementUpdated + onElementUpdated: TextFormatter_onElementUpdated, + onElementCreated: TextFormatter_onElementCreated }; return es6_FormatterBuilder.create(options, defaultOpt); }; @@ -87362,7 +87493,7 @@ Recommended fix: } // #region Ponyfills // Consolidate these variables up top for easier toggling during debugging - var hasNativeStartsWith = !!String.prototype.startsWith; + var hasNativeStartsWith = !!String.prototype.startsWith && '_a'.startsWith('a', 1); var hasNativeFromCodePoint = !!String.fromCodePoint; var hasNativeFromEntries = !!Object.fromEntries; var hasNativeCodePointAt = !!String.prototype.codePointAt; @@ -92880,6 +93011,8 @@ Recommended fix: * * @fires value-changed - Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically. * @fires error-changed - Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically. + * @fires step-up - Fired when user acts value up on both pressing arrow up or tapping the spinner up. The event is not triggered if stepUp method is called programmatically. + * @fires step-down - Fired when user acts value down on both pressing arrow down or tapping the spinner down. The event is not triggered if stepDown method is called programmatically. * * @attr {boolean} disabled - Set disabled state * @prop {boolean} [disabled=false] - Set disabled state @@ -93116,6 +93249,17 @@ Recommended fix: } event.preventDefault(); } + /** + * Trigger step-up or step-down event and return the event is cancelled + * @param direction Up or Down + * @returns {boolean} false if cancelled event. And true otherwise. + */ + dispatchStepEvent(direction) { + const eventName = direction === number_field_Direction.Up ? 'step-up' : 'step-down'; + return this.dispatchEvent(new CustomEvent(eventName, { + cancelable: true + })); + } /** * Run when spinner has been tapped * @param event tap event @@ -93138,13 +93282,16 @@ Recommended fix: * @returns {void} */ onApplyStep(direction) { - try { - this.applyStepDirection(direction); - this.dispatchEvent(new InputEvent('input')); - this.setSilentlyValueAndNotify(); - } catch (error) { - // According to specs stepDown/stepUp may fail for some invalid inputs - // do nothing and report nothing in that case + const event = this.dispatchStepEvent(direction); + if (event) { + try { + this.applyStepDirection(direction); + this.dispatchEvent(new InputEvent('input')); + this.setSilentlyValueAndNotify(); + } catch (error) { + // According to specs stepDown/stepUp may fail for some invalid inputs + // do nothing and report nothing in that case + } } } /** @@ -108351,6 +108498,7 @@ Recommended fix: * @attr {boolean} disabled - Set disabled state * @prop {boolean} [disabled=false] - Set disabled state * + * @slot yyyy-mm-dd - Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy` * @slot footer - Adds slotted content into the footer of the calendar control */ let Calendar = class Calendar extends core_lib /* ControlElement */.w5 { @@ -108933,7 +109081,28 @@ Recommended fix: event.preventDefault(); } /** - * Run when tap event happens ot table. + * Get cell content from tap event + * @param event Keyboard event + * @returns html element + */ + getCellContent(event) { + const path = event.composedPath(); + for (let i = 0; i <= path.length; i += 1) { + const node = path[i]; + if (node === this) { + return null; + } + if (node.nodeType !== Node.ELEMENT_NODE) { + continue; + } + if (node.getAttribute('role') === 'button' && node.part.value.includes('cell-content')) { + return node; + } + } + return null; + } + /** + * Run when tap event happens to table. * Select the values or switch the view * @param event Tap event * @returns {void} @@ -108942,7 +109111,7 @@ Recommended fix: if (event.defaultPrevented) { return; } - const cell = event.target; + const cell = this.getCellContent(event); if (!cell || !this.isDateButton(cell) || !cell.value) { return; } @@ -109460,6 +109629,7 @@ Recommended fix: const isSelectable = isSelection && !cell.disabled; const isSelected = cell.selected ? 'true' : 'false'; const isActive = cell.active ? 0 : -1; + const slotContent = cell.value ? (0, core_lib /* html */.dy)`${cell.text}` : cell.text; return (0, core_lib /* html */.dy)`
                                                          - ${cell.text} + ${slotContent}
                                                          `; } @@ -115381,7 +115551,7 @@ Recommended fix: dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', - styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12px;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#737373;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #fff}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}' + styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12px;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#737373;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #fff}:host [part~=selection] ::slotted(*){position:absolute}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}' } })); ; // CONCATENATED MODULE: ./node_modules/@refinitiv-ui/elements/lib/datetime-picker/themes/halo/light/index.js @@ -161903,7 +162073,7 @@ Recommended fix: ; // CONCATENATED MODULE: ./node_modules/@refinitiv-ui/efx-grid/lib/grid/index.js window.EFX_GRID = { - version: "6.0.78" + version: "6.0.79" }; ; // CONCATENATED MODULE: ./node_modules/@refinitiv-ui/efx-grid/lib/grid/themes/halo/light/efx-grid.js @@ -168618,7 +168788,7 @@ Recommended fix: * @private * @constant */ - const TEXT_FILTERS = [DEFAULT_FILTERS[0], DEFAULT_FILTERS[1], DEFAULT_FILTERS[6], DEFAULT_FILTERS[7], DEFAULT_FILTERS[8], DEFAULT_FILTERS[9]]; + const TEXT_FILTERS = [DEFAULT_FILTERS[0], DEFAULT_FILTERS[1], DEFAULT_FILTERS[6], DEFAULT_FILTERS[7], DEFAULT_FILTERS[8], DEFAULT_FILTERS[9], DEFAULT_FILTERS[10], DEFAULT_FILTERS[11]]; /** @type {Array.} * @private * @constant @@ -169261,7 +169431,7 @@ Recommended fix: var fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase(); if (fdt === "number") { filterItems = NUMBER_FILTERS; - } else if (fdt === "general" || fdt === "text") { + } else if (fdt === "string" || fdt === "text") { filterItems = TEXT_FILTERS; } else { filterItems = DEFAULT_FILTERS; diff --git a/book/en/realtime_data/jet.md b/book/en/realtime_data/jet.md index 8b8bec70..51705c86 100644 --- a/book/en/realtime_data/jet.md +++ b/book/en/realtime_data/jet.md @@ -1,6 +1,6 @@ # Realtime Market Data with JET.Qoutes2 -JET is a library that creates a communication channel between applications and container for retrieving data from the Refinitiv platform. JET will provide all the real-time data, so there's no need to initialize and use the `dataModel` property in the configuration object. +JET is a library that creates a communication channel between applications and container for retrieving data from the LSEG platform. JET will provide all the real-time data, so there's no need to initialize and use the `dataModel` property in the configuration object. Please note that you can no longer use the row index to refer to row data anymore, as Grid will asynchronously receive the data and updates from JET or a server data provider. For reference, you must specify the row ID (string) for each row that is inserted into Grid's data table. diff --git a/book/en/rendering/change-formatter.html b/book/en/rendering/change-formatter.html index 54a3fc24..eb57b93a 100644 --- a/book/en/rendering/change-formatter.html +++ b/book/en/rendering/change-formatter.html @@ -23,7 +23,7 @@

                                                          Grid Usage Guide

                                                          - +
                                                          • Getting Started
                                                            diff --git a/book/en/rendering/column-formatter.html b/book/en/rendering/column-formatter.html index 829c89b2..6559c765 100644 --- a/book/en/rendering/column-formatter.html +++ b/book/en/rendering/column-formatter.html @@ -23,7 +23,7 @@

                                                            Grid Usage Guide

                                                          - +
                                                          • Getting Started
                                                            @@ -282,7 +282,7 @@

                                                            Formatter (default)

                                                            To update what is shown on the Grid, please use Grid's APIs to manipulate the data from the instance.

                                                            Example

                                                            -
                                                            +
                                                            diff --git a/book/en/rendering/custom-formatter.html b/book/en/rendering/custom-formatter.html index ab4bd3bd..9965884e 100644 --- a/book/en/rendering/custom-formatter.html +++ b/book/en/rendering/custom-formatter.html @@ -23,7 +23,7 @@

                                                            Grid Usage Guide

                                                            - +
                                                            • Getting Started
                                                              @@ -448,7 +448,7 @@

                                                              Understanding row virtualization

                                                              Examples

                                                              Click the green button on the bottom right corner of the live example to see the code.

                                                              -
                                                              +
                                                              diff --git a/book/en/rendering/formatter-event-handling.html b/book/en/rendering/formatter-event-handling.html index afaab711..04c9dbcc 100644 --- a/book/en/rendering/formatter-event-handling.html +++ b/book/en/rendering/formatter-event-handling.html @@ -23,7 +23,7 @@

                                                              Grid Usage Guide

                                                              - +
                                                              • Getting Started
                                                                @@ -288,7 +288,7 @@

                                                                The 'reverted' problem

                                                              • Scroll back up to the top of the grid
                                                                • -
                                                                +
                                                                @@ -388,7 +388,7 @@

                                                                The 'reverted' problem

                                                                The fix

                                                                To avoid the problem, we have to add an event listener to our custom formatter for binding the change from users. You have added dropdownChangeHandler to fix the problem as shown below:

                                                                -
                                                                +
                                                                diff --git a/book/en/rendering/predefined-formatter.html b/book/en/rendering/predefined-formatter.html index 5a9537ff..c073c7d3 100644 --- a/book/en/rendering/predefined-formatter.html +++ b/book/en/rendering/predefined-formatter.html @@ -23,7 +23,7 @@

                                                                Grid Usage Guide

                                                                - +
                                                                • Getting Started
                                                                  @@ -297,7 +297,7 @@

                                                                  The basics

                                                                  }

                                                                  Formatter with default options supports basic functioning and can be used for general usage. For input formatters, like SimpleInputFormatter, EFTextFieldFormatter, EFComboBoxFormatter, and so on, when the value has changed the new value will be saved to the dataTable of Grid. See basic formatters in the below example:

                                                                  -
                                                                  +
                                                                  diff --git a/book/en/rendering/predefined_formatters/ef-button-formatter.html b/book/en/rendering/predefined_formatters/ef-button-formatter.html index 35529b9b..76045aac 100644 --- a/book/en/rendering/predefined_formatters/ef-button-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-button-formatter.html @@ -23,7 +23,7 @@

                                                                  Grid Usage Guide

                                                                  - +
                                                                  • Getting Started
                                                                    @@ -296,7 +296,7 @@

                                                                    Specific options

                                                                    Example

                                                                    -
                                                                    +
                                                                    diff --git a/book/en/rendering/predefined_formatters/ef-checkbox-formatter.html b/book/en/rendering/predefined_formatters/ef-checkbox-formatter.html index ef1f296d..9c657094 100644 --- a/book/en/rendering/predefined_formatters/ef-checkbox-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-checkbox-formatter.html @@ -23,7 +23,7 @@

                                                                    Grid Usage Guide

                                                                    - +
                                                                    • Getting Started
                                                                      @@ -277,7 +277,7 @@

                                                                      EF Checkbox Formatter

                                                                      This formatter creates a ef-checkbox which will be unchecked by default.

                                                                      Example

                                                                      -
                                                                      +
                                                                      @@ -366,7 +366,7 @@

                                                                      Example

                                                                      Checkbox with a label

                                                                      -
                                                                      +
                                                                      diff --git a/book/en/rendering/predefined_formatters/ef-combo-box-formatter.html b/book/en/rendering/predefined_formatters/ef-combo-box-formatter.html index 453473f0..eea9d314 100644 --- a/book/en/rendering/predefined_formatters/ef-combo-box-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-combo-box-formatter.html @@ -23,7 +23,7 @@

                                                                      Grid Usage Guide

                                                                      - +
                                                                      • Getting Started
                                                                        @@ -296,7 +296,7 @@

                                                                        Specific options

                                                                        Example

                                                                        -
                                                                        +
                                                                        diff --git a/book/en/rendering/predefined_formatters/ef-datetime-picker-formatter.html b/book/en/rendering/predefined_formatters/ef-datetime-picker-formatter.html index adf272e0..a203b150 100644 --- a/book/en/rendering/predefined_formatters/ef-datetime-picker-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-datetime-picker-formatter.html @@ -23,7 +23,7 @@

                                                                        Grid Usage Guide

                                                                        - +
                                                                        • Getting Started
                                                                          @@ -277,7 +277,7 @@

                                                                          EF DateTime Picker Formatter

                                                                          This formatter creates ef-datetime-picker without margin.

                                                                          Example

                                                                          -
                                                                          +
                                                                          diff --git a/book/en/rendering/predefined_formatters/ef-icon-formatter.html b/book/en/rendering/predefined_formatters/ef-icon-formatter.html index f7bbf1c7..d0255956 100644 --- a/book/en/rendering/predefined_formatters/ef-icon-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-icon-formatter.html @@ -23,7 +23,7 @@

                                                                          Grid Usage Guide

                                                                          - +
                                                                          • Getting Started
                                                                            @@ -305,7 +305,7 @@

                                                                            Specific options

                                                                            Example

                                                                            -
                                                                            +
                                                                            diff --git a/book/en/rendering/predefined_formatters/ef-number-field-formatter.html b/book/en/rendering/predefined_formatters/ef-number-field-formatter.html index e76b90f4..715a9e23 100644 --- a/book/en/rendering/predefined_formatters/ef-number-field-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-number-field-formatter.html @@ -23,7 +23,7 @@

                                                                            Grid Usage Guide

                                                                            - +
                                                                            • Getting Started
                                                                              @@ -277,7 +277,7 @@

                                                                              EF Number Field Formatter

                                                                              This formatter creates a ef-number-field without a margin and 100% width. By default the input's value will be the column's field.

                                                                              Example

                                                                              -
                                                                              +
                                                                              diff --git a/book/en/rendering/predefined_formatters/ef-radio-button-formatter.html b/book/en/rendering/predefined_formatters/ef-radio-button-formatter.html index 15dc9a1a..f19bf9ae 100644 --- a/book/en/rendering/predefined_formatters/ef-radio-button-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-radio-button-formatter.html @@ -23,7 +23,7 @@

                                                                              Grid Usage Guide

                                                                              - +
                                                                              • Getting Started
                                                                                @@ -296,7 +296,7 @@

                                                                                Specific options

                                                                                Example

                                                                                -
                                                                                +
                                                                                diff --git a/book/en/rendering/predefined_formatters/ef-select-formatter.html b/book/en/rendering/predefined_formatters/ef-select-formatter.html index a069aff4..80232960 100644 --- a/book/en/rendering/predefined_formatters/ef-select-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-select-formatter.html @@ -23,7 +23,7 @@

                                                                                Grid Usage Guide

                                                                                - +
                                                                                • Getting Started
                                                                                  @@ -296,7 +296,7 @@

                                                                                  Specific options

                                                                                  Example

                                                                                  -
                                                                                  +
                                                                                  diff --git a/book/en/rendering/predefined_formatters/ef-text-field-formatter.html b/book/en/rendering/predefined_formatters/ef-text-field-formatter.html index e36800d7..b7df4427 100644 --- a/book/en/rendering/predefined_formatters/ef-text-field-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-text-field-formatter.html @@ -23,7 +23,7 @@

                                                                                  Grid Usage Guide

                                                                                  - +
                                                                                  • Getting Started
                                                                                    @@ -277,7 +277,7 @@

                                                                                    EF Text Field Formatter

                                                                                    This formatter creates a ef-text-field without a margin and 100% width. By default the input's value will be the column's field.

                                                                                    Example

                                                                                    -
                                                                                    +
                                                                                    diff --git a/book/en/rendering/predefined_formatters/ef-toggle-formatter.html b/book/en/rendering/predefined_formatters/ef-toggle-formatter.html index 54c40711..3212fdc9 100644 --- a/book/en/rendering/predefined_formatters/ef-toggle-formatter.html +++ b/book/en/rendering/predefined_formatters/ef-toggle-formatter.html @@ -23,7 +23,7 @@

                                                                                    Grid Usage Guide

                                                                                    - +
                                                                                    • Getting Started
                                                                                      @@ -277,7 +277,7 @@

                                                                                      EF Toggle Formatter

                                                                                      This formatter creates a ef-toggle. The toggle will be off by default.

                                                                                      Example

                                                                                      -
                                                                                      +
                                                                                      diff --git a/book/en/rendering/predefined_formatters/percent-bar-formatter.html b/book/en/rendering/predefined_formatters/percent-bar-formatter.html index 16d793b1..b3af8509 100644 --- a/book/en/rendering/predefined_formatters/percent-bar-formatter.html +++ b/book/en/rendering/predefined_formatters/percent-bar-formatter.html @@ -23,7 +23,7 @@

                                                                                      Grid Usage Guide

                                                                                      - +
                                                                                      • Getting Started
                                                                                        @@ -326,7 +326,7 @@

                                                                                        Specific options

                                                                                        Example

                                                                                        -
                                                                                        +
                                                                                        diff --git a/book/en/rendering/predefined_formatters/simple-image-formatter.html b/book/en/rendering/predefined_formatters/simple-image-formatter.html index 1d8f7b09..39dc07f4 100644 --- a/book/en/rendering/predefined_formatters/simple-image-formatter.html +++ b/book/en/rendering/predefined_formatters/simple-image-formatter.html @@ -23,7 +23,7 @@

                                                                                        Grid Usage Guide

                                                                                        - +
                                                                                        • Getting Started
                                                                                          @@ -277,7 +277,7 @@

                                                                                          Simple Image Formatter

                                                                                          This formatter creates an image from the column's field by default.

                                                                                          Example

                                                                                          -
                                                                                          +
                                                                                          diff --git a/book/en/rendering/predefined_formatters/simple-input-formatter.html b/book/en/rendering/predefined_formatters/simple-input-formatter.html index a3504252..c19c493d 100644 --- a/book/en/rendering/predefined_formatters/simple-input-formatter.html +++ b/book/en/rendering/predefined_formatters/simple-input-formatter.html @@ -23,7 +23,7 @@

                                                                                          Grid Usage Guide

                                                                                          - +
                                                                                          • Getting Started
                                                                                            @@ -277,7 +277,7 @@

                                                                                            Simple Input Formatter

                                                                                            This formatter creates an input without a margin and 100% width. By default the input's value will be the column's field.

                                                                                            Example

                                                                                            -
                                                                                            +
                                                                                            diff --git a/book/en/rendering/predefined_formatters/simple-link-formatter.html b/book/en/rendering/predefined_formatters/simple-link-formatter.html index 618f1ff2..9739e4c2 100644 --- a/book/en/rendering/predefined_formatters/simple-link-formatter.html +++ b/book/en/rendering/predefined_formatters/simple-link-formatter.html @@ -23,7 +23,7 @@

                                                                                            Grid Usage Guide

                                                                                            - +
                                                                                            • Getting Started
                                                                                              @@ -296,7 +296,7 @@

                                                                                              Specific options

                                                                                              Example

                                                                                              -
                                                                                              +
                                                                                              @@ -311,14 +311,14 @@

                                                                                              Example

                                                                                              <efx-grid id="grid">
 </efx-grid>
                                                                                              - 
                                                                                              var href = "https://www.refinitiv.com/#";
+                  
                                                                                              var href = "https://www.lseg.com/#";
 
 var fields = ["id", "url"];
 var records = new Array(40);
 for (var i = 0; i < 40; ++i) {
   var record = records[i] = {};
   record[fields[0]] = i;
-  record[fields[1]] = "https://www.refinitiv.com/#" + i;
+  record[fields[1]] = "https://www.lseg.com/#" + i;
 }
 var configObj = {
   sorting: {
@@ -335,7 +335,7 @@ 
                                                                                              Example
                                                                                              
       alignment: "c",
       binding: SimpleLinkFormatter.create({
         attributes: {
-          href: "https://www.refinitiv.com"
+          href: "https://www.lseg.com"
         }
       })
     },
@@ -346,7 +346,7 @@ 
                                                                                              Example
                                                                                              
       binding: SimpleLinkFormatter.create({
         label: "click here",
         attributes: {
-          href: "https://www.refinitiv.com"
+          href: "https://www.lseg.com"
         },
         styles: {
           color: "red"
diff --git a/book/en/rendering/predefined_formatters/simple-link-formatter.md b/book/en/rendering/predefined_formatters/simple-link-formatter.md
index a6be3f0d..d4ee54d9 100644
--- a/book/en/rendering/predefined_formatters/simple-link-formatter.md
+++ b/book/en/rendering/predefined_formatters/simple-link-formatter.md
@@ -19,14 +19,14 @@ This formatter creates a link with text from the column's field by default.
 
 
 \n","tagName":"pre"},{"text":"For more available properties in EFX Grid element, see Columns and Data Properties.","tagName":"p"},{"text":"Columns and Data Properties","tagName":"a"},{"text":"Grid APIs","tagName":"h2"},{"text":"api property from the grid element represents JavaScript-based Grid instance. The api property is an access point for all Grid APIs and for making change at runtime. The api property will be available only after the config is set and initialized. To use api immediately after grid has been initialized, you can listen to configured event as shown below:","tagName":"p"},{"text":"var grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.addEventListener(\"configured\", function (e) {\n    var api = e.detail.api;\n    var gridElem = e.detail.element;\n\n    var core = api.getCoreGrid();\n\n    console.log(\"Grid has been configured.\");\n});\n\nconsole.log(grid.api); // api instance will not be available immediately after configuration is set.","tagName":"pre"},{"text":"The document for the API instance can be found in the Grid APIs page.","tagName":"p"},{"text":"Grid APIs page","tagName":"a"},{"text":"Core Grid","tagName":"h2"},{"text":"As Grid grows in complexity, Core Grid is created to maintain and manage UIs for table and data display. It contains mostly low-level APIs. Any advanced features and user interactions have been moved out to the API instance and Grid extensions. In some specific cases, you may want to access Core Grid, such as managing scrollbars. To get Core Grid instance, use getCoreGrid() method from the api property as shown below:","tagName":"p"},{"text":"var grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.addEventListener(\"configured\", function (e) {\n    var api = e.detail.api;\n    var core = api.getCoreGrid();\n    var section = core.getSection(\"content\"); // Content section\n    var vScrollbar = core.getVScrollbar(); // Vertical scrollbar\n});","tagName":"pre"},{"text":"The document for the Core Grid can be found in the Core APIs page.","tagName":"p"},{"text":"Core APIs page","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"date1\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 200 });\nvar configObj = {\n  freezeColumn: 0,\n  columns: [\n    { name: \"Company\", field: fields[0], width: 300 },\n    { name: \"Market\", field: fields[1], width: 150 },\n    { name: \"Last\", field: fields[2], width: 120 },\n    {\n      name: \"Pct. Chng\",\n      field: fields[3],\n      width: 200,\n      formatter: PercentBarFormatter.create({\n        textHidden: true\n      })\n    },\n    { name: \"IPO Date\", field: fields[4], width: 180, alignment: \"center\", formatType: \"dateTime\" },\n    { name: \"Industry\", field: fields[5], width: 250 }\n  ],\n  staticDataRows: records,\n  extensions: [new TextFormatting()]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 300px;\n}","tagName":"pre"}]},{"title":"Help and Support","filename":"support.html","contents":[{"text":"If you need help, simply go to the proper channel, post your questions or difficulties, and provide your live example.","tagName":"p"},{"text":"There are two possible channels:","tagName":"p"},{"text":"Stack Overflow","tagName":"a"},{"text":"MS Team","tagName":"a"},{"text":"Grid's dependencies are available for CodeSandbox, making it simple to create your own live demonstration. The live example imitated issues are very significant because it helps us in our investigation and save us time. To create a live example page you can follow the below instructions:","tagName":"p"},{"text":"CodeSandbox","tagName":"a"},{"text":"EFX Grid template","tagName":"a"},{"text":"[React] EFX Grid template","tagName":"a"},{"text":"[Angular] EFX Grid template","tagName":"a"},{"text":"Note: To change the theme while editing live example, change the theme name in the Import section between light and dark.","tagName":"p"},{"text":"All existing live examples can be found here. You may fork or use some of the examples to illustrate your issue, if those examples have suitable setup for your use cases.","tagName":"p"},{"text":"here","tagName":"a"}]},{"title":"Basic Grid Creation","filename":"general_concept/basic.html","contents":[{"text":"To initialize Grid you can put the element tag on the HTML page, just like any other native element. The element works as if it were a div element (that is, an element with 100% width and the same height as its content). ","tagName":"p"},{"text":"","tagName":"pre"},{"text":"Or you can dynamically create the element at runtime by using a standard native method like document.createElement(\"efx-grid\").","tagName":"p"},{"text":"var grid = document.createElement(\"efx-grid\");\n\ndocument.body.appendChild(grid);","tagName":"pre"},{"text":"The element is used for positioning and sizing the grid in the document. Anything else should be done by passing a configuration object to the grid. ","tagName":"p"},{"text":"See all available configuration options for efx-grid here","tagName":"p"},{"text":"here","tagName":"a"},{"text":"To define how the grid renders its layout and content use the columns property, as shown below:","tagName":"p"},{"text":"var configObj = {\n    columns: [\n        {name: \"Header Text\", field: \"For Mapping Data\"},\n        {name: \"Column 2\", field: \"Field 2\"}\n    ] // Two columns will be shown\n};","tagName":"pre"},{"text":"To define initial or static data for rendering use the staticDataRows property, as shown below:","tagName":"p"},{"text":"var configObj = {\n    staticDataRows: [\n        {\"Field 1\": \"a\", \"Field 2\": \"b\", \"Field 3\": \"c\"},\n        {\"ABC\": \"d\", \"Field 2\": \"e\", \"XYZ\": \"f\"}\n    ] // Two rows will be shown\n};","tagName":"pre"},{"text":"Each column definition should have a link to the data through the field property for rendering. Doing it this way separates the UI from the data. The data can have any number of fields, regardless of the actual number of columns being displayed in the grid. This means extra information can be stored, such as row metadata, display states, and so on. The same field can also be used to display multiple columns. ","tagName":"p"},{"text":"The basic Grid configuration object is usually something like the following: ","tagName":"p"},{"text":"var fields = [\"intCol\", \"strCol\", \"floatCol\", \"dateCol\"];\nvar records = [\n    {\"intCol\": 1, \"strCol\": \"Sample data\", \"floatCol\": 1.1, \"dateCol\": new Date(\"2014-10-01\")},\n    {\"intCol\": 2, \"strCol\": \"Sample data\", \"floatCol\": 2.2, \"dateCol\": new Date(\"2014-10-02\")},\n    {\"intCol\": 3, \"strCol\": \"Sample data\", \"floatCol\": 3.3, \"dateCol\": new Date(\"2014-10-03\")},\n    {\"intCol\": 4, \"strCol\": \"Sample data\", \"floatCol\": 4.4, \"dateCol\": new Date(\"2014-10-04\")},\n    {\"intCol\": 5, \"strCol\": \"Sample data\", \"floatCol\": 5.5, \"dateCol\": new Date(\"2014-10-05\")}\n];\nvar configObj = {\n    rowHeight: 40, // Grid level option\n    columns: [\n        {name: \"Column 1\", field: fields[0]},\n        {name: \"Column 2\", field: fields[1]},\n        {name: \"Column 3\", field: fields[2]},\n        {name: \"Column 4\", field: fields[3]}\n    ],\n    staticDataRows: records\n};","tagName":"pre"},{"text":"For further change at runtime, it is recommended to use Grid's APIs through api property instead of changing config property. Changing config property will result in re-creation of the entire grid and could impact the performance. ","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"Note: you can see JavaScript details from the live example below by clicking the lower right button.","tagName":"p"},{"text":"","tagName":"pre"},{"text":"var fields = [\"intCol\", \"strCol\", \"floatCol\", \"dateCol\"];\nvar records = [\n  { \"intCol\": 1, \"strCol\": \"Sample data\", \"floatCol\": 1.1, \"dateCol\": new Date(\"2014-10-01\") },\n  { \"intCol\": 2, \"strCol\": \"Sample data\", \"floatCol\": 2.2, \"dateCol\": new Date(\"2014-10-02\") },\n  { \"intCol\": 3, \"strCol\": \"Sample data\", \"floatCol\": 3.3, \"dateCol\": new Date(\"2014-10-03\") },\n  { \"intCol\": 4, \"strCol\": \"Sample data\", \"floatCol\": 4.4, \"dateCol\": new Date(\"2014-10-04\") },\n  { \"intCol\": 5, \"strCol\": \"Sample data\", \"floatCol\": 5.5, \"dateCol\": new Date(\"2014-10-05\") }\n];\nvar configObj = {\n  rowHeight: 40,\n  columns: [\n    { name: \"Column 1\", field: fields[0] },\n    { name: \"Column 2\", field: fields[1] },\n    { name: \"Column 3\", field: fields[2] },\n    { name: \"Column 4\", field: fields[3] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"}]},{"title":"Initializing Data","filename":"general_concept/initializing-data.html","contents":[{"text":"Grid accepts various data formats for initializing data. Note that Grid has its own internal data structure and its own data table for performing various kinds of data transformations and operations. The formats are ways to help you initially pass the data to Grid's internal data table. ","tagName":"p"},{"text":"Once the data is passed through the grid, the data in the configuration object will no longer have an effect on Grid's internal data. Do not try to modify the data from the configuration once the data applied. There is no two-way binding or property observer in the native JSON object. To modify and access the data, you must use Grid's APIs. This provides better overall performance for data manipulation. ","tagName":"p"},{"text":"Data in Grid can be initialized in rows or arrays format. Data will be defined through staticDataRows property. Grid will automatically detect the types from the given data.","tagName":"p"},{"text":"Data format – rows","tagName":"h2"},{"text":"The rows format is an array of an object map. This is a data structure recommended for general use cases. The data object can contain any number of fields. Fields are not required for this format.","tagName":"p"},{"text":"var configObj = {\n    //...\n    staticDataRows: [\n        {\"Field 1\": 1, \"Field 2\": 2}, // First row\n        {\"Field 1\": 3, \"Field 2\": 4}, // Second row\n        //...\n    ],\n    //...\n};","tagName":"pre"},{"text":"Array of object example","tagName":"h2"},{"text":"","tagName":"pre"},{"text":"var fields = [\"f1\", \"f2\", \"f3\", \"f4\"];\nvar configObj = {\n  columns: [\n    { name: \"Column 1\", field: fields[0] },\n    { name: \"Column 2\", field: fields[1] },\n    { name: \"Column 3\", field: fields[2] },\n    { name: \"Column 4\", field: fields[3] }\n  ],\n  staticDataRows: [\n    { f1: 1, f2: 2, f3: 3, f4: \"Some String\" },\n    { f1: 1, f4: \"Some String\" }, // There is no need to have the same field each row\n    { f1: 1, f2: 2, f3: 3, f4: \"Some String\", f5: \"Extra Field Can be Added\" },\n    { f1: 1, f2: 2, f3: 3, f4: \"Some String\" },\n    { f1: 1, f2: 2, f3: 3, f4: \"Some String\" },\n    { f1: 1, f2: 2, f3: 3, f4: \"Some String\" }\n  ]\n};\nvar grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Data format – array","tagName":"h2"},{"text":"Use the array format if you want to specify the initial data in a two-dimensional array format. This format is the shortest way to write, and makes it easier to populate the data from the code. Grid will map the data to the the field property of the column configuration objects with order corresponding to the column order.","tagName":"p"},{"text":"var configObj2 = {\n    //...\n    columns: [\n        { field: \"Field 1\" },\n        { field: \"Field 2\" },\n        // ...\n    ],\n    //...\n    staticDataRows: [\n        [1, 2], // Fields will be taken from column configuration\n        [3, 4],\n        //...\n    ],\n    //...\n};","tagName":"pre"},{"text":"2D data example","tagName":"h2"},{"text":"","tagName":"pre"},{"text":"var fields = [\"f1\", \"f2\", \"f3\", \"f4\"];\nvar configObj = {\n  columns: [\n    { name: \"Column 1\", field: fields[0] },\n    { name: \"Column 2\", field: fields[1] },\n    { name: \"Column 3\", field: fields[2] },\n    { name: \"Column 4\", field: fields[3] }\n  ],\n  staticDataRows: [\n    [1, 2, 3, \"Some String\"],\n    [1, 2, 3, \"Some String\"],\n    [1, 2, 3, \"Some String\"],\n    [1, 2, 3, \"Some String\"],\n    [1, 2, 3, \"Some String\"]\n  ]\n};\nvar grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Static data can also be defined in values property in the row configuration object. This is useful when we want to merge real-time data with the static data. ","tagName":"p"},{"text":"var configObj = {\n    //...\n    rows: [\n        { ric: \"ABC\", values: {\"Field 1\": 1, \"Field 2\": 2}},\n        { ric: \"ABC\", values: {\"Field 1\": 3, \"Field 2\": 4}},\n    ],\n    //...\n};","tagName":"pre"}]},{"title":"Accessing Data","filename":"general_concept/accessing-data.html","contents":[{"text":"Grid has its own data store, but you cannot directly change or get the data from the staticDataRows property defined in the configuration object. This is because Grid needs to perform data transformations such as sorting, filtering, grouping, and so on. Data content, row index, or references can be changed but will not be reflected back to the data in the staticDataRows. So, all data manipulation and accessing must be done through APIs. ","tagName":"p"},{"text":"APIs","tagName":"a"},{"text":"The following are some of the commonly used APIs:","tagName":"p"},{"text":"Getters","tagName":"h2"},{"text":"logDV() and logDT() are used to see all visible data in a table format on the developer tool console.","tagName":"p"},{"text":"    grid.api.logDV(); // Log rows in the current view (i.e., rows after sorting and filtering applied)\n\n    grid.api.logDT(); // Log rows in their original order","tagName":"pre"},{"text":"getMultipleRowData() is used to get all rows.","tagName":"p"},{"text":"    var rows = grid.api.getMultipleRowData();\n    console.log(rows);","tagName":"pre"},{"text":"getMultipleRowData(rowIndices) is used to get multiple row data from specific row indices at once.","tagName":"p"},{"text":"    grid.api.getMultipleRowData([0, 2, 4]);","tagName":"pre"},{"text":"getRowData(rowIndex) is used to get row data from the specified row index.","tagName":"p"},{"text":"    grid.api.getRowData(rowIndex);\n\n    var rowDef = grid.api.getRowDefinition(rowIndex);\n    rowDef.getRowData(); // Alternatively, data can be retrieved from RowDefinition object","tagName":"pre"},{"text":"Setters","tagName":"h2"},{"text":"setRowData(rowRef, values) is used to set multiple field values into a row at once. ","tagName":"p"},{"text":"    grid.api.setRowData(0, {\"Field 1\": 3, \"Field 2\": 5});\n\n    var rowDef = grid.api.getRowDefinition(0);\n    rowDef.setRowData({\"Field 3\": 7}); // Alternatively, data can be set through RowDefinition object","tagName":"pre"},{"text":"insertRow(rowOption, rowRef) is used for inserting a row at a specified position.","tagName":"p"},{"text":"    grid.api.insertRow({}, 0); // Insert an empty row as the first row\n\n    grid.api.insertRow({values: {\"Field 1\": 3, \"Field 2\": 5}}); Insert a row with initial static data as the last row","tagName":"pre"},{"text":"removeRow(rowRef), removeRows(rowRefs) and removeAllRows() are used to remove a single row or multiple rows.","tagName":"p"},{"text":"    grid.api.removeRow(0); // Remove the first row","tagName":"pre"},{"text":"For all available APIs see this document.","tagName":"p"},{"text":"document","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n
                                                                                              \n\n
                                                                                              \n
                                                                                              ","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"update_btn\").addEventListener(\"click\", function() {\n  var record = DataGenerator.generateRecord(fields);\n  grid.api.setRowData(0, record);\n});\n\ndocument.getElementById(\"insert_btn\").addEventListener(\"click\", function() {\n  var record = DataGenerator.generateRecord(fields);\n  grid.api.insertRow({ values: record }, 0);\n});\n\ndocument.getElementById(\"print_btn\").addEventListener(\"click\", function() {\n  var row = grid.api.getRowData(0);\n  msg_div.textContent = row ? JSON.stringify(row, function replacer(key, value) {\n    if (key === \"ROW_DEF\") {\n      return undefined;\n    }\n    return value;\n  }) : \"\";\n});","tagName":"pre"},{"text":"efx-grid {\n  height: 169px;\n}\n\nhtml hr {\n  margin: 5px;\n}\n\n#msg_div {\n  height: 50px;\n}","tagName":"pre"}]},{"title":"Event Listeners","filename":"general_concept/event-listeners.html","contents":[{"text":"Since Grid is element, you can directly listen for events from it. It's recommended to listen for native events and then use the getRelativePosition() method to resolve which cell, area, or position are the target of the event. This is because Grid does not render every cell, and the cells are being reused across different rows. So it's important to resolve the position inside the event handler (such as, runtime resolving). You can use any native event and resolve the position by using the getRelativePosition() method.","tagName":"p"},{"text":"Click","tagName":"h2"},{"text":"If you want to do something on the click event, you could do the following code snippet:","tagName":"p"},{"text":"var grid = document.getElementById(\"grid_id\");\n\ngrid.addEventListener(\"click\", function(e){ // Notice that api property is not required here\n    var pos = grid.api.getRelativePosition(e); // Resolve the position at runtime\n\n    console.log(pos.sectionType, pos.colIndex, pos.rowIndex); // pos object contains a lot of information\n});","tagName":"pre"},{"text":"Right click","tagName":"h2"},{"text":"Simply use native contextmenu event to detect right click on the grid element. Use preventDefault() method to prevent default context menu behaviors from triggering.","tagName":"p"},{"text":"Mouse events","tagName":"h2"},{"text":"The common native events, such as mousemove, mouseup, and mousedown, can be listened on the grid element.","tagName":"p"},{"text":"Note: Grid internally divides itself into several sections. The top section is called title and the lower part is called content. So the sectionType from the position object can be one of the following values: title, content, footer.","tagName":"p"},{"text":"Listening to native events example","tagName":"h2"},{"text":"\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"id\", \"companyName\", \"market\", \"CF_NETCHNG\", \"CF_VOLUME\"];\nvar columnNames = [\"Id\", \"Company Name\", \"Market\", \"Net Chng.\", \"Volume\"];\nvar columns = fields.map(function(f, idx) {\n  return {\n    field: f,\n    name: columnNames[idx]\n  }\n});\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 1, rowCount: 20 });\n\nvar configObj = {\n  columns: columns,\n  staticDataRows: records\n};\nvar grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;\n\ngrid.addEventListener(\"click\", function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  var ary = [\n    \"Clicked\",\n    \"Section: \" + pos.sectionType,\n    \"Col Idx: \" + pos.colIndex,\n    \"Row Idx: \" + pos.rowIndex\n  ];\n  alert(ary.join(\"\\n\"));\n});\ngrid.addEventListener(\"contextmenu\", function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  var ary = [\n    \"Right clicked\",\n    \"Section: \" + pos.sectionType,\n    \"Col Idx: \" + pos.colIndex,\n    \"Row Idx: \" + pos.rowIndex\n  ];\n  alert(ary.join(\"\\n\"));\n\n  e.preventDefault();\n  e.stopPropagation();\n});\ngrid.addEventListener(\"mousemove\", function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  var ary = [\n    \"Section: \" + pos.sectionType,\n    \"Col Idx: \" + pos.colIndex,\n    \"Row Idx: \" + pos.rowIndex\n  ];\n  msg_ta.value = ary.join(\"\\n\");\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\ntextarea {\n  width: 100%;\n  height: 80px;\n  font-size: 20px;\n}\n\natlas-blotter {\n  height: 300px;\n}","tagName":"pre"},{"text":"With row virtualization and column virtualization, Grid only renders cells that are on the current view. So, only cells and their content that are in range of the current view can be retrieved. To retrieve cell content, use getCoreGrid to get core grid instance first. Then, use getCell(section, colIndex, rowIndex) from the core to get cell object. Finally, use getContent() from the cell object to get the cell content. If you want all the data content (not the content elements), please use grid data related APIs instead.","tagName":"p"},{"text":"data related APIs","tagName":"a"},{"text":"If you are inside an event listener, the corresponding cell object is already provided from the returned value of getRelativePosition method. You can then get cell content from the cell object using getContent() method. Alternatively, you can use composedPath method from native event argument to get a path to actual target element.","tagName":"p"},{"text":"composedPath","tagName":"a"},{"text":"Note: Grid is a custom element which encapusulate all of its content under its shadow root. Hence, target property from the native Event argument will always return Grid element and not actual target element inside the grid.","tagName":"p"},{"text":"Getting cell content example","tagName":"h2"},{"text":"
                                                                                              \n  \n  \n  \n  \n  \n  \n
                                                                                              \n
                                                                                              \n\n
                                                                                              \n","tagName":"pre"},{"text":"get_btn.addEventListener(\"click\", function(e) {\n  var colIndex = +col_in.value || 0;\n  var rowIndex = +row_in.value || 0;\n\n  var core = grid.api.getCoreGrid();\n  var cell = core.getCell(\"content\", colIndex, rowIndex);\n  var cellContent = cell ? cell.getContent() : null;\n  var ary = [\n    \"Getting cell: \" + colIndex + \", \" + rowIndex,\n    \"Cell content: \" + (cellContent ? cellContent.textContent : \"\")\n  ];\n  alert(ary.join(\"\\n\"));\n});\n\nvar fields = [\"id\", \"companyName\", \"market\", \"CF_NETCHNG\", \"CF_VOLUME\"];\nvar columnNames = [\"Id\", \"Company Name\", \"Market\", \"Net Chng.\", \"Volume\"];\nvar columns = fields.map(function(f, idx) {\n  return {\n    field: f,\n    name: columnNames[idx]\n  }\n});\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 1, rowCount: 20 });\n\nvar configObj = {\n  columns: columns,\n  staticDataRows: records\n};\nvar grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;\n\ngrid.addEventListener(\"mousemove\", function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  var cell = pos.cell;\n  var cellContent = cell ? cell.getContent() : null;\n  msg_ta.value = cellContent ? cellContent.textContent : \"null\";\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\ntextarea {\n  width: 100%;\n  height: 30px;\n  font-size: 20px;\n}\n\ninput[type=\"number\"] {\n  width: 60px;\n}\n\ni:empty {\n  padding-left: 10px;\n}\n\natlas-blotter {\n  height: 300px;\n}","tagName":"pre"}]},{"title":"Disposing Grid","filename":"general_concept/disposing-grid.html","contents":[{"text":"Grid holds a lot of resources and event listeners. Removing Grid from a document may not enough to clear all references to Grid, and thus memory occupied by Grid cannot be collected by the browser's garbage collector. If Grid is created and removed multiple times without refreshing the page, it could cause huge memory leak. It is very important to properly dispose existing Grid before creating a new instance of Grid.","tagName":"p"},{"text":"To dispose grid, you can set config property to null as shown below:","tagName":"p"},{"text":"var grid = document.getElementById('grid_id');\ngrid.config = null; // Clear all resources held by Grid","tagName":"pre"},{"text":"Note: after setting config to null, the element is still intact and in the same place in the document. You can then choose either creating a new grid with a new configuration or completely removing grid from the document.","tagName":"p"},{"text":"Replacing Grid","tagName":"h2"},{"text":"If you want to replace existing grid with a new one with the new configuration, setting config property to null is unnecessary. All existing resources held by Grid are still removed after the replacing.","tagName":"p"},{"text":"var grid = document.getElementById('grid_id');\ngrid.config = { // New configuration\n    // ...\n};","tagName":"pre"},{"text":"Removing Grid from the document","tagName":"h2"},{"text":"If you intent not to use Grid anymore, then setting config property to null is required to prevent memory leak. Once config is set to null, you can remove the element like usual. ","tagName":"p"},{"text":"var grid = document.getElementById('grid_id');\ngrid.config = null;\ngrid.parentNode.removeChild(grid);","tagName":"pre"},{"text":"Temporary removing grid from the document is also an option, if you intent to reuse the same grid. Setting config property to null is not always necessary. It depends on the use cases in your application.","tagName":"p"},{"text":"grid = document.getElementById('grid_id');\n// Temporarily remove grid from the document while keeping the configuration\ngrid.parentNode.removeChild(grid); \n\n// ...\n// Some time later...\n// ...\n\ndocument.body.appendChild(grid); // Restore the same grid ","tagName":"pre"}]},{"title":"Comprehensive","filename":"showcases/comprehensive.html","contents":[{"text":"
                                                                                              \n  \n        Select Columns\n        Data Size:\n        \n            10 Rows\n            100 Rows\n            1,000 Rows\n            10,000 Rows\n            100,000 Rows\n        \n    \n  \n        \n        \n    \n
                                                                                              \n
                                                                                              \n  \n
                                                                                              \n","tagName":"pre"},{"text":"var grid = document.getElementsByTagName(\"atlas-blotter\")[0];\nvar dataSizeSelect = document.getElementById(\"dataSize\");\nvar selectColumnBtn = document.getElementById(\"select_column_btn\");\n\n// Extensions\nvar checkboxExt = new tr.CheckboxExtension();\nvar rowGroupingExt = new tr.RowGroupingExtension();\nvar conditionalColoringExt = new tr.ConditionalColoringExtension();\nvar columnGroupingExt = new tr.ColumnGroupingExtension();\nvar cellSelectionExt = new tr.CellSelectionExtension();\nvar filterInputExt = new tr.FilterInputExtension();\nvar columnResizingExt = new tr.ColumnResizingExtension();\nvar textFormattingExt = new tr.TextFormattingExtension();\nvar heatMapExt = new tr.HeatMapExtension();\nvar inCellEditingExt = new tr.InCellEditingExtension();\nvar percentBarExt = new tr.PercentBarExtension();\nvar filterExt = new tr.RowFilteringExtension();\nvar rowColoring = new tr.RowColoringExtension();\nvar contextMenuExt = new tr.ContextMenuExtension();\nvar columnFitterExt = new tr.ColumnFitterExtension();\n\nvar userList = [\n  \"Amanda Herrera\",\n  \"Josh Robertson\",\n  \"Abbie Parker\",\n  \"Christopher Washington\",\n  \"Casey Alvarez\",\n  \"Joshua Castillo\",\n  \"Skye Wilson\",\n  \"Tommy Medina\",\n  \"Vincent Smith\",\n  \"Jackson Garcia\",\n  \"Lisa Alexander\",\n  \"Holly Brooks\",\n  \"Zara Marshall\",\n  \"Kiera Shaw\"\n];\n\nvar languageList = [\n  \"French\",\n  \"English\",\n  \"German\",\n  \"Italian\",\n  \"Portuguese\",\n  \"Chinese\",\n  \"French\",\n  \"German\",\n  \"English\",\n  \"English\",\n  \"English\",\n  \"French\",\n  \"German\",\n  \"Chinese\"\n];\n\nvar codeList = {\n  \"FRA\": \"France\",\n  \"GBR\": \"United Kingdom\",\n  \"ISL\": \"Iceland\",\n  \"ITA\": \"Italy\",\n  \"PRT\": \"Protugal\",\n  \"SWE\": \"Sweden\",\n  \"GRC\": \"Greece\",\n  \"DEU\": \"Germany\",\n  \"NOR\": \"Norway\",\n  \"IND\": \"India\",\n  \"CHN\": \"China\"\n}\n\nvar countryList = [\n  \"FRA\",\n  \"GBR\",\n  \"ISL\",\n  \"ITA\",\n  \"PRT\",\n  \"SWE\",\n  \"GRC\",\n  \"DEU\",\n  \"NOR\",\n  \"GBR\",\n  \"IND\",\n  \"FRA\",\n  \"DEU\",\n  \"CHN\"\n];\n\nvar gameList = [\n  \"Overhold\", \"Cardify\", \"Alphazap\", \"Toughjoyfax\", \"Voltsillam\",\n  \"Home Ing\", \"Otcom\", \"Solarbreeze\", \"Alpha\", \"Cooker run\",\n  \"Stronghold\", \"Tresom\", \"Andalax\", \"Rank\", \"King of plant\",\n  \"Alphazap\", \"Viva\", \"Mat Lam Tam\", \"Wrapsafe\", \"Gembucket\"\n];\n\ntr.DataGenerator.addFieldInfo(\"game\", {\n  type: \"set\",\n  members: gameList\n});\n\ntr.DataGenerator.addFieldInfo(\"user_id\", {\n  type: \"number\",\n  min: 0,\n  max: userList.length,\n  prec: 0\n});\n\nvar fields = [\n  \"Name\",\n  \"Language\",\n  \"Country\",\n  \"Game Name\",\n  \"Bought\",\n  \"Bank Balance\",\n  \"Rating\",\n  \"Total Winnings\",\n  \"Jan\",\n  \"Feb\",\n  \"Mar\",\n  \"Apr\",\n  \"May\",\n  \"Jun\",\n  \"Jul\",\n  \"Aug\",\n  \"Sep\",\n  \"Oct\",\n  \"Nov\",\n  \"Dec\"\n];\n\nvar conditionsArr = fields.map(function(field) {\n  return [{\n    backgroundColor: \"#b9f6ca66\",\n    expression: \"[\" + field + \"] > 60\"\n  }, {\n    backgroundColor: \"#ff80ab66\",\n    expression: \"[\" + field + \"] < 20\"\n  }];\n});\n\n// Custom Capitalize Formatter\nconst capitalizeFormatter = {\n  render: function() {},\n  bind: function(rowIndex, colIndex, value, cell) {\n    console.log(\"value\", value);\n    cell.setContent(value.toString()\n      .toUpperCase());\n  }\n};\n\nvar dataTypeFields = [\n  \"user_id\",\n  \"game\",\n  \"boolean\", // Bought\n  \"TR.Volume\", // Bank Balance\n  \"index100\", // Rating\n  \"YRHIGH\", // Total Winnings\n];\n\nvar randNumber = tr.DataGenerator.randNumber;\n\nvar seed = Math.round(Math.random() * 100);\nvar mapRow = function(row) {\n  var userId = row[0];\n  return [false, userList[userId], languageList[userId], countryList[userId],\n    row[1], row[2].toString(), row[3], row[4], row[5],\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed),\n    randNumber(0, 100, 2, ++seed)\n  ];\n};\n\nvar dataRows = tr.DataGenerator.generate(dataTypeFields, { seed: seed, numRows: 100 })\n  .map(mapRow);\n\nconst entries = languageList.map(function(item) {\n  return {\n    label: item,\n    value: item\n  };\n});\n\nvar allAvailableColumns = [{\n    checkboxColumn: true,\n    leftPinned: true\n  },\n  {\n    id: \"c0\",\n    name: fields[0],\n    field: fields[0],\n    width: 200,\n    editableContent: true\n  },\n  {\n    id: \"c1\",\n    name: fields[1],\n    field: fields[1],\n    editableContent: true,\n    inCellEditing: {\n      type: \"select\",\n      entries: entries\n    },\n    filterInput: {\n      type: \"select\",\n      entries: entries\n    },\n    width: 200\n  },\n  {\n    id: \"c2\",\n    name: fields[2],\n    field: fields[2],\n    filterInput: false,\n    minWidth: 100,\n    textAlign: \"c\",\n    binding: tr.CoralButtonFormatter.create({\n      events: {\n        click: function(event, context) {\n          var value = context.getData(context.field);\n          alert(codeList[value]);\n        }\n      }\n    })\n  },\n  {\n    id: \"c3\",\n    name: fields[3],\n    field: fields[3],\n    filterInput: false,\n    binding: capitalizeFormatter,\n    width: 120\n  },\n  {\n    id: \"c4\",\n    name: fields[4],\n    field: fields[4],\n    filterInput: false,\n    minWidth: 100,\n    textAlign: \"center\",\n    binding: tr.CoralIconFormatter.create({\n      icon: {\n        true: \"tick\",\n        false: \"cross\"\n      }\n    }),\n    inCellEditing: {\n      type: \"checkbox\"\n    },\n    editableContent: true\n  },\n  {\n    id: \"c5\",\n    name: fields[5],\n    field: fields[5],\n    minWidth: 120,\n    textAlign: \"right\",\n    heatMap: {\n      midPoint: 40\n    },\n    inCellEditing: {\n      type: \"number\"\n    },\n    filterInput: {\n      type: \"number\"\n    },\n    editableContent: true,\n    formatType: {\n      type: \"number\",\n      separator: true,\n      decimalPlaces: 0\n    }\n  },\n  {\n    id: \"c6\",\n    name: fields[6],\n    field: fields[6],\n    filterInput: false,\n    percentBar: {\n      alignment: \"l\"\n    },\n    editableContent: true,\n    noFitting: true,\n    width: 120\n\n  },\n  {\n    id: \"c7\",\n    name: fields[7],\n    field: fields[7],\n    noFitting: true,\n    minWidth: 100,\n    textAlign: \"right\",\n    formatType: {\n      type: \"number\",\n      separator: true,\n      decimalPlaces: 0\n    }\n  },\n  {\n    id: \"c8\",\n    name: fields[8],\n    field: fields[8],\n    conditions: conditionsArr[8],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  },\n  {\n    id: \"c9\",\n    name: fields[9],\n    field: fields[9],\n    conditions: conditionsArr[9],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  },\n  {\n    id: \"c10\",\n    name: fields[10],\n    field: fields[10],\n    conditions: conditionsArr[10],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  }, {\n    id: \"c11\",\n    name: fields[11],\n    field: fields[11],\n    conditions: conditionsArr[11],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  }, {\n    id: \"c12\",\n    name: fields[12],\n    field: fields[12],\n    conditions: conditionsArr[12],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  }, {\n    id: \"c13\",\n    name: fields[13],\n    field: fields[13],\n    conditions: conditionsArr[13],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  },\n  {\n    id: \"c14\",\n    name: fields[14],\n    field: fields[14],\n    conditions: conditionsArr[14],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  },\n  {\n    id: \"c15\",\n    name: fields[15],\n    field: fields[15],\n    conditions: conditionsArr[15],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  },\n  {\n    id: \"c16\",\n    name: fields[16],\n    field: fields[16],\n    conditions: conditionsArr[16],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  },\n  {\n    id: \"c17\",\n    name: fields[17],\n    field: fields[17],\n    conditions: conditionsArr[17],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120,\n\n  },\n  {\n    id: \"c18\",\n    name: fields[18],\n    field: fields[18],\n    conditions: conditionsArr[18],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120\n  },\n  {\n    id: \"c19\",\n    name: fields[19],\n    field: fields[19],\n    conditions: conditionsArr[19],\n    textAlign: \"right\",\n    formatType: \"percent\",\n    width: 120,\n    editableContent: true\n  }\n];\n\n// generate dynamic data and assign to \"atlas-blotter\"\ndataSizeSelect.addEventListener(\"value-changed\", function(e) {\n  var seed = Math.round(Math.random() * 100);\n  var dataRows = tr.DataGenerator.generate(dataTypeFields, { seed: seed, numRows: e.detail.value })\n    .map(mapRow);\n  grid.api.removeAllRows();\n  grid.data = dataRows;\n});\n\n// set up row Filter Extension\nsearch_input.addEventListener(\"keyup\", function(e) {\n  const input = e.currentTarget;\n\n  if (input._prevValue !== input.value) {\n    input._prevValue = input.value;\n    filterExt.refresh(); // Force filter triggering\n  }\n});\n\nvar filterFunc = function(rowData, rowId, context) {\n  var str = \"\";\n  var val = context.input.value.toLowerCase();\n  var record = rowData[\"ROW_DEF\"].getRowData();\n  for (var key in record) {\n    str += record[key] + \" \";\n  }\n  return str.toLowerCase().indexOf(val) > -1;\n};\n\nvar context = {\n  input: search_input\n};\n\nfilterExt.addGridFilter(filterFunc, context);\n\n// Prepare model for context-menu\nconst contextMenuModel = {\n  items: {\n    FILTER: {\n      text: \"Filter\",\n      callback: function(e) {\n        filterExt.openDialog(e.colIndex, {\n          sortUI: true, // Show Sort area\n          filterUI: true, // Show Filter area\n          sortState: \"d\", // \"a\" for ascending or \"d\" for descending\n          filterChanged: function(e) { // Filter changed handler\n            console.log(e.detail);\n          },\n          sortChanged: function(e) { // Sort changed handler\n            console.log(e.detail);\n          }\n        });\n      }\n    },\n    ROW_COLORING: {\n      text: \"Set Row Color\",\n      items: [\n        { text: \"Red\", value: \"#FF0000\" },\n        { text: \"Green\", value: \"#00FF00\" },\n        { text: \"Blue\", value: \"#0000FF\" },\n        { type: \"separator\" },\n        { text: \"Default\", value: \"\" }\n      ],\n      callback: function(e) {\n        const { rowIndex, item: { value } } = e;\n        rowColoring.setRowColor(rowIndex, value);\n      }\n    }\n  },\n  onMenu: function(e) {\n    var context = e.context;\n    var menu = e.menu;\n    if (context === \"header\") {\n      menu.addItems(\"FILTER\");\n    } else if (context === \"content\") {\n      menu.addItems([\"ROW_COLORING\", \"FILTER\"]);\n    }\n  }\n};\n\ncontextMenuExt.listen(\"contextmenu\", function(e) {\n  // contextmenu event argument provides info about the right click position within the core grid\n  console.log(e);\n});\n\n// set up \"column-selection-dialog\"\nvar dialog = null;\nvar confirmChanged = function(e) {\n  grid.columns = e.detail.data;\n};\n\nselectColumnBtn.addEventListener(\"click\", function() {\n  if (!dialog) {\n    dialog = document.createElement(\"column-selection-dialog\");\n    dialog.addEventListener(\"confirm\", confirmChanged);\n  }\n\n  var visibleColumns = grid.columns.filter(function(column) {\n    return column.checkboxColumn !== true;\n  });\n\n  var allColumns = allAvailableColumns.filter(function(column) {\n    return column.checkboxColumn !== true;\n  });\n\n  dialog.init({\n    data: allColumns.slice(),\n    visibleItems: visibleColumns.slice()\n  });\n  dialog.show();\n});\n\nvar blotterConfig = {\n  scrollbar: true,\n  autoHideScrollbar: false,\n  linearWheelScrolling: true,\n  stepScroll: true,\n  columnGrouping: [{\n      id: \"g1\",\n      name: \"Participant\",\n      alignment: \"center\",\n      children: [\"c0\", \"c1\", \"c2\"]\n    },\n    {\n      id: \"g2\",\n      name: \"Game of Choice\",\n      alignment: \"center\",\n      children: [\"c3\", \"c4\"]\n    },\n    {\n      id: \"g3\",\n      name: \"Performance\",\n      children: [\"c5\"]\n    },\n    {\n      id: \"g4\",\n      name: \"Monthly Breakdown\",\n      alignment: \"left\",\n      children: [\"c8\", \"c9\", \"c10\", \"c11\", \"c12\", \"c13\", \"c14\", \"c15\", \"c16\", \"c17\", \"c18\", \"c19\"]\n    }\n  ],\n  extensions: [\n    columnGroupingExt,\n    checkboxExt,\n    rowGroupingExt,\n    conditionalColoringExt,\n    cellSelectionExt,\n    filterInputExt,\n    columnResizingExt,\n    textFormattingExt,\n    heatMapExt,\n    inCellEditingExt,\n    percentBarExt,\n    filterExt,\n    contextMenuExt,\n    rowColoring,\n    columnFitterExt\n  ],\n  inCellEditing: {\n    type: \"input\",\n    contentSource: \"field\",\n    autoCommitText: true,\n    beforeCommit: function(e) {\n      // console.log(\"beforeCommit\", e)\n    }\n  },\n  contextMenu: contextMenuModel,\n  columnFitting: {\n    title: false,\n    autoAdjust: true,\n    paddingSize: 20\n  }\n};\n\ngrid.columns = allAvailableColumns;\ngrid.config = blotterConfig;\ngrid.data = dataRows;\n\ncolumn_grouping_selector.addEventListener(\"opened-changed\", function(e) {\n  if (!this.opened) {\n    var columns = grid.columns;\n    var filtered = columns.filter(function(column) {\n      return column.checkboxColumn !== true;\n    });\n    var data = filtered.map(function(column) {\n      return {\n        label: column.name,\n        value: column.field\n      }\n    });\n    var criteria = rowGroupingExt.getGroupingCriteria();\n    var selectorData = data.filter(function(item) {\n      return criteria.indexOf(item.value) < 0;\n    });\n\n    column_grouping_selector.data = selectorData;\n  }\n});\n\nfunction onPillRemove(e) {\n  // Remove Pill\n  var pill = e.target;\n  pill.parentElement.removeChild(pill._arrow);\n  pill.parentElement.removeChild(pill);\n  var field = pill.value;\n\n  // Update grouping criteria\n  var criteria = rowGroupingExt.getGroupingCriteria().slice(0);\n  criteria.splice(criteria.indexOf(field), 1);\n  rowGroupingExt.setGroupingCriteria(criteria);\n}\n\ncolumn_grouping_selector.addEventListener(\"value-changed\", function(e) {\n  var value = e.detail.value;\n  var label = this.label;\n\n  // Insert Pill\n  var pill = document.createElement(\"coral-pill\");\n\n  var arrow = document.createElement(\"coral-icon\");\n  arrow.className = \"arrow\";\n  arrow.setAttribute('icon', 'right');\n\n  pill._arrow = arrow;\n  pill.setAttribute(\"clears\", \"\");\n  pill.innerText = label;\n  pill.value = value;\n  pill.addEventListener(\"clear\", onPillRemove);\n\n  var container = document.getElementById(\"grouping\");\n  container.appendChild(pill);\n  container.appendChild(arrow);\n\n  this.value = \"\";\n\n  // Update grouping criteria\n  var criteria = rowGroupingExt.getGroupingCriteria();\n  var criteria = criteria.concat([value]);\n  rowGroupingExt.setGroupingCriteria(criteria);\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 600px;\n}\n\n#grouping .arrow {\n  color: red;\n  margin: 0 5px;\n  vertical-align: middle;\n}\n\n#grouping .arrow:last-child {\n  display: none;\n}\n\ncoral-pill {\n  margin: auto;\n}\n\n#column_grouping_selector {\n  margin-right: 5px;\n}","tagName":"pre"},{"text":"As seen above, the showcase includes a combination of features and extensions which allow Grid to support any data types as well as data visualization.","tagName":"p"},{"text":"The most commonly used features have been included in this showcase, such as sorting, filtering, and column moving. ","tagName":"p"},{"text":"The extensions show how they can leverage Grid so it can support many use cases. The following offers a brief explanation about some of their usage:","tagName":"p"},{"text":"The showcase includes all the following Grid features and extensions:","tagName":"p"}]},{"title":"Overview","filename":"apis/README.html","contents":[{"text":"Grid API documents consist of Core and Real-time Grid libraries.In this documents, you can find type definitions, methods and events for each class object.","tagName":"p"},{"text":"efx-grid is also a custom element which wraps Real-time Grid, providing an easy way to display real-time data in a tabular format. It allows you to create list of multiple instruments with multiple real-time and fundamentals columns.","tagName":"p"},{"text":"Real-time Grid","tagName":"a"},{"text":"typeDef section","tagName":"a"},{"text":"Real-time Grid","tagName":"a"},{"text":"Core","tagName":"a"},{"text":"Real-time Grid is built on top of Core with JET's Quotes support, providing an easy way to display real-time data in a tabular format.","tagName":"p"},{"text":"Real-time Grid","tagName":"a"},{"text":"Core is a core engine of grid written in Javascript. It can be accessed from Real-time Grid through getCoreGrid() method. ","tagName":"p"},{"text":"Core","tagName":"a"},{"text":"If you are looking for usage or how it looks like checkout Usage Guide Document.","tagName":"p"},{"text":"Usage Guide Document","tagName":"a"},{"text":"Core APIs","tagName":"h2"},{"text":"Cell","tagName":"a"},{"text":"CellSpans","tagName":"a"},{"text":"ColumnStats","tagName":"a"},{"text":"DataCache","tagName":"a"},{"text":"DataTable","tagName":"a"},{"text":"DataView","tagName":"a"},{"text":"DragAndDropTitlePlugin","tagName":"a"},{"text":"ElementWrapper","tagName":"a"},{"text":"EventDispatcher","tagName":"a"},{"text":"Grid","tagName":"a"},{"text":"HScrollbar","tagName":"a"},{"text":"ILayoutGrid","tagName":"a"},{"text":"LayoutGrid","tagName":"a"},{"text":"Scrollbar","tagName":"a"},{"text":"SectionSettings","tagName":"a"},{"text":"Segment","tagName":"a"},{"text":"SegmentCollection","tagName":"a"},{"text":"SortableTitlePlugin","tagName":"a"},{"text":"VScrollbar","tagName":"a"},{"text":"Realtime Grid APIS","tagName":"h2"},{"text":"ColumnDefinition","tagName":"a"},{"text":"Grid","tagName":"a"},{"text":"RowDefinition","tagName":"a"}]},{"title":"Cell","filename":"apis/core/Cell.html","contents":[{"text":"new Cell(opt_elementopt, opt_sectionopt)","tagName":"h4"},{"text":"ElementWrapper","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"Extends","tagName":"h3"},{"text":"ElementWrapper","tagName":"a"},{"text":"Members","tagName":"h3"},{"text":"_content","tagName":"h4"},{"text":"ElementWrapper#_content","tagName":"a"},{"text":"_content","tagName":"h4"},{"text":"ElementWrapper#_content","tagName":"a"},{"text":"_element","tagName":"h4"},{"text":"ElementWrapper#_element","tagName":"a"},{"text":"_rawContent","tagName":"h4"},{"text":"_rawContent","tagName":"h4"},{"text":"freezeLayout","tagName":"h4"},{"text":"isFrozen","tagName":"h4"},{"text":"setAutoContentClipping","tagName":"h4"},{"text":"Methods","tagName":"h3"},{"text":"addClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#addClass","tagName":"a"},{"text":"addContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#addContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"disable(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#disable","tagName":"a"},{"text":"dispose()","tagName":"h4"},{"text":"ElementWrapper#dispose","tagName":"a"},{"text":"ElementWrapper#dispose","tagName":"a"},{"text":"enable(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enable","tagName":"a"},{"text":"enableClass(str, opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enableClass","tagName":"a"},{"text":"fillParentHeight(opt_percentopt)","tagName":"h4"},{"text":"ElementWrapper#fillParentHeight","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"fillParentWidth(opt_percentopt)","tagName":"h4"},{"text":"ElementWrapper#fillParentWidth","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getAttribute","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getBoundingClientRect()","tagName":"h4"},{"text":"ElementWrapper#getBoundingClientRect","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getClass()","tagName":"h4"},{"text":"ElementWrapper#getClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContent(opt_allContentopt)","tagName":"h4"},{"text":"ElementWrapper#getContent","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getElement()","tagName":"h4"},{"text":"ElementWrapper#getElement","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getHeight()","tagName":"h4"},{"text":"ElementWrapper#getHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getId()","tagName":"h4"},{"text":"ElementWrapper#getId","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getLeft()","tagName":"h4"},{"text":"ElementWrapper#getLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getNextSibling()","tagName":"h4"},{"text":"ElementWrapper#getNextSibling","tagName":"a"},{"text":"ElementWrapper#getNextSibling","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getParent()","tagName":"h4"},{"text":"ElementWrapper#getParent","tagName":"a"},{"text":"ElementWrapper#getParent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollLeft()","tagName":"h4"},{"text":"ElementWrapper#getScrollLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollTop()","tagName":"h4"},{"text":"ElementWrapper#getScrollTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getSection()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"getStyle(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getStyle","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContent()","tagName":"h4"},{"text":"ElementWrapper#getTextContent","tagName":"a"},{"text":"ElementWrapper#getTextContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTextElement()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltip()","tagName":"h4"},{"text":"ElementWrapper#getTooltip","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTop()","tagName":"h4"},{"text":"ElementWrapper#getTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getWidth()","tagName":"h4"},{"text":"ElementWrapper#getWidth","tagName":"a"},{"text":"ElementWrapper#getWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hasClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasElement()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hide(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hide","tagName":"a"},{"text":"initialize()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"insertAfter(previousSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertAfter","tagName":"a"},{"text":"insertBefore(nextSibling)","tagName":"h4"},{"text":"ElementWrapper#insertBefore","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertBefore","tagName":"a"},{"text":"insertFloatingIcon(elem, opt_orderopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"insertFrontIcon(elem, opt_orderopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isEnabled()","tagName":"h4"},{"text":"ElementWrapper#isEnabled","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfHorizontalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfHorizontalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfVerticalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfVerticalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isVisible()","tagName":"h4"},{"text":"ElementWrapper#isVisible","tagName":"a"},{"text":"ElementWrapper#isVisible","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"lockContent(opt_locked)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeAttribute","tagName":"a"},{"text":"removeClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeClass","tagName":"a"},{"text":"removeContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#removeContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeFloatingIcon(elemRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeFrontIcon(elemRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeIcon()","tagName":"h4"},{"text":"reset()","tagName":"h4"},{"text":"resetClass()","tagName":"h4"},{"text":"resetToInitialState()","tagName":"h4"},{"text":"setAttribute(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttribute","tagName":"a"},{"text":"setAttributes(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttributes","tagName":"a"},{"text":"setClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setClass","tagName":"a"},{"text":"setContent(content, opt_tooltipopt)","tagName":"h4"},{"text":"ElementWrapper#setContent","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setContentTooltip(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setHeight(val)","tagName":"h4"},{"text":"ElementWrapper#setHeight","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setId(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setId","tagName":"a"},{"text":"setLeft(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setParent(parent, opt_prependopt)","tagName":"h4"},{"text":"ElementWrapper#setParent","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setParent","tagName":"a"},{"text":"setStyle(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyle","tagName":"a"},{"text":"setStyles(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyles","tagName":"a"},{"text":"setTextContent(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTextContent","tagName":"a"},{"text":"setTooltip(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTooltip","tagName":"a"},{"text":"setTop(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setWidth(val)","tagName":"h4"},{"text":"ElementWrapper#setWidth","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"show(opt_shownopt)","tagName":"h4"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"toggleClass(cls, forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#toggleClass","tagName":"a"},{"text":"toString()","tagName":"h4"},{"text":"ElementWrapper#toString","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlisten","tagName":"a"},{"text":"unlistenAll(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlistenAll","tagName":"a"},{"text":"updateIcon(icon)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"updatePadding()","tagName":"h4"}]},{"title":"CellSpans","filename":"apis/core/CellSpans.html","contents":[{"text":"new CellSpans()","tagName":"h4"},{"text":"Methods","tagName":"h3"},{"text":"clearAllSpans()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"getAllSpans()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"getColSpan(indexX, indexY)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getOccupyingSpan(indexX, indexY)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"getRowSpan(indexX, indexY)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSpan(indexX, indexY)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"hasSpan()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"removeColumn(at)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeSpan(indexX, indexY)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"removeSpanByColIndex(at, opt_aryopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"removeSpanStartedFromRowIndex(at, opt_aryopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"setColSpan(indexX, indexY, spanVal)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"setRowSpan(indexX, indexY, spanVal)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"CellSpan","tagName":"a"},{"text":"shiftColumn(from, amount)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"}]},{"title":"ColumnStats","filename":"apis/core/ColumnStats.html","contents":[{"text":"new ColumnStats(sourceopt, fieldopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Methods","tagName":"h3"},{"text":"disableOnDemandMode(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"getAbsoluteMax()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAverage()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getCachedColumnData()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnDataGetter()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDataCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getMax()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getMean()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getMidRange()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getMin()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSum()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"markDirty()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnDataGetter(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDataSource(source)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setField(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"DataCache","filename":"apis/core/DataCache.html","contents":[{"text":"new DataCache()","tagName":"h4"},{"text":"Extends","tagName":"h3"},{"text":"EventDispatcher","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"addDataCloudFields(fields)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addStaticFields(fields)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"addSubscription(sub, opt_primaryRicopt, opt_valuesopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"clearAllData(opt_suppressEventopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataCache#event:dataChanged","tagName":"a"},{"text":"clearColumnData(colId, opt_suppressEventopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataCache#event:dataChanged","tagName":"a"},{"text":"cloneRowData(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"dump(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var options = {\n  \"colNames\": Array.,\n  \"rowCount\": number,\n  \"startIndex\": number,\n  \"getter\": function(Object, string):*,\n  \"withRowIds\": boolean\n};","tagName":"pre"},{"text":"getAllRics()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllRowData()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllRowIds()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnData(cid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getData(rid, cid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataCloudFields()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getMultipleRowData(rids, opt_fromopt, opt_toopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getPrimaryRic(sub_id)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowData(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getStaticFields()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSubscription(sub_id)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSubscriptions()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasDataCloudData(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hasRowId(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"log(opt_optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var options = {\n  \"colNames\": Array.,\n  \"rowCount\": number,\n  \"startIndex\": number,\n  \"getter\": function(Object, string):*,\n  \"withRowIds\": boolean\n};","tagName":"pre"},{"text":"removeDataCloudField(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeStaticFields(fields)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeSubscription(sub)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"resetStaticFields()","tagName":"h4"},{"text":"setData(rid, cid, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataCache#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setDataCloudSettings(userId, productId, url, opt_langopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowData(rid, valuesopt, opt_eventArgopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataCache#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setSubscriptions(subs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"startAllSubscriptions()","tagName":"h4"},{"text":"stopAllSubscriptions()","tagName":"h4"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlisten","tagName":"a"},{"text":"unlistenAll(typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlistenAll","tagName":"a"},{"text":"Events","tagName":"h3"},{"text":"dataChanged","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            globalChange                                                    boolean                                                            Indicates a big change. User should expect all data has been change        ","tagName":"tr"},{"text":"                            type                                                    string                                                            Type of changes. Possible values are \"inserted\", \"removed\", \"updated\", and undefined        ","tagName":"tr"},{"text":"                            rid                                                    string                                                            Row Id        ","tagName":"tr"},{"text":"                            rowData                                                    Object.                                                            Column values of the changed row in JSON object format        ","tagName":"tr"},{"text":"dataComposed","tagName":"h4"}]},{"title":"DataTable","filename":"apis/core/DataTable.html","contents":[{"text":"new DataTable()","tagName":"h4"},{"text":"Extends","tagName":"h3"},{"text":"DataCache","tagName":"a"},{"text":"Type Definitions","tagName":"h3"},{"text":"SortLogic()","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            val1                                                    *                                                                                                                                        Value from a row        ","tagName":"tr"},{"text":"                            val2                                                    *                                                                                                                                        Value from another row        ","tagName":"tr"},{"text":"                            order                                                    number                                                                                                                                                                            1 indicates ascending order, and -1 indicates descending order        ","tagName":"tr"},{"text":"                            contextObject                                                    *                                                                                                                                                                            Any given user context        ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"var customComparer = function(a, b, order) {\n  if(a + 10 < b) { return -order; }\n  if(b + 10 < a) { return order; }\n  return 0; // a and b are less than 10 difference apart\n};","tagName":"pre"},{"text":"Methods","tagName":"h3"},{"text":"getSortingDefinitions()","tagName":"h4"},{"text":"addDataCloudFields(fields)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#addDataCloudFields","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addRow(valuesopt, rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var dt = new DataTable();\ndt.addRow({\"column 1\": \"a\", \"column 2\": 1, \"column 3\": null});\ndt.addRow({\"column 1\": \"b\", \"column 2\": 5, \"column 3\": {\"someKey\": 10}});\ndt.log(); // See console for the results","tagName":"pre"},{"text":"addRows(rows, ridsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable#setDataFrom2DArray","tagName":"a"},{"text":"DataTable#setDataFromObjectMap","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var dt = new DataTable();\ndt.addRows([\n  {\"field1\": \"a\", \"field2\": 1, \"field3\": null},\n  {\"field1\": \"b\", \"field2\": 5, \"field3\": {\"someKey\": 10}},\n  {\"field1\": \"c\", \"field2\": 7, \"field3\": [1, 2, 3]},\n  {\"field1\": \"c\", \"field4\": \"some value\"} // Rows don't need to be in uniform structure\n]); // 4 rows are added\ndt.log(); // See console for the results","tagName":"pre"},{"text":"addSegmentChild(segmentId, rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addSegmentChildren(segmentId, rids)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addStaticFields(fields)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#addStaticFields","tagName":"a"},{"text":"addSubscription(sub, opt_primaryRicopt, opt_valuesopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#addSubscription","tagName":"a"},{"text":"clearAllData(opt_suppressEventopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#clearAllData","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataCache#event:dataChanged","tagName":"a"},{"text":"clearColumnData(colId, opt_suppressEventopt)","tagName":"h4"},{"text":"DataCache#clearColumnData","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#clearColumnData","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataCache#event:dataChanged","tagName":"a"},{"text":"clearRowData(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"cloneRowData(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#cloneRowData","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"dispatchGlobalChange(suppressEventopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataComposed","tagName":"a"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"dispose()","tagName":"h4"},{"text":"DataCache#dispose","tagName":"a"},{"text":"dump(opt_optionsopt)","tagName":"h4"},{"text":"DataCache#dump","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#dump","tagName":"a"},{"text":"DataCache#dump","tagName":"a"},{"text":"DataCache#dump","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var options = {\n  \"colNames\": Array.,\n  \"rowCount\": number,\n  \"startIndex\": number,\n  \"getter\": function(Object, string):*,\n  \"withRowIds\": boolean\n};","tagName":"pre"},{"text":"fillSegment(segmentId)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"fillSegments()","tagName":"h4"},{"text":"freeze(boolopt)","tagName":"h4"},{"text":"DataTable#unfreeze","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var prevState = dt.freeze();\nfor(var i = 0; i < 100; ++i) {\n  dt.insertRow({}); // no event is fired\n}\ndt.freeze(prevState); // Restore previous freeze states","tagName":"pre"},{"text":"getAllRics()","tagName":"h4"},{"text":"DataCache#getAllRics","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAllRowData()","tagName":"h4"},{"text":"DataCache#getAllRowData","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAllRowIds(opt_shallowCopyopt)","tagName":"h4"},{"text":"DataCache#getAllRowIds","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#getAllRowIds","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnData(cid)","tagName":"h4"},{"text":"DataCache#getColumnData","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#getColumnData","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getData(rid, cid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#getData","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getDataAt(rowIndex, cid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataCloudFields()","tagName":"h4"},{"text":"DataCache#getDataCloudFields","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getDataSource()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getMultipleRowData(rids, opt_fromopt, opt_toopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#getMultipleRowData","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getPreviousData(rid, cid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getPrimaryRic(sub_id)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#getPrimaryRic","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowData(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#getRowData","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRowDataAt(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowId(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowIndex(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentChildIds(segmentId)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentIds()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentValues(ridsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getStaticFields()","tagName":"h4"},{"text":"DataCache#getStaticFields","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getSubscription(sub_id)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#getSubscription","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getSubscriptions()","tagName":"h4"},{"text":"DataCache#getSubscriptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasDataCloudData(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#hasDataCloudData","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasRowId(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#hasRowId","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasSegmentation()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"insertAfter(rowRef, opt_valuesopt, opt_ridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"insertRow(rowRef, valuesopt, rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable#unshiftRow","tagName":"a"},{"text":"DataTable#removeRow","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isFrozen()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isSegmentSeparator(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"log(opt_optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#log","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var options = {\n  \"colNames\": Array.,\n  \"rowCount\": number,\n  \"startIndex\": number,\n  \"getter\": function(Object, string):*,\n  \"withRowIds\": boolean\n};","tagName":"pre"},{"text":"moveRow(fromIndex, toIndex, suppressEventopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"moveRows(startIndex, toIndex, opt_countopt, suppressEventopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable#moveRow","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeAllRows(suppressEventopt)","tagName":"h4"},{"text":"DataTable#clearAllData","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"removeAllSegmentChildren()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"removeDataCloudField(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#removeDataCloudField","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeRow(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable#removeRows","tagName":"a"},{"text":"removeRows(refs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable#removeAllRows","tagName":"a"},{"text":"removeSegmentChild(segmentId, rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeSegmentChildren(segmentId, rids)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeStaticFields(fields)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#removeStaticFields","tagName":"a"},{"text":"removeSubscription(sub)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#removeSubscription","tagName":"a"},{"text":"resetStaticFields()","tagName":"h4"},{"text":"DataCache#resetStaticFields","tagName":"a"},{"text":"setColumnData(cid, valueList, opt_ridListopt)","tagName":"h4"},{"text":"DataTable#setData","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var dt = new DataTable();\ndt.setColumnData(\"column 1\", [\"1st row data\", \"2nd row data\", \"3rd row data\"]);\ndt.log(); // See console for the results","tagName":"pre"},{"text":"setColumnSortingLogic(cid, func)","tagName":"h4"},{"text":"DataTable#setSortingLogic","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"setData(rid, cid, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#setData","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setDataAt(rowIndex, cid, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setDataCloudSettings(userId, productId, url, opt_langopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#setDataCloudSettings","tagName":"a"},{"text":"setDataFrom2DArray(ary, opt_cidListopt, opt_ridListopt)","tagName":"h4"},{"text":"DataTable#setRowData","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable#addRows","tagName":"a"},{"text":"DataTable#setDataFromObjectMap","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var data = [\n  [\"a\", 1, 2],\n  [\"b\", 3, 4],\n  [\"c\", 5, 6]\n];\nvar dt = new DataTable();\ndt.setDataFrom2DArray(data, [\"column 1\", \"column 2\", \"column 3\"]);\ndt.log(); // See console for the results","tagName":"pre"},{"text":"setDataFromObjectMap(obj)","tagName":"h4"},{"text":"DataTable#setRowData","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable#addRows","tagName":"a"},{"text":"DataTable#setDataFrom2DArray","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var data = {\n  \"rowId 1\": {\"column 1\": \"a\", \"column 2\": 1, \"column 3\": 2},\n  \"rowId 2\": {\"column 1\": \"b\", \"column 2\": 3, \"column 3\": 4},\n  \"rowId 4\": {\"column 1\": \"d\", \"group_criteria\": 1} // Rows don't need to be in uniform structure\n};\nvar dt = new DataTable();\ndt.setDataFromObjectMap(data);\ndt.log(); // See console for the results\ndt.setDataFromObjectMap({\"rowId 1\": null}); // Remove the row with \"rowId 1\"\ndt.setDataFromObjectMap({\"rowId 2\": {\"column 1\": \"newValue\"} }); // Update existing row","tagName":"pre"},{"text":"setDataSource(source)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowData(rid, valuesopt, eventArgopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#setRowData","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var dt = new DataTable();\ndt.setRowData(\"row 1\", {\"column 1\": \"a\", \"column 2\": 1, \"column 3\": null});\ndt.log(); // See console for the results","tagName":"pre"},{"text":"setRowDataAt(rowIndex, valuesopt, opt_eventArgopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setSegmentSeparator(rid, enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setSortingLogic(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"customLogic = function(a, b, sortOrder) {\n  return (a - b) * sortOrder; // for numeric comparison\n};\nvar dt = new DataTable();\ndt.setSortingLogic(customLogic);\ndt.sortOnce(\"Column id\", \"ascending\");","tagName":"pre"},{"text":"setSubscriptions(subs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#setSubscriptions","tagName":"a"},{"text":"sortOnce(cid, sortOrders, customCompareropt, contextObjopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"sortSegments(compare)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"startAllSubscriptions()","tagName":"h4"},{"text":"DataCache#startAllSubscriptions","tagName":"a"},{"text":"stopAllSubscriptions()","tagName":"h4"},{"text":"DataCache#stopAllSubscriptions","tagName":"a"},{"text":"swapRow(fromIndex, toIndex)","tagName":"h4"},{"text":"DataTable#moveRow","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"unfreeze(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlisten","tagName":"a"},{"text":"unlistenAll(typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlistenAll","tagName":"a"},{"text":"unsetAllSegmentSeparators()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"unshiftRow(opt_valuesopt, opt_rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable#insertRow","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataTable#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"dataChanged","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            globalChange                                                    boolean                                                            Indicates a big change. User should expect all data has been change        ","tagName":"tr"},{"text":"                            type                                                    string                                                            Type of changes. Possible values are \"inserted\", \"removed\", \"updated\", and undefined        ","tagName":"tr"},{"text":"                            rid                                                    string                                                            Row Id        ","tagName":"tr"},{"text":"                            rowData                                                    Object.                                                            Column values of the changed row in JSON object format        ","tagName":"tr"},{"text":"DataCache#event:dataChanged","tagName":"a"},{"text":"dataComposed","tagName":"h4"},{"text":"DataCache#event:dataComposed","tagName":"a"}]},{"title":"DataView","filename":"apis/core/DataView.html","contents":[{"text":"new DataView(source)","tagName":"h4"},{"text":"DataTable","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable","tagName":"a"},{"text":"DataView","tagName":"a"},{"text":"DataTable","tagName":"a"},{"text":"Extends","tagName":"h3"},{"text":"EventDispatcher","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"addFooter(opt_numopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"addGroup(value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:groupAdded","tagName":"a"},{"text":"DataView#event:pageCountChanged","tagName":"a"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"addRowExpansion(rid, countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"addSegmentChild(segmentRef, rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addSegmentChildren(segmentRef, rowRefs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"clearFilter()","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageCountChanged","tagName":"a"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"collapse(opt_collapsedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"collapseAllGroups(opt_collapsedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"collapseSegment(rowRef, collapsedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"disablePageCorrection(opt_disableopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:preDisposed","tagName":"a"},{"text":"dump(opt_optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataCache#dump","tagName":"a"},{"text":"DataCache#dump","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"enableAutoGroupHiding(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"enableAutoGroupRemoval(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"enableColumnStats(cid, opt_enabledopt, opt_refIdopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnStats","tagName":"a"},{"text":"enableContentAsHeader(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"expandAllSegments()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"expandSegment(rowRef, expandedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"fillSegment(segmentRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"fillSegments()","tagName":"h4"},{"text":"filterIn(cid, valueopt, opt_filteringOutopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageCountChanged","tagName":"a"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"dv.filterIn(\"FIELD\", \"Some value\");\ndv.filterIn(function(rowId, rowData)) { // This is equivalent with the above statement\n    return rowData[\"FIELD\"] === \"Some value\";\n});","tagName":"pre"},{"text":"filterInOnce(cid, valueopt, opt_filteringOutopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageCountChanged","tagName":"a"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"filterOut(cid, valueopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageCountChanged","tagName":"a"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"dv.filterIn(\"FIELD\", \"Some value\");\ndv.filterOut(function(rowId, rowData)) { // This is equivalent with the above statement\n    return rowData[\"FIELD\"] !== \"Some value\";\n});","tagName":"pre"},{"text":"filterOutOnce(cid, valueopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageCountChanged","tagName":"a"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"firstPage()","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAllGroups(out_aryopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"DataView","tagName":"a"},{"text":"getAllRowData()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllRowIds(shallowCopyopt, inclNonDataRowopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataView#getAllRowData","tagName":"a"},{"text":"DataView#getMultipleRowData","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnData(cid, inclNonDataRowopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnStats(cid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnStats","tagName":"a"},{"text":"getConflationRate()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getCurrentPage()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getData(rid, cid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataAt(rowIndex, cid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataSource()","tagName":"h4"},{"text":"DataView#getDataTable","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"DataTable","tagName":"a"},{"text":"DataView","tagName":"a"},{"text":"getDataTable()","tagName":"h4"},{"text":"DataView#getDataSource","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"DataTable","tagName":"a"},{"text":"getExpansionParents(fromopt, toopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getGroup(groupRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"DataView","tagName":"a"},{"text":"getGroupId()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupLevel(opt_rowIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupList()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupRowId()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupRows()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"DataCache","tagName":"a"},{"text":"getGroupValue()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getMultipleRowData(rids, opt_fromopt, opt_toopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getPageCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPageIndex()","tagName":"h4"},{"text":"DataView#getCurrentPage","tagName":"a"},{"text":"getPageSize()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPreviousData(rid, cid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowData(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowDataAt(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowExpansionId(rid, idxopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowExpansionIndex(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowId(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataView#getRowIndex","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRowIndex(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataView#getRowId","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentChildIds(segmentRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentIds()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSortedRowIds(opt_shallowCopyopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getTotalPages()","tagName":"h4"},{"text":"DataView#getTotalPages","tagName":"a"},{"text":"getVisibleRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getVisibleRowIds(opt_shallowCopyopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"gotoPage()","tagName":"h4"},{"text":"DataView#setPage","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"groupBy(cid, opt_predefinedGroupsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:groupAdded","tagName":"a"},{"text":"DataView#event:groupCriteriaChanged","tagName":"a"},{"text":"DataView#event:pageCountChanged","tagName":"a"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"hasGroup()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasHiddenRow()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasRowExpansion(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hasSegmentation()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hide(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hideRow(rId, opt_showopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"hideRows(rowRefs, opt_showopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"insertRow(rowRef, opt_valuesopt, opt_rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isCollapsed()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isHidden()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isOnFirstPage()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isOnLastPage()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isRowDataInGroup(rowData, groupIDopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isRowExpansion(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isRowFiltered(rid, rowData)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isRowIdInGroup(rowId, groupIDopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isSegmentCollapsed(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isSegmentSeparator(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isSorting()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"lastPage()","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"log(opt_optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"// Options have the following format:\n// {\n//  \"colNames\": Array.,\n//  \"rowCount\": number,\n//  \"startIndex\": number,\n//  \"getter\": function(Object, string):*,\n//  \"withRowIds\": boolean\n//}\ndv.log({\"rowCount\": 10}); // Showing 10 records\ndv.log({\"getter\": function(rowData, colName){\n    var complexData = rowData[colName];\n    return complextData.someProperty;\n}});","tagName":"pre"},{"text":"moveGroup(groupRef, destIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"moveRow(fromIndex, toIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"ary = [0, 1, 2];\nmove(ary, 0, 1); // [0, 1, 2] Move index 0 to the position before index 1 (nothing is changed)\nmove(ary, 1, 0); // [1, 0, 2] Move index 1 to the position before index 0","tagName":"pre"},{"text":"nextPage()","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"previousPage()","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"prevPage()","tagName":"h4"},{"text":"DataView#previousPage","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"removeAllRowExpansions()","tagName":"h4"},{"text":"removeAllSegmentChildren()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"removeFooter()","tagName":"h4"},{"text":"removeRow(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"removeRowExpansion(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeRows(refs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeSegmentChild(segmentRef, rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeSegmentChildren(segmentRef, rowRefs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"searchAll(searchLogic, opt_outopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"searchNext(rowRef, searchLogic)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"searchPrev(rowRef, searchLogic)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnData(cid, valueList, opt_ridListopt)","tagName":"h4"},{"text":"DataTable#setData","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnSortingLogic(cid, func)","tagName":"h4"},{"text":"DataView#setSortingLogic","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"setConflationRate(milliSecond)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setData(rid, cid, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setDataAt(rowIndex, cid, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setDataSource(source)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable","tagName":"a"},{"text":"DataView","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"setPage(pageIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setPageSize(pageSize)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:pageCountChanged","tagName":"a"},{"text":"DataView#event:pageIndexChanged","tagName":"a"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"setPredefinedGroups(predefinedGroups)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"dv.setPredefinedGroups([\"a\", \"b\", \"c\"]); // Create empty three empty groups\ndv.setPredefinedGroups([ // Create two empty groups, and each group has 3 sub-groups\n  [\"Main Group 1\", \"Main 2\"],\n  [\"Sub 1\", \"Sub 2\", \"Sub 3\"]\n]);","tagName":"pre"},{"text":"setRowData(rid, valuesopt, opt_eventArgopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setRowDataAt(rowIndex, valuesopt, opt_eventArgopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setSegmentSeparator(rowRef, enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setSortingLogic(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"customLogic = function(a, b, sortOrder) {\n  return (a - b) * sortOrder; // for numeric comparison\n};\nvar dt = new DataTable();\nvar dv = new DataView(dt);\ndv.setSortingLogic(customLogic);\ndv.sort(\"Column id\", \"ascending\");","tagName":"pre"},{"text":"showRows(rowRefs, opt_showopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"sort(cid, opt_sortOrder, sortLogics)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"sortGroups(compareopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"sortOnce(cid, opt_sortOrder)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"DataView#event:dataChanged","tagName":"a"},{"text":"sortSegments(compare)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"stall(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"swapRow(fromIndex, toIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"synchronizeRowOrder()","tagName":"h4"},{"text":"toggleCollapsedState()","tagName":"h4"},{"text":"toggleRowExpansion(rowRef, forceopt, countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unhideAllRows()","tagName":"h4"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlisten","tagName":"a"},{"text":"unlistenAll(typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlistenAll","tagName":"a"},{"text":"unsetAllSegmentSeparators()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"beforeFiltering","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"beforeGroupAdded","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            dataView                                                    DataView                                                            Parent data view that create the new group        ","tagName":"tr"},{"text":"DataView","tagName":"a"},{"text":"                            newGroupId                                                    string                                                                    ","tagName":"tr"},{"text":"                            newGroupValue                                                    *                                                                    ","tagName":"tr"},{"text":"                            newGroupRowId                                                    string                                                            Unique row Id given for the group        ","tagName":"tr"},{"text":"dataChanged","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            globalChange                                                    boolean                                                            Indicates a big change. User should expect all data has been change. With active sorting or filtering, this flag will always be true due to multiple changes in row position.        ","tagName":"tr"},{"text":"                            type                                                    string                                                            Type of changes. Possible values are \"inserted\", \"removed\", \"updated\", and undefined        ","tagName":"tr"},{"text":"                            rid                                                    string                                                            Row Id        ","tagName":"tr"},{"text":"                            rowData                                                    Object.                                                            Column values of the changed row in JSON object format        ","tagName":"tr"},{"text":"groupAdded","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            dataView                                                    DataView                                                            Parent data view that create the new group        ","tagName":"tr"},{"text":"DataView","tagName":"a"},{"text":"                            newGroup                                                    DataView                                                            Child data view that is newly created        ","tagName":"tr"},{"text":"DataView","tagName":"a"},{"text":"groupCriteriaChanged","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"pageCountChanged","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            pageCount                                                    number                                                                    ","tagName":"tr"},{"text":"pageIndexChanged","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            pageIndex                                                    number                                                                    ","tagName":"tr"},{"text":"preDisposed","tagName":"h4"}]},{"title":"DragAndDropTitlePlugin","filename":"apis/core/DragAndDropTitlePlugin.html","contents":[{"text":"new DragAndDropTitlePlugin(opt_restrictions, opt_exclusions, opt_targetSectionopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Extends","tagName":"h3"},{"text":"Plugin","tagName":"a"},{"text":"Members","tagName":"h3"},{"text":"_pos","tagName":"h4"},{"text":"_pos","tagName":"h4"},{"text":"Methods","tagName":"h3"},{"text":"disable(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableDragBox(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableMoving(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getGridElementFromPoint(x, y)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Plugin#getGridElementFromPoint","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getMarker()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName()","tagName":"h4"},{"text":"Plugin#getName","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRelativeGrid(e)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"Plugin#getRelativeGrid","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Grid","tagName":"a"},{"text":"initialize(ownernon-null)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid","tagName":"a"},{"text":"Plugin#initialize","tagName":"a"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"lockFrozenColumn(lock)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlisten","tagName":"a"},{"text":"unlistenAll(typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlistenAll","tagName":"a"},{"text":"unload(ownernon-null)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid","tagName":"a"},{"text":"Plugin#unload","tagName":"a"},{"text":"Events","tagName":"h3"},{"text":"columnMoved","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            startColumnIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            destColumnIndex                                                    number                                                                    ","tagName":"tr"},{"text":"dragged","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            *                                                    *                                                            Depends on the browser's mouse event arguments        ","tagName":"tr"}]},{"title":"ElementWrapper","filename":"apis/core/ElementWrapper.html","contents":[{"text":"new ElementWrapper(opt_elementopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Extends","tagName":"h3"},{"text":"EventDispatcher","tagName":"a"},{"text":"Members","tagName":"h3"},{"text":"_content","tagName":"h4"},{"text":"Methods","tagName":"h3"},{"text":"addClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"addContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"disable(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"enable(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableClass(str, opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"fillParentHeight(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"fillParentWidth(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getBoundingClientRect()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getClass()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getContent(opt_allContentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getElement()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getHeight()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getId()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getLeft()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getNextSibling()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getParent()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollLeft()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollTop()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getStyle(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContent()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltip()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTop()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hide(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"insertAfter(previousSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"insertBefore(nextSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"isEnabled()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfHorizontalScroll()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfVerticalScroll()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isVisible()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"removeAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setAttribute(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setAttributes(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setContent(content, opt_tooltipopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setHeight(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setId(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setLeft(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setParent(parent, opt_prependopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"setStyle(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStyles(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setTextContent(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setTooltip(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setTop(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setWidth(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"show(opt_shownopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"toggleClass(cls, forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"toString()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlisten","tagName":"a"},{"text":"unlistenAll(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlistenAll","tagName":"a"}]},{"title":"EventDispatcher","filename":"apis/core/EventDispatcher.html","contents":[{"text":"new EventDispatcher()","tagName":"h4"},{"text":"Methods","tagName":"h3"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unlistenAll(typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Grid","filename":"apis/core/Grid.html","contents":[{"text":"new Grid(opt_initializeropt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Extends","tagName":"h3"},{"text":"ElementWrapper","tagName":"a"},{"text":"Type Definitions","tagName":"h3"},{"text":"CellReference","tagName":"h4"},{"text":"ElementWrapper","tagName":"a"},{"text":"Type:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Grid#insertColumn","tagName":"a"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            width                                                    number                                                                                                                                                                            Column width        ","tagName":"tr"},{"text":"                            minWidth                                                    number                                                                                                                                                                            Minimum column width        ","tagName":"tr"},{"text":"                            minSize                                                    number                                                                                                                                                                            Alias to `minWidth`        ","tagName":"tr"},{"text":"                            size                                                    number                                                                                                                                                                            Alias to `width`        ","tagName":"tr"},{"text":"                            visible                                                    boolean                                                                                                                                                                            Column visibility        ","tagName":"tr"},{"text":"                            scalable                                                    boolean                                                                                                                                                                            Column scalability        ","tagName":"tr"},{"text":"                            styles                                                    Object.                                                                                                                                                                            Key/value pair object specifying CSS styles        ","tagName":"tr"},{"text":"                            classes                                                    Object.                                                                                                                                                                            Key/value pair object specifying CSS classes        ","tagName":"tr"},{"text":"                            dataColumnName                                                    string                                                                                                                                                                            Data column for sorting        ","tagName":"tr"},{"text":"                            renderingHandler                                                    function                                                                                                                                                                            Deprecated        ","tagName":"tr"},{"text":"                            dataBindingHandler                                                    function                                                                                                                                                                            Column binding function        ","tagName":"tr"},{"text":"                            columnData                                                    string                                                                                                                                                                            For attaching context (user data)        ","tagName":"tr"},{"text":"                            layout                                                    TrackLayout                                                                                                                                                                            Deprecated        ","tagName":"tr"},{"text":"TrackLayout","tagName":"a"},{"text":"MouseInfo","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            hit                                                    boolean                                                            Indicates whether the given position is on the grid        ","tagName":"tr"},{"text":"                            x                                                    number                                                            Horizontal coordinate that is relative to the top-left of the grid (Zero means left-most)        ","tagName":"tr"},{"text":"                            y                                                    number                                                            Vertical coordinate that is relative to the top-left of the grid (Zero means top-most)        ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            sectionIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            sectionType                                                    string                                                                    ","tagName":"tr"},{"text":"                            sectionSettings                                                    SectionSettings                                                                    ","tagName":"tr"},{"text":"SectionSettings","tagName":"a"},{"text":"                            section                                                    ILayoutGrid                                                                    ","tagName":"tr"},{"text":"ILayoutGrid","tagName":"a"},{"text":"                            cellElement                                                    Element                                                                    ","tagName":"tr"},{"text":"                            dataSource                                                    DataView                                                                    ","tagName":"tr"},{"text":"DataView","tagName":"a"},{"text":"SectionReference","tagName":"h4"},{"text":"ILayoutGrid","tagName":"a"},{"text":"SectionSettings","tagName":"a"},{"text":"Type:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"SectionSettings","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"addClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#addClass","tagName":"a"},{"text":"addContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#addContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addRow(opt_numopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:postSectionDataBinding","tagName":"a"},{"text":"addSection(opt_typeopt, opt_sectionNameopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"addSectionAt(at, opt_typeopt, opt_sectionNameopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:sectionAdded","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"autoHideScrollbars(opt_hideopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"deactivateRendering(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disable(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#disable","tagName":"a"},{"text":"dispose()","tagName":"h4"},{"text":"ElementWrapper#dispose","tagName":"a"},{"text":"ElementWrapper#dispose","tagName":"a"},{"text":"enable(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enable","tagName":"a"},{"text":"enableClass(str, opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enableClass","tagName":"a"},{"text":"enableColumnClass(colIndex, clsName, enabledopt, opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableColumnVirtualization(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableRowHighlighting(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableRowVirtualization(opt_enabled)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"fillParentHeight(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"fillParentWidth(opt_percentopt)","tagName":"h4"},{"text":"ElementWrapper#fillParentWidth","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"focus()","tagName":"h4"},{"text":"https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus","tagName":"a"},{"text":"http://help.dottoro.com/ljqmdirr.php","tagName":"a"},{"text":"freezeColumn(frozenColIndexopt, numRightColumnopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"grid.freezeColumn(0); // The first column is pinned to the left side\ngrid.freezeColumn(1); // The first two columns are pinned to the left side\ngrid.freezeColumn(-1); // Grid's horizontal scrollbar will cover entire are of the grid.\ngrid.freezeColumn(null); // Turn off grid's horizontal scrollbar\ngrid.freezeColumn(-1, 1); // The last column is pinned to the right side\ngrid.freezeColumn(-1, 2); // The last two columns are pinned to the right side\ngrid.freezeColumn(0, 2); // Grid's horizontal scrollbar will affect only the middle part","tagName":"pre"},{"text":"freezeFooter(frozenCount)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"freezeLayout(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#isLayoutFrozen","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"freezeSection(opt_frozenSectionopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getAllSections(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"getAllSectionSettings(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"SectionSettings","tagName":"a"},{"text":"getAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getAttribute","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getBoundingClientRect()","tagName":"h4"},{"text":"ElementWrapper#getBoundingClientRect","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getCell(sectionRef, colIndex, rowIndex, opt_includeSpanopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"getCellInfo(cellRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#getRelativePosition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"grid.getCellInfo({\"colIndex\": 0, \"rowIndex\": 0}); // Get cell information about the top left cell in the content section\ngrid.getCellInfo(document.createElement(\"some_element\"); // Get cell information for cell that contains the element with id \"some_element\"\ngrid.getCellInfo(mouseEventArg); // Get cell information from the given MouseEvent argument (this is the same as getRelativePosition() method)\nvar cellInfo = grid.getCellInfo({\"colIndex\": 1, \"rowIndex\": 1});\ncellInfo.colIndex = cellInfo.colIndex + 1; // Get next cell to the right\ngrid.getCellInfo(cellInfo);","tagName":"pre"},{"text":"getClass()","tagName":"h4"},{"text":"ElementWrapper#getClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnAlignment(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnCustomLaneSize(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnData(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnDataBindingEvent(c)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#setColumnDataBindingHandler","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnDataBindingHandler(c)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIndex(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnLeft(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnRenderEvent()","tagName":"h4"},{"text":"getColumnRenderingHandler(c)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnRight(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnScalability(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnVirtualizer()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"Virtualizer","tagName":"a"},{"text":"getColumnWidth(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getContent(opt_allContentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContentWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getData(sectionRef, colRef, rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataColumnMap()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDataColumnName(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataConflationRate()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDataSource()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"DataView","tagName":"a"},{"text":"getDefaultRowHeight()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getElement()","tagName":"h4"},{"text":"ElementWrapper#getElement","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getFirstPinnedRightIndex()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getFitContentWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getFooterCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getFrozenColumnCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getHeight()","tagName":"h4"},{"text":"ElementWrapper#getHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getHiddenInput()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getHScrollbar()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"getId()","tagName":"h4"},{"text":"ElementWrapper#getId","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getLastSection()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"getLeft()","tagName":"h4"},{"text":"ElementWrapper#getLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getMinimumColumnWidth(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getNextCell(cellRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getNextCellInRow(cellRef, stepopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getNextSection(identifieropt, opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"getNextSibling()","tagName":"h4"},{"text":"ElementWrapper#getNextSibling","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getParent()","tagName":"h4"},{"text":"ElementWrapper#getParent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getPinnedLeftColumnCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPinnedRightColumnCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPlugin(pluginName)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getPluginList()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPlugins()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPrevCell(cellRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getPrevCellInRow(cellRef, stepopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getPreviousSection(identifieropt, opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"getRelativePosition(obj, contextopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowIndex(sectionIndex, rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowVirtualizer()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"Virtualizer","tagName":"a"},{"text":"getScrollHeight()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollLeft()","tagName":"h4"},{"text":"ElementWrapper#getScrollLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollTop()","tagName":"h4"},{"text":"ElementWrapper#getScrollTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSection(sectionRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"getSectionCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSectionIndex(identifieropt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSectionSettings(sectionRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"SectionSettings","tagName":"a"},{"text":"getSectionTop(sectionRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getStyle(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getStyle","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContent()","tagName":"h4"},{"text":"ElementWrapper#getTextContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltip()","tagName":"h4"},{"text":"ElementWrapper#getTooltip","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTop()","tagName":"h4"},{"text":"ElementWrapper#getTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getVMouseWheelHandler()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getVScrollbar()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"getVScrollView()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getWidth()","tagName":"h4"},{"text":"ElementWrapper#getWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getYScrollVal(sectionRef, rowIndex, topOfViewopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hasClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hasClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasColumnClass(colIndex, clsName, opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hasHiddenRow()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hide(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hide","tagName":"a"},{"text":"hideBorders(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#toggleBorders","tagName":"a"},{"text":"hideColumn(colIndex, hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#isColumnVisible","tagName":"a"},{"text":"Grid#hideColumns","tagName":"a"},{"text":"Grid#showAllColumns","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Grid#event:columnVisibilityChanged","tagName":"a"},{"text":"hideColumns(colIndices, hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#hideColumn","tagName":"a"},{"text":"Grid#showAllColumns","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Grid#event:columnVisibilityChanged","tagName":"a"},{"text":"hideRow(rowId)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"hideRows(rowIds)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"insertAfter(previousSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertAfter","tagName":"a"},{"text":"insertBefore(nextSibling)","tagName":"h4"},{"text":"ElementWrapper#insertBefore","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertBefore","tagName":"a"},{"text":"insertColumn(index, jsonObjopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:columnAdded","tagName":"a"},{"text":"Grid#event:postSectionDataBinding","tagName":"a"},{"text":"insertColumns(at, colsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isBinding()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isColumnVisible(colIndex)","tagName":"h4"},{"text":"Grid#hideColumn","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isDisposed()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isEnabled()","tagName":"h4"},{"text":"ElementWrapper#isEnabled","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfHorizontalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfHorizontalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfVerticalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfVerticalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isLayoutFrozen()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isPinnedColumn(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isVisible()","tagName":"h4"},{"text":"ElementWrapper#isVisible","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"loadPlugin(pluginRef, opt_optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"grid.loadPlugin(\"CheckboxPlugin\");\ngrid.loadPlugin(\"ColumnResizing\");\ngrid.loadPlugin(new Grid.InCellEditingPlugin());","tagName":"pre"},{"text":"moveColumn(fromCol, destCol)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"newColumnData(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"preserveGridSize(preserve)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"preserveProportion(preserve)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeAllColumns()","tagName":"h4"},{"text":"Grid#removeColumnAt","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Grid#event:columnRemoved","tagName":"a"},{"text":"removeAllRows()","tagName":"h4"},{"text":"removeAllSections()","tagName":"h4"},{"text":"removeAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeAttribute","tagName":"a"},{"text":"removeClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeClass","tagName":"a"},{"text":"removeColumnAt(index)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#removeAllColumns","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Grid#event:columnRemoved","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#removeContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeLastSection()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"removeRow(opt_numopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeRowData(sectionRef, rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeSection(sectionRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"removeSectionAt(at)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"requestRowRefresh()","tagName":"h4"},{"text":"rerender()","tagName":"h4"},{"text":"reserveRightSpace(size)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"resetColumnWidths()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"scrollDown(pixels)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"scrollRight(pixels)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"scrollToColumn(colIndex, leftOfViewopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"scrollToRow(sectionRef, rowIndex, topOfViewopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setAlwaysRenderColumn(colIndex, alwaysRenderopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setAttribute(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttribute","tagName":"a"},{"text":"setAttributes(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttributes","tagName":"a"},{"text":"setBottomPaddingSection(paddingSize)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setClass","tagName":"a"},{"text":"setColumnAlignment(colIndex, alignmentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnCount(num)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:columnAdded","tagName":"a"},{"text":"Grid#event:postSectionDataBinding","tagName":"a"},{"text":"setColumnData(colIndex, userData)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnDataBindingHandler(c, func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#setDefaultDataBindingHandler","tagName":"a"},{"text":"setColumnDefaultWidth(colIndex, width)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnRenderingHandler(c, func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#setDefaultRenderingHandler","tagName":"a"},{"text":"setColumnScalability(val, opt_scalableopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnStyle(colIndex, style, value, opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnWidth(colIndex, px, opt_scalableopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"grid.setColumnWidth(0, 100); // The first column will have a fixed width\ngrid.setColumnWidth(1, 100, true); // The second column will have a percentage width where 100 is the weight comparing with other percentage column","tagName":"pre"},{"text":"setColumnWidths(columnWidths, opt_proportionopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"grid.setColumnWidths([1, 2, 1, 1], true); // The first four columns have percentage width with the second column is twice as big as the others","tagName":"pre"},{"text":"setContent(content, opt_tooltipopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setData(sectionRef, colRef, rowRef, data)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setDataColumnMap(opt_dataMapopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDataColumnName(colIndex, opt_dataColumnNameopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDataConflationRate(milliSecond)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDataSource(dataSource)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataTable","tagName":"a"},{"text":"DataView","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:dataSourceChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"DataView","tagName":"a"},{"text":"setDefaultColumnScalable(scalable)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDefaultDataBindingHandler(handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#setColumnDataBindingHandler","tagName":"a"},{"text":"setDefaultRenderingHandler(handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#setColumnRenderingHandler","tagName":"a"},{"text":"setDefaultRowHeight(val, opt_includeTitleopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setFitContentWidth(bool)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setHeight(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setHidingMethod(method)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setId(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setId","tagName":"a"},{"text":"setLeft(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setMinimumColumnWidth(colIndex, width)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"setMinimumColumnWidths(minWidths, proportionopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setParent(parent, opt_prependopt)","tagName":"h4"},{"text":"ElementWrapper#setParent","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setParent","tagName":"a"},{"text":"setRowScrollingStep(rowCount)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setScrollLeft(pixels)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setScrollTop(pixels)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSectionRowCount(sectionRef, num)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStyle(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyle","tagName":"a"},{"text":"setStyles(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyles","tagName":"a"},{"text":"setTextContent(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTextContent","tagName":"a"},{"text":"setTooltip(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTooltip","tagName":"a"},{"text":"setTop(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setWidth(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"show(opt_shownopt)","tagName":"h4"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"showAllColumns()","tagName":"h4"},{"text":"Grid#hideColumn","tagName":"a"},{"text":"Grid#hideColumns","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"Grid#event:columnVisibilityChanged","tagName":"a"},{"text":"showBorders(opt_shownopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#toggleBorders","tagName":"a"},{"text":"showRows(rowIds, opt_showopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"synchronizeVScrollbar(subGrid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid","tagName":"a"},{"text":"toggleBorders(forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"toggleClass(cls, forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#toggleClass","tagName":"a"},{"text":"toggleGridlines(forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"toggleHorizontalLines(forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"toggleVerticalLines(forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"toString()","tagName":"h4"},{"text":"ElementWrapper#toString","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"unfreezeLayout(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#freezeLayout","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"unhideAllRows()","tagName":"h4"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlisten","tagName":"a"},{"text":"unlistenAll(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlistenAll","tagName":"a"},{"text":"unloadPlugin(pluginRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"updateLayout()","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:widthChanged","tagName":"a"},{"text":"updateRowData(sectionRefopt, fromRowIndexopt, lastRowIndexopt, userParamopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"Grid#event:postSectionDataBinding","tagName":"a"},{"text":"updateScrollbars(updateHeight, updateWidth)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"columnAdded","tagName":"h4"},{"text":"columnRemoved","tagName":"h4"},{"text":"columnVisibilityChanged","tagName":"h4"},{"text":"dataSourceChanged","tagName":"h4"},{"text":"postSectionDataBinding","tagName":"h4"},{"text":"rowExpansionBinding","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            originalRowData                                                    Object.                                                                    ","tagName":"tr"},{"text":"                            originalRowId                                                    string                                                            The row that rowExpansion belongs to        ","tagName":"tr"},{"text":"                            rowExpansion                                                    boolean                                                                    ","tagName":"tr"},{"text":"                            rowId                                                    string                                                                    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"rowHighlighted","tagName":"h4"},{"text":"sectionAdded","tagName":"h4"},{"text":"widthChanged","tagName":"h4"}]},{"title":"HScrollbar","filename":"apis/core/HScrollbar.html","contents":[{"text":"new HScrollbar()","tagName":"h4"},{"text":"Extends","tagName":"h3"},{"text":"Scrollbar","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"addClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#addClass","tagName":"a"},{"text":"addContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#addContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addWheelListener(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#addWheelListener","tagName":"a"},{"text":"attachToExternalElement(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#attachToExternalElement","tagName":"a"},{"text":"calculateContentSize()","tagName":"h4"},{"text":"Scrollbar#calculateContentSize","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"disable(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#disable","tagName":"a"},{"text":"disableKeyboardInput(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#disableKeyboardInput","tagName":"a"},{"text":"disableMouseWheel(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#disableMouseWheel","tagName":"a"},{"text":"disableTouchInput(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#disableTouchInput","tagName":"a"},{"text":"enable(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#enable","tagName":"a"},{"text":"enableClass(str, opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enableClass","tagName":"a"},{"text":"fillParentHeight(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"fillParentWidth(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"flash()","tagName":"h4"},{"text":"Scrollbar#flash","tagName":"a"},{"text":"getAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getAttribute","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAutoHide()","tagName":"h4"},{"text":"Scrollbar#getAutoHide","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getBoundingClientRect()","tagName":"h4"},{"text":"ElementWrapper#getBoundingClientRect","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getClass()","tagName":"h4"},{"text":"ElementWrapper#getClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContentSize()","tagName":"h4"},{"text":"Scrollbar#getContentSize","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContentWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDefaultMouseWheelLogic()","tagName":"h4"},{"text":"Scrollbar#getDefaultMouseWheelLogic","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getElement()","tagName":"h4"},{"text":"ElementWrapper#getElement","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getHeight()","tagName":"h4"},{"text":"ElementWrapper#getHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getId()","tagName":"h4"},{"text":"ElementWrapper#getId","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getLeft()","tagName":"h4"},{"text":"ElementWrapper#getLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getNextSibling()","tagName":"h4"},{"text":"ElementWrapper#getNextSibling","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollGap()","tagName":"h4"},{"text":"Scrollbar#getScrollGap","tagName":"a"},{"text":"scrollHeight","tagName":"a"},{"text":"scrollWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollLeft()","tagName":"h4"},{"text":"Scrollbar#getScrollLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollTop()","tagName":"h4"},{"text":"ElementWrapper#getScrollTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getStyle(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getStyle","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContent()","tagName":"h4"},{"text":"ElementWrapper#getTextContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltip()","tagName":"h4"},{"text":"ElementWrapper#getTooltip","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTop()","tagName":"h4"},{"text":"ElementWrapper#getTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTrackSize()","tagName":"h4"},{"text":"Scrollbar#getTrackSize","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTrackThickness()","tagName":"h4"},{"text":"Scrollbar#getTrackThickness","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getWidth()","tagName":"h4"},{"text":"Scrollbar#getWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hasClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hide(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hide","tagName":"a"},{"text":"insertAfter(previousSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertAfter","tagName":"a"},{"text":"insertBefore(nextSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertBefore","tagName":"a"},{"text":"isActive()","tagName":"h4"},{"text":"Scrollbar#isActive","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEnabled()","tagName":"h4"},{"text":"Scrollbar#isEnabled","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfHorizontalScroll()","tagName":"h4"},{"text":"Scrollbar#isEndOfHorizontalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfVerticalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfVerticalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isVisible()","tagName":"h4"},{"text":"ElementWrapper#isVisible","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"removeAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeAttribute","tagName":"a"},{"text":"removeClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeClass","tagName":"a"},{"text":"removeContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#removeContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeWheelListener(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#removeWheelListener","tagName":"a"},{"text":"setAttribute(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttribute","tagName":"a"},{"text":"setAttributes(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttributes","tagName":"a"},{"text":"setAutoHide(hide)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setAutoHide","tagName":"a"},{"text":"setClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setClass","tagName":"a"},{"text":"setContent(content, opt_tooltipopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setHeight(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setId(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setId","tagName":"a"},{"text":"setLeft(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setMouseWheelSpeed(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setMouseWheelSpeed","tagName":"a"},{"text":"setScrollingStep(px)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setScrollingStep","tagName":"a"},{"text":"setScrollLeft(px)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStyle(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyle","tagName":"a"},{"text":"setStyles(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyles","tagName":"a"},{"text":"setTextContent(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTextContent","tagName":"a"},{"text":"setTooltip(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTooltip","tagName":"a"},{"text":"setTop(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setTrackSize(size, paneSize)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setTrackSize","tagName":"a"},{"text":"setWidth(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"show(opt_shownopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"toggleClass(cls, forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#toggleClass","tagName":"a"},{"text":"toString()","tagName":"h4"},{"text":"ElementWrapper#toString","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlisten","tagName":"a"},{"text":"unlistenAll(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlistenAll","tagName":"a"},{"text":"update()","tagName":"h4"},{"text":"Scrollbar#update","tagName":"a"},{"text":"Returns:","tagName":"h5"}]},{"title":"ILayoutGrid","filename":"apis/core/ILayoutGrid.html","contents":[{"text":"Extends","tagName":"h3"},{"text":"ElementWrapper","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"activateRows(fromopt, toopt, opt_updateRangeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"addClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#addClass","tagName":"a"},{"text":"addContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#addContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addRow(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"clearCellSpans()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"clearColumnCustomizations()","tagName":"h4"},{"text":"clearColumnSpans(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"clearRowCustomizations()","tagName":"h4"},{"text":"clearSelectedRows()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"disable(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#disable","tagName":"a"},{"text":"disableHorizontalGridLine(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableVerticalGridLine(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"ElementWrapper#dispose","tagName":"a"},{"text":"enable(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enable","tagName":"a"},{"text":"enableClass(str, opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enableClass","tagName":"a"},{"text":"enableColumnClass(colIndex, className, enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableRowClass(rowIndex, className, enabled)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableRowHighlighting(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableShading(enabled)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"fillParentHeight(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"fillParentWidth(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getAttribute","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getBoundingClientRect()","tagName":"h4"},{"text":"ElementWrapper#getBoundingClientRect","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getCell(colIndex, rowIndex, opt_includeSpanopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"getCellColSpan(colIndex, rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellContent(colIndex, rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellHeight(colIndex, rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellIndex(colIndex, cellElem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellLeft(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellRowSpan(colIndex, rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellsByRowIndex(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"getCellTop(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellWidth(colIndex, rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getClass()","tagName":"h4"},{"text":"ElementWrapper#getClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumn(index)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"getColumnCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnHost()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIndex(colElem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnScalability(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnStyle(colIndex, styleName)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnWidth(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getComputedStyle()","tagName":"h4"},{"text":"https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContent(opt_allContentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContentHeight()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getContentWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDefaultColumnWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDefaultRowHeight()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getElement()","tagName":"h4"},{"text":"ElementWrapper#getElement","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getFirstIndexInView()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getFirstSelectedRow()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getHeight()","tagName":"h4"},{"text":"ElementWrapper#getHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getId()","tagName":"h4"},{"text":"ElementWrapper#getId","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getIndex()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getLastIndexInView()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getLastSelectedRow()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getLeft()","tagName":"h4"},{"text":"ElementWrapper#getLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getMinimumColumnWidth(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getMinimumRowHeight(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getNextSibling()","tagName":"h4"},{"text":"ElementWrapper#getNextSibling","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getParent()","tagName":"h4"},{"text":"ElementWrapper#getParent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRelativePosition(obj)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getReservedSpace()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowAnchor()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowHeight(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowHighlight()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowOffset()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowScalability(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollLeft()","tagName":"h4"},{"text":"ElementWrapper#getScrollLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollTop()","tagName":"h4"},{"text":"ElementWrapper#getScrollTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedRows()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getStretchedCells()","tagName":"h4"},{"text":"ILayoutGrid#stretchCell","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Cell","tagName":"a"},{"text":"getStyle(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getStyle","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContent()","tagName":"h4"},{"text":"ElementWrapper#getTextContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltip()","tagName":"h4"},{"text":"ElementWrapper#getTooltip","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTop()","tagName":"h4"},{"text":"ElementWrapper#getTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getVisibleRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getWidth()","tagName":"h4"},{"text":"ElementWrapper#getWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasCellSpan()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hasClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasColumnClass()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hide(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hide","tagName":"a"},{"text":"hideColumn(colIndex, valopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hideRow(rowIndex, valopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hitTest(x, y, opt_omitSpanopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hitTestX(x)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hitTestY(y)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"insertAfter(previousSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertAfter","tagName":"a"},{"text":"insertBefore(nextSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertBefore","tagName":"a"},{"text":"isColumnActive(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isColumnVisible(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isEnabled()","tagName":"h4"},{"text":"ElementWrapper#isEnabled","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfHorizontalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfHorizontalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfVerticalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfVerticalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isInCurrentView(index)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isRowVisible(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isSelectedRow(at)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isVisible()","tagName":"h4"},{"text":"ElementWrapper#isVisible","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"removeAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeAttribute","tagName":"a"},{"text":"removeClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeClass","tagName":"a"},{"text":"removeContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#removeContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeRow(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"reserveRightSpace(size)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"selectRowRange(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"selectSingleRow(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setAttribute(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttribute","tagName":"a"},{"text":"setAttributes(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttributes","tagName":"a"},{"text":"setBorders(lft, top, rgt, btm)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setCellColSpan(colIndex, rowIndex, colSpan)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setCellContent(colIndex, rowIndex, data)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setCellRowSpan(colIndex, rowIndex, rowSpan)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setClass","tagName":"a"},{"text":"setColumnCount(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnScalability(colIndex, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnStyle(colIndex, styleName, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnWidth(colIndex, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setContent(content, opt_tooltipopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setDefaultColumnWidth(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDefaultRowHeight(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setHeight(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setId(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setId","tagName":"a"},{"text":"setLeft(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setMinimumColumnWidth(colIndex, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setMinimumRowHeight(rowIndex, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setParent(parent, opt_prependopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setParent","tagName":"a"},{"text":"setRowAnchor(at)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowAttributes(rowIndex, func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowCount(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowHeight(rowIndex, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setRowHighlight(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowScalability(rowIndex, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setRowStyle(rowIndex, styleName, value, enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSelectedRow(rowIndex, opt_selectedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStyle(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyle","tagName":"a"},{"text":"setStyles(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyles","tagName":"a"},{"text":"setTextContent(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTextContent","tagName":"a"},{"text":"setTooltip(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTooltip","tagName":"a"},{"text":"setTop(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setTransposedShading(enabled)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setWidth(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"show(opt_shownopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"stretchCell(cellRef, rowIndexopt, opt_stretchingopt, onlyToTheRightopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Cell","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Cell","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"grid.stretchCell(1, 0); // The second cell on the first row will be stretched covering the entire row\ngrid.stretchCell(cellInstance, 0, true); // The given cell will be stretched covering the entire row","tagName":"pre"},{"text":"toggleClass(cls, forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#toggleClass","tagName":"a"},{"text":"toString()","tagName":"h4"},{"text":"ElementWrapper#toString","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlisten","tagName":"a"},{"text":"unlistenAll(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlistenAll","tagName":"a"},{"text":"unstretchCell(cellRef, rowIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Cell","tagName":"a"},{"text":"ILayoutGrid#stretchCell","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Cell","tagName":"a"},{"text":"updateStretchedCells()","tagName":"h4"},{"text":"ILayoutGrid#stretchCell","tagName":"a"},{"text":"Returns:","tagName":"h5"}]},{"title":"LayoutGrid","filename":"apis/core/LayoutGrid.html","contents":[{"text":"new LayoutGrid(opt_initializer, opt_optionsopt)","tagName":"h4"},{"text":"ILayoutGrid","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Extends","tagName":"h3"},{"text":"ElementWrapper","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"activateColumn()","tagName":"h4"},{"text":"activateRows()","tagName":"h4"},{"text":"ILayoutGrid#activateRows","tagName":"a"},{"text":"addClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#addClass","tagName":"a"},{"text":"addContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#addContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addRow()","tagName":"h4"},{"text":"ILayoutGrid#addRow","tagName":"a"},{"text":"clearCellSpans()","tagName":"h4"},{"text":"ILayoutGrid#clearCellSpans","tagName":"a"},{"text":"clearColumnCustomizations()","tagName":"h4"},{"text":"ILayoutGrid#clearColumnCustomizations","tagName":"a"},{"text":"clearColumnSpans()","tagName":"h4"},{"text":"ILayoutGrid#clearCellSpans","tagName":"a"},{"text":"clearRowCustomizations()","tagName":"h4"},{"text":"ILayoutGrid#clearRowCustomizations","tagName":"a"},{"text":"clearSelectedRows()","tagName":"h4"},{"text":"ILayoutGrid#clearSelectedRows","tagName":"a"},{"text":"disable(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#disable","tagName":"a"},{"text":"disableHorizontalGridLine()","tagName":"h4"},{"text":"ILayoutGrid#disableHorizontalGridLine","tagName":"a"},{"text":"disableVerticalGridLine()","tagName":"h4"},{"text":"ILayoutGrid#disableVerticalGridLine","tagName":"a"},{"text":"dispose()","tagName":"h4"},{"text":"ElementWrapper#dispose","tagName":"a"},{"text":"ElementWrapper#dispose","tagName":"a"},{"text":"enable(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enable","tagName":"a"},{"text":"enableClass(str, opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enableClass","tagName":"a"},{"text":"enableColumnClass()","tagName":"h4"},{"text":"ILayoutGrid#enableColumnClass","tagName":"a"},{"text":"enableRowClass()","tagName":"h4"},{"text":"ILayoutGrid#enableRowClass","tagName":"a"},{"text":"enableRowHighlighting()","tagName":"h4"},{"text":"ILayoutGrid#enableRowHighlighting","tagName":"a"},{"text":"enableShading()","tagName":"h4"},{"text":"ILayoutGrid#enableShading","tagName":"a"},{"text":"fillParentHeight(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"fillParentWidth(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getAttribute","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getBoundingClientRect()","tagName":"h4"},{"text":"ElementWrapper#getBoundingClientRect","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getCell()","tagName":"h4"},{"text":"ILayoutGrid#getCell","tagName":"a"},{"text":"getCellColSpan()","tagName":"h4"},{"text":"ILayoutGrid#getCellColSpan","tagName":"a"},{"text":"getCellContent()","tagName":"h4"},{"text":"ILayoutGrid#getCellContent","tagName":"a"},{"text":"getCellHeight()","tagName":"h4"},{"text":"ILayoutGrid#getCellHeight","tagName":"a"},{"text":"getCellLeft()","tagName":"h4"},{"text":"ILayoutGrid#getCellLeft","tagName":"a"},{"text":"getCellRowSpan()","tagName":"h4"},{"text":"ILayoutGrid#getCellRowSpan","tagName":"a"},{"text":"getCellsByRowIndex()","tagName":"h4"},{"text":"ILayoutGrid#getCellsByRowIndex","tagName":"a"},{"text":"getCellTop()","tagName":"h4"},{"text":"ILayoutGrid#getCellTop","tagName":"a"},{"text":"getCellWidth()","tagName":"h4"},{"text":"ILayoutGrid#getCellWidth","tagName":"a"},{"text":"getClass()","tagName":"h4"},{"text":"ElementWrapper#getClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumn()","tagName":"h4"},{"text":"ILayoutGrid#getColumn","tagName":"a"},{"text":"getColumnCount()","tagName":"h4"},{"text":"ILayoutGrid#getColumnCount","tagName":"a"},{"text":"getColumnHost()","tagName":"h4"},{"text":"ILayoutGrid#getColumnHost","tagName":"a"},{"text":"getColumnScalability()","tagName":"h4"},{"text":"ILayoutGrid#getColumnScalability","tagName":"a"},{"text":"getColumnStyle()","tagName":"h4"},{"text":"ILayoutGrid#getColumnStyle","tagName":"a"},{"text":"getColumnWidth()","tagName":"h4"},{"text":"ILayoutGrid#getColumnWidth","tagName":"a"},{"text":"getComputedStyle()","tagName":"h4"},{"text":"ILayoutGrid#getComputedStyle","tagName":"a"},{"text":"getContent(opt_allContentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContentHeight()","tagName":"h4"},{"text":"ILayoutGrid#getContentHeight","tagName":"a"},{"text":"getContentWidth()","tagName":"h4"},{"text":"ILayoutGrid#getContentWidth","tagName":"a"},{"text":"getDefaultColumnWidth()","tagName":"h4"},{"text":"ILayoutGrid#getDefaultColumnWidth","tagName":"a"},{"text":"getDefaultRowHeight()","tagName":"h4"},{"text":"ILayoutGrid#getDefaultRowHeight","tagName":"a"},{"text":"getElement()","tagName":"h4"},{"text":"ElementWrapper#getElement","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getFirstIndexInView()","tagName":"h4"},{"text":"ILayoutGrid#getFirstIndexInView","tagName":"a"},{"text":"getFirstSelectedRow()","tagName":"h4"},{"text":"ILayoutGrid#getFirstSelectedRow","tagName":"a"},{"text":"getHeight()","tagName":"h4"},{"text":"ElementWrapper#getHeight","tagName":"a"},{"text":"ElementWrapper#getHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getHidingMethod()","tagName":"h4"},{"text":"getId()","tagName":"h4"},{"text":"ElementWrapper#getId","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getIndex()","tagName":"h4"},{"text":"ILayoutGrid#getIndex","tagName":"a"},{"text":"getLastIndexInView()","tagName":"h4"},{"text":"ILayoutGrid#getLastIndexInView","tagName":"a"},{"text":"getLastSelectedRow()","tagName":"h4"},{"text":"ILayoutGrid#getLastSelectedRow","tagName":"a"},{"text":"getLeft()","tagName":"h4"},{"text":"ElementWrapper#getLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getMinimumColumnWidth()","tagName":"h4"},{"text":"ILayoutGrid#getMinimumColumnWidth","tagName":"a"},{"text":"getMinimumRowHeight()","tagName":"h4"},{"text":"ILayoutGrid#getMinimumRowHeight","tagName":"a"},{"text":"getNextSibling()","tagName":"h4"},{"text":"ElementWrapper#getNextSibling","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getParent()","tagName":"h4"},{"text":"ElementWrapper#getParent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRelativePosition()","tagName":"h4"},{"text":"ILayoutGrid#getRelativePosition","tagName":"a"},{"text":"getReservedSpace()","tagName":"h4"},{"text":"ILayoutGrid#reserveRightSpace","tagName":"a"},{"text":"getRowAnchor()","tagName":"h4"},{"text":"ILayoutGrid#getRowAnchor","tagName":"a"},{"text":"getRowCount()","tagName":"h4"},{"text":"ILayoutGrid#getRowCount","tagName":"a"},{"text":"getRowHeight()","tagName":"h4"},{"text":"ILayoutGrid#getRowHeight","tagName":"a"},{"text":"getRowHighlight()","tagName":"h4"},{"text":"ILayoutGrid#getRowHighlight","tagName":"a"},{"text":"getRowLayout()","tagName":"h4"},{"text":"getRowScalability()","tagName":"h4"},{"text":"ILayoutGrid#getRowScalability","tagName":"a"},{"text":"getScrollLeft()","tagName":"h4"},{"text":"ElementWrapper#getScrollLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollTop()","tagName":"h4"},{"text":"ElementWrapper#getScrollTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedRowCount()","tagName":"h4"},{"text":"ILayoutGrid#getSelectedRowCount","tagName":"a"},{"text":"getSelectedRows()","tagName":"h4"},{"text":"ILayoutGrid#getSelectedRows","tagName":"a"},{"text":"getStretchedCells()","tagName":"h4"},{"text":"ILayoutGrid#getStretchedCells","tagName":"a"},{"text":"getStyle(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getStyle","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContent()","tagName":"h4"},{"text":"ElementWrapper#getTextContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltip()","tagName":"h4"},{"text":"ElementWrapper#getTooltip","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTop()","tagName":"h4"},{"text":"ElementWrapper#getTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getVisibleRowCount()","tagName":"h4"},{"text":"ILayoutGrid#getVisibleRowCount","tagName":"a"},{"text":"getWidth()","tagName":"h4"},{"text":"ElementWrapper#getWidth","tagName":"a"},{"text":"ElementWrapper#getWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasCellSpan()","tagName":"h4"},{"text":"ILayoutGrid#hasCellSpan","tagName":"a"},{"text":"hasClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hasClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasColumnClass()","tagName":"h4"},{"text":"ILayoutGrid#enableColumnClass","tagName":"a"},{"text":"hide(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hide","tagName":"a"},{"text":"hideColumn()","tagName":"h4"},{"text":"ILayoutGrid#hideColumn","tagName":"a"},{"text":"hideRow()","tagName":"h4"},{"text":"ILayoutGrid#hideRow","tagName":"a"},{"text":"hitTest()","tagName":"h4"},{"text":"ILayoutGrid#hitTest","tagName":"a"},{"text":"hitTestX()","tagName":"h4"},{"text":"ILayoutGrid#hitTestX","tagName":"a"},{"text":"hitTestY()","tagName":"h4"},{"text":"ILayoutGrid#hitTestY","tagName":"a"},{"text":"insertAfter(previousSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertAfter","tagName":"a"},{"text":"insertBefore(nextSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertBefore","tagName":"a"},{"text":"isColumnActive()","tagName":"h4"},{"text":"ILayoutGrid#isColumnActive","tagName":"a"},{"text":"isColumnVisible()","tagName":"h4"},{"text":"ILayoutGrid#isColumnVisible","tagName":"a"},{"text":"isEnabled()","tagName":"h4"},{"text":"ElementWrapper#isEnabled","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfHorizontalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfHorizontalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfVerticalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfVerticalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isInCurrentView()","tagName":"h4"},{"text":"ILayoutGrid#isInCurrentView","tagName":"a"},{"text":"isRowVisible()","tagName":"h4"},{"text":"ILayoutGrid#isRowVisible","tagName":"a"},{"text":"isSelectedRow()","tagName":"h4"},{"text":"ILayoutGrid#isSelectedRow","tagName":"a"},{"text":"isVisible()","tagName":"h4"},{"text":"ElementWrapper#isVisible","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"moveRowsToTop()","tagName":"h4"},{"text":"removeAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeAttribute","tagName":"a"},{"text":"removeClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeClass","tagName":"a"},{"text":"removeContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#removeContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeRow()","tagName":"h4"},{"text":"ILayoutGrid#removeRow","tagName":"a"},{"text":"reserveRightSpace()","tagName":"h4"},{"text":"ILayoutGrid#reserveRightSpace","tagName":"a"},{"text":"selectRowRange()","tagName":"h4"},{"text":"ILayoutGrid#selectRowRange","tagName":"a"},{"text":"selectSingleRow()","tagName":"h4"},{"text":"ILayoutGrid#selectSingleRow","tagName":"a"},{"text":"setAttribute(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttribute","tagName":"a"},{"text":"setAttributes(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttributes","tagName":"a"},{"text":"setBorders()","tagName":"h4"},{"text":"ILayoutGrid#setBorders","tagName":"a"},{"text":"setCellColSpan()","tagName":"h4"},{"text":"ILayoutGrid#setCellColSpan","tagName":"a"},{"text":"setCellContent()","tagName":"h4"},{"text":"ILayoutGrid#setCellContent","tagName":"a"},{"text":"setCellRowSpan()","tagName":"h4"},{"text":"ILayoutGrid#setCellRowSpan","tagName":"a"},{"text":"setClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setClass","tagName":"a"},{"text":"setColumnCount()","tagName":"h4"},{"text":"ILayoutGrid#setColumnCount","tagName":"a"},{"text":"setColumnScalability()","tagName":"h4"},{"text":"ILayoutGrid#setColumnScalability","tagName":"a"},{"text":"setColumnStyle()","tagName":"h4"},{"text":"ILayoutGrid#setColumnStyle","tagName":"a"},{"text":"setColumnVisibility()","tagName":"h4"},{"text":"setColumnWidth()","tagName":"h4"},{"text":"ILayoutGrid#setColumnWidth","tagName":"a"},{"text":"setContent(content, opt_tooltipopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setDefaultColumnWidth()","tagName":"h4"},{"text":"ILayoutGrid#setDefaultColumnWidth","tagName":"a"},{"text":"setDefaultRowHeight()","tagName":"h4"},{"text":"ILayoutGrid#setDefaultRowHeight","tagName":"a"},{"text":"setHeight(val)","tagName":"h4"},{"text":"ElementWrapper#setHeight","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setHidingMethod()","tagName":"h4"},{"text":"setId(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setId","tagName":"a"},{"text":"setLeft(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setMinimumColumnWidth()","tagName":"h4"},{"text":"ILayoutGrid#setMinimumColumnWidth","tagName":"a"},{"text":"setMinimumRowHeight()","tagName":"h4"},{"text":"ILayoutGrid#setMinimumRowHeight","tagName":"a"},{"text":"setParent(parent, opt_prependopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setParent","tagName":"a"},{"text":"setRowAnchor()","tagName":"h4"},{"text":"ILayoutGrid#setRowAnchor","tagName":"a"},{"text":"setRowAttributes()","tagName":"h4"},{"text":"ILayoutGrid#setRowAttributes","tagName":"a"},{"text":"setRowCount()","tagName":"h4"},{"text":"ILayoutGrid#setRowCount","tagName":"a"},{"text":"setRowHeight()","tagName":"h4"},{"text":"ILayoutGrid#setRowHeight","tagName":"a"},{"text":"setRowHighlight()","tagName":"h4"},{"text":"ILayoutGrid#setRowHighlight","tagName":"a"},{"text":"setRowScalability()","tagName":"h4"},{"text":"ILayoutGrid#setRowScalability","tagName":"a"},{"text":"setRowStyle()","tagName":"h4"},{"text":"ILayoutGrid#setRowStyle","tagName":"a"},{"text":"setSelectedRow()","tagName":"h4"},{"text":"ILayoutGrid#setSelectedRow","tagName":"a"},{"text":"setStyle(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyle","tagName":"a"},{"text":"setStyles(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyles","tagName":"a"},{"text":"setTextContent(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTextContent","tagName":"a"},{"text":"setTooltip(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTooltip","tagName":"a"},{"text":"setTop(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setTransposedShading()","tagName":"h4"},{"text":"ILayoutGrid#setTransposedShading","tagName":"a"},{"text":"setWidth(val)","tagName":"h4"},{"text":"ElementWrapper#setWidth","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"show(opt_shownopt)","tagName":"h4"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"stretchCell()","tagName":"h4"},{"text":"ILayoutGrid#stretchCell","tagName":"a"},{"text":"toggleClass(cls, forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#toggleClass","tagName":"a"},{"text":"toString()","tagName":"h4"},{"text":"ElementWrapper#toString","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlisten","tagName":"a"},{"text":"unlistenAll(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlistenAll","tagName":"a"},{"text":"unstretchCell()","tagName":"h4"},{"text":"ILayoutGrid#unstretchCell","tagName":"a"},{"text":"updateStretchedCells()","tagName":"h4"},{"text":"ILayoutGrid#updateStretchedCells","tagName":"a"},{"text":"Events","tagName":"h3"},{"text":"rowCountChanged","tagName":"h4"},{"text":"rowHeightChanged","tagName":"h4"},{"text":"rowHighlighted","tagName":"h4"}]},{"title":"Scrollbar","filename":"apis/core/Scrollbar.html","contents":[{"text":"new Scrollbar()","tagName":"h4"},{"text":"Extends","tagName":"h3"},{"text":"ElementWrapper","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"updateTrackThickness()","tagName":"h4"},{"text":"addClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#addClass","tagName":"a"},{"text":"addContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#addContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addWheelListener(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"attachToExternalElement(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"calculateContentSize()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"disable(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#disable","tagName":"a"},{"text":"disableKeyboardInput(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableMouseWheel(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableTouchInput(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"ElementWrapper#dispose","tagName":"a"},{"text":"enable(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enable","tagName":"a"},{"text":"enableClass(str, opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enableClass","tagName":"a"},{"text":"fillParentHeight(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"fillParentWidth(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"flash()","tagName":"h4"},{"text":"getAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getAttribute","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAutoHide()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getBoundingClientRect()","tagName":"h4"},{"text":"ElementWrapper#getBoundingClientRect","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getClass()","tagName":"h4"},{"text":"ElementWrapper#getClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContent(opt_allContentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContentSize()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDefaultMouseWheelLogic()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getElement()","tagName":"h4"},{"text":"ElementWrapper#getElement","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getHeight()","tagName":"h4"},{"text":"ElementWrapper#getHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getId()","tagName":"h4"},{"text":"ElementWrapper#getId","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getLeft()","tagName":"h4"},{"text":"ElementWrapper#getLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getNextSibling()","tagName":"h4"},{"text":"ElementWrapper#getNextSibling","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getParent()","tagName":"h4"},{"text":"ElementWrapper#getParent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollGap()","tagName":"h4"},{"text":"scrollHeight","tagName":"a"},{"text":"scrollWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollLeft()","tagName":"h4"},{"text":"ElementWrapper#getScrollLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollTop()","tagName":"h4"},{"text":"ElementWrapper#getScrollTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getStyle(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getStyle","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContent()","tagName":"h4"},{"text":"ElementWrapper#getTextContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltip()","tagName":"h4"},{"text":"ElementWrapper#getTooltip","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTop()","tagName":"h4"},{"text":"ElementWrapper#getTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTrackSize()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTrackThickness()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getWidth()","tagName":"h4"},{"text":"ElementWrapper#getWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hasClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hide(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hide","tagName":"a"},{"text":"insertAfter(previousSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertAfter","tagName":"a"},{"text":"insertBefore(nextSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertBefore","tagName":"a"},{"text":"isActive()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isEnabled()","tagName":"h4"},{"text":"ElementWrapper#isEnabled","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfHorizontalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfHorizontalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfVerticalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfVerticalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isVisible()","tagName":"h4"},{"text":"ElementWrapper#isVisible","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"removeAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeAttribute","tagName":"a"},{"text":"removeClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeClass","tagName":"a"},{"text":"removeContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#removeContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeWheelListener(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setAttribute(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttribute","tagName":"a"},{"text":"setAttributes(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttributes","tagName":"a"},{"text":"setAutoHide(hide)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setClass","tagName":"a"},{"text":"setContent(content, opt_tooltipopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setHeight(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setId(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setId","tagName":"a"},{"text":"setLeft(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setMouseWheelSpeed(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setParent(parent, opt_prependopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setParent","tagName":"a"},{"text":"setScrollingStep(px)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStyle(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyle","tagName":"a"},{"text":"setStyles(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyles","tagName":"a"},{"text":"setTextContent(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTextContent","tagName":"a"},{"text":"setTooltip(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTooltip","tagName":"a"},{"text":"setTop(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setTrackSize(size, paneSize)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setWidth(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"show(opt_shownopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"toggleClass(cls, forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#toggleClass","tagName":"a"},{"text":"toString()","tagName":"h4"},{"text":"ElementWrapper#toString","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlisten","tagName":"a"},{"text":"unlistenAll(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlistenAll","tagName":"a"},{"text":"update()","tagName":"h4"},{"text":"Returns:","tagName":"h5"}]},{"title":"SectionSettings","filename":"apis/core/SectionSettings.html","contents":[{"text":"new SectionSettings(gridnon-null)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"Extends","tagName":"h3"},{"text":"EventDispatcher","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"activateColumns(activations, firstIndex, lastIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableConflation(opt_disabled)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableDataBinding(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableColumnVirtualization(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"extendDataEventArg(eopt, beginopt, endopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"extendEventArg(eopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"extendRenderEventArg(e, fromR, toR)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getAutoSyncRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getChildren()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"SectionSettings","tagName":"a"},{"text":"getData(colName, rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataChangedConflator()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"Conflator","tagName":"a"},{"text":"getDataSource()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"DataView","tagName":"a"},{"text":"getId()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getIndex()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getParent()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"SectionSettings","tagName":"a"},{"text":"getRootDataSource()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"DataTable","tagName":"a"},{"text":"DataView","tagName":"a"},{"text":"getRowData(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSection()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"getSectionName()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getType()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isBinding()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"removeRowData(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"rerender()","tagName":"h4"},{"text":"setAutoSyncRowCount(bool)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setData(colName, rowRef, data)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setDataSource(dataView)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataView","tagName":"a"},{"text":"setId(stropt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setType(type)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"snapshot(clone)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ILayoutGrid","tagName":"a"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlisten","tagName":"a"},{"text":"unlistenAll(typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlistenAll","tagName":"a"},{"text":"updateRowData(fromRowIndexopt, lastRowIndexopt, eopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Segment","filename":"apis/core/Segment.html","contents":[{"text":"new Segment(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Methods","tagName":"h3"},{"text":"addChild(rid, objMapopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addChildren(rids, objMapopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"collapse(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"containsChild(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"expand(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getChildIds()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getCollapsingStates(objMapopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getId()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getValue()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isCollapsed()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"removeAllChildren(objMapopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeChild(rid, objMapopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeChildren(rids, objMapopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setValue(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"SegmentCollection","filename":"apis/core/SegmentCollection.html","contents":[{"text":"new SegmentCollection()","tagName":"h4"},{"text":"Methods","tagName":"h3"},{"text":"addSegment(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addSegmentChild(segmentId, rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addSegmentChildren(segmentId, rids)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addSegments(rids)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"collapseSegment(segmentId, boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"containsSegment(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"containsSegmentChild(segmentId, rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"expandAllSegments()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"expandSegment(segmentId, boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"fillSegment(segmentId, rids)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"fillSegments(rids)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getCollapsedRows()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSegment(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Segment","tagName":"a"},{"text":"getSegmentCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentIds()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSegments()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"Segment","tagName":"a"},{"text":"getSegmentValues(ridsnon-null)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isCollapsedSegment(segmentId)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeAllSegmentChildren()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"removeAllSegments()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"removeSegment(rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeSegmentChild(segmentId, rid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeSegmentChildren(segmentId, rids)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"}]},{"title":"SortableTitlePlugin","filename":"apis/core/SortableTitlePlugin.html","contents":[{"text":"new SortableTitlePlugin(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Extends","tagName":"h3"},{"text":"Plugin","tagName":"a"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            sortable                                                    boolean                                                                                                                                                                                                                    false                                                        If enable, the column can be sorted by user click        ","tagName":"tr"},{"text":"                            sortBy                                                    string                                                                                                                                                                                                                                        Field to be used for sorting. If defined, user can click at the header section to sort the column        ","tagName":"tr"},{"text":"                            sortLogic                                                    DataTable.SortLogic                                                                                                                                                                                                                    null                                                        Custom compare function for sorting        ","tagName":"tr"},{"text":"                            sortingLogic                                                    DataTable.SortLogic                                                                                                                                                                                                                                        Alias to `sortLogic`        ","tagName":"tr"},{"text":"                            sorter                                                    DataTable.SortLogic                                                                                                                                                                                                                                        Alias to `sortLogic`        ","tagName":"tr"},{"text":"                            defaultSort                                                    string                                                                                                                                                                                                                    null                                                        Set to \"d\" for descending order and \"a\" for ascending order        ","tagName":"tr"},{"text":"InitialSort","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                                                                                                                                                    Index of the column        ","tagName":"tr"},{"text":"                            sortOrder                                                    SortableTitlePlugin~SortOrder                                                                                                                                                                                                                    null                                                        Set to \"d\" for descending order and \"a\" for ascending order        ","tagName":"tr"},{"text":"SortableTitlePlugin~SortOrder","tagName":"a"},{"text":"                            order                                                    SortableTitlePlugin~SortOrder                                                                                                                                                                                                                                        Alias of sortOrder        ","tagName":"tr"},{"text":"SortableTitlePlugin~SortOrder","tagName":"a"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            initialSort                                                    SortableTitlePlugin~InitialSort | Array.                                                                                                                                                                                                                    null                                                        Set this config to initiate sorting after grid is created.        ","tagName":"tr"},{"text":"SortableTitlePlugin~InitialSort","tagName":"a"},{"text":"                            multicolumn                                                    boolean | number                                                                                                                                                                                                                    false                                                        Allow mulitple columns to be sorted at the same time. If number is defined, it is treated as maximum number of column to be sorted.        ","tagName":"tr"},{"text":"                            multiColumn                                                    boolean | number                                                                                                                                                                                                                    false                                                        Alias to `multicolumn`        ","tagName":"tr"},{"text":"                            threeStatesSorting                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, sorting will cycle through ascending, descending and original order states.        ","tagName":"tr"},{"text":"                            sortLogic                                                    Object.                                                                                                                                                                                                                    null                                                        Custom logic for sorting based on the specified field. The key is field name and the value pair is a function.        ","tagName":"tr"},{"text":"                            disableDoubleClickToSort                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, double click on column title to sort        ","tagName":"tr"},{"text":"                            sortableColumns                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, all columns will be sortable by field automatically        ","tagName":"tr"},{"text":"                            sortableIndicator                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, sort indicator (diamond) icon will always show regardless of sorting states. In Halo theme, this option will be enabled by default.        ","tagName":"tr"},{"text":"                            indicatorOnly                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, data will not be sorted, but the UI is rendered normally. This is useful for server side sorting.        ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                                                                                                                                                                        Set to \"manual\" to disable data sorting. Deprecated in favor of `indicatorOnly`        ","tagName":"tr"},{"text":"                            disabled                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, header section cannot be clicked and no sort UI is rendered. Sorting can still be triggered only through `sortColumn` method.        ","tagName":"tr"},{"text":"                            columnSorted                                                    function                                                                                                                                                                                                                                        A shortcut to define the columnSorted event handler        ","tagName":"tr"},{"text":"                            preClicked                                                    function                                                                                                                                                                                                                                        A shortcut to define the preClicked event handler        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                                                                                                                                                                        A shortcut to define the clicked event handler        ","tagName":"tr"},{"text":"                            preDataSorting                                                    function                                                                                                                                                                                                                                        A shortcut to define the preDataSorting event handler        ","tagName":"tr"},{"text":"SortOrder","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Methods","tagName":"h3"},{"text":"afterInit()","tagName":"h4"},{"text":"clearSortState(opt_argopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableCellClick(cell, disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"disableColumnSorting(columns, disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableDataSorting(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableDoubleClickToSort(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableSortSymbols(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableTwoStateSorting(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getColumnMenu(colIndex, config)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnSortingField(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnSortingFields()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataColumnMap()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGridElementFromPoint(x, y)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Plugin#getGridElementFromPoint","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getIcons()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName()","tagName":"h4"},{"text":"Plugin#getName","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRelativeGrid(e)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"Plugin#getRelativeGrid","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Grid","tagName":"a"},{"text":"getSortedColumnIndex(priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSortedColumns()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSortingStates()","tagName":"h4"},{"text":"SortableTitlePlugin#getSortedColumns","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getSortOrder(colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSortPriority(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(ownernon-null)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid","tagName":"a"},{"text":"Plugin#initialize","tagName":"a"},{"text":"isColumnSorted(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"refresh()","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"SortableTitlePlugin#event:preDataSorting","tagName":"a"},{"text":"restoreUserActions()","tagName":"h4"},{"text":"SortableTitlePlugin#refresh","tagName":"a"},{"text":"setClickDelayInterval(opt_msopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnSortingField(colIndex, field, sortLogicopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDataColumnMap(dataMap)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setFirstSortOrder(colIdentifier, sortOrderopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSortableColumnCount(count)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSortLogic(field, func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSortLogics(sortLogic)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"sortColumn(colIndex, sortOrderopt, opt_argopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"SortableTitlePlugin#event:preDataSorting","tagName":"a"},{"text":"SortableTitlePlugin#event:columnSorted","tagName":"a"},{"text":"sortColumns(sortOptions, opt_argopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"SortableTitlePlugin#event:preDataSorting","tagName":"a"},{"text":"SortableTitlePlugin#event:columnSorted","tagName":"a"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlisten","tagName":"a"},{"text":"unlistenAll(typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#unlistenAll","tagName":"a"},{"text":"unload(ownernon-null)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid","tagName":"a"},{"text":"Plugin#unload","tagName":"a"},{"text":"updateSortSymbols()","tagName":"h4"},{"text":"Events","tagName":"h3"},{"text":"clicked","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            sortOrder                                                    string                                                            \"a\" for \"ascending, \"d\" for descending, and \"n\" for none        ","tagName":"tr"},{"text":"                            dataColumnName                                                    string                                                            Field that is used for sorting        ","tagName":"tr"},{"text":"columnSorted","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            sortOrder                                                    string                                                            \"a\" for \"ascending, \"d\" for descending, and \"n\" for none        ","tagName":"tr"},{"text":"                            sortedField                                                    string                                                            Field that is used for sorting        ","tagName":"tr"},{"text":"                            colIndices                                                    Array.                                                            An array of colIndex        ","tagName":"tr"},{"text":"                            sortOrders                                                    Array.                                                            An array of sortOrder        ","tagName":"tr"},{"text":"                            sortedFields                                                    Array.                                                            An array of sortedField        ","tagName":"tr"},{"text":"preClicked","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            target                                                    Element                                                            Element being clicked        ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"function onPreClicked(e) {\n  e.cancel = true; // Cancel sorting operation\n}","tagName":"pre"},{"text":"preDataSorting","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            isUserAction                                                    boolean                                                                                                                                                                            This has true value, if event initiate from clicking title/header section        ","tagName":"tr"}]},{"title":"VScrollbar","filename":"apis/core/VScrollbar.html","contents":[{"text":"new VScrollbar()","tagName":"h4"},{"text":"Extends","tagName":"h3"},{"text":"Scrollbar","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"addClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#addClass","tagName":"a"},{"text":"addContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#addContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addWheelListener(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#addWheelListener","tagName":"a"},{"text":"attachToExternalElement(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#attachToExternalElement","tagName":"a"},{"text":"calculateContentSize()","tagName":"h4"},{"text":"Scrollbar#calculateContentSize","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"disable(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#disable","tagName":"a"},{"text":"disableKeyboardInput(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#disableKeyboardInput","tagName":"a"},{"text":"disableMouseWheel(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#disableMouseWheel","tagName":"a"},{"text":"disableTouchInput(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#disableTouchInput","tagName":"a"},{"text":"enable(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#enable","tagName":"a"},{"text":"enableClass(str, opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#enableClass","tagName":"a"},{"text":"fillParentHeight(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"fillParentWidth(opt_percentopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#fillParentWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"flash()","tagName":"h4"},{"text":"Scrollbar#flash","tagName":"a"},{"text":"getAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getAttribute","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAutoHide()","tagName":"h4"},{"text":"Scrollbar#getAutoHide","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getBoundingClientRect()","tagName":"h4"},{"text":"ElementWrapper#getBoundingClientRect","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getClass()","tagName":"h4"},{"text":"ElementWrapper#getClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getContentHeight()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getContentSize()","tagName":"h4"},{"text":"Scrollbar#getContentSize","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getDefaultMouseWheelLogic()","tagName":"h4"},{"text":"Scrollbar#getDefaultMouseWheelLogic","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getElement()","tagName":"h4"},{"text":"ElementWrapper#getElement","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getHeight()","tagName":"h4"},{"text":"Scrollbar#getHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getId()","tagName":"h4"},{"text":"ElementWrapper#getId","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getLeft()","tagName":"h4"},{"text":"ElementWrapper#getLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getNextSibling()","tagName":"h4"},{"text":"ElementWrapper#getNextSibling","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollGap()","tagName":"h4"},{"text":"Scrollbar#getScrollGap","tagName":"a"},{"text":"scrollHeight","tagName":"a"},{"text":"scrollWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollLeft()","tagName":"h4"},{"text":"ElementWrapper#getScrollLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollTop()","tagName":"h4"},{"text":"Scrollbar#getScrollTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getStyle(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getStyle","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContent()","tagName":"h4"},{"text":"ElementWrapper#getTextContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltip()","tagName":"h4"},{"text":"ElementWrapper#getTooltip","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTop()","tagName":"h4"},{"text":"ElementWrapper#getTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTrackSize()","tagName":"h4"},{"text":"Scrollbar#getTrackSize","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTrackThickness()","tagName":"h4"},{"text":"Scrollbar#getTrackThickness","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getWidth()","tagName":"h4"},{"text":"ElementWrapper#getWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hasClass","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hide(opt_hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#hide","tagName":"a"},{"text":"insertAfter(previousSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertAfter","tagName":"a"},{"text":"insertBefore(nextSibling)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#insertBefore","tagName":"a"},{"text":"isActive()","tagName":"h4"},{"text":"Scrollbar#isActive","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEnabled()","tagName":"h4"},{"text":"Scrollbar#isEnabled","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfHorizontalScroll()","tagName":"h4"},{"text":"ElementWrapper#isEndOfHorizontalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isEndOfVerticalScroll()","tagName":"h4"},{"text":"Scrollbar#isEndOfVerticalScroll","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isVisible()","tagName":"h4"},{"text":"ElementWrapper#isVisible","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler, opt_priorityopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#listen","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new Grid();\ngrid.listen(\"click\", function(e) { console.log(\"Grid is clicked\"); });","tagName":"pre"},{"text":"removeAttribute(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeAttribute","tagName":"a"},{"text":"removeClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#removeClass","tagName":"a"},{"text":"removeContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#removeContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeWheelListener(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#removeWheelListener","tagName":"a"},{"text":"setAttribute(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttribute","tagName":"a"},{"text":"setAttributes(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setAttributes","tagName":"a"},{"text":"setAutoHide(hide)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setAutoHide","tagName":"a"},{"text":"setClass(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setClass","tagName":"a"},{"text":"setContent(content, opt_tooltipopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setContent","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setHeight(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setHeight","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setId(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setId","tagName":"a"},{"text":"setLeft(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setLeft","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setMouseWheelSpeed(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setMouseWheelSpeed","tagName":"a"},{"text":"setScrollingStep(px)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setScrollingStep","tagName":"a"},{"text":"setScrollTop(px)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStyle(str, val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyle","tagName":"a"},{"text":"setStyles(json)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setStyles","tagName":"a"},{"text":"setTextContent(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTextContent","tagName":"a"},{"text":"setTooltip(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTooltip","tagName":"a"},{"text":"setTop(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setTop","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setTrackSize(size, paneSize)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Scrollbar#setTrackSize","tagName":"a"},{"text":"setWidth(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#setWidth","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"show(opt_shownopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#show","tagName":"a"},{"text":"toggleClass(cls, forcedValopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#toggleClass","tagName":"a"},{"text":"toString()","tagName":"h4"},{"text":"ElementWrapper#toString","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"unlisten(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlisten","tagName":"a"},{"text":"unlistenAll(opt_typeopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#unlistenAll","tagName":"a"},{"text":"update()","tagName":"h4"},{"text":"Scrollbar#update","tagName":"a"},{"text":"Returns:","tagName":"h5"}]},{"title":"ColumnDefinition","filename":"apis/rt_grid/ColumnDefinition.html","contents":[{"text":"new ColumnDefinition(columnOptionopt, hostGridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                                    \"\"                                                        Field for real-time, ADC, formula sources        ","tagName":"tr"},{"text":"                            dataType                                                    string                                                                                                                                                                                                                    \"\"                                                        data type eg. string, datetime, number        ","tagName":"tr"},{"text":"                            formulaReference                                                    string                                                                                                                                                                                                                    \"\"                                                                ","tagName":"tr"},{"text":"                            require                                                    Array.                                                                                                                                                                                                                    null                                                        Extra fields required by this column will be requested for real-time data.        ","tagName":"tr"},{"text":"                            name                                                    string                                                                                                                                                                                                                    \"\"                                                        Label of the column        ","tagName":"tr"},{"text":"                            notRealTimeField                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the `field` will not be requested for real-time data. By enabling this, `rowSorting` will also be disabled, if not specified.        ","tagName":"tr"},{"text":"                            tooltip                                                    boolean | string | null                                                                                                                                                                                                                    null                                                        Show tooltip in header section        ","tagName":"tr"},{"text":"                            headerBinding                                                    function                                                                                                                                                                                                                    null                                                        Method for custom header rendering.        ","tagName":"tr"},{"text":"                            headerRenderer                                                    function                                                                                                                                                                                                                    null                                                        Alias to `headerBinding`        ","tagName":"tr"},{"text":"                            binding                                                    function                                                                                                                                                                                                                    null                                                        Method for custom rendering. It will be executed on each data update and scrolling        ","tagName":"tr"},{"text":"                            renderer                                                    function                                                                                                                                                                                                                    null                                                        Alias to `binding`        ","tagName":"tr"},{"text":"                            sortLogic                                                    ColumnDefinition~SortLogic                                                                                                                                                                                                                    null                                                                ","tagName":"tr"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"                            sortingLogic                                                    ColumnDefinition~SortLogic                                                                                                                                                                                                                    null                                                        Alias to `sortLogic`        ","tagName":"tr"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"                            sorter                                                    ColumnDefinition~SortLogic                                                                                                                                                                                                                    null                                                        Alias to `sortLogic`        ","tagName":"tr"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"                            rowSorting                                                    boolean                                                                                                                                                                                                                    null                                                        If set to true, RowDefinition object will be used for sorting comparison. If set to false, data from the given `field` will be used for sorting comparison.        ","tagName":"tr"},{"text":"                            sortable                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the column cannot be sorted by user click        ","tagName":"tr"},{"text":"                            sort                                                    string                                                                                                                                                                                                                    \"\"                                                        Deprecated Alias to `sortOrder`        ","tagName":"tr"},{"text":"                            sortOrder                                                    string                                                                                                                                                                                                                    \"\"                                                        The column can be sorted in ascending and descending order by specifying the order \"a\", \"d\". This option will sort the column when it is initialized or inserted at runtime.        ","tagName":"tr"},{"text":"                            styles                                                    Object                                                                                                                                                                                                                    null                                                        Key/value pair Object specifying CSS styles        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                                                                                                                                                    NaN                                                        If specified, column will have a fixed width in pixel        ","tagName":"tr"},{"text":"                            minWidth                                                    number                                                                                                                                                                                                                    NaN                                                        If specified, column will have a minimum width in pixel        ","tagName":"tr"},{"text":"                            scalable                                                    boolean                                                                                                                                                                                                                    true                                                        Column scalability forces column to be scaled and filled the grid. `width` property will be used as a weight/ratio        ","tagName":"tr"},{"text":"                            className                                                    string                                                                                                                                                                                                                    \"\"                                                                ","tagName":"tr"},{"text":"                            class                                                    string                                                                                                                                                                                                                    \"\"                                                        Alias to `className`        ","tagName":"tr"},{"text":"                            textAlign                                                    string                                                                                                                                                                                                                    \"\"                                                        Text alignment for content and column header. Available values are: left|center|right        ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                                                                                                                                                    \"\"                                                        Alias to `textAlign`        ","tagName":"tr"},{"text":"                            headerAlignment                                                    string                                                                                                                                                                                                                    \"\"                                                        Text alignment for column header. This will override `textAlign` option for column header.        ","tagName":"tr"},{"text":"                            titleAlignment                                                    string                                                                                                                                                                                                                    \"\"                                                        Alias to `headerAlignment`        ","tagName":"tr"},{"text":"                            hidden                                                    boolean                                                                                                                                                                                                                    false                                                                ","tagName":"tr"},{"text":"                            id                                                    string                                                                                                                                                                                                                                        A unique identifier for the column        ","tagName":"tr"},{"text":"                            textSelect                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, user can select text in this column        ","tagName":"tr"},{"text":"                            keepModel                                                    boolean                                                                                                                                                                                                                                        If enabled, initial column's options will be kept        ","tagName":"tr"},{"text":"                            stationary                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the column order cannot be changed (i.e., this column and any column to its left cannot be moved)        ","tagName":"tr"},{"text":"                            leftPinned                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the column will not be part of the scrollable area and is pinned to the left side        ","tagName":"tr"},{"text":"                            rightPinned                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the column will not be part of the scrollable area and is pinned to the right side        ","tagName":"tr"},{"text":"                            info                                                    Object                                                                                                                                                                                                                    null                                                        Store additional information        ","tagName":"tr"},{"text":"SortLogic(valA, valB, order, ctx)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Methods","tagName":"h3"},{"text":"getDataType(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRealTimeFields(fields, colDef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isAdcField(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isFormulaField(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isRealTimeField(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"activateRenderer(idopt, funcopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addRenderer(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"clearUserModel()","tagName":"h4"},{"text":"dispose()","tagName":"h4"},{"text":"getAllFields()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getChildren()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnDefinition","tagName":"a"},{"text":"getClasses()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnInfo()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(colOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataType()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getField()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getFieldDataType()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getFieldDefinition()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getHeaderAlignment()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getHeaderRenderer()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getId()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getInitialSortOrder()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getMinWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getParent()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnDefinition","tagName":"a"},{"text":"getRenderer()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRequiredFields()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRequireFields()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSorter()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTextAlign()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltip()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getUserModel()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hide(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"initialize(columnOptionopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"isAutoGenerated()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isDefaultName()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isFieldEmpty()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isFormulaField()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isHidden()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isRealTimeField()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isRowSorting()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isScalable()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isSortable()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isTextSelect()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isTimeSeries()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isTimeSeriesChild()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnInfo(obj)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDataType(dataType)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setHeaderRenderer(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setName(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRenderer(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSorter(funcopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnDefinition~SortLogic","tagName":"a"}]},{"title":"Grid","filename":"apis/rt_grid/Grid.html","contents":[{"text":"new Grid(placeholderopt, configopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~GridOptions","tagName":"a"},{"text":"Extends","tagName":"h3"},{"text":"Type Definitions","tagName":"h3"},{"text":"ADCOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            productId                                                    string                                                                                                                                                                                                                    001                                                        required parameter, it specifies the product for which you request data. Contact the adc staff to create one.        ","tagName":"tr"},{"text":"ColumnReference","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"ColumnDefinition","tagName":"a"},{"text":"GridOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            columns                                                    Array.<(ColumnDefinition~Options|string)>                                                                                                                                                                                                                                        Collection of the column definitions        ","tagName":"tr"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"                            defaultColumnOptions                                                    ColumnDefinition~Options                                                                                                                                                                                                                                        All Columns will inherit from this default object        ","tagName":"tr"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"                            rows                                                    Array.                                                                                                                                                                                                                                        Collection of the row definitions        ","tagName":"tr"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"                            fields                                                    Array.                                                                                                                                                                                                                                        Shorthand for setting fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.                                                                                                                                                                                                                                        Shorthand for creating row definition        ","tagName":"tr"},{"text":"                            plugins                                                    Array                                                                                                                                                                                                                                        Additional plugins for core grid (from getBlotter()/getCoreGrid())        ","tagName":"tr"},{"text":"                            extensions                                                    Array                                                                                                                                                                                                                                        Alias to `plugins`        ","tagName":"tr"},{"text":"                            scrollbar                                                    boolean                                                                                                                                                                                                                    true                                                        Enable both vertical and horizontal scrollbar in grid        ","tagName":"tr"},{"text":"                            linearWheelScrolling                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, wheel scrolling will move the content linearly regardless of how long the content is (i.e. no skipping).        ","tagName":"tr"},{"text":"                            stepScroll                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, a full row will be scrolled at a time instead of actual scroll value.        ","tagName":"tr"},{"text":"                            autoHideScrollbar                                                    boolean                                                                                                                                                                                                                    true                                                        Fading in/out Scrollbar on hover.        ","tagName":"tr"},{"text":"                            pageSize                                                    string                                                                                                                                                                                                                    0                                                        Make grid show specified number of row        ","tagName":"tr"},{"text":"                            rowHeight                                                    number                                                                                                                                                                                                                    32                                                        Set default row height for body (content) section        ","tagName":"tr"},{"text":"                            headerRowHeight                                                    number                                                                                                                                                                                                                    32                                                        Set default row height for header section        ","tagName":"tr"},{"text":"                            noColumnDragging                                                    boolean                                                                                                                                                                                                                    false                                                        All columns can be moved by dragging. If this option is true, the feature is disabled        ","tagName":"tr"},{"text":"                            columnReorder                                                    boolean                                                                                                                                                                                                                    true                                                        Alias with noColumnDragging but in opposite value. This property deprecated in favor of noColumnDragging.        ","tagName":"tr"},{"text":"                            rowHighlighting                                                    boolean                                                                                                                                                                                                                    true                                                        Highlight a row when hovering mouse over grid        ","tagName":"tr"},{"text":"                            autoLayoutUpdate                                                    boolean | number                                                                                                                                                                                                                    false                                                        Grid will check for layout change periodically.        ","tagName":"tr"},{"text":"                            columnFreezing                                                    number                                                                                                                                                                                                                                        Deprecated in favor of column's leftPinned property. Enable horizontal scrollbar after `columnFreezing` index        ","tagName":"tr"},{"text":"                            freezeColumn                                                    number                                                                                                                                                                                                                                        Deprecated in favor of column's leftPinned property. An alias to columnFreezing        ","tagName":"tr"},{"text":"                            pinnedRightColumns                                                    number                                                                                                                                                                                                                    0                                                        Deprecated in favor of column's rightPinned property. Number of columns to be frozen/pinned on the right side.        ","tagName":"tr"},{"text":"                            staticDataRows                                                    Array                                                                                                                                                                                                                                        Shorthand for calling Grid#addStaticDataRows        ","tagName":"tr"},{"text":"Grid#addStaticDataRows","tagName":"a"},{"text":"                            dataFields                                                    Array.                                                                                                                                                                                                                                        Shorthand for calling Grid#addDataFields        ","tagName":"tr"},{"text":"Grid#addDataFields","tagName":"a"},{"text":"                            rowVirtualization                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, all data rows will be rendered. This will greatly impact grid's performance if the data set is huge.        ","tagName":"tr"},{"text":"                            columnVirtualization                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, all columns will be rendered. This will greatly impact grid's performance if the column set is huge.        ","tagName":"tr"},{"text":"                            topFreezingCount                                                    number | null | boolean                                                                                                                                                                                                                    null                                                        If number >= 0 will fix number of frozen title section, If false = disabled scrollbar, if null then title section will freeze auto when new section added, this option will not work with scrollbar option.        ","tagName":"tr"},{"text":"                            bottomFreezingCount                                                    number | null                                                                                                                                                                                                                    null                                                        If number >= 0 will fix nuber of frozen footer section, if null then footer section will freeze auto when new section added, this option will not work with scrollbar option.        ","tagName":"tr"},{"text":"                            borders                                                    boolean                                                                                                                                                                                                                    true                                                        Lines around grid element        ","tagName":"tr"},{"text":"                            gridlines                                                    boolean                                                                                                                                                                                                                    true                                                        Horizontal and Vertical lines for ONLY content sections        ","tagName":"tr"},{"text":"                            verticalLines                                                    boolean                                                                                                                                                                                                                    true                                                        Vertical lines for all sections        ","tagName":"tr"},{"text":"                            contentVerticalLines                                                    boolean                                                                                                                                                                                                                    true                                                        Vertical lines for all content section        ","tagName":"tr"},{"text":"                            horizontalLines                                                    boolean                                                                                                                                                                                                                    true                                                        Horizontal lines for all sections        ","tagName":"tr"},{"text":"                            RTK                                                    *                                                                                                                                                                                                                    null                                                        rtk toolkit instance        ","tagName":"tr"},{"text":"                            ADC                                                    Grid~ADCOptions                                                                                                                                                                                                                    null                                                        ADC requesting level config object from adc team        ","tagName":"tr"},{"text":"Grid~ADCOptions","tagName":"a"},{"text":"                            synapse                                                    Grid~SynapseConfig                                                                                                                                                                                                                    null                                                        synapse config object        ","tagName":"tr"},{"text":"Grid~SynapseConfig","tagName":"a"},{"text":"                            contentRightPadding                                                    number                                                                                                                                                                                                                    0                                                        Padding that is added next to the right most column. The padding is still a part of scrollable content.        ","tagName":"tr"},{"text":"                            contentBottomPadding                                                    number                                                                                                                                                                                                                    0                                                        Padding that is added below the last section. The padding is still a part of scrollable content.        ","tagName":"tr"},{"text":"                            dataConflationRate                                                    number                                                                                                                                                                                                                    0                                                        set delay for data to avoid to much sorting operation when data changed        ","tagName":"tr"},{"text":"                            autoDateConversion                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, date-time field with numeric value will be automatically converted to native date object.        ","tagName":"tr"},{"text":"                            textSelect                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, user can select content text by using mouse drag.        ","tagName":"tr"},{"text":"                            lang                                                    string                                                                                                                                                                                                                                        laguage for config localization date time, if null the default language is \"en\"        ","tagName":"tr"},{"text":"                            scrollbarParent                                                    Element                                                                                                                                                                                                                    null                                                        Element to be attached by grid's scrollbars, allowing them to move outside and avoid overlapping with the content.        ","tagName":"tr"},{"text":"                            formulaEngine                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, field with leading equal sign will be treated as a formula and rows will be filled with the calculated values.        ","tagName":"tr"},{"text":"                            adcPollingInterval                                                    number                                                                                                                                                                                                                    0                                                        Length of polling interval for refreshing ADC data in milliseconds. The default value (0) means no polling.        ","tagName":"tr"},{"text":"                            fieldCaching                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, field definition will be caching internal mechanism        ","tagName":"tr"},{"text":"                            timeSeriesExpansion                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the time series field will be treated as a normal field and not expanded.        ","tagName":"tr"},{"text":"                            childDataField                                                    string                                                                                                                                                                                                                    CHILD_VALUES                                                        The given field will be used to store children's static data, such as row color assignment.        ","tagName":"tr"},{"text":"                            topSection                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, title section will not be rendered        ","tagName":"tr"},{"text":"                            sorting                                                    SortableTitlePlugin~Options                                                                                                                                                                                                                                        Options for sorting        ","tagName":"tr"},{"text":"                            dataComposed                                                    function                                                                                                                                                                                                                                        Handler for dataComposed event        ","tagName":"tr"},{"text":"                            beforeContentBinding                                                    function                                                                                                                                                                                                                                        Handler for beforeContentBinding event        ","tagName":"tr"},{"text":"                            firstRendered                                                    function                                                                                                                                                                                                                                        Handler for firstRendered event        ","tagName":"tr"},{"text":"                            afterContentBinding                                                    function                                                                                                                                                                                                                                        Handler for afterContentBinding event        ","tagName":"tr"},{"text":"RowReference","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"SynapseConfig","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            apiKey                                                    string                                                                                                                                                                                                    Synapse api key        ","tagName":"tr"},{"text":"                            contextApp                                                    string                                                                                                                                                                                                    Synapse context app name        ","tagName":"tr"},{"text":"                            auth                                                    string                                                                                                                                                                                                                                        Synapse authen token        ","tagName":"tr"},{"text":"                            debug                                                    boolean                                                                                                                                                                                                                    false                                                        If true, Synapse response will be mock        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"activateADCPolling(activatedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"activateColumnRenderer(colRef, idopt, funcopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"addDataFields(fieldRef, referreropt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addFooterSection(sectionNameopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addHeaderSection(sectionNameopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addStaticDataRows(dataRows, fieldsopt)","tagName":"h4"},{"text":"RowDefinition","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#logDV","tagName":"a"},{"text":"Grid#logDT","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new rt.Grid(grid_div, options);\ngrid.addStaticDataRows([\n [10, \"a\", true],\n [20, \"b\", false],\n [30, \"c\", true]\n], [\"field1\", \"field2\", \"field3\"]); // 3 rows are appended\n\ngrid.addStaticDataRows([ // Object format can also be used {\"field1\": 40, \"field2\": \"a\",  \"field3\": true}, {\"field1\": 50, \"field2\": \"b\"}, // each row doesn't have to be the same {\"field1\": 60, \"field4\": \"some thing\"}]); // 3 more rows are appendedgrid.logDV({\"colNames\": [\"field1\", \"field2\", \"field3\", \"field4\"]}); // See results in console","tagName":"pre"},{"text":"grid.addStaticDataRows([ // Object format can also be used {\"field1\": 40, \"field2\": \"a\",  \"field3\": true}, {\"field1\": 50, \"field2\": \"b\"}, // each row doesn't have to be the same {\"field1\": 60, \"field4\": \"some thing\"}]); // 3 more rows are appendedgrid.logDV({\"colNames\": [\"field1\", \"field2\", \"field3\", \"field4\"]}); // See results in console","tagName":"p"},{"text":"","tagName":"p"},{"text":"clearSort()","tagName":"h4"},{"text":"contains(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"focus()","tagName":"h4"},{"text":"freezeColumn(colIndexopt, pinnedRightColumnsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getAllFields()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllRowDefinitions(inclAutoGeneratedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"getColumnCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnDataType(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnDefinition(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnDefinition","tagName":"a"},{"text":"getColumnDefinitionById(colId)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnDefinition","tagName":"a"},{"text":"getColumnDefinitions()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnDefinition","tagName":"a"},{"text":"getColumnDefinitionsById(colIds)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnDefinition","tagName":"a"},{"text":"getColumnField(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#getColumnDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnFields()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnId(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#getColumnDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIds()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIndex(colRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIndices(colRefs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnNames()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCoreGrid()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDataRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDataView()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getElement()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getExtension(str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getFieldInfo(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getMultipleRowData(objopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"grid.getMultipleRowData(); // All row data are returned\ngrid.getMultipleRowData([0, 2, 4]); // Three row data are returned\ngrid.getMultipleRowData(1); // One row data from the specified row index is returned\ngrid.getMultipleRowData(DataView); // All row data from the specified DataView instance are returned","tagName":"pre"},{"text":"getPageCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPageIndex()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPageItemCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPageSize()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRelativePosition(obj)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowData(rowIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowDefinition(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"getRowDefinitions()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"getRowType(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollHeight()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollLeft()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollTop()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getScrollWidth()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSortedColumnIndex()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSortOrder()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getVScrollView()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasHiddenRow()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hideColumn(colRef, hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Grid#hideColumns","tagName":"a"},{"text":"Grid#showAllColumns","tagName":"a"},{"text":"hideColumns(colRefs, hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Grid#hideColumn","tagName":"a"},{"text":"Grid#showAllColumns","tagName":"a"},{"text":"hideRow(rowRef, hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"hideRows(rowRefs, hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"Grid~RowReference","tagName":"a"},{"text":"initialize(gridOptionopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~GridOptions","tagName":"a"},{"text":"initSubscription()","tagName":"h4"},{"text":"insertBefore(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"insertColumn(columnOption, idxopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"insertRow(rowOptionopt, rowRefopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"Grid~RowReference","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new rt.Grid(grid_div, options);\ngrid.insertRow({\"ric\": \"RIC\"}, 0); // A new row is added at the top","tagName":"pre"},{"text":"insertRows(rowOptions, rowRefopt, opt_fieldsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"Grid~RowReference","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var grid = new rt.Grid(grid_div, options);\ngrid.insertRows([\n {ric: \"RIC\"},\n {values: {\"field1\": 0, \"field2\": 1}},\n {ric: \"RIC2\", values: [1, 2, 3, 4]},\n null\n]); // 4 rows are appended","tagName":"pre"},{"text":"isFocused()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isSorting()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"listen(type, handler)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"loadFieldInfo(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var gridConfig = {\n  synapse: { // define synapse configuration\n    apiKey: \"xxx\",\n    contextApp: \"xxx\",\n    auth: \"xxx\" (optional)\n  }\n};\nvar promise = grid.loadFieldInfo(\"CF_LAST\");","tagName":"pre"},{"text":"logDT(opt_optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"logDV(opt_optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"// Options have the following format:\n// {\n//    \"colNames\": Array.,\n//    \"rowCount\": number,\n//    \"startIndex\": number,\n//    \"getter\": function(rowData:Object, colName:string):*,\n//    \"withRowIds\": boolean\n// }\ngrid.logDV({\"rowCount\": 10}); // Showing 10 records","tagName":"pre"},{"text":"moveColumn(fromColIndex, toColIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#moveColumnById","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"moveColumnById(srcCol, destColopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#moveColumn","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"grid.moveColumnById(3, 1); // Move column 3 to position before column 1\ngrid.moveColumnById(0, 2); // Move column 0 to position before column 2 (column index 1)\ngrid.moveColumnById(0, 1); // Nothing is moved\ngrid.moveColumnById(\"sourceColumnId\", \"anotherId\");\ngrid.moveColumnById(\"sourceColumnId\", \"\"); // move to the last position","tagName":"pre"},{"text":"pinColumn(colRef, sideopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"refreshADCData()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"removeAllColumns()","tagName":"h4"},{"text":"Grid#removeColumn","tagName":"a"},{"text":"Grid#removeColumns","tagName":"a"},{"text":"removeAllRows()","tagName":"h4"},{"text":"Grid#removeRow","tagName":"a"},{"text":"Grid#removeRows","tagName":"a"},{"text":"removeColumn(colRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Grid#removeColumns","tagName":"a"},{"text":"Grid#removeAllColumns","tagName":"a"},{"text":"removeColumns(colRefs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Grid#removeColumn","tagName":"a"},{"text":"Grid#removeAllColumns","tagName":"a"},{"text":"removeDataFields(fieldRef, referreropt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeEventListeners()","tagName":"h4"},{"text":"removeFieldReferrer(referrer)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeRow(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"Grid#removeRows","tagName":"a"},{"text":"Grid#removeAllRows","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"removeRows(rowRefs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"Grid#removeRow","tagName":"a"},{"text":"Grid#removeAllRows","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"reorderColumns(colRefs, destColopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"replaceColumn(columnOption, colRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"replaceRow(rowRef, rowOptionopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"requestRowRefresh()","tagName":"h4"},{"text":"restoreColumns(columns, byIdopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"scrollDown(pixels)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"scrollRight(pixels)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"scrollToColumn(colIndex, leftOfViewopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"scrollToRow(rowIndex, topOfViewopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setClassification(rowRef, fields)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnFormatter(colIndex, formatter)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnName(colIndex, str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnRenderer(colRef, funcopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"setColumns(columns)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnSorter(colRef, funcopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"setFields(ary)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid#setColumns","tagName":"a"},{"text":"setLocale(lang)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setPage(pageIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setPageSize(size)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setParent(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRic(rowRef, str, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"setRicData(ric, values)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRics(ary)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowContent(rowRef, str)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"setRowData(rowRef, values)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"setScrollLeft(pixels)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setScrollTop(pixels)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStaticData(rowRef, field, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"setStaticRowData(rowRef, values)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"showAllColumns()","tagName":"h4"},{"text":"Grid#hideColumn","tagName":"a"},{"text":"Grid#hideColumns","tagName":"a"},{"text":"showRows(rowRefs, shownopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"Grid~RowReference","tagName":"a"},{"text":"sortColumn(colRef, opt_orderopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"toggleChain(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"toggleRowExpansion(rid, forceopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unhideAllRows()","tagName":"h4"},{"text":"unlinkChain(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~RowReference","tagName":"a"},{"text":"unpinAllColumns()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"unpinColumn(colRef, destopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Grid~ColumnReference","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"updateColumnTitle()","tagName":"h4"},{"text":"updateDataSet(records, rowIdentifieropt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"// Grid data set will be updated to 3 records. All rows in the grid will be cleared and new rows will be inserted\ngrid.updateDataSet([\n    { id: \"A\", field2: 1, field3: 2, field4: \"Something A\" },\n    { id: \"B\", field2: 1, field3: 2, field4: \"Something B\" },\n    { id: \"C\", field2: 1, field3: 2, field4: \"Something C\" },\n], \"id\");\n// Update record id \"B\" in \"field2\", \"field3\" value 100, 200\ngrid.updateDataSet([\n    { id: \"A\", field2: 1, field3: 2, field4: \"Something A\" },\n    { id: \"B\", field2: 100, field3: 200, field4: \"Something B\" },\n    { id: \"C\", field2: 1, field3: 2, field4: \"Something C\" },\n], \"id\");\n// Delete record id \"B\"\ngrid.updateDataSet([\n    { id: \"A\", field2: 1, field3: 2, field4: \"Something A\" },\n    { id: \"C\", field2: 1, field3: 2, field4: \"Something C\" },\n], \"id\");\n// Insert record id \"D\"\ngrid.updateDataSet([\n    { id: \"A\", field2: 1, field3: 2, field4: \"Something A\" },\n    { id: \"C\", field2: 1, field3: 2, field4: \"Something C\" },\n    { id: \"D\", field2: 1, field3: 2, field4: \"Something D\" },\n], \"id\");\n// Reorder to \"D\", \"C\", \"A\"\ngrid.updateDataSet([\n    { id: \"D\", field2: 1, field3: 2, field4: \"Something D\" },\n    { id: \"C\", field2: 1, field3: 2, field4: \"Something C\" },\n    { id: \"A\", field2: 1, field3: 2, field4: \"Something A\" },\n], \"id\");\n// Insert, Update, Delete And Reorder\ngrid.updateDataSet([\n    { id: \"F\", field2: 1, field3: 2, field4: \"Something F\" },\n    { id: \"D\", field2: 1, field3: 2, field4: \"Something D\" },\n    { id: \"C\", field2: 1, field3: 2, field4: \"Something C\" },\n    { id: \"E\", field2: 1, field3: 2, field4: \"Something E\" },\n], \"id\");","tagName":"pre"},{"text":"updateLayout()","tagName":"h4"},{"text":"updateLayout()","tagName":"h4"},{"text":"updateRowData(opt_rowIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"adcDataReceived","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            data                                                    Array.                                                            Data part of the server response        ","tagName":"tr"},{"text":"afterContentBinding","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            e                                                    Object                                                            Event of afterContentBinding        ","tagName":"tr"},{"text":"beforeContentBinding","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            e                                                    Object                                                            Event of beforeContentBinding,  We can use e.actualUpdate to check the actual data update, otherwise It will be empty when it is rendered by row virtualization or only the UI changes.        ","tagName":"tr"},{"text":"beforeRowRemoved","tagName":"h4"},{"text":"dataComposed","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            grid                                                    Grid                                                                    ","tagName":"tr"},{"text":"Grid","tagName":"a"},{"text":"                            rowDef                                                    RowDefinition                                                                    ","tagName":"tr"},{"text":"RowDefinition","tagName":"a"},{"text":"fieldAdded","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            type                                                    string                                                            \"fieldAdded\"        ","tagName":"tr"},{"text":"                            addedFields                                                    Array.                                                            An array of newly added fields        ","tagName":"tr"},{"text":"                            fields                                                    Array.                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.                                                            All row definitions        ","tagName":"tr"},{"text":"RowDefinition","tagName":"a"},{"text":"fieldRemoved","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            type                                                    string                                                            \"fieldRemoved\"        ","tagName":"tr"},{"text":"                            removedFields                                                    Array.                                                            An array of recently removed fields        ","tagName":"tr"},{"text":"                            fields                                                    Array.                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.                                                            All row definitions        ","tagName":"tr"},{"text":"RowDefinition","tagName":"a"},{"text":"firstRendered","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            e                                                    Object                                                            Event of firstRendered        ","tagName":"tr"},{"text":"pageCountChanged","tagName":"h4"},{"text":"pageIndexChanged","tagName":"h4"},{"text":"ricAdded","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            type                                                    string                                                            \"ricAdded\"        ","tagName":"tr"},{"text":"                            addedRics                                                    Array.                                                            An array of newly added rics        ","tagName":"tr"},{"text":"                            fields                                                    Array.                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.                                                            All row definitions        ","tagName":"tr"},{"text":"RowDefinition","tagName":"a"},{"text":"ricRemoved","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            type                                                    string                                                            \"ricRemoved\"        ","tagName":"tr"},{"text":"                            removedRics                                                    Array.                                                            An array of recently removed rics        ","tagName":"tr"},{"text":"                            fields                                                    Array.                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.                                                            All row definitions        ","tagName":"tr"},{"text":"RowDefinition","tagName":"a"}]},{"title":"RowDefinition","filename":"apis/rt_grid/RowDefinition.html","contents":[{"text":"new RowDefinition(rowOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            ric                                                    string                                                                                                                                                                                                                    \"\"                                                        RIC for real-time fields. Prefixing 0# to the ric is equivalent to specifying asChain property.        ","tagName":"tr"},{"text":"                            permId                                                    string                                                                                                                                                                                                                    \"\"                                                        Organization PermId to be used instead of ric for private company.        ","tagName":"tr"},{"text":"                            values                                                    Array | Object                                                                                                                                                                                                                    null                                                        Values for static data        ","tagName":"tr"},{"text":"                            fields                                                    Array.                                                                                                                                                                                                                    null                                                        Field that corresponds to the given static values        ","tagName":"tr"},{"text":"                            asChain                                                    boolean                                                                                                                                                                                                                    false                                                        The given ric will be treated as a chain        ","tagName":"tr"},{"text":"                            chainRic                                                    string                                                                                                                                                                                                                    \"\"                                                        RIC to be used for chain request (overiding ric property)        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                                                                                                                                                    true                                                        Chain is collapsed by default        ","tagName":"tr"},{"text":"                            label                                                    string | null                                                                                                                                                                                                                    null                                                                ","tagName":"tr"},{"text":"                            hidden                                                    boolean                                                                                                                                                                                                                    true                                                        When this row is hidden        ","tagName":"tr"},{"text":"                            realTime                                                    boolean                                                                                                                                                                                                                    true                                                        Realtime row, able to request for JET/RTK        ","tagName":"tr"},{"text":"RowTypes","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Default                Description    ","tagName":"tr"},{"text":"                            CONTENT                                                    string                                                                                                    \"CONTENT\"                                                        Regular row        ","tagName":"tr"},{"text":"                            CHAIN                                                    string                                                                                                    \"CHAIN\"                                                        Chain RIC row        ","tagName":"tr"},{"text":"                            CONSTITUENT                                                    string                                                                                                    \"CONSTITUENT\"                                                        Constituent row        ","tagName":"tr"},{"text":"                            GROUP_HEADER                                                    string                                                                                                    \"GROUP_HEADER\"                                                        Row of segment separator at the very top        ","tagName":"tr"},{"text":"                            SUBGROUP_HEADER                                                    string                                                                                                    \"SUBGROUP_HEADER\"                                                        Row of nested segment separator        ","tagName":"tr"},{"text":"                            GROUP_MEMBER                                                    string                                                                                                    \"GROUP_MEMBER\"                                                        Child row displayed under segment separator        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"deregisterFromView(rowIds, rowDef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var rowIds = descendants.reduce(RowDefinition.deregisterFromView, []);","tagName":"pre"},{"text":"dispose(rowDef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"hasChain(rowDef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"toRowId(rowDef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"_getStaticRowData()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"_toRealTimeRow()","tagName":"h4"},{"text":"addUpdate(e)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"collapseChain()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"expandChain()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllDescendantIds()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getChildCount()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getChildren()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"getConfigObject(rowOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"getData(field)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataId()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDataSource()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDepthLevel()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDescendants(aryopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"getDisplayText()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getLabel()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getParent()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"RowDefinition","tagName":"a"},{"text":"getPermId()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRic()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowData()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowId()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSymbol()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getType()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getUpdates()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getUserInput()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getUserModel()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(rowOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"isAutoGenerated()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isChain()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isChainCollapsed()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isChainExpanded()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isDisposed()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isRealTimeRow()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isRowHeader()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isSubscribing()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"registerToView(view, rowIdopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"resetUpdates()","tagName":"h4"},{"text":"setData(field, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDataSource(dataSource)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowData(data)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStaticData(field, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStaticRowData(data, opt_fieldsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"subscribeForUpdates()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"toggleChain()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"unlinkChain()","tagName":"h4"},{"text":"unsubscribeForUpdates()","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"updateRowData(data, opt_fieldsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Overview","filename":"extensions/README.html","contents":[{"text":"Grid extensions provide enhancements for the efx-grid element and the underlying core library. This allows for greater extensibility without increasing the size of the main code base.","tagName":"p"},{"text":"Setup guide","tagName":"h2"},{"text":"Use import syntax to import the extension into your app.","tagName":"p"},{"text":"import { EXTENSION_NAME } from '@refinitiv-ui/efx-grid/extensions';","tagName":"pre"},{"text":"For example","tagName":"p"},{"text":"import { AutoTooltip } from '@refinitiv-ui/efx-grid/extensions';","tagName":"pre"},{"text":"Basic usage","tagName":"h2"},{"text":"The simplest way to add extensions to Grid is by passing the extension's instances through the extensions property in the configuration object.","tagName":"p"},{"text":"var grid = document.getElementById('grid');\ngrid.config = {\n  // main option\n  extensions: [\n    EXTENTION_INSTANCE\n  ]\n};","tagName":"pre"},{"text":"There are two kinds of extension options, the main option and the column-specific option.","tagName":"p"},{"text":"The main option is an option declared as a first-level property. Generally, the main option's attribute name is the extension's name but starting with a lower case letter. For example, autoTooltip.","tagName":"p"},{"text":"The column specific option is defined in the column option under the columns property of Grid's configuration.","tagName":"p"},{"text":"Details about both kinds of options are available on each extension's page.","tagName":"p"},{"text":"Example of an extension option:","tagName":"p"},{"text":"var grid = document.getElementById('grid');\ngrid.config = {\n  // main option\n  columns: [\n    // column-specific option\n    {\n        name: \"Number\",\n        field: \"number\",\n        autoTooltip: true // column's specific option\n    }\n  ],\n\n  extensions: [\n    new AutoTooltip()\n  ],\n\n  // extension option\n  autoTooltip: {\n    title: true,\n    content: false\n  }\n};","tagName":"pre"},{"text":"Required dependencies","tagName":"h2"},{"text":"For details on how to install and use the EF-element see the Element Framework - Quick Start document.","tagName":"p"},{"text":"Element Framework - Quick Start document","tagName":"a"},{"text":"Checkbox Extension","tagName":"h3"},{"text":"The Checkbox Extension supports both the native checkbox and the ef-checkbox. To use with the ef-checkbox, the following dependency is also required:","tagName":"p"},{"text":"ef-checkbox","tagName":"a"},{"text":"npm install @refinitiv-ui/elements\nnpm install @refinitiv-ui/halo-theme","tagName":"pre"},{"text":"Then import to your project index.js.","tagName":"p"},{"text":"// import element\nimport '@refinitiv-ui/elements/checkbox';\n\n// import element's Halo dark theme\nimport '@refinitiv-ui/elements/checkbox/themes/halo/dark'; // Can be any theme","tagName":"pre"},{"text":"Range Bar Extension","tagName":"h3"},{"text":"The Range Bar Extension provides graphical bar for last value ranking visualization based on low and high value with used ef-led-gauge. To use the ef-led-gauge, the following dependency is also required:","tagName":"p"},{"text":"ef-led-gauge","tagName":"a"},{"text":"npm install @refinitiv-ui/elements\nnpm install @refinitiv-ui/halo-theme","tagName":"pre"},{"text":"Then import to your project index.js.","tagName":"p"},{"text":"// import element\nimport '@refinitiv-ui/elements/led-gauge';\n\n// import element's Halo dark theme\nimport '@refinitiv-ui/elements/led-gauge/themes/halo/dark'; // Can be any theme","tagName":"pre"},{"text":"Filter Input Extension","tagName":"h3"},{"text":"The Filter Input extension supports various types of input elements. These can be archived by specifying the type property through FilterInputPlugin options. The EF component for each type of inputs is shown below:","tagName":"p"},{"text":"\nType\nImport Name\nRequired EF Element\n","tagName":"tr"},{"text":"\ndefault\nsearch-field\nef-search-field\n","tagName":"tr"},{"text":"\nnumber\nnumber-field\nef-number-field\n","tagName":"tr"},{"text":"\nselect\nselect\nef-select\n","tagName":"tr"},{"text":"\ndropdown\nselect\nef-select\n","tagName":"tr"},{"text":"\ndate\ndatetime-picker\nef-datetime-picker\n","tagName":"tr"},{"text":"Note: there is no need to specify a type for the default input element.","tagName":"p"},{"text":"Additional dependencies are required according to the type of input. For example, if specified type is date, the additional dependency is ef-datetime-picker.","tagName":"p"},{"text":"Pagination Extension","tagName":"h3"},{"text":"The Pagination Extension does not provide any UI. You will need to install @refinitiv-ui/elements separately for the UI. The extension will automatically wire the functionalities to the UI element once it is presented.","tagName":"p"},{"text":"The pagination element is completely independent from the grid element and the Pagination Extension. So, any customization and feature request regarding the element has to be sent to the Refinitiv UI team. The documentation for the element can be found on Refinitiv UI's Pagination page.","tagName":"p"},{"text":"Refinitiv UI team","tagName":"a"},{"text":"Pagination","tagName":"a"},{"text":"Available extensions","tagName":"h2"},{"text":"Auto Tooltip","tagName":"a"},{"text":"Cell Selection","tagName":"a"},{"text":"Checkbox Column","tagName":"a"},{"text":"Column Dragging","tagName":"a"},{"text":"Column Fitter","tagName":"a"},{"text":"Column Formatting","tagName":"a"},{"text":"Column Grouping","tagName":"a"},{"text":"Column Resizing","tagName":"a"},{"text":"Column Selection","tagName":"a"},{"text":"Column Stack","tagName":"a"},{"text":"Conditional Coloring","tagName":"a"},{"text":"Content Wrap","tagName":"a"},{"text":"Context Menu","tagName":"a"},{"text":"Filter Input","tagName":"a"},{"text":"Heat Map","tagName":"a"},{"text":"In-Cell Editing","tagName":"a"},{"text":"Pagination","tagName":"a"},{"text":"Percent Bar","tagName":"a"},{"text":"Range Bar","tagName":"a"},{"text":"Row Dragging","tagName":"a"},{"text":"Row Filtering","tagName":"a"},{"text":"Row Grouping","tagName":"a"},{"text":"Row Segmenting","tagName":"a"},{"text":"Row Selection","tagName":"a"},{"text":"Row Coloring","tagName":"a"},{"text":"Statistics Row","tagName":"a"},{"text":"Text Formatting","tagName":"a"},{"text":"Title Wrap","tagName":"a"},{"text":"Zoom","tagName":"a"},{"text":"Visit the relevant extensions' sections to see the APIs, their usage and live demos.","tagName":"p"}]},{"title":"Auto Tooltip","filename":"extensions/tr-grid-auto-tooltip.html","contents":[{"text":"Auto Tooltip","tagName":"h2"},{"text":"The Auto Tooltip Extension displays clipped information when the user hovers the pointer over the content or title.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 2, numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 100 },\n    { name: \"Market\", field: fields[1] },\n    { name: \"Last\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3] },\n    { name: \"Industry\", field: fields[4], width: 120 }\n  ],\n  staticDataRows: records,\n  autoTooltip: {\n    title: true\n  },\n  extensions: [\n    new tr.AutoTooltipExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"Note: the auto tooltip will not be added to non-clipped text.","tagName":"p"},{"text":"Installation and importing to your project","tagName":"h3"},{"text":"Installation details and examples, along with information on how to import the extension to your project, are available on the Overview page.","tagName":"p"},{"text":"Overview page","tagName":"a"},{"text":"Specific column","tagName":"h3"},{"text":"To enable Auto Tooltip in a specific column only:","tagName":"p"},{"text":"* Set `content: false` in the extension's option\n* Set `autoTooltip: true` in the column's option","tagName":"pre"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 2, numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 100 },\n    { name: \"Market\", field: fields[1] },\n    { name: \"Last\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3] },\n    { name: \"Auto Tooltip\", field: fields[4], width: 120, autoTooltip: true },\n    { name: \"No Tooltip\", field: fields[4], width: 120 }\n  ],\n  staticDataRows: records,\n  autoTooltip: {\n    title: true,\n    content: false\n  },\n  extensions: [\n    new tr.AutoTooltipExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"var grid = document.getElementById('grid');\ngrid.config = {\n    // any other grid's options\n    columns: [\n        { name: 'Column 1', field: 'field1', autoTooltip: true }\n    ],\n    autoTooltip: {\n        title: true,\n        content: false\n    },\n    extensions: [\n        new tr.AutoTooltipExtension()\n    ]\n};","tagName":"pre"},{"text":"Custom tooltip","tagName":"h3"},{"text":"Adding custom tooltip doesn't require auto-tooltip extension. Therefore, The mechanism to make tooltip appear is depend on your logic. You can use cell api to set custom tooltip. For detail, please see Cell API.","tagName":"p"},{"text":"Cell API","tagName":"a"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 2, numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Auto Tooltip\", field: fields[0], width: 120, autoTooltip: true },\n    { name: \"Custom Tooltip\", field: fields[0], width: 120, binding: customRenderer },\n  ],\n  staticDataRows: records,\n  autoTooltip: {\n    content: false\n  },\n  extensions: [\n    new tr.AutoTooltipExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\nfunction customRenderer(e) {\n  e.cell.setContent(e.data);\n  e.cell.setTooltip('Custom tooltip: ' + e.data);\n}","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"Limitation","tagName":"h3"},{"text":"Safari","tagName":"h4"},{"text":"There was a double tooltip issue in safari when ELF tooltip has been used. One is from ELF tooltip and another one is a native tooltip from Safari that automatically apply to clipped text by itself. Therefore, Auto tooltip will be disabled in Safari.","tagName":"p"},{"text":"The image below is an example double tooltip in Safari.","tagName":"p"},{"text":"For live example","tagName":"p"},{"text":"
                                                                                              \n  
                                                                                              Double tooltip will occur at clipped text
                                                                                              \n  
                                                                                              This is a long long text example to show double tooltip behaviour.
                                                                                              \n  
                                                                                              Short text is fine
                                                                                              \n  
                                                                                              Short text
                                                                                              \n
                                                                                              ","tagName":"pre"},{"text":"","tagName":"pre"},{"text":".container {\n  padding: 5px;\n}\n\n.clipped {\n  width: 100px;\n  display: inline-block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: blue solid 2px;\n  font-size: 16px;\n  font-weight: bold;\n  padding: 2px;\n}","tagName":"pre"},{"text":"Note: Please be aware that double tooltip can still be appeared in other part of your page.","tagName":"p"},{"text":"Text is clipped but tooltip doesn't shown","tagName":"h4"},{"text":"Sometime you might see clipped text but tooltip doesn't shown. That's because we can't detect clipped text when width of text and width of container are nearly equal.","tagName":"p"},{"text":"Text will be clipped when text is long enough to exceeds container's width. In technical, text is clipped when scrollWidth exceeded clientWidth. So we can detect clipped text by using scrollWidth > clientWidth.","tagName":"p"},{"text":"However browser will calculate with decimal precision, eg. scrollWidth: 118.42, clientWidth: 118.","tagName":"p"},{"text":"But javascript will only return round value of scrollWidth and clientWidth, eg. scrollWidth: 118.42 ~ 118, clientWidth: 118.","tagName":"p"},{"text":"So that we cannot detect ellipsis in some of edge case.","tagName":"p"},{"text":"Please see the example below for better understanding.","tagName":"p"},{"text":"
                                                                                              \n\n  Round up case
                                                                                              \n
                                                                                              \n  Actual scrollWidth: 112.84px, javascript will round up to 113 
                                                                                               Actual clientWidth: 112px 
                                                                                               113 > 112 = true 
                                                                                               tooltip will be setted\n
                                                                                              \n
                                                                                              sample text ~~~
                                                                                              \n
                                                                                              Round down case
                                                                                              \n
                                                                                              \n  Actual scrollWidth: 118.42px, javascript will round down to 118 
                                                                                               Actual clientWidth: 118px 
                                                                                               118 > 118 = false 
                                                                                               no tooltip apply\n
                                                                                              \n
                                                                                              sample text ~ ~
                                                                                              ","tagName":"pre"},{"text":"setTimeout(function() {\n  var examples = document.getElementsByClassName('example');\n  for (var i = 0; i < examples.length; i++) {\n    var elem = examples[i];\n    if (elem.scrollWidth > elem.clientWidth) {\n      elem.setAttribute('title', 'tooltip setted.');\n    }\n  }\n}, 1000)","tagName":"pre"},{"text":".example {\n  display: inline-block;\n  border: 0;\n  color: white;\n  background-color: black;\n  font-size: 18px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-top: 10px;\n}\n\n.detail {\n  margin-top: 5px;\n  font-size: 16px;\n  line-height: 20px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            autoTooltip                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the column is qualified for showing tooltip        ","tagName":"tr"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            header                                                    boolean                                                                                                                                                                                                                    false                                                        If true, text in the header sections (top section) will be qualified for showing tooltip.        ","tagName":"tr"},{"text":"                            title                                                    boolean                                                                                                                                                                                                                    false                                                        Alias to `header`        ","tagName":"tr"},{"text":"                            footer                                                    boolean                                                                                                                                                                                                                    false                                                        If true, text in the footer sections will be qualified for showing tooltip.        ","tagName":"tr"},{"text":"                            content                                                    boolean                                                                                                                                                                                                                    true                                                        If true, text in the content section will be qualified for showing tooltip. Use autoTooltip flag in column configuration to turn on auto-tooltip for individual column        ","tagName":"tr"},{"text":"                            quickMode                                                    boolean                                                                                                                                                                                                                    false                                                        Deprecated        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"applyTooltip(colIndex, fromRopt, toRopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"applyTooltipToAllColumns()","tagName":"h4"},{"text":"applyTooltipToColumns(colIndicesopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"requestTooltipUpdate()","tagName":"h4"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Cell Selection","filename":"extensions/tr-grid-cell-selection.html","contents":[{"text":"Cell Selection","tagName":"h2"},{"text":"The Cell Selection Extension lets you select a cell's content in Grid. You can then use the copy (Ctrl+C) command to retrieve text and store it in the clipboard. Copied text will then be available for pasting to a text editor or Excel. ","tagName":"p"},{"text":"\n\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.CellSelectionExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\ntextarea {\n  width: 100%;\n  font: -webkit-small-control;\n  overflow-x: hidden;\n  overflow-y: auto;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                                                                                                                                                    \"cell\"                                                        Available options are cell, row, and column        ","tagName":"tr"},{"text":"                            multipleSelection                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, only single cell can be selected at time        ","tagName":"tr"},{"text":"                            autoDeselecting                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the selection will remain after grid losing focus        ","tagName":"tr"},{"text":"                            tabToSelect                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the selection can be moved when user press tab key during the time grid is in focus.        ","tagName":"tr"},{"text":"                            selectionChanged                                                    function                                                                                                                                                                                                                    null                                                        Event handler        ","tagName":"tr"},{"text":"                            copy                                                    function                                                                                                                                                                                                                    null                                                        Event handler        ","tagName":"tr"},{"text":"                            beforeMouseDown                                                    function                                                                                                                                                                                                                    null                                                        Event handler        ","tagName":"tr"},{"text":"                            selectableSections                                                    Array                                                                                                                                                                                                                    ['content'                                                        Use to set which section can be selected, if not specific then only content section can select        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"deselectAll() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"disableSelection(opt_disableopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getAnchorInfo() → {Object}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAutoDeselectingOnBlur() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getLastSelectionBounds(opt_retopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedCells() → {Array.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedText() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectionBounds(opt_retopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectionCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize()","tagName":"h4"},{"text":"selectAll()","tagName":"h4"},{"text":"selectCells(rect)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"ext.selectCells({\n  colIndex: 1, rowIndex: 1, width: 2, height: 2\n});","tagName":"pre"},{"text":"selectNextCell() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"selectPrevCell() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"selectSingleCell(anchor)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"extension.selectSingleCell({colIndex: 1, rowIndex: 0});","tagName":"pre"},{"text":"setAutoDeselectingOnBlur(bool)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSelectableSections(typesopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload()","tagName":"h4"},{"text":"Events","tagName":"h3"},{"text":"beforeMouseDown","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            cancel                                                    boolean                                                                                                                                                                            Set to true to cancel operation.        ","tagName":"tr"},{"text":"copy","tagName":"h4"},{"text":"selectionChanged","tagName":"h4"}]},{"title":"Checkbox Column","filename":"extensions/tr-grid-checkbox.html","contents":[{"text":"Checkbox Column","tagName":"h2"},{"text":"The Checkbox Extension adds a column with checkboxes to Grid for selecting single or multiple rows. ","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 15 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.CheckboxExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Required dependencies","tagName":"h3"},{"text":"Details of Required dependencies for this extension are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Default display","tagName":"h3"},{"text":"There is no specific option required by default.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    extensions: [\n        new CheckboxExtension()\n    ]\n};","tagName":"pre"},{"text":"Using with Row Grouping Extension","tagName":"h3"},{"text":"The Checkbox Extension works out-of-the-box with Row Grouping Extension.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    rowGrouping: {\n        groupBy: ['col1', 'col2']\n    },\n    extensions: [\n        new CheckboxExtension(),\n        new RowGroupingExtension()\n    ]\n};","tagName":"pre"},{"text":"Using with Pagination Extension","tagName":"h3"},{"text":"The Checkbox Extension works out-of-the-box with the Pagination Extension. But there are some behaviors that are slightly different from the normal configuration.","tagName":"p"},{"text":"The Select All (Check All) action will only perform checked to the data on the current page. For example, if you perform Select All on the first page, the data on the other pages will not be selected or deselected.","tagName":"p"},{"text":"\n\n\n\n
                                                                                              ","tagName":"pre"},{"text":"var paging = document.getElementById('paging_ui');\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 15 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  pagination: {\n    element: paging,\n    pageSize: 5\n  },\n  extensions: [\n    new tr.CheckboxExtension(),\n    new tr.PaginationExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"var config = {\n    // any other grid's options\n    pagination: {\n        pageSize: 5\n    },\n    extensions: [\n        new CheckboxExtension(),\n        new PaginationExtension()\n    ]\n};","tagName":"pre"},{"text":"Customizing checkbox column","tagName":"h3"},{"text":"You can customize checkbox column by setting checkboxColumn property to true on the column configuration object. The column with checkboxColumn will be used as the checkbox column by the extension. Any configuration on the column will be applied for the checkbox column. ","tagName":"p"},{"text":"The example below places the checkbox column on the second column and makes it sortable with custom sorting sequence. ","tagName":"p"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 6 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { checkboxColumn: true, sortable: true, sortingSequence: [\"d\", \"n\"], width: 50, alignment: \"left\" },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.CheckboxExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Binding state","tagName":"h3"},{"text":"You can specify field to be used as a check state for the checkboxes in checkbox column. This can be useful, if you want to have some checkboxes initially checked after the grid creation. To bind the states, use field property on the extension configuration object.","tagName":"p"},{"text":"In the example below, the \"boolean\" field is bound as a state for the checkboxes in the checkbox column.","tagName":"p"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"boolean\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 6 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  checkbox: {\n    field: \"boolean\" // Optional\n  },\n  extensions: [\n    new tr.CheckboxExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Using a checkbox for row selection","tagName":"h3"},{"text":"If you want to select the column based on the checkbox state. just turn on the flag rowSelection under the checkbox option.","tagName":"p"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"boolean\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  checkbox: {\n    rowSelection: true,\n    field: \"boolean\" // Optional\n  },\n  extensions: [\n    new tr.CheckboxExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Checkbox behaviors","tagName":"h3"},{"text":"Common behaviors:","tagName":"h4"},{"text":"Top checkbox","tagName":"h4"},{"text":"This is the checkbox that appears in the header section. It has the following behaviors:","tagName":"p"},{"text":"Group checkbox","tagName":"h4"},{"text":"This is the checkbox that appears in the group header row under the content section. It has the following behaviors:","tagName":"p"},{"text":"APIs Summary","tagName":"h4"},{"text":"\nMethod\nCollapsed\nOther page\nHidden Rows\nDisabled\n","tagName":"tr"},{"text":"\ngetCheckbox(sectionRef, rowIndex)\n✗\n✗\n✗\n✓\n","tagName":"tr"},{"text":"\ngetAllCheckedIndices(sectionRef, state)\n✗\n✗\n✗\n✓\n","tagName":"tr"},{"text":"\nsetAllCheckStates(checked)\n✓\n✓\n✓\n✓\n","tagName":"tr"},{"text":"\ngetAllSelectedData(field)\n✓\n✓\n✓\n✓\n","tagName":"tr"},{"text":"\ngetFilteredSelectedData(field)\n✓\n✗\n✗\n✗\n","tagName":"tr"},{"text":"\ncheckAll(checked) (equivalent to clicking at checkbox in top header)\n✓\n✗\n✗\n✗\n","tagName":"tr"},{"text":"\nselectAll() (equivalent to clicking at checkbox in top header)\n✓\n✗\n✗\n✗\n","tagName":"tr"},{"text":"\ndeselectAll() (equivalent to clicking at checkbox in top header)\n✓\n✗\n✗\n✗\n","tagName":"tr"},{"text":"\nselectAllPages(checked)\n✓\n✓\n✗\n✗\n","tagName":"tr"},{"text":"Selecting multiple checkboxes at once","tagName":"h3"},{"text":"Aside from clicking top checkbox or group checkbox, you can do Shift+Click to selecting all checkboxes in a range from an anchor checkbox to the clicked checkbox.","tagName":"p"},{"text":"To set an anchor checkbox, you can simply click a checkbox in Grid. The last clicked checkbox will become an anchor checkbox. Shift+Click will not change the anchor checkbox. The anchor checkbox will remain on the same row as long as no new checkbox is clicked (losing focus will not remove the anchor). However, sorting operation can change the position of the anchor, as the anchor is actually bound to the data. So, removing, filtering, or changing data can result in removing the anchor. ","tagName":"p"},{"text":"As checkboxes always operates in a toggle mode, unlike row selection, Shift+Click will always select/check the affected checkboxes regardless of their current state. This is to avoid confusion when some of the checkboxes are unchecked and some others are checked. State of the checkboxes are not toggled when using Shift+Click. Shift+Click command will also ignore top and group checkboxes, as the state of these two types of checkbox are determined by their constituents. When using Shift+Click on an anchor checkbox, meaning no range is detected, Shift+Click command will be treated as normal click. ","tagName":"p"},{"text":"To deselect/uncheck multiple checkboxes, you can do Shift+Alt+Click. The same behaviors from Shift+Click are apply to Shift+Alt+Click except that the checkboxes will be deselected/unchecked.","tagName":"p"},{"text":"There is no extra functionality implemented for control and command keys, as checkboxes already operate in toggle mode.","tagName":"p"},{"text":"Keyboard inputs","tagName":"h3"},{"text":"As long as a checkbox is in focus, you can navigate through checkboxes by using arrow up and arrow down keys. You can use Spacebar key to toggle state of the focused checkbox.","tagName":"p"},{"text":"Using Shift+Spacebar will give the same result as using Shift+Click.","tagName":"p"},{"text":"Shift+Alt+Spacebar is not supported by Checkbox Extension because the key combination is used by Windows operating system to open a window context menu, which cannot be overriden by a browser or JavaScript.","tagName":"p"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            checkboxColumn                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the correspondence column will use as checkbox column.        ","tagName":"tr"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            rowSelection                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, grid row will be selected as checkbox is checked.        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                                    \"CHECK_BOX\"                                                        Field that will be used for storing check state        ","tagName":"tr"},{"text":"                            disablingField                                                    string                                                                                                                                                                                                                    \"CHECK_BOX_DISABLED\"                                                        Field that will be used for storing disabling state        ","tagName":"tr"},{"text":"                            checkboxCreated                                                    function                                                                                                                                                                                                                    null                                                        Function handler for checkboxCreated event        ","tagName":"tr"},{"text":"                            checkboxBinding                                                    function                                                                                                                                                                                                                    null                                                        Function handler for checkboxBinding event        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                                                                                                                                                    null                                                        Function handler for checkbox clicked event        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                                                                                                                                                    34                                                        Width for checkbox column        ","tagName":"tr"},{"text":"                            topCheckboxHandler                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, when clicked on header row checkbox it will not perform default behavior        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"beforeProcessOption(optionName, optionVal) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"checkAll(checked)","tagName":"h4"},{"text":"CheckboxPlugin#setAllCheckStates","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"CheckboxPlugin#setAllCheckStates","tagName":"a"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"deselectAll(check)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"deselectCheckboxes(rowRefs, checked)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableCheckbox(rowRef, disabled)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableCheckbox(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getAllCheckedIndices(sectionRef, stateopt) → {Array.}","tagName":"h4"},{"text":"CheckboxPlugin#getSelectedRowData","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"CheckboxPlugin#getSelectedRowData","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getAllSelectedData(fieldopt) → {Array}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"chkBoxExtension.getSelectedRowData(); // Get all selected row data in this format [{}, {}, ... RowData objects, {}]\nchkBoxExtension.getSelectedRowData(\"field\"); // Get all field values from selected row data in this format [value1, value2, ... values, valueN]","tagName":"pre"},{"text":"getCheckbox(sectionRef, rowIndex) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCheckboxColumnIndex() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDisplayColumn() → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getFilteredSelectedData(fieldopt) → {Array}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedRowData(fieldopt) → {Array}","tagName":"h4"},{"text":"CheckboxPlugin#getAllSelectedData","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"selectAll()","tagName":"h4"},{"text":"selectAllPages(checkedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"CheckboxPlugin#checkAll","tagName":"a"},{"text":"selectCheckboxes(rowRefs, checked)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setAllCheckStates(checked)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"CheckboxPlugin#checkAll","tagName":"a"},{"text":"setCheckStates(rowRefs, checked)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"checkboxBinding","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            checkbox                                                    Element                                                            Checkbox element        ","tagName":"tr"},{"text":"                            rowData                                                    Object                                                                    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"checkboxCreated","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            input                                                    Element                                                            Checkbox element that is an alias to `checkbox`        ","tagName":"tr"},{"text":"                            checkbox                                                    Element                                                            Checkbox element        ","tagName":"tr"},{"text":"                            cell                                                    Object                                                            Grid Cell object        ","tagName":"tr"},{"text":"                            section                                                    Object                                                            Grid ILayoutGrid object        ","tagName":"tr"},{"text":"                            grid                                                    Object                                                            Core Grid object        ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"clicked","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            checkbox                                                    Element                                                            element        ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            checked                                                    boolean                                                                    ","tagName":"tr"},{"text":"                            checkState                                                    string                                                                    ","tagName":"tr"}]},{"title":"Column Dragging","filename":"extensions/column-dragging.html","contents":[{"text":"Column Dragging","tagName":"h2"},{"text":"The Column Dragging extension provides drag and drop functionality to move/reorder columns in Grid. A drag box and guideline will be provided during the drag operation.","tagName":"p"},{"text":"This extension can be turned off by setting noColumnDragging to true in the grid level configuration object.","tagName":"p"},{"text":"Example","tagName":"h3"},{"text":"Try drag the top column header and check out the order of the available events in the console\n
                                                                                              \n","tagName":"pre"},{"text":"var columnDraggingExt = new tr.ColumnDraggingExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  // noColumnDragging: true, // Turn off drag and drop behavior\n  columnDragging: {\n    dragStart: function(e) {\n      console.log(\"dragStart\");\n      // e.cancel = true; // To cancel the start of drag operation\n    },\n    drag: function(e) {\n      // colsole.log(\"drag\"); // Happens on each mousemove\n    },\n    dragEnd: function(e) {\n      console.log(\"dragEnd\");\n    },\n    preColumnMoved: function(e) {\n      console.log(\"before columnMoved\");\n      // e.cancel = true; // To cancel the move operation\n    },\n    columnMoved: function(e) {\n      console.log(\"columnMoved\");\n    }\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    columnDraggingExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            dragStart                                                    function                                                                                                                                                                            Function handler for dragStart event        ","tagName":"tr"},{"text":"                            drag                                                    function                                                                                                                                                                            Function handler for drag event        ","tagName":"tr"},{"text":"                            dragEnd                                                    function                                                                                                                                                                            Function handler for dragEnd event        ","tagName":"tr"},{"text":"                            preColumnMoved                                                    function                                                                                                                                                                            Function handler for preColumnMoved event        ","tagName":"tr"},{"text":"                            columnMoved                                                    function                                                                                                                                                                            Function handler for columnMoved event        ","tagName":"tr"},{"text":"                            dragInterval                                                    function                                                                                                                                                                            Function handler for dragInterval event        ","tagName":"tr"},{"text":"                            dragBoxRenderer                                                    function                                                                                                                                                                            Allow user to customize dragBox        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disable(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableDragBox(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableMoving(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isDisabled() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"lockFrozenColumn(lock)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(hostopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"columnMoved","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            startColumnIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            destColumnIndex                                                    number                                                                    ","tagName":"tr"},{"text":"drag","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"dragEnd","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"dragInterval","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"dragStart","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"// ...\ndragStart: function(e) {\n  e.cancel = true; // To cancel the operation\n}, // ..","tagName":"pre"},{"text":"preColumnMoved","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            startColumnIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            destColumnIndex                                                    number                                                                    ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"// ...\npreColumnMoved: function(e) {\n  e.cancel = true; // To cancel the operation\n}, // ..","tagName":"pre"}]},{"title":"Column Fitter","filename":"extensions/tr-grid-column-fitter.html","contents":[{"text":"Column Fitter","tagName":"h2"},{"text":"The Column Fitter provides an automatically adjusting column width that fits a column's content or title.","tagName":"p"},{"text":"\n\n
                                                                                              \n","tagName":"pre"},{"text":"var columnFitterExt = new tr.ColumnFitterExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    columnFitterExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"toggle_btn\").addEventListener(\"click\", function(e) {\n  var btn = e.currentTarget;\n  if (btn.adjusted) {\n    columnFitterExt.resetAllColumns();\n  } else {\n    columnFitterExt.adjustAllColumns();\n  }\n  btn.adjusted = !btn.adjusted;\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Automatic adjusting","tagName":"h3"},{"text":"The live demo below shows how to adjust a column's width when the data are changed – use the extension's API to adjust it manually or use the autoAdjust property for automatic adjusting.","tagName":"p"},{"text":"By default, the size of column can only be expanded by the extension. Set shrinkable flag to true to allow column size to be shrunk.","tagName":"p"},{"text":"var grid = document.getElementById(\"grid\");\ngrid.config = {\n    // any other grid\"s options\n    columnFitting: {\n        autoAdjust: 1000\n    }\n};","tagName":"pre"},{"text":"\n\n","tagName":"pre"},{"text":"var columnFitterExt = new tr.ColumnFitterExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 5 });\n\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Industry\", field: fields[4] },\n    { name: \"Net. Chng\", field: fields[3], width: 100 }\n  ],\n  staticDataRows: records,\n  columnFitting: {\n    title: true,\n    autoAdjust: 800,\n    shrinkable: true\n  },\n  extensions: [\n    columnFitterExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.addEventListener(\"configured\", function(e) {\n  var api = e.detail.api;\n  setInterval(function() {\n    var record = tr.DataGenerator.generateRecord([\"industry\"]);\n    var randRow = tr.DataGenerator.randInt(0, api.getRowCount());\n    api.setRowData(randRow, record);\n  }, 500);\n});\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Columns with custom content/elements","tagName":"h3"},{"text":"Normally, this extension will only use the text format inside the cell to calculate the optimal width. Unfortunately, for a cell with custom content, users may want to insert some other elements rather than text format inside the cell (for example, div).","tagName":"p"},{"text":"To support custom content, set contentFitting: true in the column option.","tagName":"p"},{"text":"var grid = document.getElementById(\"grid\");\ngrid.config = {\n    // other grid\"s option\n    columns: [\n        // other columns\n        {\n            name: \"Custom format\",\n            field: \"someField\",\n            binding: customFormatter,\n            contentFitting: true // Turn this on\n        }\n    ],\n};","tagName":"pre"},{"text":"\n\n
                                                                                              \n","tagName":"pre"},{"text":"var columnFitterExt = new tr.ColumnFitterExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 5 });\n\nvar onRenderStars = function(e) {\n  var content = e.cell.getContent();\n  if (!content || !content._stars) {\n    content = document.createElement(\"div\");\n    var main = content._main = document.createElement(\"span\");\n    var stars = content._stars = document.createElement(\"span\");\n    stars.textContent = \" ★★★\";\n    content.appendChild(main);\n    content.appendChild(stars);\n  }\n\n  content._main.textContent = e.data;\n  e.cell.setContent(content);\n};\n\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], binding: onRenderStars, contentFitting: true },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    columnFitterExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"toggle_btn\").addEventListener(\"click\", function(e) {\n  var btn = e.currentTarget;\n  if (btn.adjusted) {\n    columnFitterExt.resetAllColumns();\n  } else {\n    columnFitterExt.adjustAllColumns();\n  }\n  btn.adjusted = !btn.adjusted;\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            noFitting                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the given column will not be included in the calculation        ","tagName":"tr"},{"text":"                            contentFitting                                                    boolean                                                                                                                                                                                                                    false                                                        By default, fitting extension only calculate text content. Enable this option to support custom rendering fitting for a specified column        ","tagName":"tr"},{"text":"                            minWidth                                                    number                                                                                                                                                                                                                                        Minimum width of the column        ","tagName":"tr"},{"text":"                            maxWidth                                                    number                                                                                                                                                                                                                                        Maximum width of the column        ","tagName":"tr"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            proportion                                                    boolean                                                                                                                                                                                                                    false                                                        Proportionally expand columns, if there is enough space        ","tagName":"tr"},{"text":"                            constraint                                                    boolean                                                                                                                                                                                                                    false                                                        Prevents column width to go lower than its content size        ","tagName":"tr"},{"text":"                            autoAdjust                                                    boolean | number                                                                                                                                                                                                                    false                                                        Automatic column width adjusting on each data update        ","tagName":"tr"},{"text":"                            autoAdjusting                                                    boolean | number                                                                                                                                                                                                                    false                                                        Alias to `autoAdjust`        ","tagName":"tr"},{"text":"                            title                                                    boolean                                                                                                                                                                                                                    false                                                        Include title section in the fitting calculation        ","tagName":"tr"},{"text":"                            paddingSize                                                    number                                                                                                                                                                                                                    2                                                        Additional padding from existing cell padding. This will add extra space (in pixel) to the right of the longest text.        ","tagName":"tr"},{"text":"                            shrinkable                                                    boolean                                                                                                                                                                                                                    false                                                        Allow column width to be shrunken during autoAdjust enabled        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"adjustAllColumns() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"adjustColumns(colIndicesopt, forceopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"adjustColumnWidth(colIndexopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"calculateColumnWidth(colIndex) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnFitterPlugin~Options","tagName":"a"},{"text":"getAdjustedColumnWidth(colIndex) → {number}","tagName":"h4"},{"text":"ColumnFitterPlugin#calculateColumnWidth","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnMenu(colIndex, config) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"resetAllColumns()","tagName":"h4"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Column Formatting","filename":"extensions/tr-grid-column-formatting.html","contents":[{"text":"Column Formatting","tagName":"h2"},{"text":"The Column Formatting Extension incorporates all features from the Conditional Coloring Extension, the TextFormatting Extension and the HeatMap Extension.","tagName":"p"},{"text":"Conditional Coloring Extension","tagName":"a"},{"text":"TextFormatting Extension","tagName":"a"},{"text":"HeatMap Extension","tagName":"a"},{"text":"IPO Date column \n\n\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var columnFormattingExt = new tr.ColumnFormattingExtension();\nvar fields = [\"companyName\", \"market\", \"CF_VOLUME\", \"CF_NETCHNG\", \"PCTCHNG2\", \"TR.IPODate\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [{\n      name: \"Company\",\n      field: fields[0],\n      colorText: {\n        field: \"PCTCHNG2\"\n      }\n    },\n    {\n      name: \"Market\",\n      field: fields[1],\n      width: 120,\n      alignment: \"center\"\n    },\n    {\n      name: \"Volume\",\n      field: fields[2],\n      width: 120,\n      alignment: \"right\",\n      formatType: {\n        type: \"number\",\n        separator: true,\n        decimalPlaces: 0\n      }\n    },\n    {\n      name: \"Net. Chng\",\n      field: fields[3],\n      width: 120,\n      formatType: {\n        type: \"number\",\n        plusSign: true\n      },\n      heatMap: {\n        midPoint: 0,\n        mode: \"cell\"\n      }\n    },\n    {\n      name: \"Pct. Chng\",\n      field: fields[4],\n      width: 100,\n      formatType: {\n        type: \"percent\"\n      },\n      conditions: [{\n        condition: \"GTE\",\n        name: \"GTE\",\n        value1: 10,\n        backgroundColor: \"lightgreen\",\n        color: \"black\"\n      }]\n    },\n    {\n      name: \"IPO Date\",\n      field: fields[5],\n      alignment: \"center\",\n      formatType: {\n        type: \"datetime\",\n        dateTimeFormat: \"DD-MMM-YYYY\"\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [\n    columnFormattingExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"btn_1\").addEventListener(\"click\", function(e) {\n  var options = {\n    valueFormatTab: {\n      type: \"datetime\",\n      dateTimeFormat: \"MMM-DD-YYYY\"\n    }\n  }\n  columnFormattingExt.setColumnFormatOptions(5, options);\n});\n\ndocument.getElementById(\"btn_2\").addEventListener(\"click\", function(e) {\n  var options = {\n    valueFormatTab: {\n      type: \"datetime\",\n      dateTimeFormat: \"MMM-DD-YY\"\n    }\n  }\n  columnFormattingExt.setColumnFormatOptions(5, options);\n});\n\ndocument.getElementById(\"btn_3\").addEventListener(\"click\", function(e) {\n  var value = columnFormattingExt.getColumnFormatOptions(5);\n  alert(JSON.stringify(value));\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Working with the Column Format dialog","tagName":"h3"},{"text":"The Column Formatting Extension has no UI by itself, but it works well with the Column Format dialog. Details of usage are available on the Column Format dialog page.","tagName":"p"},{"text":"Column Format dialog","tagName":"a"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"BarOption","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            useMovementColor                                                    boolean                                                                                                                                                                                                                                                ","tagName":"tr"},{"text":"                            showValues                                                    boolean                                                                                                                                                                                                                                                ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                                                                                                                                                    \"\"                                                        Fixate percent bar alignment. By default, percent bar alignment will be changed according to grid column alignment.        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                                    THIS_COLUMN                                                        Data field        ","tagName":"tr"},{"text":"                            textHidden                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, displays percent bar only        ","tagName":"tr"},{"text":"                            textWidth                                                    number | string                                                                                                                                                                                                                                        If specified, percent bar text will have fixed width        ","tagName":"tr"},{"text":"                            barColor                                                    string                                                                                                                                                                                                                    \"\"                                                        Custom color for bar element. This will override the useMovementColor        ","tagName":"tr"},{"text":"                            padding                                                    number                                                                                                                                                                                                                    8                                                        Extra space added to max width from autoTextSizing calculation        ","tagName":"tr"},{"text":"                            percentageLabel                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the value will not convert into percent format        ","tagName":"tr"},{"text":"                            autoTextSizing                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, text space will be fixed        ","tagName":"tr"},{"text":"                            autoFitting                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, text space will be auto adjusted. Otherwise, text space will stay extended to the longest length        ","tagName":"tr"},{"text":"                            zeroValueHidden                                                    boolean                                                                                                                                                                                                                    false                                                        If this option is enabled and the percentage value is zero, percent bar and its label will be hidden        ","tagName":"tr"},{"text":"ColumnFormatOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            valueFormatTab                                                    Object                                                                                                                                                                                    ","tagName":"tr"},{"text":"                            displayStyleTab                                                    ColumnFormattingPlugin~DisplayStyleOption                                                                                                                                                                                    ","tagName":"tr"},{"text":"ColumnFormattingPlugin~DisplayStyleOption","tagName":"a"},{"text":"                            colorTextTab                                                    Object                                                                                                                                                                                    ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                                                                                                                    ","tagName":"tr"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                                                                                                                                                    \"\"                                                        Change UIs based on the value. Available values are general, number, dateTime and FX.        ","tagName":"tr"},{"text":"ConditionalColorOption","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            conditions                                                    Array.                                                                                                                                                                                    ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                    ","tagName":"tr"},{"text":"DisplayStyleOption","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                                                                                                            \"default\" \"left\" \"right\" or \"center\"        ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                                                                                                            Available options are \"general\", \"bar\", \"heatmap\", or \"conditionalColor\"        ","tagName":"tr"},{"text":"                            bar                                                    ColumnFormattingPlugin~BarOption                                                                                                                                                                                    ","tagName":"tr"},{"text":"ColumnFormattingPlugin~BarOption","tagName":"a"},{"text":"                            conditionalColor                                                    ColumnFormattingPlugin~ConditionalColorOption                                                                                                                                                                                    ","tagName":"tr"},{"text":"ColumnFormattingPlugin~ConditionalColorOption","tagName":"a"},{"text":"                            heatmap                                                    ColumnFormattingPlugin~HeatmapOption                                                                                                                                                                                    ","tagName":"tr"},{"text":"ColumnFormattingPlugin~HeatmapOption","tagName":"a"},{"text":"                            general                                                    Object                                                                                                                                                                                    ","tagName":"tr"},{"text":"HeatmapOption","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            midPoint                                                    string                                                                                                                                                                                    ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                                                                                                            \"text\" or \"cell\"        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getColumnAlignment(colIndex) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnFormatOptions(colIndex) → {ColumnFormattingPlugin~ColumnFormatOptions}","tagName":"h4"},{"text":"ColumnFormattingPlugin~ColumnFormatOptions","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnFormattingPlugin~ColumnFormatOptions","tagName":"a"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getField(colIndex) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getFieldList() → {Array.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasHiddenColumn() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hideColumn(colIndex, opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"initialize()","tagName":"h4"},{"text":"isColumnHidden(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"openDialog(colIndex, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnAlignment(colIndex, align)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnFormatOptions(colIndex, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnFormattingPlugin~ColumnFormatOptions","tagName":"a"},{"text":"setFieldDataType(colIndex, type)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"showAllColumns()","tagName":"h4"},{"text":"unload()","tagName":"h4"},{"text":"Events","tagName":"h3"},{"text":"formatChanged","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            field                                                    string                                                            Field defined in the column        ","tagName":"tr"}]},{"title":"Column Grouping","filename":"extensions/tr-grid-column-grouping.html","contents":[{"text":"Column Grouping","tagName":"h2"},{"text":"The Column Grouping Extension is a categorization based on the column field. Columns can be grouped and put under a spanned header cell. Groups can be defined hierarchically, with an unlimited number of levels in the structure. Grouped columns can be dragged together to reorder columns without breaking the group structure.","tagName":"p"},{"text":"A group header can be formatted using a formatter just like a normal cell.","tagName":"p"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columnReorder: true,\n  columns: [\n    { id: \"c1\", name: \"Company\", field: fields[0] },\n    { id: \"c2\", name: \"Market\", field: fields[1], width: 100 },\n    { id: \"c3\", name: \"Last\", field: fields[2], width: 80 },\n    { id: \"c4\", name: \"Net. Chng\", field: fields[3], width: 80 },\n    { id: \"c5\", name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  columnGrouping: [{\n      id: \"g1\",\n      name: \"Company Info\",\n      alignment: \"center\",\n      children: [\"c1\", \"c2\"]\n    },\n    {\n      id: \"g2\",\n      name: \"Price\",\n      alignment: \"center\",\n      children: [\"c3\", \"c4\"]\n    },\n    {\n      id: \"g4\",\n      name: \"Top 6 Companies\",\n      alignment: \"center\",\n      children: [\"g1\", \"g2\"],\n      render: function(e) {\n        var cell = e.cell;\n        var colIndex = e.colIndex;\n        var groupNode = e.groupNode;\n        cell.setStyle(\"color\", \"orange\");\n        cell.setContent(groupNode.name);\n      }\n    }\n  ],\n  extensions: [\n    new tr.ColumnGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Default usage","tagName":"h3"},{"text":"var gridConfig = {\n    columns: [\n        { id: \"c1\", name: \"Column 1\" },\n        { id: \"c2\", name: \"Column 2\" },\n        { id: \"c3\", name: \"Column 3\" },\n        { id: \"c4\", name: \"Column 4\" },\n    ],\n    columnGrouping: [\n        { id: \"g1\", name: \"Group 1\", children: [\"c1\", \"c2\"] },\n        { id: \"g2\", name: \"Group 2\", children: [\"c3\"] },\n        { id: \"g3\", name: \"Group 3\", children: [\"c4\", \"g1\", \"g2\"] },\n    ]\n}","tagName":"pre"},{"text":"You can also assign a nested columnGrouping object in the children.","tagName":"p"},{"text":"var gridConfig = {\n    columns: [\n        { id: \"c1\", name: \"Column 1\" },\n        { id: \"c2\", name: \"Column 2\" },\n        { id: \"c3\", name: \"Column 3\" },\n        { id: \"c4\", name: \"Column 4\" },\n    ],\n    columnGrouping: [\n        {\n            id: \"g3\", name: \"Group 3\", children: [\n                \"c4\",\n                { id: \"g2\", name: \"Group 2\", children: [\"c3\"] },\n                { id: \"g1\", name: \"Group 1\", children: [\"c1\", \"c2\"] },\n            ]\n        },\n    ]\n}","tagName":"pre"},{"text":"Custom render the group header","tagName":"h3"},{"text":"To custom render the group header, you can pass the render configuration as a function to receive e as an argument. Then you can use e.cell to customize cell properties.","tagName":"p"},{"text":"var gridConfig = {\n    columns: [\n        { id: \"c1\", name: \"Column 1\" },\n        { id: \"c2\", name: \"Column 2\" },\n        { id: \"c3\", name: \"Column 3\" },\n        { id: \"c4\", name: \"Column 4\" },\n    ],\n    columnGrouping: [\n        {\n            id: \"g1\",\n            name: \"Group 1\",\n            children: [\"c1\", \"c2\"],\n            render: function(e) {\n                e.cell.setStyle(\"color\", \"red\");\n            }\n        },\n        { id: \"g2\", name: \"Group 2\", children: [\"c3\"] },\n        { id: \"g3\", name: \"Group 3\", children: [\"c4\", \"g1\", \"g2\"] },\n    ]\n}","tagName":"pre"},{"text":"Migrating from built-in column grouping","tagName":"h3"},{"text":"Due to the built-in libraries being migrated out from the Core Grid to extensions, built-in column grouping will be deprecated and will no longer be maintained.","tagName":"p"},{"text":"The differences between the legacy (built-in) version of column grouping and the new extension can be seen in the examples below.","tagName":"p"},{"text":"Note: The Column Grouping Extension is backward compatible with the old built-in. But we suggest still moving to our new implementation.","tagName":"p"},{"text":"Built-in","tagName":"h4"},{"text":"var gridConfig = {\n    columns: [\n        { id: \"c1\", name: \"Column 1\", columnGroup: \"g1\" },\n        { id: \"c2\", name: \"Column 2\", columnGroup: \"g1\" },\n        { id: \"c3\", name: \"Column 3\", columnGroup: \"g2\" },\n    ],\n    columnGroups: [\n        { id: \"g1\", name: \"Group 1\", parent: \"g3\" },\n        { id: \"g2\", name: \"Group 2\", parent: \"g3\" },\n        {\n            id: \"g3\",\n            name: \"Group 3\",\n            formatter: {\n                render: function(colIndex, cell, groupDefinition) {\n                    cell.setStyle(\"color\", \"red\");\n                }\n            }\n        },\n    ]\n}","tagName":"pre"},{"text":"As seen above, in the legacy version of Column Grouping you needed to specify the mandatory options in both columns and columnGroups, which can be confusing.","tagName":"p"},{"text":"New extension","tagName":"h4"},{"text":"var gridConfig = {\n    columns: [\n        { id: \"c1\", name: \"Column 1\" },\n        { id: \"c2\", name: \"Column 2\" },\n        { id: \"c3\", name: \"Column 3\" },\n        { id: \"c4\", name: \"Column 4\" },\n    ],\n    columnGrouping: [\n        { id: \"g1\", name: \"Group 1\", children: [\"c1\", \"c2\"] },\n        { id: \"g2\", name: \"Group 2\", children: [\"c3\"] },\n        {\n            id: \"g3\",\n            name: \"Group 3\",\n            children: [\"c4\", \"g1\", \"g2\"],\n            render: function(e) {\n                e.cell.setStyle(\"color\", \"red\");\n            }\n        },\n    ]\n}","tagName":"pre"},{"text":"For the new implementation, the new children option is used and you can specify an array of either Group or Column ID for how you want it to be grouped.","tagName":"p"},{"text":"Also, note that the render config has moved out of the formatter config and receives only e as an argument.","tagName":"p"},{"text":"Column Moving","tagName":"h3"},{"text":"\n  \n\n  \n\n  \n\n
                                                                                              \n
                                                                                              \n  \n\n  \n\n
                                                                                              \n
                                                                                              \n","tagName":"pre"},{"text":"var ext = new tr.ColumnGroupingExtension();\nvar fields = [\"companyName\", \"industry\", \"CF_LAST\", \"CF_NETCHNG\", \"market\", \"boolean\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columnReorder: true,\n  columns: [\n    { id: \"c1\", name: \"Company Name\", field: fields[0] },\n    { id: \"c2\", name: \"Industry\", field: fields[1], width: 100 },\n    { id: \"c3\", name: \"Last\", field: fields[2], width: 80 },\n    { id: \"c4\", name: \"Net. Chng\", field: fields[3], width: 80 },\n    { id: \"c5\", name: \"Market\", field: fields[4] },\n    { id: \"c6\", name: \"Status\", field: fields[5] }\n  ],\n  staticDataRows: records,\n  columnGrouping: [{\n      id: \"g1\",\n      name: \"Group 1\",\n      alignment: \"center\",\n      children: [\"c1\", \"c2\"]\n    },\n    {\n      id: \"g2\",\n      name: \"Group 2\",\n      alignment: \"center\",\n      children: [\"c4\", \"c5\"]\n    },\n    {\n      id: \"g3\",\n      name: \"Group 3\",\n      alignment: \"center\",\n      children: [\"g1\", \"c3\", \"g2\"],\n    }\n  ],\n  extensions: [\n    ext\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"move_to_group\").addEventListener(\"click\", function() {\n  var fromIndex = parseInt(document.getElementById(\"input_column\").value);\n  var from = Number.isNaN(fromIndex) ? document.getElementById(\"input_column\").value : fromIndex;\n  var to = parseInt(document.getElementById(\"input_dest\").value) || 0;\n  var groupId = document.getElementById(\"input_group\").value;\n  ext.moveColumnIntoGroup(from, to, groupId);\n});\ndocument.getElementById(\"set_parent\").addEventListener(\"click\", function() {\n  var fromIndex = parseInt(document.getElementById(\"input_col\").value);\n  var from = Number.isNaN(fromIndex) ? document.getElementById(\"input_col\").value : fromIndex;\n  var groupId = document.getElementById(\"input_grp\").value || null;\n  ext.setColumnParent(from, groupId);\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhtml hr {\n  margin: 5px;\n}\n\nselect {\n  width: 50px;\n}\n\n#input_group,\n#input_grp {\n  width: 100px;\n}","tagName":"pre"},{"text":"In order to move column between group, it is recommended to use extension's column moving api instead of built-in moveColumn.For moving column between group or adding to a group, either setColumnParent and    moveColumnIntoGroup can be used to move a column to specific group.","tagName":"p"},{"text":"Note: If group is not specified when using setColumnParent, the column would be removed from current group and move the column to the last column of the grid.","tagName":"p"},{"text":"Adding or removing group child at runtime","tagName":"h3"},{"text":"
                                                                                              \n  Setting Group\n  
                                                                                              \n
                                                                                              \n
                                                                                              \n  Adding child\n  
                                                                                              \n
                                                                                              \n
                                                                                              \n  Removing child\n  
                                                                                              \n
                                                                                              \n
                                                                                              \n","tagName":"pre"},{"text":"var ext = new tr.ColumnGroupingExtension();\nvar groupDef = {\n  id: \"g1\",\n  name: \"Group 1\"\n};\nvar fields = [\"companyName\", \"industry\", \"CF_LAST\", \"CF_NETCHNG\", \"market\", \"boolean\"];\nvar columns = fields.map(function(f, idx) {\n  var id = \"c\" + idx;\n  return {\n    id: id,\n    field: f,\n    name: id\n  };\n});\ncolumns[1].width = 100;\ncolumns[2].width = 80;\ncolumns[3].width = 80;\n\ncolumns.forEach(function(col) {\n  var btn = document.createElement(\"button\");\n  btn.textContent = col.id;\n  btn.colId = col.id;\n  btn.addEventListener(\"click\", onClickAddChild);\n  add_buttons.appendChild(btn);\n\n  btn = document.createElement(\"button\");\n  btn.textContent = col.id;\n  btn.colId = col.id;\n  btn.addEventListener(\"click\", onClickRemoveChild);\n  remove_buttons.appendChild(btn);\n});\nvar groupSets = [\n  [\"c1\", \"c3\"],\n  [\"c5\", \"c2\", \"c4\"],\n  []\n];\ngroupSets.forEach(function(groupSet) {\n  var btn = document.createElement(\"button\");\n  btn.childIds = groupSet;\n  var str = groupSet.join(\", \");\n  btn.textContent = str ? \"Group \" + str : \"Ungroup\";\n  btn.addEventListener(\"click\", onClickSetGroup);\n  set_buttons.appendChild(btn);\n});\n\nfunction onClickAddChild(e) {\n  var btn = e.currentTarget;\n  var colId = btn.colId;\n\n  ext.addGroupChild(groupDef.id, colId);\n}\n\nfunction onClickRemoveChild(e) {\n  var btn = e.currentTarget;\n  var colId = btn.colId;\n\n  ext.removeGroupChild(groupDef.id, colId);\n}\n\nfunction onClickSetGroup(e) {\n  var btn = e.currentTarget;\n  groupDef.children = btn.childIds.slice();\n\n  ext.setGroupDefinition(groupDef.id, groupDef);\n}\n\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: columns,\n  staticDataRows: records,\n  extensions: [ext]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nbutton {\n  margin: 2px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"GroupDefinition","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            id                                                    string                                                                                                                                                                                                    Group id        ","tagName":"tr"},{"text":"                            name                                                    string                                                                                                                                                                                                    Display group name        ","tagName":"tr"},{"text":"                            tooltip                                                    boolean | string                                                                                                                                                                                                                    true                                                        Show tooltip in column's header        ","tagName":"tr"},{"text":"                            children                                                    Array.                                                                                                                                                                                                    Child member in this group        ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                                                                                                                                                                        eg. left, center, right        ","tagName":"tr"},{"text":"                            render                                                    function                                                                                                                                                                                                                                        render function handler        ","tagName":"tr"},{"text":"GroupDefinitions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"ColumnGroupingPlugin~GroupDefinition","tagName":"a"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"ColumnGroupingPlugin~GroupDefinition","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"getObjectId(column) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getObjectIndex(column) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addColumnGrouping(groupDef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnGroupingPlugin~GroupDefinition","tagName":"a"},{"text":"ColumnGroupingPlugin#addGroup","tagName":"a"},{"text":"addColumnToGroup(column, groupId, colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"addGroup(groupDef) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnGroupingPlugin~GroupDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addGroupChild(parentId, childRef) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"beforeProcessOption(optionName, optionValue) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getCellInfo(e) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getChildColumnIndices(groupId) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupChildren(groupId) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupDefinition(groupId) → {ColumnGroupingPlugin~GroupDefinition}","tagName":"h4"},{"text":"ColumnGroupingPlugin~GroupDefinition","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnGroupingPlugin~GroupDefinition","tagName":"a"},{"text":"getGroupDefinitions() → {ColumnGroupingPlugin~GroupDefinitions}","tagName":"h4"},{"text":"ColumnGroupingPlugin~GroupDefinitions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnGroupingPlugin~GroupDefinitions","tagName":"a"},{"text":"getGroupIds(colRef) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupLevel(groupId) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getMaxGroupLevel() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getValidDestinationIndex(id, destCol) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"moveColumnById(srcCol, destColopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"moveColumnIntoGroup(colRef, to, groupId)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"moveGroup(id, destColopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"pinGroup(groupId, sideopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeGroup(groupId) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeGroupChild(parentId, childRef) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"renderGroups()","tagName":"h4"},{"text":"reorderColumns(colList, destColopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"selectGroupHeaders(colIndices)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnParent(colRef, groupId) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setGroupChildren(groupId, newChildList) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setGroupDefinition(groupId, groupDefopt) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnGroupingPlugin~GroupDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setGroupDefinitions(groupDefs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnGroupingPlugin~GroupDefinitions","tagName":"a"},{"text":"setGroupName(groupId, groupName)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unpinGroup(groupId, destopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unsetParent(childRef) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"}]},{"title":"Column Resizing","filename":"extensions/tr-grid-column-resizing.html","contents":[{"text":"Column Resizing","tagName":"h2"},{"text":"The Column Resizing Extension provides drag-to-resize for columns and double-click to fit a column to its content (when using with the Column Fitter Extension).","tagName":"p"},{"text":"Column Fitter Extension","tagName":"a"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.ColumnResizingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Preserving Grid Size","tagName":"h3"},{"text":"The extension has ability to keep Grid's size which can be achieved by passing preserveGridSize as true in the extension's option. With this mode Grid will try to calculate the proper column width for resizing columns so the horizontal scrollbar will never show. In the case that the setting widths are making Grid overflowed, all another columns' width will be reset to defaultWidth to ensure that all columns can be fitted to Grid. If width of resizing column is quite large compared to another columns, some columns will be hidden. To prevent column from hiding minWidth should be specified in the column's option.","tagName":"p"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            noResizing                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, it will disable an ability to drag and resize the column        ","tagName":"tr"},{"text":"                            defaultWidth                                                    number                                                                                                                                                                                                                                        Specified default width used when user double clicks the column edge        ","tagName":"tr"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            preserveProportion                                                    boolean                                                                                                                                                                                                                    false                                                        By setting this to true, it will try to preserve proportion of the resized column compared to other columns        ","tagName":"tr"},{"text":"                            preserveGridSize                                                    boolean                                                                                                                                                                                                                    false                                                        By setting this to true, grid size will not change after double click to resize column        ","tagName":"tr"},{"text":"                            noResizing                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, all columns cannot be dragged to resize (column can still be resized programmatically). This overrides column config.        ","tagName":"tr"},{"text":"                            columnResized                                                    function                                                                                                                                                                                                                    null                                                        Event handler        ","tagName":"tr"},{"text":"                            dblClicked                                                    function                                                                                                                                                                                                                    null                                                        Event handler        ","tagName":"tr"},{"text":"                            dragStart                                                    function                                                                                                                                                                                                                    null                                                        Event handler        ","tagName":"tr"},{"text":"                            dragEnd                                                    function                                                                                                                                                                                                                    null                                                        Event handler        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"beforeProcessOption(optionName, optionVal) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableResizing(colIndex, opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableHandlebarMode(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enablePipeHandleMode(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getColumnSizeStates() → {Array.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnWidths() → {Array.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDraggedAnchorX() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDraggedColumnIndex() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"resetAllColumnsToDefaultWidth() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"setAllColumnWidths(colWidth, scalabilityopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnSizeStates(columns)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnWidths(cols, width, opt_scalableopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"columnResized","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                                                                                                ","tagName":"tr"},{"text":"                            width                                                    number                                                                                                                                                ","tagName":"tr"},{"text":"                            colIndices                                                    Array.                                                                                                                                                ","tagName":"tr"},{"text":"                            scalability                                                    boolean                                                                                                                                                                                    ","tagName":"tr"},{"text":"dblClicked","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"dragEnd","tagName":"h4"},{"text":"dragStart","tagName":"h4"}]},{"title":"Column Selection","filename":"extensions/tr-grid-column-selection.html","contents":[{"text":"Column Selection","tagName":"h2"},{"text":"The Column Selection Extension will add the ability to select columns in Grid by column or by multiple columns.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.ColumnSelectionExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            unselectable                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the specified column is not selectable        ","tagName":"tr"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            singleSelection                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, user can have one selection at any moment        ","tagName":"tr"},{"text":"                            clickToggle                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, click at the already selected column will deselect it        ","tagName":"tr"},{"text":"                            selectionChanged                                                    function                                                                                                                                                                                                                    null                                                        selectionChanged event handler        ","tagName":"tr"},{"text":"                            menuClicked                                                    function                                                                                                                                                                                                                    null                                                        Event Handler when user clicks on menu icon.        ","tagName":"tr"},{"text":"                            menuPosition                                                    string                                                                                                                                                                                                                    \"outside\"                                                        show icon in column grid that have style outside and non-outside        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"clearAllSelections()","tagName":"h4"},{"text":"clearSelectedColumns()","tagName":"h4"},{"text":"ColumnSelectionPlugin#clearAllSelections","tagName":"a"},{"text":"clearSelection(colsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"deselectAll()","tagName":"h4"},{"text":"ColumnSelectionPlugin#clearSelection","tagName":"a"},{"text":"disable(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"dispatchSelectionChanged()","tagName":"h4"},{"text":"getActiveGrid() → {Object}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getFirstSelectedColumn() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getLastSelectedColumn() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedColumns() → {Array.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasSelectedColumn() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isEnabled() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isSelectedColumn(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"selectAll()","tagName":"h4"},{"text":"ColumnSelectionPlugin#selectAllColumns","tagName":"a"},{"text":"selectAllColumns()","tagName":"h4"},{"text":"selectRange(anchorIndex, len, opt_gridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"selectSingleColumn(opt_colIndexopt, opt_gridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"selectSingleGroup(groupId, opt_gridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSelectedColumn(colIndex, opt_selectopt, opt_gridopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"unload(hostopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"selectionChanged","tagName":"h4"}]},{"title":"Column Stack","filename":"extensions/tr-grid-column-stack.html","contents":[{"text":"Column Stack","tagName":"h2"},{"text":"The Column Stack Extension is an extension that provides a single representative column that can switch to another stacked column.","tagName":"p"},{"text":"\n\n\n","tagName":"pre"},{"text":"var columnStackExt = new tr.ColumnStackExtension();\nvar fields = [\"companyName\", \"CF_LAST\", \"CF_NETCHNG\", \"PCTCHNG2\", \"CF_VOLUME\", \"market\", \"industry\", \"TR.IPODate\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [{\n      name: \"Company\",\n      field: fields[0]\n    },\n    {\n      name: \"Last\",\n      field: fields[1],\n      width: 100\n    },\n    {\n      name: \"Net. Chng\",\n      field: fields[2],\n      width: 100,\n      stackId: \"stack1\"\n    },\n    {\n      name: \"PCt. Chng\",\n      field: fields[3],\n      width: 100,\n      stackId: \"stack1\"\n    },\n    {\n      name: \"Volume\",\n      field: fields[4],\n      width: 100\n    },\n    {\n      name: \"Market\",\n      field: fields[5],\n      width: 120,\n      stack: {\n        id: \"stack2\",\n        spreading: true\n      }\n    },\n    {\n      name: \"Industry\",\n      field: fields[6],\n      stack: {\n        id: \"stack2\",\n        spreading: true\n      }\n    },\n    {\n      name: \"IPO Date\",\n      field: fields[7],\n      stack: {\n        id: \"stack2\",\n        spreading: true\n      }\n    }\n  ],\n  columnStack: {\n    menuElement: document.getElementById(\"popup_menu\")\n  },\n  staticDataRows: records,\n  extensions: [\n    columnStackExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Usage","tagName":"h3"},{"text":"This extension supports two modes for displaying grouped columns, which are stacking mode and collapsing mode.","tagName":"p"},{"text":"Stacking mode","tagName":"h4"},{"text":"With stacking mode, grouped columns will be displayed as only one column per group, so other columns will be invisible.","tagName":"p"},{"text":"Simply define the element for the popup menu using menuElement, an extension option.","tagName":"p"},{"text":"var gridConfig = {\n    columnStack: {\n        menuElement: document.getElementById(\"popup_menu\")\n    }\n}","tagName":"pre"},{"text":"Collapsing mode","tagName":"h4"},{"text":"In collapsing mode, grouped columns will be expanded or collapsed. The stack icon in the header row becomes a trigger button that can be used to collapse or expand a group.","tagName":"p"},{"text":"Note: with collapsing mode there is no need to listen to the event \"clicked\".","tagName":"p"},{"text":"Column's state","tagName":"h3"},{"text":"\nWorking Mode\nActive-State\nInactive-State\n","tagName":"tr"},{"text":"\nStacking Mode\nCurrent visible column\nOther membered columns\n","tagName":"tr"},{"text":"\nCollapsing Mode\nAll expanded columns\nAll collapsed columns\n","tagName":"tr"},{"text":"Adding or removing stack child at runtime","tagName":"h3"},{"text":"
                                                                                              \n  Setting stack\n  
                                                                                              \n
                                                                                              \n
                                                                                              \n  Adding child\n  
                                                                                              \n
                                                                                              \n
                                                                                              \n  Removing child\n  
                                                                                              \n
                                                                                              \n
                                                                                              \n\n","tagName":"pre"},{"text":"var ext = new tr.ColumnStackExtension();\nvar fields = [\"companyName\", \"industry\", \"CF_LAST\", \"CF_NETCHNG\", \"market\", \"boolean\"];\nvar columns = fields.map(function(f, idx) {\n  var id = \"c\" + idx;\n  return {\n    id: id,\n    field: f,\n    name: id\n  };\n});\ncolumns[1].width = 100;\ncolumns[2].width = 80;\ncolumns[3].width = 80;\n\ncolumns.forEach(function(col) {\n  var btn = document.createElement(\"button\");\n  btn.textContent = col.id;\n  btn.colId = col.id;\n  btn.addEventListener(\"click\", onClickAddChild);\n  add_buttons.appendChild(btn);\n\n  btn = document.createElement(\"button\");\n  btn.textContent = col.id;\n  btn.colId = col.id;\n  btn.addEventListener(\"click\", onClickRemoveChild);\n  remove_buttons.appendChild(btn);\n});\nvar stackSets = [\n  [\"c1\", \"c3\"],\n  [\"c5\", \"c2\", \"c4\"],\n  []\n];\nstackSets.forEach(function(groupSet) {\n  var btn = document.createElement(\"button\");\n  btn.childIds = groupSet;\n  var str = groupSet.join(\", \");\n  btn.textContent = str ? \"Stack \" + str : \"Unstack\";\n  btn.addEventListener(\"click\", onClickSetGroup);\n  set_buttons.appendChild(btn);\n});\n\nfunction onClickAddChild(e) {\n  var btn = e.currentTarget;\n  var colId = btn.colId;\n\n  ext.addStackChild(\"g1\", colId);\n}\n\nfunction onClickRemoveChild(e) {\n  var btn = e.currentTarget;\n  var colId = btn.colId;\n\n  ext.removeStackChild(\"g1\", colId);\n}\n\nfunction onClickSetGroup(e) {\n  var btn = e.currentTarget;\n  ext.removeAllStacks();\n  ext.stackColumns(btn.childIds.slice(), \"g1\");\n}\n\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: columns,\n  staticDataRows: records,\n  columnStack: {\n    menuElement: document.getElementById(\"popup_menu\")\n  },\n  extensions: [ext]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nbutton {\n  margin: 2px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            stackId                                                    string                                                                                                                                                                            Group ID        ","tagName":"tr"},{"text":"                            stack                                                    string | ColumnStackPlugin~StackOptions                                                                                                                                                                            Group ID or StackOptions object        ","tagName":"tr"},{"text":"ColumnStackPlugin~StackOptions","tagName":"a"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            fields                                                    Array.                                                                                                                                                                                                    Fields for stacking. The minimum is 2 fields        ","tagName":"tr"},{"text":"                            stacks                                                    Array.                                                                                                                                                                                                    List of stacking configuration        ","tagName":"tr"},{"text":"ColumnStackPlugin~StackDefinition","tagName":"a"},{"text":"                            autoStacking                                                    boolean                                                                                                                                                                                                                                        Deprecated. Stacks are automatically maintained as long as its members exist        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                                                                                                                                                    null                                                        Event handler when user clicks on stack/expanding icon        ","tagName":"tr"},{"text":"                            menuElement                                                    Element                                                                                                                                                                                                                                        Element used to display a column selection list        ","tagName":"tr"},{"text":"                            menuItemClicked                                                    function                                                                                                                                                                                                                                        When the menuElement is specified and menu item is clicked, an event handler is called        ","tagName":"tr"},{"text":"StackConfiguration","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            spreading                                                    boolean                                                                                                                                                                                                                    false                                                        If specified true, this group will be running in collapsing mode        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, this group will be expanded at the first time        ","tagName":"tr"},{"text":"                            activeColumn                                                    string                                                                                                                                                                                                                    \"\"                                                        Column index, column id, or field for set as active column        ","tagName":"tr"},{"text":"StackDefinition","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            id                                                    string                                                                                                                                                                                                    Group Id        ","tagName":"tr"},{"text":"                            spreading                                                    boolean                                                                                                                                                                                                                    false                                                        If specified true, this group will be running in collapsing mode        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, this group will be expanded at the first time        ","tagName":"tr"},{"text":"                            children                                                    Array.                                                                                                                                                                                                                    null                                                        List of column Ids for the stack members. String in this array is assumed to be column ids        ","tagName":"tr"},{"text":"                            fields                                                    Array.                                                                                                                                                                                                                    null                                                        List of column fields for the stack members. This will override children property        ","tagName":"tr"},{"text":"                            name                                                    string                                                                                                                                                                                                                    \"\"                                                        Name defined for specific stack        ","tagName":"tr"},{"text":"                            activeColumn                                                    string                                                                                                                                                                                                                    \"\"                                                        Column Id or field of the active column.        ","tagName":"tr"},{"text":"StackOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            id                                                    string                                                                                                                                                                                                    Group ID        ","tagName":"tr"},{"text":"                            spreading                                                    boolean                                                                                                                                                                                                                    false                                                        If specified true, this group will be running in collapsing mode        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, this group will be expanded at the first time        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"addColumnToStack(colRef, stackId)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"addStackChild(stackId, colRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"collapseGroup(colIndex, collapsedopt) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"expandGroup(colIndex) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getActiveColumnField(stackId) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getActiveColumnId(stackId) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getActiveColumnIndex(stackId) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIdsByFields(fields) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIdsByIndex(colIndices) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIndicesByColumnIds(colIds) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getMemberIndices(colIndex) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getStackId(colRef) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getStackMemberIds(stackId) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getStackMemberIndices(stackId) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getStackName(stackId) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getStacks() → {Array.}","tagName":"h4"},{"text":"ColumnStackPlugin~StackDefinition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"ColumnStackPlugin~StackDefinition","tagName":"a"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hideStack(stackId, hiddenopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isActiveStackedColumn(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnStackPlugin#isColumnActive","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isCollapsingMode(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isColumnActive(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isColumnCollapsed(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isColumnInCollection(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isColumnStackable(colIndices) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isColumnStacked(colIndicesopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isInactiveStackedColumn(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnStackPlugin#isColumnActive","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"isInCollection(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isStackHidden(stackId) → {boolean|null}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isStackingMode(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"moveColumnById(srcCol, destColopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"moveStack(stackId, destColopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"pinStack(stackId, sideopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeAllStacks(enableUpdateUIopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeColumnFromStack(colRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeStack(stackId) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeStackChild(stackId, colRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"reorderColumns(colList, destColopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"reorderStackColumns(colRefs, stackId)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setActiveColumn(activeColumn) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setStack(colRefsopt, activeColRefopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setStackName(stackId, name)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setStacks(stacks)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnStackPlugin~StackDefinition","tagName":"a"},{"text":"showStack(stackId)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"stackColumns(colRefsopt, stackIdopt, optionsopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnStackPlugin~StackConfiguration","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"swapColumn(colRef, swappingIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnStackPlugin#setActiveColumn","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unpinStack(stackId, destopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unsetParent(colRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unstackColumns(colIndicesopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"clicked","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                            The column index that was clicked        ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                            The row index that was clicked        ","tagName":"tr"},{"text":"                            menuData                                                    Array.                                                            Data for populating context menu        ","tagName":"tr"},{"text":"                            activeIndex                                                    number                                                            The index of the item in the menuData that corresponds to the active column        ","tagName":"tr"},{"text":"                            columnIndices                                                    Array.                                                            Members column index        ","tagName":"tr"},{"text":"                            activeColIndex                                                    number                                                            The column index that is currently active        ","tagName":"tr"},{"text":"                            event                                                    Event                                                            Native event argument from click event        ","tagName":"tr"},{"text":"                            spreading                                                    boolean                                                            True if the column being clicked is a member of the collapsing group        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                            True If the clicked group is collapsed        ","tagName":"tr"}]},{"title":"Conditional Coloring","filename":"extensions/tr-grid-conditional-coloring.html","contents":[{"text":"Conditional Coloring","tagName":"h2"},{"text":"The Conditional Coloring Extension provides a conditional coloring for a column's field, which will be triggered when a condition is met. Use conditions property to define how styles will be applied to a cell by what condition. The following code snippet shows how conditions might be defined:","tagName":"p"},{"text":"var conditions = [ // For example, fill green when the value is more than zero. \n    { // If a field value is greater than 0, set text color to green\n        expression: [\"GT\", 0], \n        color: \"green\"\n    },\n    { // If a field value is less than 0, set cell background color to red\n        expression: [\"LT\", 0], \n        backgroundColor: \"red\"\n    },\n    { // If a field value contains \"inc\" text, set the given CSS to the cell \n        expression: [\"CONT\", \"inc\"], \n        cssClass: \"predefinedColors\"\n    }\n];","tagName":"pre"},{"text":"\n\n","tagName":"pre"},{"text":"var records = [\n  { \"c1\": 10, \"c2\": -10, \"c3\": 4 },\n  { \"c1\": 2, \"c2\": 10, \"c3\": 1 },\n  { \"c1\": 0, \"c2\": -50, \"c3\": 2 },\n  { \"c1\": -1, \"c2\": 0, \"c3\": 9 },\n  { \"c1\": -5, \"c2\": 123.23, \"c3\": 3 },\n  { \"c1\": 40, \"c2\": 0, \"c3\": 5 },\n  { \"c1\": 500, \"c2\": -509.1, \"c3\": -1 },\n  { \"c1\": 120, \"c2\": 20.9, \"c3\": -2 },\n  { \"c1\": 20, \"c2\": -40.8, \"c3\": -8 },\n  { \"c1\": -70, \"c2\": 2.7, \"c3\": 0 },\n  { \"c1\": -40, \"c2\": 1.3, \"c3\": 0 },\n  { \"c1\": 100, \"c2\": -0.1, \"c3\": 0 }\n];\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \"Value > 0\",\n      field: \"c1\",\n      conditions: [{\n        backgroundColor: \"green\",\n        color: \"white\",\n        expression: \"[c1] > 0\"\n      }]\n    },\n    {\n      name: \"Multiple Conditions\",\n      field: \"c2\",\n      conditions: [{\n        backgroundColor: \"\",\n        color: \"green\",\n        expression: \"[c2] > 0\"\n      }, {\n        backgroundColor: \"\",\n        color: \"red\",\n        expression: \"[c2] < 0\"\n      }, {\n        backgroundColor: \"\",\n        color: \"blue\",\n        expression: \"[c2] == 0\"\n      }]\n    },\n    {\n      name: \"Range between -3 and 3\",\n      field: \"c3\",\n      conditions: [{\n        backgroundColor: \"lightskyblue\",\n        color: \"\",\n        expression: \"[c3] >= -3 && [c3] <= 3\"\n      }]\n    }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.ConditionalColoringExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 208px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Blinking feature","tagName":"h3"},{"text":"For required scenarios, there are features to deal with real-time data. For example, stock market data changes all the time, and a user needs to know that the data has changed. The Blinking feature was created to deal with scenarios like this. See the Blinking's typedef section for more details on this feature.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var conditionalColoringExt = new tr.ConditionalColoringExtension();\n\nvar charA = (\"A\").charCodeAt(0);\nvar charZ = (\"Z\").charCodeAt(0);\n\nvar randBetween = tr.DataGenerator.randBetween;\n\ntr.DataGenerator.addFieldInfo(\"num1\", { type: \"number\", min: -10, max: 11 });\ntr.DataGenerator.addFieldInfo(\"num2\", { type: \"number\", min: -1, max: 11 });\ntr.DataGenerator.addFieldInfo(\"num3\", { type: \"number\", min: -10, max: 3 });\ntr.DataGenerator.addFieldInfo(\"num4\", { type: \"number\", min: -1, max: 3 });\ntr.DataGenerator.addFieldInfo(\"num5\", { type: \"number\", min: -5000, max: 5001 });\ntr.DataGenerator.addFieldInfo(\"char\", function() {\n  return randBetween(charA, charZ);\n});\n\nvar fields = [\"num1\", \"num2\", \"num3\", \"num4\", \"num5\", \"char\"];\nvar records = tr.DataGenerator.generateRecords(fields, 15);\n\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \"Blink with Theme Color\",\n      field: \"num1\",\n      blinking: true\n    },\n    {\n      name: \"Blink on Top of Condtional Coloring\",\n      field: \"num2\",\n      blinking: true,\n      conditions: [{\n        backgroundColor: \"green\",\n        color: \"white\",\n        expression: \"[num2] > 0\"\n      }, {\n        backgroundColor: \"red\",\n        color: \"white\",\n        expression: \"[num2] < 0\"\n      }]\n    },\n    {\n      name: \"Blinking Border\",\n      field: \"num3\",\n      blinking: {\n        border: true\n      },\n      conditions: [{\n        backgroundColor: \"\",\n        color: \"green\",\n        expression: \"[num3] > 0\"\n      }, {\n        backgroundColor: \"\",\n        color: \"red\",\n        expression: \"[num3] < 0\"\n      }, {\n        backgroundColor: \"\",\n        color: \"blue\",\n        expression: \"[num3] == 0\"\n      }]\n    },\n    {\n      name: \"Custom Blinking Color\",\n      field: \"num4\",\n      blinking: {\n        up: \"#aaDD88\",\n        down: \"#ff33cc\",\n        level: \"#111111\"\n      },\n      conditions: [{\n        backgroundColor: \"lightskyblue\",\n        color: \"\",\n        expression: \"[num4] >= -3 && [num4] <= 3\"\n      }]\n    },\n    {\n      name: \"Blinking Border with Custom Color\",\n      field: \"num5\",\n      blinking: {\n        border: true,\n        up: \"blue\",\n        down: \"#ffff00\"\n      },\n      conditions: [{\n        backgroundColor: \"salmon\",\n        color: \"white\",\n        expression: \"[num2] > 0\"\n      }]\n    },\n    {\n      name: \"Blink Only Specific States\",\n      field: \"char\",\n      binding: function(e) {\n        e.cell.setContent(String.fromCharCode(e.data));\n      },\n      blinking: {\n        down: \"#EE00EE\"\n      },\n      colorText: \"num3\" // Color the text based on another field\n    }\n  ],\n  staticDataRows: records,\n  extensions: [\n    conditionalColoringExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\nsetInterval(function() { // Slow Update for testing\n  var record = tr.DataGenerator.generateRecord(fields);\n  grid.api.setRowData(0, record);\n}, 2000);\n\nsetInterval(function() { // Fast Updates\n  var record = tr.DataGenerator.generateRecord(fields);\n\n  // remove some fields randomly\n  for (var key in record) {\n    if (randBetween(0, 10) > 3) {\n      delete record[key];\n    }\n  }\n\n  var rowCount = grid.api.getRowCount();\n  var at = randBetween(1, rowCount);\n  grid.api.setRowData(at, record);\n}, 200);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 208px;\n}","tagName":"pre"},{"text":"Predefined color mode","tagName":"h3"},{"text":"The extension also allows you select text and background colors from a set of predefined colors. To do so, add a preset color object to the predefinedColors property and then set the condition object's cssClass properties to the color name rather than the background and color value.","tagName":"p"},{"text":"
                                                                                              \n\n  Apply color\n  
                                                                                              \n    \n    \n    \n    \n  
                                                                                              \n  
                                                                                              \n    \n    \n    \n    \n  
                                                                                              \n
                                                                                              \n
                                                                                              \n","tagName":"pre"},{"text":"var predefinedColorsSet1 = {\n  \"color-1\": {\n    backgroundColor: \"#FF2848\"\n  },\n  \"color-2\": {\n    backgroundColor: \"#FFB27B\"\n  },\n  \"color-3\": {\n    backgroundColor: \"#EEF3B4\"\n  }\n};\n\nvar predefinedColorsSet2 = {\n  \"color-1\": {\n    color: \"#FFFFFF\",\n    backgroundColor: \"#64864A\"\n  },\n  \"color-2\": {\n    backgroundColor: \"#F56093\"\n  },\n  \"color-3\": {\n    backgroundColor: \"#FFCCCD\"\n  }\n};\n\nvar conditions = [{\n  expression: \"[CF_NETCHNG] > 40\",\n  cssClass: \"color-1\"\n}, {\n  expression: \"[CF_NETCHNG] > 0\",\n  cssClass: \"color-2\"\n}, {\n  expression: \"[CF_NETCHNG] < 0\",\n  cssClass: \"color-3\"\n}];\n\nvar conditionalColoringExt = new tr.ConditionalColoringExtension();\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"id\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 10, numRows: 10 });\nvar configObj = {\n  columns: [{\n      name: \"Company\",\n      field: fields[0]\n    },\n    {\n      name: \"Market\",\n      field: fields[1],\n      width: 120\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 100\n    },\n    {\n      name: \"Net. Chng\",\n      field: fields[3],\n      width: 100,\n      blinking: true,\n      conditions: conditions\n    },\n    {\n      name: \"Industry\",\n      field: fields[4]\n    }\n  ],\n  staticDataRows: records,\n  conditionalColoring: {\n    predefinedColors: predefinedColorsSet1\n  },\n  extensions: [\n    conditionalColoringExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"set_color_1_btn\").addEventListener(\"click\", function(e) {\n  conditionalColoringExt.setPredefinedColors(predefinedColorsSet1);\n});\n\ndocument.getElementById(\"set_color_2_btn\").addEventListener(\"click\", function(e) {\n  conditionalColoringExt.setPredefinedColors(predefinedColorsSet2);\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}\n\nfieldset {\n  margin: 10px 0;\n  line-height: 16px;\n}\n\nfieldset * {\n  vertical-align: middle;\n}\n\nlabel {\n  vertical-align: middle;\n  text-align: center;\n  margin-right: 5px;\n  height: 20px;\n  width: 50px;\n  display: inline-block;\n  line-height: 20px;\n  margin-left: 5px;\n}","tagName":"pre"},{"text":"Defining coloring condition as an array expression","tagName":"h3"},{"text":"The expression can take form of an Array or two dimentional Array for defining multiple conditions. However, the array has to be in specific format for extension to parse it. The array must contains two or three items. The first item is operator id. The second item is a operand value. The third item is a connector which can be either \"AND\" or \"OR\" connector. The connector is optional, if there is only one coloring condition.","tagName":"p"},{"text":"This array form is useful for constructing a complex condition as there can be unlimited number of conditions in a single expression. It can also be serialized as a text which is good for saving and restoring. ","tagName":"p"},{"text":"The following operator ids are supported in the array format:","tagName":"p"},{"text":"The following array expressions can be parsed by the extension:","tagName":"p"},{"text":"var expression1 = [\"GT\", 10];\n\n// The below condition will be satisfied when a value is greater than or equal to 10 and less than or equal to 20\nvar expression2 = [ \n    [\"GTE\", 10, \"AND\"],\n    [\"LTE\", 20]\n];","tagName":"pre"},{"text":"Defining coloring condition as a text expression","tagName":"h3"},{"text":"Since there are security risks associate with parsing text into a JavaScript function, Conditional Coloring Extension supports parsing a text expression with only simple arithematic and logical operators. The following operators are supported by the extension:","tagName":"p"},{"text":"The following text expressions can be parsed by the extension:","tagName":"p"},{"text":"\"[field 1] >= 0 && [field 1] <= 1\"\n\"([field 1] + [field 2]) / 2 >= 0\"\n\"[field 1] == 'text'\"\n\"![field 1]\" // The value can be used as the condition","tagName":"pre"},{"text":"Native JavaScript functions or non number or string values can not be parsed by the extension. The following text expressions are considered invalid:","tagName":"p"},{"text":"\"Number([field 1]) > 0\" // Native JavaScript class cannot be parsed\n'[field 1].indexOf(\"text\") >= 0' // Native JavaScript method cannot be parsed\n\"[field 1] === undefined\" // undefined, null, true, and false values are not supported\n\"[field 1] + ()\" // insufficient parameter","tagName":"pre"},{"text":"Defining coloring condition as a function (complex expression)","tagName":"h3"},{"text":"Since text expression support is very limited, the extension allows the expression to be defined by a function. The expression function takes one parameter which is row data object, and should return boolean value. The code snippet below shows how to define expression in a function form:","tagName":"p"},{"text":"var invalidExpression = \"[field1] != null\"; // This kind of expression is not supported\n\nvar validExpression = function(rowData) {\n    return rowData[\"field1\"] != null;\n};","tagName":"pre"},{"text":"Updating the movement color theme","tagName":"h3"},{"text":"Call the reloadThemeColor function to update the theme color after the movement color theme has changed.","tagName":"p"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Blinking","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            border                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, border will be blinked instead of background        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                                                        If not specified, field from column definition will be used        ","tagName":"tr"},{"text":"                            up                                                    string                                                                                                                                                                                                                                        CSS color (e.g. #00ff00, green)        ","tagName":"tr"},{"text":"                            down                                                    string                                                                                                                                                                                                                                        CSS color (e.g. #ff0000, red)        ","tagName":"tr"},{"text":"                            level                                                    string | boolean                                                                                                                                                                                                                                        CSS color (e.g. #33333, grey). If false value is specified, blinking for level color is disabled.        ","tagName":"tr"},{"text":"                            duration                                                    number                                                                                                                                                                                                                                        If specified, this will override blinking duration from extension option. Blinking duration in milliseconds        ","tagName":"tr"},{"text":"ColorText","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                            If not specified, field from column definition will be used        ","tagName":"tr"},{"text":"                            upClass                                                    string                                                                                                                                                                            CSS class name.        ","tagName":"tr"},{"text":"                            downClass                                                    string                                                                                                                                                                            CSS class name.        ","tagName":"tr"},{"text":"                            levelClass                                                    string                                                                                                                                                                            CSS class name.        ","tagName":"tr"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            conditions                                                    Array.                                                                                                                                                                                                                    null                                                        List of condition options        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~Condition","tagName":"a"},{"text":"                            colorText                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                                                                                                                                                    null                                                        A shorthand for specifying default condition based on the field.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            tickColor                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                                                                                                                                                    null                                                        Alias of colorText.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            blinking                                                    string | boolean | ConditionalColoringPlugin~Blinking                                                                                                                                                                                                                    null                                                        Blink Options. If specified, the cell will be blinked on data change.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~Blinking","tagName":"a"},{"text":"                            field                                                    string                                                                                                                                                                                                                                        Field for Grid column configuration object        ","tagName":"tr"},{"text":"Condition","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            expression                                                    string | function | Array                                                                                                                                                                                                                                        The expression can be in the following forms: text, function, and 2 dimentional array        ","tagName":"tr"},{"text":"                            backgroundColor                                                    string                                                                                                                                                                                                                    \"\"                                                        CSS color (e.g. #ffffff, black)        ","tagName":"tr"},{"text":"                            color                                                    string                                                                                                                                                                                                                                        CSS=\"\" color (e.g. #000000, white)        ","tagName":"tr"},{"text":"                            cssClass                                                    string                                                                                                                                                                                                                                        cssClass=\"\" Predefined color class name        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                                                        Field to be used for this specific condition, overriding the field defined in ConditionalColoringOptions        ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"var conditions1 = [ // Add cssClass for any value that is greater than or equal to 10, and less than or equal to 20\n  {expression: [[\"GTE\", 10, \"AND\"], [\"LTE\", 20]], cssClass: \"predefinedColors\"}\n];\nvar conditions2 = [ // Add background color for any fieldA value that is not blank value (e.g., null, undefined, 0, false, empty string)\n  {\n    expression: function(rowData) {\n      return rowData[\"fieldA\"] ? true : false;\n    },\n    backgroundColor: \"blue\",\n    field: \"fieldA\"\n  }\n];\nvar conditions3 = [ // Add text color for any fieldA value that is not equal to 10\n  {expression: \"[fieldA] != 10\", color: \"red\"}\n];","tagName":"pre"},{"text":"ConditionalColoringOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            conditions                                                    Array.                                                                                                                                                                                                                    null                                                        List of condition options        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~Condition","tagName":"a"},{"text":"                            colorText                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                                                                                                                                                    null                                                        A shorthand for specifying default condition based on the field.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            tickColor                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                                                                                                                                                    null                                                        Alias of colorText        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            field                                                    string                                                                                                                                                                                                                                        Field to be used for all conditions, overriding the field defined in ColumnOptions        ","tagName":"tr"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                                                                                                                                                                        Predefined color object map for conditional coloring        ","tagName":"tr"},{"text":"                            blinkingDuration                                                    number                                                                                                                                                                                                                    250                                                        Blinking duration in milliseconds        ","tagName":"tr"},{"text":"                            insertionBlinking                                                    boolean                                                                                                                                                                                                                    false                                                        Blinking when a row is added to a grid        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"cleanUpPrevRows()","tagName":"h4"},{"text":"setThemeColors(colors)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"applyColor(colIndex, cell, rowDataopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"beforeProcessOption(optionName, optionVal) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"blinkRow(rowIndex, blinkSignal, hostopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getColumnColoring(colIndex, optionsopt) → {ConditionalColoringPlugin~ColumnOptions}","tagName":"h4"},{"text":"ConditionalColoringPlugin~ColumnOptions","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"ConditionalColoringPlugin~ColumnOptions","tagName":"a"},{"text":"getColumnPainter(colIndex) → {CellPainter}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"reloadThemeColors() → {Promise.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnBlinking(colIndex, blinkingOptionsopt, fieldopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ConditionalColoringPlugin~Blinking","tagName":"a"},{"text":"setColumnColoring(colIndex, columnOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ConditionalColoringPlugin~ColumnOptions","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var columnOptions1 = {\n  \"field\": \"string\",\n  \"conditions\": [{ // Array. Condition Object Properties\n    \"expression\": \"[column0] > 0\", // string\n    \"backgroundColor\": \"\", // Optional string e.g. #ffffff, black\n    \"color\": \"\" // Optional string e.g. #000000, white\n  }]\n};\nvar columnOptions2 = {\n  \"field\": \"string\",\n  \"colorText\": true, // string as Field or boolean for text coloring mode\n  \"blinking\": true\n};","tagName":"pre"},{"text":"setConditionalColoring(colIndex, coloringOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ConditionalColoringPlugin~ConditionalColoringOptions","tagName":"a"},{"text":"setInsertionBlinking(blinking)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setPredefinedColors(predefinedColors)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Content Wrap","filename":"extensions/tr-grid-content-wrap.html","contents":[{"text":"Content Wrap","tagName":"h2"},{"text":"The Content Wrap Extension is an extension that shows all text information in a cell, even if it is too small to show the text horizontally. The extension will automatically does a line break for content that longer than the available space in a cell.","tagName":"p"},{"text":"Content Wrap extension cannot work together with row virtualization mechanism. Please make sure that rowVirtualization property is set to false in the configs for the extension to work correctly. ","tagName":"p"},{"text":"Content Wrap extension works by measuring row height once the content has been rendered, and then dynamically changing the row height. In contrast, row virtualization works by calculating number of rows to be displayed in the view, and not rendering any content outside of the view. Row virtualization requires row height to be constant in order to calculate the number of rows to be rendered, but the extension will keep changing row height after content is rendered. Hence, row virtualization cannot be enabled with the extension. So, be vary of some performance impact when using this extension.","tagName":"p"},{"text":"Due to the performance concern, contentWrap: true has to specifically be set on the column that needs content to be wrapped.  ","tagName":"p"},{"text":"Normal mode","tagName":"h3"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 15 });\nvar configObj = {\n  rowVirtualization: false,\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4], width: 120, contentWrap: true }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.ContentWrapExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Even row height mode","tagName":"h3"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 15 });\nvar configObj = {\n  rowVirtualization: false,\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4], width: 120, contentWrap: true }\n  ],\n  staticDataRows: records,\n  contentWrap: {\n    evenRowHeight: true\n  },\n  extensions: [\n    new tr.ContentWrapExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Installation and How to import to your project","tagName":"h3"},{"text":"The detail and examples of installation and how to import extension to your project are available on Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            contentWrap                                                    boolean                                                                                                                                                                                                                    false                                                        Content wrapping flag. If enabled, the column will be counted toward row height calculation.        ","tagName":"tr"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            evenRowHeight                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, max row height will be applied for all the rows        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"adjustRowHeight(sectionRef, fromopt, toopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"adjustRowHeightAt(sectionRef, rowIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableContentWrapping(colIndex, boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isWrappingContent(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Context Menu","filename":"extensions/tr-grid-contextmenu.html","contents":[{"text":"Context Menu","tagName":"h2"},{"text":"The Context Menu Extension provides the capability to display a customized contextual menu when a user right-clicks on the grid. The menu items to be displayed are totally customizable based on the position of the mouse, the data, and also any customized logic of your application.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  contextMenu: {\n    items: {\n      HEADER: {\n        text: 'Header 1',\n        value: '1',\n        callback: function(e) {\n          document.getElementById(\"text\").textContent = \"Column: \" + (e.colIndex + 1) + \", \" + e.item.text + \" Clicked!\";\n        }\n      },\n      MENU_1: {\n        text: 'Menu 1',\n        value: '1',\n        callback: function(e) {\n          document.getElementById(\"text\").textContent = \"Column: \" + (e.colIndex + 1) + \", \" + e.item.text + \" Clicked!\";\n        }\n      },\n      MENU_2: {\n        text: 'Menu 2',\n        value: '2',\n        callback: function(e) {\n          document.getElementById(\"text\").textContent = \"Column: \" + (e.colIndex + 1) + \", \" + e.item.text + \" Clicked!\";\n        }\n      },\n      MENU_3: {\n        text: 'Menu 3',\n        value: '3',\n        callback: function(e) {\n          document.getElementById(\"text\").textContent = \"Column: \" + (e.colIndex + 1) + \", \" + e.item.text + \" Clicked!\";\n        }\n      }\n    },\n    onMenu: function(e) {\n      if (e.context === 'header') {\n        e.menu.addItem('HEADER');\n      }\n      if (e.context === 'content') {\n        e.menu.addItem('MENU_1');\n        e.menu.addItem('MENU_2');\n        e.menu.addSeparator();\n        e.menu.addItem('MENU_3');\n      }\n    }\n  },\n  extensions: [\n    new tr.ContextMenuExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Basic menu display","tagName":"h3"},{"text":"To show the menu, you need to define menu items in the grid's configuration object. Each menu item is assigned to a name so it can be referenced later at the display time in the onMenu() event handler. onMenu() is an event handler triggered when a user right-clicks at an area on the grid. You can choose to display the menu only at a specific place on the grid by checking the value of e.context.","tagName":"p"},{"text":"var config = {\n        //...any other grid's options...\n    contextMenu: {\n        items: {\n            HEADER: {text: 'Header 1', value: '1', callback: function (e) {\n                // Do something\n                console.log(e.item);\n            }},\n            MENU_1: {text: 'Menu 1', value: '1', callback: function (e) {\n                // Do something\n                console.log(e.item);\n            }},\n            MENU_2: {text: 'Menu 2', value: '2', callback: function (e) {\n                // Do something\n                console.log(e.item);\n            }},\n            MENU_3: {text: 'Menu 3', value: '3', callback: function (e) {\n                // Do something\n                console.log(e.item);\n            }}\n        },\n        onMenu: function (e) {\n            if (e.context === 'header') {\n                e.menu.addItem('HEADER');\n            }\n            if (e.context === 'content') {\n                e.menu.addItem('MENU_1');\n                e.menu.addItem('MENU_2');\n                e.menu.addSeparator();\n                e.menu.addItem('MENU_3');\n            }\n        }\n    }\n};","tagName":"pre"},{"text":"Custom menu display","tagName":"h3"},{"text":"To use the context menu with other UIs, this extension exposes the 'contextmenu' event and provide related information to the event argument for integration. See the example below:","tagName":"p"},{"text":"var config = {\n    //...any other grid's options...\n    contextMenu: true, // Default UI is disabled\n};\nvar cme = new ContextMenu();\ncme.listen(\"contextmenu\", function(e) { \n    console.log(e); \n    // Create your custom pop up menu here\n});","tagName":"pre"},{"text":"Or you can define the context menu event handler directly (see below), which is equivalent to the codes above:","tagName":"p"},{"text":"var config = {\n    //...any other grid's options...\n    contextMenu: function(e) {\n        console.log(e); \n    },\n};","tagName":"pre"},{"text":"Group menu display","tagName":"h3"},{"text":"Several menu items can be grouped together under a name and can be inserted only once into the menu. From the snippet below, all three menus–SORT_ASCENDING, SORT_DESCENDING, and SORT_ORIGINAL–are inserted together.","tagName":"p"},{"text":"var config = {\n    //...any other grid's options...\n    contextMenu: {\n        items: {\n            SORT_ASCENDING: {text: 'Sort Ascending', value: 's'},\n            SORT_DESCENDING: {text: 'Sort Descending', value: 'd'},\n            SORT_ORIGINAL: {text: 'Original Order', value: 'n'},\n            SORTING: [\n                'SORT_ASCENDING',\n                'SORT_DESCENDING',\n                'SORT_ORIGINAL',\n            ]\n        },\n        onMenu: function (e) {\n            if (e.context === 'content') {\n                //Insert the whole group in 1 statement\n                e.menu.addItem('SORTING');\n            }\n        }\n    }\n};","tagName":"pre"},{"text":"Runtime menu disabling","tagName":"h3"},{"text":"You may find you want to disable or hide a menu item for a specific condition. You can do this by adding your condition inside the onMenu() event handler. The event argument of onMenu() contains a reference called items which is pointing back to the menu item definitions in the configuration object. So, you can set a property like isDisabled or isVisible to each menu item before the menu is rendered.","tagName":"p"},{"text":"In the example below, the menu 'Hide Column' is disabled for the first column of the grid.","tagName":"p"},{"text":"var config = {\n    //...any other grid's options...\n    contextMenu: {\n        items: {\n            HIDE_COLUMN: {text: 'Hide Column', value: 'hide'},\n            SHOW_ALL_COLUMNS: {text: 'Show All Columns', value: 'show'}\n        },\n        onMenu: function (e) {\n            if (e.context === 'header') {\n                //isDisabled is `true` when column index is 0\n                e.items.HIDE_COLUMN.isDisabled = (e.colIndex === 0);\n\n                e.menu.addItem('HIDE_COLUMN');\n                e.menu.addItem('SHOW_ALL_COLUMNS');\n            }\n        }\n    }\n};","tagName":"pre"},{"text":"Submenu","tagName":"h3"},{"text":"A multi-level submenu can be added to an item using the items property. With a submenu you can also handle a menu click event at the parent level, to simplify your code.","tagName":"p"},{"text":"var config = {\n    //...any other grid's options...\n    contextMenu: {\n        items: {\n            SET_ROW_COLOR: {text: 'Set Row Color', items: [\n                {text: 'Red', value: '#FF0000'},\n                {text: 'Green', value: '#00FF00'},\n                {text: 'Blue', value: '#0000FF'},\n                {isSeparator: true},\n                {text: 'Clear Color', value: ''}\n            ], callback: function (e) {\n                //Single place of callback handling for all sub-menu item clicking\n                console.log(e.item.getValue());\n            }},\n        },\n        onMenu: function (e) {\n            if (e.context === 'header') {\n                //isDisabled is `true` when column index is 0\n                e.items.HIDE_COLUMN.isDisabled = (e.colIndex === 0);\n\n                e.menu.addItem('HIDE_COLUMN');\n                e.menu.addItem('SHOW_ALL_COLUMNS');\n            }\n        }\n    }\n};","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Context","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"MenuItem","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            text                                                    string                                                                                                                                                                            Text to diplay at the item        ","tagName":"tr"},{"text":"                            value                                                    string | number                                                                                                                                                                            Value attached to the item        ","tagName":"tr"},{"text":"                            isDisabled                                                    boolean                                                                                                                                                                            If true the item will be disabled, default is false        ","tagName":"tr"},{"text":"                            isVisible                                                    boolean                                                                                                                                                                            If false the item will not be displayed, default is true        ","tagName":"tr"},{"text":"                            isSeparator                                                    boolean                                                                                                                                                                            If true the item is rendered as an item separator        ","tagName":"tr"},{"text":"                            items                                                    Array.                                                                                                                                                                            Array of sub-menu items        ","tagName":"tr"},{"text":"ContextMenuPlugin~MenuItem","tagName":"a"},{"text":"                            renderer                                                    function                                                                                                                                                                            Callback function to do custom rendering of the item, see more information in later section        ","tagName":"tr"},{"text":"                            callback                                                    ContextMenuPlugin~MenuItemEventCallback                                                                                                                                                                            Menu item clicked handler function        ","tagName":"tr"},{"text":"ContextMenuPlugin~MenuItemEventCallback","tagName":"a"},{"text":"MenuItemEvent","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            altKey                                                    boolean                                                            Flag to indicate if ALT key is pressed when the mouse is clicked        ","tagName":"tr"},{"text":"                            cell                                                    Object                                                            Cell object at the mouse clicked position        ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                            Index number of the column that the mouse clicked on        ","tagName":"tr"},{"text":"                            columnDef                                                    object                                                            Column Definition of the column that the mouse clicked on        ","tagName":"tr"},{"text":"                            context                                                    ContextMenuPlugin~Context                                                            Area of the grid that the mouse clicked on        ","tagName":"tr"},{"text":"ContextMenuPlugin~Context","tagName":"a"},{"text":"                            ctrlKey                                                    boolean                                                            Flag to indicate if CTRL key is pressed when the mouse is clicked        ","tagName":"tr"},{"text":"                            item                                                    ContextMenuPlugin~MenuItem                                                            The item the mouse is clicked on        ","tagName":"tr"},{"text":"ContextMenuPlugin~MenuItem","tagName":"a"},{"text":"                            items                                                    Object.                                                            Object reference to the menu items under items option        ","tagName":"tr"},{"text":"ContextMenuPlugin~MenuItem","tagName":"a"},{"text":"                            menu                                                    MenuEventAPI                                                            API for adding menu items to be rendered        ","tagName":"tr"},{"text":"MenuEventAPI","tagName":"a"},{"text":"                            rowIndex                                                    number                                                            Index number of the row the mouse clicked on        ","tagName":"tr"},{"text":"                            section                                                    Object                                                            Wrapper(ILayoutGrid) Object of the grid's area the mouse clicked on        ","tagName":"tr"},{"text":"                            shiftKey                                                    boolean                                                            Flag to indicate if SHIFT key is pressed when the mouse is clicked        ","tagName":"tr"},{"text":"MenuItemEventCallback(e)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ContextMenuPlugin~MenuItemEvent","tagName":"a"},{"text":"OnMenuEvent","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            cell                                                    Object                                                            Grid cell object at the mouse clicked position        ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                            Index number of the column that the mouse clicked on        ","tagName":"tr"},{"text":"                            field                                                    string                                                            Field of the column that the mouse clicked on        ","tagName":"tr"},{"text":"                            colId                                                    string                                                            Column ID of the column that the mouse clicked on        ","tagName":"tr"},{"text":"                            context                                                    ContextMenuPlugin~Context                                                            Area of the grid that the mouse clicked on        ","tagName":"tr"},{"text":"ContextMenuPlugin~Context","tagName":"a"},{"text":"                            items                                                    object                                                            Object reference to the menu items under items option        ","tagName":"tr"},{"text":"                            menu                                                    MenuEventAPI                                                            API for adding menu items to be rendered        ","tagName":"tr"},{"text":"MenuEventAPI","tagName":"a"},{"text":"                            rowIndex                                                    number                                                            Index number of the row the mouse clicked on        ","tagName":"tr"},{"text":"                            section                                                    Object                                                            Wraper(ILayoutGrid) Object of the grid's area the mouse clicked on        ","tagName":"tr"},{"text":"                            selectedColumns                                                    Array.                                                            Array of selected indices. Return null, if no selection        ","tagName":"tr"},{"text":"                            selectedRows                                                    Array.                                                            Array of selected indices. Return null, if no selection        ","tagName":"tr"},{"text":"OnMenuEventCallback(e)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ContextMenuPlugin~OnMenuEvent","tagName":"a"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            items                                                    Object.                                                                                                                                                ","tagName":"tr"},{"text":"ContextMenuPlugin~MenuItem","tagName":"a"},{"text":"                            onMenu                                                    ContextMenuPlugin~OnMenuEventCallback                                                                                                                                                                            @ @property {Function=} contextmenu        ","tagName":"tr"},{"text":"ContextMenuPlugin~OnMenuEventCallback","tagName":"a"},{"text":"Methods","tagName":"h3"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getMenuModel() → {Object}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Filter Input","filename":"extensions/tr-grid-filter-input.html","contents":[{"text":"Filter Input","tagName":"h2"},{"text":"The Filter Input Extension provides a search tool for each column that supports text search and custom functions.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"rowNumber\", {\n  type: \"function\",\n  generate: function(info, seed) {\n    return ++info.count;\n  },\n  count: 0,\n});\nvar markets = [\"NYSE\", \"NASDAQ\", \"SET\", \"DJI\", \"HSCEI\", \"HKEX\", \"NIKKEI\"];\nvar fields = [\"rowNumber\", \"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 40 });\nvar configObj = {\n  columns: [{\n      field: fields[0],\n      filterInput: false,\n      width: 40\n    },\n    {\n      name: \"Company\",\n      field: fields[1]\n    },\n    {\n      name: \"Market\",\n      field: fields[2],\n      width: 120,\n      filterInput: {\n        type: \"select\",\n        entries: markets\n      }\n    },\n    {\n      name: \"Last\",\n      field: fields[3],\n      width: 100,\n      filterInput: {\n        type: \"number\"\n      }\n    },\n    {\n      name: \"Net. Chng\",\n      field: fields[4],\n      width: 100,\n      filterInput: {\n        type: \"number\"\n      }\n    },\n    {\n      name: \"Industry\",\n      field: fields[5]\n    }\n  ],\n  rowFiltering: {\n    disabledUI: true\n  },\n  staticDataRows: records,\n  extensions: [\n    new tr.FilterInputExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Required dependencies","tagName":"h3"},{"text":"Details of Required dependencies for this extension are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            defaultLogic                                                    function                                                                                                                                                                                                                    null                                                        Logic for filtering        ","tagName":"tr"},{"text":"                            filterLogic                                                    function                                                                                                                                                                                                                    null                                                        Alias to `defaultLogic`        ","tagName":"tr"},{"text":"                            disabled                                                    boolean                                                                                                                                                                                                                    false                                                        Disable UI        ","tagName":"tr"},{"text":"                            placeholder                                                    string                                                                                                                                                                                                                    \"\"                                                        Placeholder text inside the input        ","tagName":"tr"},{"text":"                            type                                                    string                                                                                                                                                                                                                    \"text\"                                                        Type of UI. Available types are \"number\", \"multiselect\" ,\"select\", \"dropdown\", \"date\"        ","tagName":"tr"},{"text":"                            entries                                                    Array                                                                                                                                                                                                                                        Entries of dropdown filters when type is \"select\"        ","tagName":"tr"},{"text":"                            defaultValue                                                    *                                                                                                                                                                                                                                        Default value of input filter        ","tagName":"tr"},{"text":"                            trigger                                                    string                                                                                                                                                                                                                    \"keyup\"                                                        Available types of trigger are `false | \"\"` (no trigger) , `\"keyup\"` (default) , `\"enter\"` (on enter key *only available for text type)        ","tagName":"tr"},{"text":"FilterLogic()","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            e                                                    Object                                                            Object contains all related information provided by the extension                Properties                        Name                Type                Attributes                        Description                                                    inputText                                                    string                                                                                                                                                                            Text for filter                                                input                                                    Element                                                                                                                                        Input element                                                field                                                    string                                                                                                                                        Field of the column being filtered                                    ","tagName":"tr"},{"text":"Properties","tagName":"h6"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            inputText                                                    string                                                                                                                                                                            Text for filter        ","tagName":"tr"},{"text":"                            input                                                    Element                                                                                                                                        Input element        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                        Field of the column being filtered        ","tagName":"tr"},{"text":"                            rowData                                                    Object                                                            Row Data of the filtered row        ","tagName":"tr"},{"text":"GridColumn","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            filterInput                                                    FilterInputPlugin~ColumnOptions                                                                                                                                                                                                                    null                                                                ","tagName":"tr"},{"text":"FilterInputPlugin~ColumnOptions","tagName":"a"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            inputCreated                                                    function                                                                                                                                                                                                                    null                                                        Handler executed after filter input is created        ","tagName":"tr"},{"text":"                            trigger                                                    string                                                                                                                                                                                                                    \"keyup\"                                                        Available types of trigger are `false | \"\"` (no trigger) , `\"keyup\"` (default) , `\"enter\"` (on enter key *only available for text type)        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"filterColumn(colIndex, text, textMapopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getColumnInput(colIndex) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(out_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"refresh(delayMsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeColumnFilter(colIndexopt)","tagName":"h4"},{"text":"FilterInputPlugin#removeColumnFilters","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"removeColumnFilters(colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setFilterLogic(colIndex, func, ctxopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setInputValue(colIndex, value)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"inputCreated","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            input                                                    Element                                                            Input element        ","tagName":"tr"},{"text":"                            cell                                                    Element                                                                    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            colId                                                    number | null                                                                    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            grid                                                    Object                                                            core grid object        ","tagName":"tr"},{"text":"                            section                                                    Object                                                            Section(ILayoutGrid) contains all of the filter inputs        ","tagName":"tr"}]},{"title":"Heat Map","filename":"extensions/tr-grid-heat-map.html","contents":[{"text":"Heat Map","tagName":"h2"},{"text":"The Heat Map Extension provides heat map coloring for column fields, which will be the type set by the heatMap property.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"volume\", {\n  type: \"number\",\n  min: \"1\",\n  max: \"1001\"\n});\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"volume\", \"PCTCHNG2\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  columns: [{\n      name: \"Company\",\n      field: fields[0]\n    },\n    {\n      name: \"Market\",\n      field: fields[1],\n      width: 120\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 100,\n      heatMap: {\n        mode: \"text\",\n        midPoint: 500\n      }\n    },\n    {\n      name: \"Volume\",\n      field: fields[3],\n      sortBy: fields[3],\n      width: 100,\n      heatMap: {\n        midPoint: 300\n      }\n    },\n    {\n\n      name: \"Pct. Chng\",\n      field: fields[4],\n      sortBy: fields[4],\n      width: 100,\n      heatMap: true\n    }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.HeatMapExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                    Field used by the heat map        ","tagName":"tr"},{"text":"                            heatMap                                                    HeatMapPlugin~Heatmap                                                                                                                                                                                                                    null                                                        Heat map options        ","tagName":"tr"},{"text":"HeatMapPlugin~Heatmap","tagName":"a"},{"text":"Heatmap","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            midPoint                                                    number                                                                                                                                                                                                                    0                                                        Middle point between values representing up and down colors        ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                                                                                                                                                    \"cell\"                                                        In cell mode, heat map color will be applied to the entire cell        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"config(optionsopt, opt_gridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getColumnHeatMap(colIndex, gridopt) → {CellPainter}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnHeatMapOptions(colIndex, optionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"var obj = {\n \"heatMap\": {\n   \"midPoint\": 0, // optional number\n   \"mode\": \"cell\", // optional string\n }\n};","tagName":"pre"},{"text":"getConfigObject(out_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnHeatMap(colIndex, columnDef, opt_gridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"plugin.setColumnHeatMap(1, {\n  \"field\": \"CF_LAST\"\n  \"heatMap\": {\n    \"midPoint\": 0, // optional number\n    \"mode\": \"cell\" // optional string (cell|text)\n  }\n});","tagName":"pre"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"In-Cell Editing","filename":"extensions/tr-grid-in-cell-editing.html","contents":[{"text":"In-Cell Editing","tagName":"h2"},{"text":"The In-Cell Editing Extension provides full editing abilities for your grid, including content and title editing in cell. This means data in each cell can be edited directly.","tagName":"p"},{"text":"Double click on the content cell to open text editor\n\n
                                                                                              \n","tagName":"pre"},{"text":"var inCellEditingExt = new tr.InCellEditingExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  inCellEditing: {\n    editableContent: true // Every column is editable\n  },\n  extensions: [\n    inCellEditingExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 170px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Single click for editing","tagName":"h3"},{"text":"The live demo below demonstrates how to open editor with single click event. In this setting, you do not need to double click to open the editor. You can disable double click mode by setting doubleClick to false then handle it with your own implementation like the following example.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var inCellEditingExt = new tr.InCellEditingExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  inCellEditing: {\n    doubleClick: false\n  },\n  extensions: [\n    inCellEditingExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.addEventListener(\"click\", function(e) {\n  var mousePos = grid.api.getRelativePosition(e);\n  if (mousePos.sectionType == \"content\") {\n    inCellEditingExt.openEditor(mousePos.colIndex, mousePos.rowIndex);\n  }\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 170px;\n}","tagName":"pre"},{"text":"Populating text and data binding","tagName":"h3"},{"text":"By default, In-Cell Editing extension uses cell content as text for populating text on its editor. This works well in basic simple text case. However, when you have custom content, formatted text or different data type other than text, you may want to use raw data instead of text from cell content. For instance, if cell content has a formatted text like \"1,000.00\", you may want to populate the editor with just \"1000\" (without comma or extra formatting). To use raw data instead of cell content for populating text, you can set contentSource to \"field\". ","tagName":"p"},{"text":"Once the editing is completed, you may need to validate the data and convert the data back to its raw form. You can use beforeCommit event dispatched by the extension to validate the data.","tagName":"p"},{"text":"Note: more information about adding event listener can be found on this page","tagName":"p"},{"text":"this page","tagName":"a"},{"text":"Double click on the content cell to open text editor\n\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"number\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5, seed: 0 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 100 },\n    {\n      name: \"Number Content\",\n      field: fields[1],\n      editableContent: true,\n      formatType: {\n        type: \"number\",\n        decimalPlaces: 4,\n        separator: true // Thousands separator\n      }\n    }\n  ],\n  staticDataRows: records,\n  inCellEditing: {\n    contentSource: \"field\",\n    beforeCommit: function(e) {\n      var num = +e.text; // Convert data type of the input from string to number\n      if (num === num) { // Check if string can be converted to number\n        e.text = num;\n      } else { // User entered something other than number\n        e.cancel = true; // Cancel the operation, if NaN value is committed\n      }\n    }\n  },\n  extensions: [\n    new tr.TextFormattingExtension(),\n    new tr.InCellEditingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 170px;\n}","tagName":"pre"},{"text":"Editor types","tagName":"h3"},{"text":"There are 6 editor types you can use to edit your data. They are \"text\", \"number\", \"dropdown\", \"date\", \"checkbox\", and \"combobox\". To change editor type, set inCellEditing on the column configuration to an object with type property. In case of dropdown or combobox, entries property on the object can be used to specified possible item entries.","tagName":"p"},{"text":"Type \"combobox\" also support multiple mode which can be enable by passing multiple to attributes property","tagName":"p"},{"text":"{ \n    name: \"Column Title\", \n    field: \"Column Field\", \n    inCellEditing: {\n        type: \"combobox\",\n        entries: [\"1\", \"2\", \"3\", \"4\"],\n        attributes: {\n            multiple: true\n        }\n    } \n}","tagName":"pre"},{"text":"Note: some basic data type conversion is automatically applied for different editor types.","tagName":"p"},{"text":"Note: each editor, except for simple text input, requires different ELF elements to be loaded. See the list of required dependencies on this page. ","tagName":"p"},{"text":"this page","tagName":"a"},{"text":"\n\n","tagName":"pre"},{"text":"var currencies = [\"AUD\", \"THB\", \"TWD\", \"JPY\", \"USD\"];\ntr.DataGenerator.addFieldInfo(\"currency\", {\n  type: \"set\",\n  members: currencies\n});\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"boolean\", \"date\", \"industry\", \"currency\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5, seed: 0 });\n\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], inCellEditing: { type: \"text\" } },\n    {\n      name: \"Market\",\n      field: fields[1],\n      width: 90,\n      inCellEditing: {\n        type: \"dropdown\",\n        entries: [\"NYSE\", \"NASDAQ\", \"HKEX\", \"SET\"]\n      }\n    },\n    { name: \"Last\", field: fields[2], width: 80, inCellEditing: { type: \"number\" } },\n    { name: \"Boolean\", field: fields[3], width: 70, inCellEditing: { type: \"checkbox\" } },\n    { name: \"Date\", field: fields[4], inCellEditing: { type: \"date\" } },\n    {\n      name: \"Industry\",\n      field: fields[5],\n      inCellEditing: {\n        type: \"combobox\",\n        entries: [\"Specialty Chemicals\", \"Investment Managers\", \"Sample\"]\n      }\n    },\n    {\n      name: \"Currency\",\n      field: fields[6],\n      inCellEditing: {\n        type: \"combobox\",\n        entries: currencies,\n        attributes: {\n          multiple: true\n        }\n      }\n    }\n  ],\n  staticDataRows: records,\n  inCellEditing: {\n    editableContent: true\n  },\n  extensions: [\n    new tr.InCellEditingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 280px;\n}","tagName":"pre"},{"text":"Row editor","tagName":"h3"},{"text":"Use the function openRowEditor(rowIndex) to open the row editor at specific rowIndex. If another editor is open, this function will close that editor without committing changes.","tagName":"p"},{"text":"Use the function closeRowEditor(isCommit) to close an open row editor. If isCommit = true then all changes that have been made will be saved in the row data.","tagName":"p"},{"text":"Use the function toggleRowEditor(rowIndex, isCommit, option_grid) to open row editor at specific rowIndex. If that row already has an editor open, this function will close the row editor instead. If another rowIndex has a row editor open, this function will close that row editor and open a row editor at a specific rowIndex instead. If isCommit = true all changes that have been made will be saved when the row editor closes. It does not have any effect if a row editor was not already open.","tagName":"p"},{"text":"Using the event beforeRowCommit to allow a developer verify the user input before an actual commit process occurs. A developer can mutate the user input or decide to cancel the commit process if the verifying process fails.","tagName":"p"},{"text":"The live demo below demonstrates how to control the row editor with the openRowEditor, closeRowEditor, toggleRowEditor APIs and beforeRowCommit event.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var inCellEditingExt = new tr.InCellEditingExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\n\nvar onClickEditIcon = function(e) {\n  var isCommit = true;\n  var pos = grid.api.getRelativePosition(e);\n  inCellEditingExt.toggleRowEditor(pos.rowIndex, isCommit);\n};\nvar onRenderEditIcon = function(e) {\n  var cell = e.cell;\n  var icon = cell.getContent(); // Utilize caching\n  if (!icon || !icon._editIcon) {\n    icon = document.createElement(\"span\");\n    icon._editIcon = true;\n    icon.textContent = \"✎\";\n    icon.style = \"cursor: pointer\";\n    icon.addEventListener(\"click\", onClickEditIcon);\n  }\n  cell.setContent(icon);\n};\n\nvar configObj = {\n  columns: [\n    { width: 30, editableContent: false, binding: onRenderEditIcon },\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100, editableContent: false },\n    { name: \"Industry\", field: fields[4], editableContent: false }\n  ],\n  staticDataRows: records,\n  inCellEditing: {\n    editableContent: true,\n    doubleClick: false,\n    beforeRowCommit: function(e) {\n      var fieldValue = e.fieldValue;\n      for (var field in fieldValue) {\n        if (!fieldValue.hasOwnProperty(field)) continue;\n        var value = fieldValue[field];\n        if (typeof value === \"string\" && value.length === 0) {\n          fieldValue[field] = \"commited\"; // you also can modify value\n        }\n      }\n      // e.cancel = true; // you can cancel the commit process but rowEditor will continue closing, anyway.\n    }\n  },\n  extensions: [\n    inCellEditingExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 170px;\n}","tagName":"pre"},{"text":"Custom cell editor","tagName":"h3"},{"text":"Apart from the default and predefined editors, a custom editor can be easily created by implementing it from the event editorOpened. Since the custom editor is not directly wired to the extension, you will need to commit user input through commitText API. ","tagName":"p"},{"text":"The example below show how to create an editor with yes, no and none options. Note that the predefined \"dropdown\" editor can be used instead of the custom editor shown in this example. ","tagName":"p"},{"text":"\n","tagName":"pre"},{"text":"var extension = new tr.InCellEditingExtension();\nvar onEditorOpened = function(e) {\n  var ed = e.editor;\n\n  while (ed.lastChild) {\n    ed.removeChild(ed.lastChild);\n  }\n\n  var elem;\n  if (e.colIndex === 2) {\n    elem = ed.selectButton;\n\n    if (!elem) {\n      elem = ed.selectButton = document.createElement(\"select\");\n      elem.style.width = \"100%\";\n      elem.style.height = \"100%\";\n      elem.style.maxHeight = \"unset\";\n\n      var items = [\"true\", \"false\", \"none\"];\n      for (var i = 0; i < items.length; ++i) {\n        var opt = document.createElement(\"option\");\n        opt.textContent = opt.value = items[i];\n        elem.appendChild(opt);\n      }\n\n      elem.addEventListener(\"change\", function(e) {\n        var tgt = e.currentTarget;\n        var selectedItem = tgt.options[tgt.selectedIndex];\n        var selectedValue = selectedItem.value;\n        extension.commitText(selectedValue);\n      });\n    }\n\n    elem.value = e[\"initialText\"];\n  } else {\n    elem = e.inputElement;\n  }\n\n  ed.appendChild(elem);\n};\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"boolean\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market (editable)\", field: fields[1], width: 150, editableContent: true },\n    { name: \"Watch (editable)\", field: fields[5], with: 150, editableContent: true },\n    { name: \"Last\", field: fields[2], width: 150 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  inCellEditing: {\n    editableTitle: false,\n    editorOpened: onEditorOpened,\n    balloonMode: true\n  },\n  extensions: [\n    extension\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Cache","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            editor                                                    Element                                                            Container element of input.        ","tagName":"tr"},{"text":"                            balloonPopup                                                    Element                                                            balloon popup. It contains balloon element inside.        ","tagName":"tr"},{"text":"                            inputElement                                                    Element                                                            Input element such as text input, numeric stepper, date-time picker.        ","tagName":"tr"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            editableContent                                                    boolean                                                                                                                                                                                                                    false                                                        Make the column editable by double click        ","tagName":"tr"},{"text":"                            inCellEditing                                                    InCellEditingPlugin~EditorOptions                                                                                                                                                                                                                                        Editor options give more refinements, such as \"type\" for specific editor type or \"entries\" for dropdown box        ","tagName":"tr"},{"text":"InCellEditingPlugin~EditorOptions","tagName":"a"},{"text":"EditorOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            type                                                    string                                                                                                                                                                                                                    \"text\"                                                        Specify type of the editor. Available types are text, number, dropdown, date, checkbox, and combobox.        ","tagName":"tr"},{"text":"                            entries                                                    Array                                                                                                                                                                                                                    null                                                        Specify list of items available in the dropdown box        ","tagName":"tr"},{"text":"                            attributes                                                    Object                                                                                                                                                                                                                    null                                                        Specify attribute of input element        ","tagName":"tr"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            balloonMode                                                    boolean                                                                                                                                                                                                                    false                                                        Show editor in a balloon. This is useful when there is not much space in the cell        ","tagName":"tr"},{"text":"                            editableTitle                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, all column headers can be edited by double click        ","tagName":"tr"},{"text":"                            editableContent                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, all content cells can be edited by double click. This can be overridden individual column configuration.        ","tagName":"tr"},{"text":"                            autoCommitText                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the text will be committed even if user leaving editor midway        ","tagName":"tr"},{"text":"                            dataBinding                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, text will not be updated in the grid's data table        ","tagName":"tr"},{"text":"                            popupElement                                                    Element                                                                                                                                                                                                                    null                                                        Element to be attached under the editor        ","tagName":"tr"},{"text":"                            doubleClick                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, double click will not trigger editor        ","tagName":"tr"},{"text":"                            tabToMove                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, pressing tab key while editor is active will open editor on the next editable cell.        ","tagName":"tr"},{"text":"                            contentSource                                                    string                                                                                                                                                                                                                    \"textContent\"                                                        By default, the text in the editor will be populated with textContent of the target cell. Use \"field\" to populated data from grid's data model. Use \"empty\" to shows empty editor.        ","tagName":"tr"},{"text":"                            inlineStyling                                                    boolean                                                                                                                                                                                                                    false                                                        force inline styles regardless of elf version.        ","tagName":"tr"},{"text":"                            disablingScroll                                                    boolean                                                                                                                                                                                                                    false                                                        Scrollbar will be frozen when editor opened. Deprecated in favor of uiBlocking        ","tagName":"tr"},{"text":"                            uiBlocking                                                    boolean                                                                                                                                                                                                                    false                                                        append transparent overlay to block ui interaction        ","tagName":"tr"},{"text":"                            preEditorOpening                                                    function                                                                                                                                                                                                                    null                                                        Handler before editor is opened        ","tagName":"tr"},{"text":"                            editorOpened                                                    function                                                                                                                                                                                                                    null                                                        Handler after editor is opened        ","tagName":"tr"},{"text":"                            beforeCommit                                                    function                                                                                                                                                                                                                    null                                                        Handler before data binding, allowing data type conversion        ","tagName":"tr"},{"text":"                            editorClosed                                                    function                                                                                                                                                                                                                    null                                                        Handler after editor is closed        ","tagName":"tr"},{"text":"                            keyUp                                                    function                                                                                                                                                                                                                    null                                                        Handler for each keyup of the input text box        ","tagName":"tr"},{"text":"                            beforeRowCommit                                                    function                                                                                                                                                                                                                    null                                                        Handler before committing from all editors in the row        ","tagName":"tr"},{"text":"                            rowEditorClosed                                                    function                                                                                                                                                                                                                    null                                                        Handler after closing of all editors        ","tagName":"tr"},{"text":"                            autoSuggest                                                    Element                                                                                                                                                                                                                    null                                                        Element of emerald-autosuggest or atlas-autosuggest for handled with input cell        ","tagName":"tr"},{"text":"                            closingOnScroll                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the editor will not be automatically closed when scrolling grid.        ","tagName":"tr"},{"text":"                            autoHiding                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the editor will not be automatically closed when losing its focus.        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"_getRowId(rowIndex) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"_getRowIndex(rowId) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"appendText(word)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"beforeProcessOption(optionName, optionVal) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"clearText()","tagName":"h4"},{"text":"closeCellEditor(opt_forceCommitopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"closeRowEditor(isCommitopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"InCellEditingPlugin#event:beforeRowCommit","tagName":"a"},{"text":"InCellEditingPlugin#event:rowEditorClosed","tagName":"a"},{"text":"commitText(wordopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableCellEditing(cell, opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableDataBinding(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableDblClick(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableTitleEditing(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableAutoCommitText(opt_enableopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableBalloonMode(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableTitleEditing(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getActiveColIndex() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getActiveGrid() → {Object|null}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getActiveRowIndex() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAutoSuggest() → {Element}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getBalloonPopup() → {Popup|null}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(out_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getInitialText() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getInputElementPosition() → {Object}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getText() → {string}","tagName":"h4"},{"text":"InCellEditingPlugin#getValue","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getTextBox(columnIndexopt, gridopt) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getValue() → {*}","tagName":"h4"},{"text":"InCellEditingPlugin#getText","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isColumnEditable(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isEditing() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"openEditor(colIndex, rowIndex, sectionRefopt, gridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"InCellEditingPlugin#event:editorOpened","tagName":"a"},{"text":"openRowEditor(rowIndex, gridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"requestShowEditorPopup()","tagName":"h4"},{"text":"setDisablingScroll(disabledopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setPopupElement(elm)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setText(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"toggleRowEditor(rowIndex, isCommitopt, gridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"InCellEditingPlugin#event:beforeRowCommit","tagName":"a"},{"text":"InCellEditingPlugin#event:rowEditorClosed","tagName":"a"},{"text":"unload()","tagName":"h4"},{"text":"Events","tagName":"h3"},{"text":"beforeCommit","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            text                                                    string                                                                                                                                                                            Text that user has entered        ","tagName":"tr"},{"text":"                            cancel                                                    boolean                                                                                                                                                                            Set to true to cancel the commit operation.        ","tagName":"tr"},{"text":"                            groupHeader                                                    boolean                                                                                                                                                                            This value is set to true if the editing row is a group header.        ","tagName":"tr"},{"text":"                            segmentSeparator                                                    boolean                                                                                                                                                                            This value is set to true if the editing row is a segment separator.        ","tagName":"tr"},{"text":"                            suggestionDetail                                                    Object                                                                                                                                        Suggestion detail for auto suggest \"item-select\" event        ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"var cep = new InCellEditingPlugin();\ncep.listen(\"beforeCommit\", function(e) {\n  var num = +e.text; // Cast input type to number\n  if(num === num) { // Check if string can be converted to number\n    e.text = num; // Modify user input and continue commit operation (i.e. set data back to grid model)\n  } else { // User entered something other than number\n    e.cancel = true; // Cancel the commiting process\n  }\n});","tagName":"pre"},{"text":"beforeRowCommit","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            grid                                                    Object                                                                                                                                        core grid instance        ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                                                                                        row index that editor placed.        ","tagName":"tr"},{"text":"                            rowId                                                    number                                                                                                                                        row id, It's better to use row id as a reference to collect data.        ","tagName":"tr"},{"text":"                            fieldValue                                                    object                                                                                                                                        object that contain text in each field        ","tagName":"tr"},{"text":"                            cancel                                                    boolean                                                                                                                                                                            Set to true to cancel the commit operation.        ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"var cep = new InCellEditingPlugin();\ncep.listen(\"beforeRowCommit\", function(e) {\n        var fieldValue = e.fieldValue;\n        for (var field in fieldValue) {\n            if (!fieldValue.hasOwnProperty(field)) continue;\n            var value = fieldValue[field];\n            if (checkValid(value)) { // check value is valid\n                fieldValue[field] = value + \"foo bar\"; // modify text\n            } else {\n                e.cancel = true; // if not valid maybe cancel commit\n                break;\n            }\n        }\n});","tagName":"pre"},{"text":"editorClosed","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            text                                                    string                                                                                                                                                                            Text that user has entered        ","tagName":"tr"},{"text":"                            groupHeader                                                    boolean                                                                                                                                                                            This value is set to true if the editing row is a group header.        ","tagName":"tr"},{"text":"                            segmentSeparator                                                    boolean                                                                                                                                                                            This value is set to true if the editing row is a segment separator.        ","tagName":"tr"},{"text":"                            suggestionDetail                                                    Object                                                                                                                                        Suggestion detail for auto suggest \"item-select\" event        ","tagName":"tr"},{"text":"                            cancelled                                                    boolean                                                                                                                                        Readonly flag. Indicates whether the commit operation has been cancelled        ","tagName":"tr"},{"text":"                            committed                                                    boolean                                                                                                                                        Readonly flag. The opposite of `cancelled` flag        ","tagName":"tr"},{"text":"editorOpened","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            dataSource                                                    Object                                                            DataView        ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            field                                                    string                                                                    ","tagName":"tr"},{"text":"                            inputElement                                                    Element                                                                    ","tagName":"tr"},{"text":"                            autoSuggest                                                    Element                                                            emerald-autosuggest or atlas-autosuggest        ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"var cep = new InCellEditingPlugin();\ncep.listen(\"editorOpened\", function(e) {\n  var data = e.dataSource.getDataAt(e.rowIndex, e.field);\n  e.inputElement.value = data + \" aaa\";\n});","tagName":"pre"},{"text":"keyUp","tagName":"h4"},{"text":"preEditorOpening","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            cancel                                                    boolean                                                                                                                                                                            Set to true to cancel the openning operation.        ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"var cep = new InCellEditingPlugin();\ncep.listen(\"preEditorOpening\", function(e) {\n  e[\"cancel\"] = true; // Cancel the editing process\n});","tagName":"pre"},{"text":"rowEditorClosed","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                            index of row        ","tagName":"tr"},{"text":"                            committed                                                    boolean                                                            Indicates whether the commit operation has been done or not.        ","tagName":"tr"},{"text":"                            grid                                                    Object                                                            grid instance        ","tagName":"tr"},{"text":"                            fieldValue                                                    Object                                                            object that contain text in each field        ","tagName":"tr"}]},{"title":"Pagination","filename":"extensions/tr-grid-pagination.html","contents":[{"text":"Pagination","tagName":"h2"},{"text":"The Pagination Extension provides behaviors that allow you to split a huge amount of content within your grid into smaller parts. This extension is for client side pagination, where all data is already available at the client side. For server side pagination, see our pagination usage guide. ","tagName":"p"},{"text":"pagination usage guide","tagName":"a"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"rowNumber\", {\n  type: \"function\",\n  generate: function(info, seed) {\n    return ++info.count;\n  },\n  count: 0,\n});\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"rowNumber\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  columns: [\n    { name: \"ID\", field: fields[5], alignment: \"center\", width: 40 },\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  pagination: {\n    element: document.getElementById(\"pagination\"),\n    page: 1,\n    pageSize: 5\n  },\n  extensions: [\n    new tr.PaginationExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}\n\nemerald-pagination {\n  margin-bottom: 30px;\n}","tagName":"pre"},{"text":"Note: If there is only one pagination element in the document, the extension is capable of finding the element automatically. However, if there are multiple pagination elements in a document, it is necessary to specify the element into the element field of pagination's configuration.","tagName":"p"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Required dependencies","tagName":"h3"},{"text":"Details of Required dependencies for this extension are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Performing additional tasks after page change","tagName":"h3"},{"text":"After each page change, you can do some custom tasks by specifying event handler to pageChanged property of the extension configuration object, like so:","tagName":"p"},{"text":"var onPageChanged = function(e) {\n    console.log(\"Page is changed to \" + e.page);\n};\nvar configObj = {\n    // ...\n    pagination: {\n        element: \"elem_id\",\n        page: 1,\n        pageSize: 5,\n        pageChanged: onPageChanged\n    },\n    // ...\n};","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            page                                                    number                                                                                                                                                                                                                    1                                                        Initial page to be shown        ","tagName":"tr"},{"text":"                            pageSize                                                    number                                                                                                                                                                                                                    10                                                        Number of rows per page        ","tagName":"tr"},{"text":"                            element                                                    string | Element                                                                                                                                                                                                                                        A reference to pagination element. This can be a direct pointer or element's id        ","tagName":"tr"},{"text":"                            elements                                                    Array                                                                                                                                                                                                                    null                                                        Multiple references can be linked to a single grid        ","tagName":"tr"},{"text":"                            pageChanged                                                    function                                                                                                                                                                                                                    null                                                        Event handler for event after page has been changed        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"beforeProcessOption(optionName, options) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"first()","tagName":"h4"},{"text":"getConfigObject(out_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPageCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPageIndex() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPageSize() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTotalRows() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"goto(pageIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"last()","tagName":"h4"},{"text":"next()","tagName":"h4"},{"text":"previous()","tagName":"h4"},{"text":"setElement(elemRefopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setPage(page)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setPageSize(size)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"pageChanged","tagName":"h4"}]},{"title":"Percent Bar","filename":"extensions/tr-grid-percent-bar.html","contents":[{"text":"Percent Bar","tagName":"h2"},{"text":"The Percent Bar Extension is an extension that provides formatter for rendering percent bar in column.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 150, percentBar: { alignment: \"l\" } },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.PercentBarExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Update movement color theme","tagName":"h3"},{"text":"Call the reloadThemeColor function to update the theme color after the movement color theme has changed.","tagName":"p"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            percentBar                                                    PercentBarPlugin~PercentBarOptions | boolean                                                                                                                                                                                    ","tagName":"tr"},{"text":"PercentBarPlugin~PercentBarOptions","tagName":"a"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            padding                                                    number                                                                                                                                                                                                                    8                                                        Extra space added to max width from autoTextSizing calculation        ","tagName":"tr"},{"text":"                            percentageLabel                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the value will not convert into percent format        ","tagName":"tr"},{"text":"                            autoTextSizing                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, text space will be fixed.        ","tagName":"tr"},{"text":"                            autoFitting                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, text space will be auto adjusted. Otherwise, text space will stay extended to the longest length        ","tagName":"tr"},{"text":"                            zeroValueHidden                                                    boolean                                                                                                                                                                                                                    false                                                        If this option is enabled and the percentage value is zero, percent bar and its label will be hidden        ","tagName":"tr"},{"text":"PercentBarOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                                                                                                                                                    \"\"                                                        Fixate percent bar alignment. By default, percent bar alignment will be changed according to grid column alignment.        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                                    THIS_COLUMN                                                        Data field        ","tagName":"tr"},{"text":"                            textHidden                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, displays percent bar only        ","tagName":"tr"},{"text":"                            textWidth                                                    number | string                                                                                                                                                                                                                                        If specified, percent bar text will have fixed width        ","tagName":"tr"},{"text":"                            useMovementColor                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, percent bar will not use up and down colors        ","tagName":"tr"},{"text":"                            barColor                                                    string                                                                                                                                                                                                                    \"\"                                                        Custom color for bar element. This will override the useMovementColor        ","tagName":"tr"},{"text":"                            padding                                                    number                                                                                                                                                                                                                    8                                                        Extra space added to max width from autoTextSizing calculation        ","tagName":"tr"},{"text":"                            percentageLabel                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the value will not convert into percent format        ","tagName":"tr"},{"text":"                            autoTextSizing                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, text space will be fixed        ","tagName":"tr"},{"text":"                            autoFitting                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, text space will be auto adjusted. Otherwise, text space will stay extended to the longest length        ","tagName":"tr"},{"text":"                            zeroValueHidden                                                    boolean                                                                                                                                                                                                                    false                                                        If this option is enabled and the percentage value is zero, percent bar and its label will be hidden        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"_afterInit()","tagName":"h4"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getColumnConfigObject(colIndex, out_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(out_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"reloadThemeColors() → {Promise.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnPercentBar(colIndex, columnOptions)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"PercentBarPlugin~ColumnOptions","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"ext.setColumnPercentBar(colIndex, { \"percentBar\": true });\next.setColumnPercentBar(colIndex, {\n  \"percentBar\": {\n    \"alignment\": \"r\",\n    \"field\": \"PCT_CHNG\",\n    \"textHidden\": true,\n    \"textWidth\": 80\n  }\n});\next.setColumnPercentBar(colIndex, null);","tagName":"pre"},{"text":"setPercentBarAlignment(colIndex, alignment)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Range Bar","filename":"extensions/tr-grid-range-bar.html","contents":[{"text":"Range Bar","tagName":"h2"},{"text":"The Range Bar Extension provides graphical bar for last value ranking visualization based on low and high value.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"id\", \"CFLOW\", \"CF_LAST\", \"CFHIGH\", \"percent\"];\nvar records = [];\n\nvar rangeBarExt = new tr.RangeBarExtension();\n\nvar id = 0;\nfor (let i = -150; i < 151; i += 10) {\n  records.push({\n    id: id++,\n    CFLOW: -100,\n    CF_LAST: i,\n    CFHIGH: 100,\n    percent: i\n  });\n}\n\n// N/A Case and without top value\nrecords.push({\n  id: records.length,\n  CFLOW: undefined,\n  CF_LAST: undefined,\n  CFHIGH: undefined,\n  percent: undefined\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: undefined, // without middle value\n  CFHIGH: 50,\n  percent: undefined\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: undefined,\n  CF_LAST: 5,\n  CFHIGH: 50,\n  percent: 5\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 3,\n  CF_LAST: 5,\n  CFHIGH: undefined,\n  percent: 5\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: undefined,\n  CF_LAST: 5,\n  CFHIGH: undefined,\n  percent: 5\n});\n\n// Low_value \n\n","tagName":"pre"},{"text":"var rangeBarExt = new tr.RangeBarExtension();\n\nvar columns = [{\n    field: \"id\",\n    name: \"id\"\n  },\n  {\n    field: \"CF_LOW\",\n    name: \"LOW\"\n  },\n  {\n    field: \"CF_HIGH\",\n    name: \"HIGH\"\n  },\n  {\n    field: \"CF_LAST\",\n    name: \"LAST\"\n  },\n  {\n    field: \"CF_CLOSE\",\n    name: \"CLOSE\"\n  },\n  {\n    field: \"TR.TSVWAP\",\n    name: \"VWAP\"\n  },\n  {\n    field: \"CF_TICK\",\n    name: \"TICK\"\n  },\n  {\n    name: \"Price Graph(Low, Last, High, Close, VWAP)\",\n    alignment: \"c\",\n    rangeBar: {\n      low: \"CF_LOW\",\n      high: \"CF_HIGH\",\n      last: \"CF_LAST\",\n      close: \"CF_CLOSE\",\n      vwap: \"TR.TSVWAP\",\n      tick: \"CF_TICK\",\n    },\n    width: 200\n  }\n];\n\nvar records = [];\n\nfor (var i = 0; i < 10; i++) {\n  var values = {\n    CF_LOW: 5,\n    CF_HIGH: 100,\n    \"TR.TSVWAP\": 30,\n    CF_LAST: 50,\n    CF_CLOSE: i * 10,\n    CF_TICK: 1\n  };\n  records.push(values);\n}\n\nfor (var i = 0; i < 10; i++) {\n  var values = {\n    CF_LOW: 5,\n    CF_HIGH: 100,\n    \"TR.TSVWAP\": 30,\n    CF_LAST: 50,\n    CF_CLOSE: i * 10,\n    CF_TICK: 2\n  };\n  records.push(values);\n}\n\n// N/A Cases\nrecords.push({\n  CF_LOW: 5,\n  \"TR.TSVWAP\": 20,\n  CF_LAST: 50,\n  CF_CLOSE: 5,\n  CF_TICK: 2\n});\nrecords.push({\n  CF_LOW: 200,\n  CF_HIGH: 100,\n  \"TR.TSVWAP\": 20,\n  CF_LAST: 50,\n  CF_CLOSE: 5,\n  CF_TICK: 2\n});\n\nrecords.push({\n  CF_LOW: 5,\n  CF_HIGH: 100,\n  \"TR.TSVWAP\": 49,\n  CF_LAST: 50,\n  CF_CLOSE: 5,\n  CF_TICK: 2\n});\n\nrecords = records.map(function(obj, index) {\n  obj[\"id\"] = index;\n  return obj;\n})\n\nvar configObj = {\n  scrollbar: true,\n  columns: columns,\n  staticDataRows: records,\n  extensions: [\n    rangeBarExt\n  ],\n};\n\nvar grid = window.grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 208px;\n}","tagName":"pre"},{"text":"With Custom Tooltip","tagName":"h3"},{"text":"If you want to use a customized tooltip for the range bar, you can use it with disabled the rangeBar default tooltip with option and adding a tooltip condition.For adding condition of tooltip you can import addConditionTooltip from the tooltip dependency and use it with pass condition and renderer function, following in the example below.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"id\", \"CFLOW\", \"CF_LAST\", \"CFHIGH\", \"percent\"];\nvar records = [];\n\nvar rangeBarExt = new tr.RangeBarExtension();\n\nvar id = 0;\nfor (let i = -150; i < 151; i += 10) {\n  records.push({\n    id: id++,\n    CFLOW: -100,\n    CF_LAST: i,\n    CFHIGH: 100,\n    percent: i\n  });\n}\n\n// N/A Case and without top value\nrecords.push({\n  id: records.length,\n  CFLOW: undefined,\n  CF_LAST: undefined,\n  CFHIGH: undefined,\n  percent: undefined\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: undefined, // without middle value\n  CFHIGH: 50,\n  percent: undefined\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: undefined,\n  CF_LAST: 5,\n  CFHIGH: 50,\n  percent: 5\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 3,\n  CF_LAST: 5,\n  CFHIGH: undefined,\n  percent: 5\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: undefined,\n  CF_LAST: 5,\n  CFHIGH: undefined,\n  percent: 5\n});\n\n// Low_value                                                                                     Range definition object        ","tagName":"tr"},{"text":"RangeBarPlugin~RangeDefinition","tagName":"a"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            tooltip                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, it will be doesn't show tooltip when mouse hover sapphire-led-gauge        ","tagName":"tr"},{"text":"RangeDefinition","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                                    THIS_COLUMN                                                        Field used as percentage. If specified, `low`, `high`, and `last` fields will be ignored.        ","tagName":"tr"},{"text":"                            start                                                    number                                                                                                                                                                                                                    0                                                        minimum value used with percentage `field`        ","tagName":"tr"},{"text":"                            end                                                    number                                                                                                                                                                                                                    100                                                        maximum value used with percentage `field`        ","tagName":"tr"},{"text":"                            low                                                    string                                                                                                                                                                                                                    \"\"                                                        Field used as minimum range        ","tagName":"tr"},{"text":"                            high                                                    string                                                                                                                                                                                                                    \"\"                                                        Field used as maximum range        ","tagName":"tr"},{"text":"                            last                                                    string                                                                                                                                                                                                                    \"\"                                                        Field used as current absolute value (white bar)        ","tagName":"tr"},{"text":"                            vwap                                                    string                                                                                                                                                                                                                    \"\"                                                        Field used as volume weighted average price (VWAP)        ","tagName":"tr"},{"text":"                            close                                                    string                                                                                                                                                                                                                    \"\"                                                        Field used as close price        ","tagName":"tr"},{"text":"                            tick                                                    string                                                                                                                                                                                                                    \"\"                                                        Field used as tick color        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getColumnConfigObject(colIndex, out_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(out_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTooltipText(colRef, rowRef) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getValue(colRef, rowRef) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isRangeBarColumn(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Row Dragging","filename":"extensions/tr-grid-row-dragging.html","contents":[{"text":"Row Dragging","tagName":"h2"},{"text":"The Row Dragging Extension allows the user to drag and reorder selected rows.","tagName":"p"},{"text":"\n\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"id\", \"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { field: fields[0], width: 30, alignment: \"center\" },\n    { name: \"Company\", field: fields[1] },\n    { name: \"Market\", field: fields[2], width: 120 },\n    { name: \"Last\", field: fields[3], width: 100 },\n    { name: \"Net. Chng\", field: fields[4], width: 100 },\n    { name: \"Industry\", field: fields[5] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.RowDraggingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"get_btn\").addEventListener(\"click\", function(e) {\n  var rows = grid.api.getMultipleRowData(); // Get all row definitions\n  var colData = rows.map(function getIdAndCompanyName(rowData) {\n    return rowData[\"id\"] + \": \" + rowData[\"companyName\"];\n  });\n  alert(colData.join(\"\\n\"));\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 308px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Custom dragbox","tagName":"h3"},{"text":"This allows users to customize the dragBox by providing a dragBoxRenderer option. It is not enabled initially.","tagName":"p"},{"text":"var gridConfig = {\n    ...\n    columns: [\n        { name: \"Column 1\", field: \"col1\" },\n        { name: \"Column 2\", field: \"col2\" },\n        { name: \"Column 3\", field: \"col3\" },\n        { name: \"Column 4\", field: \"col4\" },\n    ],\n    rowDragging: {\n        dragBoxRenderer: function(e) {\n            e.dragBox.textContent = e.dataRow.col1;\n        }\n    }\n    ...\n}","tagName":"pre"},{"text":"Drag and drop content outside grid's area","tagName":"h3"},{"text":"The Row Dragging Extension can be used together with the RowSelectionPlugin to allow users to drag a selected row and drop it to a target outside of a Grid. Then, add dragEnd handler to perform content copying of the selected rows as illustrated below:","tagName":"p"},{"text":"\n\n\n","tagName":"pre"},{"text":"function onDragEnd(e) {\n  var dropTargetEl = document.getElementById(\"drop_target\");\n  if (e.dropTarget !== dropTargetEl) {\n    return;\n  }\n  var rowSelectionExt = e.srcGrid.getPlugin(\"RowSelectionPlugin\");\n  var rowIndices = rowSelectionExt.getSelectedRows();\n\n  var text = \"No Selected Row\";\n  if (rowIndices) {\n    var rows = grid.api.getMultipleRowData(rowIndices);\n    text = JSON.stringify(rows, function replacer(key, val) {\n      if (key === \"ROW_DEF\") { // Exclude Row definition reference\n        return;\n      }\n      return val;\n    }, 2)\n  }\n  dropTargetEl.value = text;\n}\n\nvar fields = [\"id\", \"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { field: fields[0], width: 30, alignment: \"center\" },\n    { name: \"Company\", field: fields[1] },\n    { name: \"Market\", field: fields[2], width: 120 },\n    { name: \"Last\", field: fields[3], width: 100 },\n    { name: \"Net. Chng\", field: fields[4], width: 100 },\n    { name: \"Industry\", field: fields[5] }\n  ],\n  staticDataRows: records,\n  rowDragging: {\n    autoScroll: false,\n    dragEnd: onDragEnd\n  },\n  extensions: [\n    new tr.RowSelectionExtension(), new tr.RowDraggingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 308px;\n}\n\n#drop_target {\n  width: 100%;\n  height: 100px;\n}","tagName":"pre"},{"text":"Forbidden drag and drop behavior","tagName":"h3"},{"text":"The Row Dragging extension has a default behavior for row dragging, which is accompanied by a void icon when a user attempts to drag a row to another location. However, there are certain restrictions in place that forbidden the dragging of certain row types to other locations. For instance, some row types cannot be dragged, while others cannot be dragged to certain areas. To ensure seamless navigation, it is essential to be mindful of these restrictions. Therefore, we have compiled a list of available Row Types, which can be found in the table below.","tagName":"p"},{"text":"Row Types","tagName":"a"},{"text":"\nFrom/To Row types\nCONTENT\nCHAIN\nCONSTITUENT\nGROUP_HEADER\nGROUP_MEMBER\nSUBGROUP_HEADER\n","tagName":"tr"},{"text":"\nCONTENT\n✓\n✓\n✗\n✓\n✓\n✗\n","tagName":"tr"},{"text":"\nCHAIN\n✓\n✓\n✗\n✓\n✗\n✗\n","tagName":"tr"},{"text":"\nCONSTITUENT\n✗\n✗\n✗\n✗\n✗\n✗\n","tagName":"tr"},{"text":"\nGROUP_HEADER\n✓\n✓\n✗\n✓\n✗\n✗\n","tagName":"tr"},{"text":"\nGROUP_MEMBER\n✓\n✓\n✗\n✓\n✓\n✗\n","tagName":"tr"},{"text":"\nSUBGROUP_HEADER\n✗\n✗\n✗\n✗\n✗\n✗\n","tagName":"tr"},{"text":"Note: Members of the SUBGROUP_HEADER type can only be moved within their group.","tagName":"p"},{"text":"Migrating from built-in column grouping","tagName":"h3"},{"text":"Due to the built-in libraries being migrated out from the Core Grid to extensions, built-in column grouping will be deprecated and will no longer be maintained.","tagName":"p"},{"text":"The differences between the legacy (built-in) version of Row Dragging and the new extension can be seen in the examples below","tagName":"p"},{"text":"Note: The Row Dragging Extension is backward compatible with the old built-in (with some breaking changes). Therefore, the new implementation is recommended.","tagName":"p"},{"text":"Built-in","tagName":"h4"},{"text":"var gridConfig = {\n    ...\n    rowReorder: {\n        dragBoxRenderer: function (dragEvent, dragBox, dataRows) {\n            dragBox.setContent(\"test\");\n        }\n    },\n    ...\n}","tagName":"pre"},{"text":"New extension","tagName":"h4"},{"text":"var gridConfig = {\n    ...\n    rowDragging: {\n        dragBoxRenderer: function (e) {\n            // e.dragBox\n            // e.dataRows\n            e.dragBox.textContent = \"test\";\n        }\n    },\n    ...\n}","tagName":"pre"},{"text":"For the new implementation, you need to change to the rowDragging option. And the dragBoxRenderer receives an event only as an argument.","tagName":"p"},{"text":"API Reference","tagName":"h2"},{"text":"Members","tagName":"h3"},{"text":"_pos","tagName":"h4"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            dragBox                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, information box will be shown during the drag        ","tagName":"tr"},{"text":"                            disabled                                                    boolean                                                                                                                                                                                                                    false                                                        A flag to turn off UIs, while events will still be dispatched. If enabled, guileline and drag box will be hidden. autoScroll will also be turned off.        ","tagName":"tr"},{"text":"                            mouseInput                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, mousemove/mousedown will not trigger the drag operation.        ","tagName":"tr"},{"text":"                            dataTransfer                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, internal row data will not be moved at the end of the drag operation.        ","tagName":"tr"},{"text":"                            autoScroll                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, grid will not be verticallly scrolled when mouse is hovering around the edges of the grid.        ","tagName":"tr"},{"text":"                            dragBoxRenderer                                                    function                                                                                                                                                                                                                                        Allow user to customize dragBox        ","tagName":"tr"},{"text":"                            dragStart                                                    function                                                                                                                                                                                                                    null                                                        Function handler for dragStart event        ","tagName":"tr"},{"text":"                            drag                                                    function                                                                                                                                                                                                                    null                                                        Function handler for drag event        ","tagName":"tr"},{"text":"                            dragEnd                                                    function                                                                                                                                                                                                                    null                                                        Function handler for dragEnd event        ","tagName":"tr"},{"text":"                            dataMoved                                                    function                                                                                                                                                                                                                    null                                                        Function handler for dataMoved event        ","tagName":"tr"},{"text":"                            beforeDataMoved                                                    function                                                                                                                                                                                                                    null                                                        Function handler for beforeDataMoved event        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"allowDrag(allowedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"allowDrop(allowedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"cancelDrag()","tagName":"h4"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disable(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDraggingPlugin#disable","tagName":"a"},{"text":"disableDragging(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableUIs(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowDraggingPlugin#disable","tagName":"a"},{"text":"enableJETDragAndDrop(enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getConfigObject(out_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDragBox() → {Element}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDragSource() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGuideline() → {Element}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getJETDragContent() → {Object}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isDisabled() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"isDragging() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"setDragContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setJETDragContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setJETDragContent(content)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"startDrag(startRefopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"stopDrag()","tagName":"h4"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"beforeDataMoved","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            srcRowIndices                                                    Array.                                                            row indices of the selected rows        ","tagName":"tr"},{"text":"                            srcRowIds                                                    Array.                                                            row ids of the selected rows        ","tagName":"tr"},{"text":"                            srcRowTypes                                                    Array.                                                            row types of the selected rows        ","tagName":"tr"},{"text":"                            consolidatedSrcRowType                                                    string                                                            \"MIXED\" type is set if there are two or more row types in the srcRowTypes        ","tagName":"tr"},{"text":"                            destRowIndex                                                    number                                                            row index of the drop area        ","tagName":"tr"},{"text":"                            destRowId                                                    string                                                            row id of the drop area. This will be empty string for the end of grid        ","tagName":"tr"},{"text":"                            destRowType                                                    number                                                            row type of the drop area. This will be empty string for the end of grid        ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"beforeDataMoved: function(e) {\n  var srcRowType = e.srcRowTypes[0];\n  var destRowType = e.destRowType;\n  if(srcRowType === \"GROUP_MEMBER\" && destRowType === \"CONTENT\") {\n    e.cancel = true; // Prevent a group member row from moving outside of its own group\n  }\n}","tagName":"pre"},{"text":"dataMoved","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            srcRowIndices                                                    Array.                                                            row indices of the selected rows        ","tagName":"tr"},{"text":"                            srcRowIds                                                    Array.                                                            row ids of the selected rows        ","tagName":"tr"},{"text":"                            srcRowTypes                                                    Array.                                                            row types of the selected rows        ","tagName":"tr"},{"text":"                            consolidatedSrcRowType                                                    string                                                            \"MIXED\" type is set if there are two or more row types in the srcRowTypes        ","tagName":"tr"},{"text":"                            destRowIndex                                                    number                                                            row index of the drop area        ","tagName":"tr"},{"text":"                            destRowId                                                    string                                                            row id of the drop area. This will be empty string for the end of grid        ","tagName":"tr"},{"text":"                            destRowType                                                    number                                                            row type of the drop area. This will be empty string for the end of grid        ","tagName":"tr"},{"text":"drag","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"dragEnd","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"dragInterval","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"dragStart","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"// ...\ndragStart: function(e) {\n  e.cancel = true; // To cancel the operation\n}, // ..","tagName":"pre"}]},{"title":"Row Filtering","filename":"extensions/tr-grid-row-filtering.html","contents":[{"text":"Row Filtering","tagName":"h2"},{"text":"The Row Filtering Extension provides filtering rows based on specific condition. The extension also supports defining column filter on multiple columns. The following example allows a user to click on the filter icon, appeared on the top of the column header, to open Filter Dialog. ","tagName":"p"},{"text":"Filter Dialog","tagName":"a"},{"text":"Note that this extension does not provide any UI to do filtering. If you want to have UIs for end users to do filtering, you need to include either Row Filtering Extension or Filter Dialog Widget in addition to this extension.","tagName":"p"},{"text":"Row Filtering Extension","tagName":"a"},{"text":"Filter Dialog Widget","tagName":"a"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 50 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowFiltering: {\n    iconActivation: \"onHover\"\n  },\n  extensions: [\n    new tr.RowFilteringExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nhtml body {\n  padding: 20px;\n}\n\natlas-blotter {\n  height: 500px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Initializing Grid with a column filter","tagName":"h3"},{"text":"You can define a column filter on filter property on the column configuration object. The expression for the filter can be written in 4 different formats:","tagName":"p"},{"text":"The first two formats are recommended for most of the use cases as they are serializable and well understood by both Row Filtering Extension and Filter Dialog.","tagName":"p"},{"text":"Filter Dialog","tagName":"a"},{"text":"\n\n","tagName":"pre"},{"text":"var objMapFilter = {\n  HKEX: true,\n  NASDAQ: true\n};\nvar ary2DFilter = [\n  [\"GT\", 100, \"AND\"],\n  [\"LT\", 400]\n];\nvar textFilter = \"[CF_NETCHNG] > 0\";\nvar funcFilter = function(rowData) {\n  return rowData[\"industry\"].indexOf(\"a\") >= 0;\n};\n\nvar rowFilterExt = new tr.RowFilteringExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 50 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120, filter: objMapFilter },\n    { name: \"Last\", field: fields[2], width: 100, filter: ary2DFilter },\n    { name: \"Net. Chng\", field: fields[3], width: 100, filter: textFilter },\n    { name: \"Industry\", field: fields[4], filter: funcFilter }\n  ],\n  staticDataRows: records,\n  rowFiltering: {\n    iconActivation: \"onHover\"\n  },\n  extensions: [\n    rowFilterExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 500px;\n}","tagName":"pre"},{"text":"Managing column filter at runtime","tagName":"h3"},{"text":"To add or remove column filter at runtime, use setColumnFilter method from the extension. ","tagName":"p"},{"text":"To retrieve current serializable expression of the column filter, use getConfigObject from Grid instance.","tagName":"p"},{"text":"Defining column filter as an array expression","tagName":"h3"},{"text":"The expression can take form of an Array or two dimentional Array for defining multiple conditions. However, the array has to be in specific format for extension to parse it. The array must contains two or three items. The first item is operator id. The second item is a operand value. The third item is a connector which can be either \"AND\" or \"OR\" connector. The connector is optional, if there is only one coloring condition.","tagName":"p"},{"text":"This array form is useful for constructing a complex filter as there can be unlimited number of conditions in a single expression. It can also be serialized as a text which is good for saving and restoring. ","tagName":"p"},{"text":"The following operator ids are supported in the array format:","tagName":"p"},{"text":"Grid level filtering","tagName":"h3"},{"text":"You can add a grid level filter which is independent from columns or column filters. Use addGridFilter method from the extension instance to add a grid level filter. If you want to refresh the filter when some context has been changed, use refresh method from the extension to reapply the filter. To clear all existing filters, you can use removeAllFilters method.","tagName":"p"},{"text":"Filtering with a search box example","tagName":"h4"},{"text":"It is normal to tie the filter functionality with a search box. In order to do this, you can listen a keyup event on the search input. Then you can    call refresh method in the event callback.","tagName":"p"},{"text":"For below example, the search input will be passed in the second parameter. Then, in the filter function you can retrieve a value from search input to perform a comparison.","tagName":"p"},{"text":"The addGridFilter can recieve any type in the second parameter. The given input will be passed to the third argument in filter function.","tagName":"p"},{"text":"\n\n
                                                                                              \n","tagName":"pre"},{"text":"var rowFilterExt = new tr.RowFilteringExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 50 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    rowFilterExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\nvar searchInput = document.getElementById(\"search_input\");\nsearchInput.addEventListener(\"keyup\", function(e) {\n  var input = e.currentTarget;\n  if (input._prevValue !== input.value) {\n    input._prevValue = input.value;\n    rowFilterExt.refresh(); // Force filter triggering\n  }\n});\n\nfunction filterFunc(rowData, rowId, context) {\n  var str = \"\";\n  var val = context.input.value.toLowerCase();\n  for (var key in rowData) {\n    str += rowData[key] + \" \";\n  }\n  return str.toLowerCase().indexOf(val) > -1;\n};\n\nvar context = {\n  input: searchInput\n};\nrowFilterExt.addGridFilter(filterFunc, context);","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 280px;\n}\n\n#search_input {\n  margin: 5px;\n  width: 250px;\n}","tagName":"pre"},{"text":"Basic filtering example","tagName":"h4"},{"text":"\n\n\n\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var rowFilterExt = new tr.RowFilteringExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 50 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    rowFilterExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"filter_btn1\").addEventListener(\"click\", function() {\n  rowFilterExt.removeAllFilters();\n  rowFilterExt.addGridFilter(moreThanTwenty);\n});\ndocument.getElementById(\"filter_btn2\").addEventListener(\"click\", function() {\n  rowFilterExt.removeAllFilters();\n  rowFilterExt.addGridFilter(between10And20);\n});\ndocument.getElementById(\"filter_btn3\").addEventListener(\"click\", function() {\n  rowFilterExt.removeAllFilters();\n  rowFilterExt.addGridFilter(inNASDAQ);\n});\ndocument.getElementById(\"filter_btn4\").addEventListener(\"click\", function() {\n  rowFilterExt.removeAllFilters();\n  rowFilterExt.addGridFilter(findServices);\n});\ndocument.getElementById(\"filter_btn5\").addEventListener(\"click\", function() {\n  rowFilterExt.removeAllFilters();\n});\n\nfunction moreThanTwenty(rowData, rowId, ctx) {\n  return rowData.CF_NETCHNG > 20;\n}\n\nfunction between10And20(rowData, rowId, ctx) {\n  return rowData.CF_NETCHNG >= 10 && rowData.CF_NETCHNG <= 20;\n}\n\nfunction inNASDAQ(rowData, rowId, ctx) {\n  return rowData.market === \"NASDAQ\";\n}\n\nfunction findServices(rowData, rowId, ctx) {\n  let industry = rowData.industry.toLowerCase();\n  return industry.indexOf(\"service\") >= 0;\n}","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 280px;\n}","tagName":"pre"},{"text":"Filter icon activation modes","tagName":"h3"},{"text":"Filter icon activation controls the behavior on how to render filter icon in header cells of the grid. You can specify the mode on iconActivation property on the extension configuration object (rowFiltering). If iconActivation is not specified, the onActiveFilter will be used.","tagName":"p"},{"text":"var gridConfig = {\n    // ... other config\n    rowFiltering: {\n        iconActivation: \"onHover\"\n    },\n    extensions: [\n        filterExt\n    ]\n};","tagName":"pre"},{"text":"All available icon activation modes are shown in the below table:","tagName":"p"},{"text":"\nMode\nDescription\n","tagName":"tr"},{"text":"\n\"always\"\nAlways show filter icon.\n","tagName":"tr"},{"text":"\n\"onHover\"\nShow filter icon when mouse cursor is hovered over the header cell or the column has an active filter.\n","tagName":"tr"},{"text":"\n\"onActiveFilter\"\nShow filter icon when the column has an active filter. This is the default mode\n","tagName":"tr"},{"text":"\n\"none\"\nNo filter icon is shown at all times.\n","tagName":"tr"},{"text":"\n\n\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var rowFilterExt = new tr.RowFilteringExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 50 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowFiltering: {\n    iconActivation: null\n  },\n  extensions: [\n    rowFilterExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"mode_always\").addEventListener(\"click\", function(e) {\n  configObj[\"rowFiltering\"][\"iconActivation\"] = \"always\";\n  rowFilterExt.config(configObj);\n  rowFilterExt._updateAllColumnIcons();\n});\ndocument.getElementById(\"mode_hover\").addEventListener(\"click\", function(e) {\n  configObj[\"rowFiltering\"][\"iconActivation\"] = \"onHover\";\n  rowFilterExt.config(configObj);\n  rowFilterExt._updateAllColumnIcons();\n});\ndocument.getElementById(\"mode_active\").addEventListener(\"click\", function(e) {\n  configObj[\"rowFiltering\"][\"iconActivation\"] = \"onActiveFilter\";\n  rowFilterExt.config(configObj);\n  rowFilterExt._updateAllColumnIcons();\n});\ndocument.getElementById(\"mode_none\").addEventListener(\"click\", function(e) {\n  configObj[\"rowFiltering\"][\"iconActivation\"] = \"none\";\n  rowFilterExt.config(configObj);\n  rowFilterExt._updateAllColumnIcons();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 500px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            filter                                                    RowFilteringPlugin~Expression                                                                                                                                                                                                                                        An expression string or Function        ","tagName":"tr"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"                            filterState                                                    *                                                                                                                                                                                                                                        Context object that will be passed as the third parameter for the filter logic        ","tagName":"tr"},{"text":"                            filterIcon                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, filter icon will not be shown. This property only works with \"always\" mode        ","tagName":"tr"},{"text":"Expression","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"FilterDialogOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            sortUI                                                    boolean                                                                                                                                                                            show/hide sort UI        ","tagName":"tr"},{"text":"                            filterUI                                                    boolean                                                                                                                                                                            show/hide filter UI        ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                                                                                                            data type of column        ","tagName":"tr"},{"text":"                            lang                                                    string                                                                                                                                                                            dialog language        ","tagName":"tr"},{"text":"                            rawDataAccessor                                                    function                                                                                                                                                                            In case you have custom data type for the specified field, data getter is needed to retrieve raw value for filtering        ","tagName":"tr"},{"text":"                            formattedDataAccessor                                                    function                                                                                                                                                                            In case you have custom data type for the specified field, data getter is needed to retrieve formatted value for display        ","tagName":"tr"},{"text":"                            sortLogic                                                    function                                                                                                                                                                            sorting function for sort autosuggest list in filter dialog, the values for comparison are raw value not a formatted value        ","tagName":"tr"},{"text":"FilterExpression","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            field                                                    string                                                                    ","tagName":"tr"},{"text":"                            expression                                                    RowFilteringPlugin~Expression                                                            Expression representing filter function        ","tagName":"tr"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"                            context                                                    *                                                            Context object contains context/states given by user        ","tagName":"tr"},{"text":"FilterLogic(rowData, rid, ctx) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            emptySegmentFiltering                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, the filter will automatically hide empty segment when all of its member are filtered out. If there is no active filter, any empty segment will not be hidden. Collapsed segment does not count as having a filter. A segment with no child is treated the same way as an empty segment.        ","tagName":"tr"},{"text":"                            separatorFiltering                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, segment separators will be filtered as if they were normal rows. Note that even if a separator row is filtered out, its child row may remain in the view and not be filtered out.        ","tagName":"tr"},{"text":"                            disabledUI                                                    boolean                                                                                                                                                                                                                    false                                                        Deprecated in favor of `iconActivation`. Set iconActivation to none instead.        ","tagName":"tr"},{"text":"                            iconActivation                                                    string                                                                                                                                                                                                                    onActiveFilter                                                        Filter icon redering behavior, can be set to `always`,`onHover`,`onActiveFilter`,or `none`        ","tagName":"tr"},{"text":"                            dialogOptions                                                    RowFilteringPlugin~FilterDialogOptions                                                                                                                                                                                                                    null                                                        Default configuration for Filter Dialog, applying to all columns.        ","tagName":"tr"},{"text":"RowFilteringPlugin~FilterDialogOptions","tagName":"a"},{"text":"                            click                                                    function                                                                                                                                                                                                                    null                                                        Event handler dispatched when a user clicks the column filter icon.        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                                                                                                                                                    null                                                        Alias to `click` event handler        ","tagName":"tr"},{"text":"                            iconCreated                                                    function                                                                                                                                                                                                                    null                                                        Event handler dispatched when a new column filter icon is created.        ","tagName":"tr"},{"text":"                            filterChanged                                                    function                                                                                                                                                                                                                    null                                                        Event handler dispatched whenever global or column filter is changed by either adding or removing.        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"addColumnFilter(colIndex, exp, ctxopt) → {boolean}","tagName":"h4"},{"text":"RowFilteringPlugin#setColumnFilter","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"RowFilteringPlugin#event:filterChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addDataView(dv)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"addFilter(exp, funcNameopt, ctxopt) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"RowFilteringPlugin#event:filterChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"addGridFilter(exp, ctxopt) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"RowFilteringPlugin#event:filterChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disable(opt_disabledopt, opt_idopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableEmptySegmentFiltering(enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableSeparatorFiltering(enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getAllColumnFilters() → {Array.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnFilterIcons(colIndex) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnFilterState(colIndex) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnFilterStates() → {Array}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getFilterExpressions() → {Array.}","tagName":"h4"},{"text":"RowFilteringPlugin~FilterExpression","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowFilteringPlugin~FilterExpression","tagName":"a"},{"text":"getFilters() → {Array.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasColumnFilter() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"openDialog(colIndex, runtimeDialogOptionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowFilteringPlugin~FilterDialogOptions","tagName":"a"},{"text":"refresh()","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"RowFilteringPlugin#event:refreshed","tagName":"a"},{"text":"removeAllColumnFilters() → {boolean}","tagName":"h4"},{"text":"Fires:","tagName":"h5"},{"text":"RowFilteringPlugin#event:filterChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeAllFilters()","tagName":"h4"},{"text":"removeColumnFilter(colIndex) → {boolean}","tagName":"h4"},{"text":"RowFilteringPlugin#removeColumnFilters","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"RowFilteringPlugin#event:filterChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeColumnFilters(colIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Fires:","tagName":"h5"},{"text":"RowFilteringPlugin#event:filterChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"removeDataView(dv)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeFilter(funcRef) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setColumnFilter(colIndex, exp, ctxopt) → {boolean}","tagName":"h4"},{"text":"RowFilteringPlugin#removeColumnFilters","tagName":"a"},{"text":"RowFilteringPlugin#addColumnFilter","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"Fires:","tagName":"h5"},{"text":"RowFilteringPlugin#event:filterChanged","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"extension.setColumnFilter(colIndex1,\n [[\"GT\", 0]]\n);\nextension.setColumnFilter(colIndex2,\n  \"filter\": \"[PCTCHNG] > 0\"\n);\nextension.setColumnFilter(colIndex3,\n  function(rowData) {\n    return rowData[\"PCTCHNG\"] > 0;\n  }\n);","tagName":"pre"},{"text":"setColumnFilterState(colIndex, ctx) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setFilterExpressions(filterExps)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowFilteringPlugin~FilterExpression","tagName":"a"},{"text":"setOverridingFilter(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setPreTransform(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowTransform(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"updateAllColumnIcons()","tagName":"h4"},{"text":"Events","tagName":"h3"},{"text":"beforeDialogOpened","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                            Column index        ","tagName":"tr"},{"text":"                            field                                                    string                                                            Field        ","tagName":"tr"},{"text":"                            grid                                                    Object                                                            Core grid instance        ","tagName":"tr"},{"text":"Example:","tagName":"h5"},{"text":"beforeDialogOpened: function(e) {\n  e.cancel = true; // To cancel the operation\n},\nbeforeDialogOpened: function(e) {\n  e.dialogOptions = { sortLogic: func }; // To set a dialog configuration\n},","tagName":"pre"},{"text":"click","tagName":"h4"},{"text":"dialogCommitted","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                                                                                                ","tagName":"tr"},{"text":"                            value                                                    Object                                                                                                                                                                            When filter is changed, the change will be passed through this property        ","tagName":"tr"},{"text":"                            sortOrder                                                    number                                                                                                                                                                            When sort order is changed, the change will be passed through this property        ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                                                                                                                    ","tagName":"tr"},{"text":"filterChanged","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            filterType                                                    string                                                            This can be either \"global\" or \"column\"        ","tagName":"tr"},{"text":"                            changeType                                                    string                                                            This can be either \"add\" or \"remove\"        ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                            Column index        ","tagName":"tr"},{"text":"                            field                                                    string                                                            specified by the current column        ","tagName":"tr"},{"text":"iconCreated","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            icon                                                    Element                                                            Filter icon element        ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                            Column index        ","tagName":"tr"},{"text":"                            grid                                                    Object                                                            Core grid instance        ","tagName":"tr"},{"text":"refreshed","tagName":"h4"}]},{"title":"Row Grouping","filename":"extensions/tr-grid-row-grouping.html","contents":[{"text":"Row Grouping","tagName":"h2"},{"text":"The Row Grouping Extension uses categorization based on column field. Each group will have arrow button for expansion and collapsing of its members.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\", \"Bosco-Terry\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n});\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    groupBy: fields[1]\n  },\n  extensions: [\n    new tr.RowGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Basic usage","tagName":"h3"},{"text":"To group your data together, You can specify groupBy option under rowGrouping. The value can be either a string or an array of column field. If input as an array, the Grid will display as a nested group.","tagName":"p"},{"text":"By default, there will be an extra row display as a header of each group.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    columns: [{\n        { id: 'c1', name: 'Column 1', field: 'col1' },\n        // more column options\n    }],\n    rowGrouping: {\n        groupBy: 'col1' // Or ['col2', 'col3', ...]\n    },\n};","tagName":"pre"},{"text":"Initial collapsing state","tagName":"h3"},{"text":"The initial groups created by the extension are expanded by default. To initially collapse all groups by default, set defaultCollapse property to true","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\", \"Bosco-Terry\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n});\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    defaultCollapse: true,\n    groupBy: fields[1]\n  },\n  extensions: [\n    new tr.RowGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Data sorting","tagName":"h3"},{"text":"This extension can work with the Sorting Extension out-of-the-box. But only the data within the group will be sorted, not the columns which are grouped.","tagName":"p"},{"text":"Sorting Extension","tagName":"a"},{"text":"Note: Try clicking on column header","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\", \"Bosco-Terry\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n});\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    groupBy: fields[1]\n  },\n  extensions: [\n    new tr.RowGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Group sorting","tagName":"h3"},{"text":"In some case you might want to prioritize some group over another. We provide a way to sort the group with groupSortLogic option. If so, you can sort a group using the groupSortLogic option. It receives the same compare function as Array.prototype.sort().","tagName":"p"},{"text":"Array.prototype.sort()","tagName":"a"},{"text":"var config = {\n    // any other grid's options\n    rowGrouping: {\n        groupSortLogic: function(grp1, grp2) { // Sort in ascending order (A -> Z)\n            if(grp1 < grp2) return -1;\n            if(grp1 > grp2) return 1;\n            return 0;\n        },\n        groupBy: 'col1' // Or ['col2', 'col3', ...]\n    },\n};","tagName":"pre"},{"text":"You can now see that DJI has more priority over HKEX.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\", \"Bosco-Terry\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n});\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    groupBy: fields[1],\n    groupSortLogic: function(grp1, grp2) { // Sort in ascending order (A -> Z)\n      if (grp1 < grp2) return -1;\n      if (grp1 > grp2) return 1;\n      return 0;\n    }\n  },\n  extensions: [\n    new tr.RowGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Nested group","tagName":"h3"},{"text":"This is achieved by setting groupBy options with array of fields.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    rowGrouping: {\n        groupBy: [\"group\", \"c1\"]\n    },\n};","tagName":"pre"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\", \"Bosco-Terry\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n});\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    groupBy: [fields[1], fields[2]]\n  },\n  extensions: [\n    new tr.RowGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Rendering group header rows","tagName":"h3"},{"text":"By default, group header rows are rendered by their group value. To override default rendering, you need to define groupHeaderBinding and nonGroupBinding methods in the configuration. groupHeaderBinding will be executed for every group header rows and is used for custom rendering. nonGroupBinding is used to cleared any special styles set in groupHeaderBinding, since the same cell are re-used for both group header rows and non-group header rows (content rows). ","tagName":"p"},{"text":"By default, group header rows are displayed as a single cell that spans across multiple columns. It works by stretching existing cells from the first column to fill entire grid's width. You can turn off cell spanning by setting headerSpanning to false in the configuration. The option can be useful, if you want to show some content, such as statistics, on group header rows for every column. You can also specify which cells to be stretched by setting displayColumn to other column (default is the first column).","tagName":"p"},{"text":"Example custom style in group header rows","tagName":"h4"},{"text":"In the example below, we demonstrate how to customize the style of group header rows. With this customization, you can add elements to the group header rows and include additional information from your side.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n});\n\ntr.DataGenerator.addFieldInfo(\"status\", {\n  type: \"set\",\n  members: [\"GROUP_1\", \"GROUP_2\", \"GROUP_3\", \"GROUP_4\", \"GROUP_5\", \"GROUP_6\"]\n});\nvar rowGrouping = new tr.RowGroupingExtension();\nvar fields = [\"industry\", \"words\", \"PRICECLOSE\", \"PRICELAST\", \"status\", \"id\"];\n\nvar predefinedColorsSet = {\n  yellow: {\n    backgroundColor: \"#FF9900\"\n  },\n  red: {\n    backgroundColor: \"#FF0000\"\n  },\n  green: {\n    backgroundColor: \"#00FF00\"\n  }\n};\n\nvar statusMapping = {\n  // Pending\n  GROUP_1: {\n    statusName: \"Pending Register\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"yellow\"].backgroundColor,\n    icon: \"info\",\n    status: \"pending\"\n  },\n  GROUP_2: {\n    statusName: \"Pending Send\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"yellow\"].backgroundColor,\n    icon: \"info\",\n    status: \"pending\"\n  },\n\n  // Denined\n  GROUP_3: {\n    statusName: \"Denined Amend\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"red\"].backgroundColor,\n    icon: \"warning-circle\",\n    status: \"denined\"\n  },\n  GROUP_4: {\n    statusName: \"Denined Register\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"red\"].backgroundColor,\n    icon: \"warning-circle\",\n    status: \"denined\"\n  },\n\n  // Approved\n  GROUP_5: {\n    statusName: \"Approved Register\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"green\"].backgroundColor,\n    status: \"approved\"\n  },\n  GROUP_6: {\n    statusName: \"Approved Send\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"green\"].backgroundColor,\n    status: \"approved\"\n  }\n};\n\nfunction onContinueClicked(status, e) {\n  alert(\"CONTINUE current status is : \" + status);\n  e.stopPropagation(); // Prevent collapsing/expanding grouop when click header\n}\n\nfunction onAbortClicked(status, e) {\n  alert(\"Abort current status is : \" + status);\n  e.stopPropagation(); // Prevent collapsing/expanding grouop when click header\n}\n\nfunction onGroupBinding(e) {\n  // row header binding only called when cell colIndex = 0 (so for another column we need to  loop colCount to set another cell)\n  var groupId = e.groupId;\n  var cell = e.cell;\n\n  var content = cell.getContent();\n  if (!content || !content._customHeader) {\n    content = document.createElement(\"div\");\n    content._customHeader = content;\n\n    var iconEl = document.createElement(\"coral-icon\");\n    iconEl.style.paddingRight = \"6px\";\n    content._icon = iconEl;\n\n    var statusEl = document.createElement(\"span\");\n    statusEl.style.alignSelf = \"center\";\n    content._statusName = statusEl;\n\n    var descriptionEl = document.createElement(\"span\");\n    descriptionEl.style.alignSelf = \"center\";\n    descriptionEl.style.paddingLeft = \"24px\";\n    content._description = descriptionEl;\n\n    var divButtonEl = document.createElement(\"div\");\n    var continueButtonEl = document.createElement(\"coral-button\");\n    continueButtonEl.textContent = \"CONTINUE\";\n    content._continueButton = continueButtonEl;\n\n    var abortButtonEl = document.createElement(\"coral-button\");\n    abortButtonEl.textContent = \"ABORT\";\n    abortButtonEl.style.marginLeft = \"12px\";\n    content._abortButton = abortButtonEl;\n\n    divButtonEl.appendChild(continueButtonEl);\n    divButtonEl.appendChild(abortButtonEl);\n\n    content.style.display = \"flex\";\n    content.style.alignItems = \"center\";\n    content.style.justifyContent = \"space-between\";\n\n    var leftDiv = document.createElement(\"div\");\n    leftDiv.style.display = \"flex\";\n\n    leftDiv.appendChild(iconEl);\n    leftDiv.appendChild(statusEl);\n    leftDiv.appendChild(descriptionEl);\n\n    var rightDiv = document.createElement(\"div\");\n    rightDiv.appendChild(divButtonEl);\n\n    content.appendChild(leftDiv);\n    content.appendChild(rightDiv);\n  }\n\n  content._icon.icon = statusMapping[groupId].icon; // All icon for elf element https://elf.int.refinitiv.com/styles/icons.html for another icon you can use .src to ref svg file\n  content._icon.style.color = statusMapping[groupId].color;\n  content._icon.style.display = statusMapping[groupId].status !== \"approved\" ? \"block\" : \"none\";\n\n  content._statusName.textContent = statusMapping[groupId].statusName;\n  content._statusName.style.color = statusMapping[groupId].color;\n\n  content._description.textContent = statusMapping[groupId].detail;\n\n  content._continueButton.addEventListener(\n    \"click\",\n    onContinueClicked.bind(this, groupId)\n  );\n  content._abortButton.addEventListener(\n    \"click\",\n    onAbortClicked.bind(this, groupId)\n  );\n\n  cell.setContent(content);\n}\n\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 3, numRows: 12 });\nvar configObj = {\n  rowGrouping: {\n    groupBy: fields[4],\n    headerSpanning: true,\n    groupHeaderBinding: onGroupBinding,\n    predefinedColors: predefinedColorsSet,\n    groupSortLogic: groupSortingASC,\n    groupColors: {\n      GROUP_1: \"yellow\",\n      GROUP_2: \"yellow\",\n\n      GROUP_3: \"red\",\n      GROUP_4: \"red\",\n\n      GROUP_5: \"green\",\n      GROUP_6: \"green\"\n    }\n  },\n  columns: [{\n      name: \"Industry\",\n      field: fields[0],\n      statistics: \"label\"\n    },\n    {\n      name: \"Describe\",\n      field: fields[1]\n    },\n    {\n      name: \"Price Close\",\n      field: fields[2],\n      alignment: \"right\",\n      binding: currencyBinding,\n      statistics: \"currencyStat\"\n    },\n    {\n      name: \"Price Last\",\n      field: fields[3],\n      alignment: \"center\",\n      binding: currencyBinding,\n      statistics: \"currencyStat\"\n    }\n  ],\n  staticDataRows: records,\n  extensions: [rowGrouping]\n};\n\nvar grid = (window.grid = document.getElementById(\"grid\"));\ngrid.config = configObj;\n\ngrid.addEventListener(\"beforeContentBinding\", onBeforeContentBinding);\n\nfunction onBeforeContentBinding(e) {\n  if (!e.actualUpdate) {\n    return;\n  }\n  var rows = grid.api.getAllRowDefinitions();\n  console.log(rows);\n}\n\nfunction currencyBinding(e) {\n  var cell = e.cell;\n  var data = e.data;\n  cell.setContent(addSymbol(data));\n}\n\nfunction addSymbol(data) {\n  var symbol = \"$\";\n  return symbol + data;\n}\n\nfunction groupSortingASC(grp1, grp2) {\n  // Sort in ascending order (A -> Z)\n  if (grp1 < grp2) return -1;\n  if (grp1 > grp2) return 1;\n  return 0;\n}","tagName":"pre"},{"text":"hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 600px;\n}","tagName":"pre"},{"text":"Example summation row in group header rows","tagName":"h4"},{"text":"In the example below, we demonstrate how to calculate the summation of row data for each column and display it in the group header rows.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n});\ntr.DataGenerator.addFieldInfo(\"market\", {\n  type: \"set\",\n  members: [\"NASDAQ\", \"DJI\", \"NIKKEI\"]\n});\nvar fields = [\"companyName\", \"industry\", \"CF_NETCHNG\", \"integer\", \"market\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 1, numRows: 7 });\n\nfunction onGroupHeaderBinding(e) {\n  // Calculate Summation\n  var colCount = e.api.getColumnCount();\n  var fields = e.api.getColumnFields();\n  var rows = e.api.getMultipleRowData(e.dataSource);\n  var rowCount = rows.length;\n  var stats = [];\n  for (var c = 0; c < colCount; ++c) {\n    var sum = 0;\n    var valid = false;\n    var field = fields[c];\n    for (var r = 0; r < rowCount; ++r) {\n      var row = rows[r];\n      var val = row ? row[field] : null;\n      if (typeof val === \"number\") {\n        sum += val;\n        valid = true;\n      }\n    }\n    if (valid) {\n      stats[c] = sum;\n    }\n  }\n\n  // Render cells\n  var section = e.section;\n  for (var c = 0; c < colCount; ++c) {\n    var cell = section.getCell(c, e.rowIndex);\n    if (c === 0) {\n      cell.setContent(\"Group \" + e.groupId + \" (\" + rowCount + \")\");\n    } else {\n      cell.setContent(stats[c]);\n    }\n  }\n}\n\nvar configObj = {\n  columnReorder: false,\n  columnSelection: true,\n  sorting: {\n    sortableColumns: true,\n    initialSort: {\n      colIndex: 2,\n      order: \"d\"\n    }\n  },\n  rowGrouping: {\n    groupBy: fields[0],\n    headerSpanning: false,\n    groupHeaderBinding: onGroupHeaderBinding,\n    nonGroupBinding: function(e) {}\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[1] },\n    { name: \"Net. Chng\", field: fields[2], alignment: \"center\" },\n    { name: \"Integer\", field: fields[3], alignment: \"right\" },\n    { name: \"Market\", field: fields[4] },\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.RowGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Null/undefined group hiding","tagName":"h3"},{"text":"In many cases, a group of data might contain an undefined or null value. This may display an unexpected grouped title.","tagName":"p"},{"text":"Example with null/undefined group","tagName":"h4"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\", \"Bosco-Terry\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\", null]\n});\ntr.DataGenerator.addFieldInfo(\"market\", {\n  type: \"set\",\n  members: [\"NASDAQ\", \"DJI\", \"NIKKEI\"]\n});\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 16 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    groupSortLogic: function(grpId1, grpId2, grpView1, grpView2) { // Move undefined or null group to the top\n      var grpVal1 = grpView1.getGroupValue();\n      var grpVal2 = grpView2.getGroupValue();\n      if (!grpVal1) {\n        if (grpVal2) {\n          return -1;\n        }\n        return 0; // both grpVal1 and grpVal2 is null or undefined group\n      } else if (!grpVal2) {\n        return 1;\n      }\n\n      if (grpId1 < grpId2) return -1;\n      if (grpId1 > grpId2) return 1;\n      return 0;\n    },\n    groupBy: fields[2]\n  },\n  extensions: [\n    new tr.RowGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Turn on an autoGroupHiding option to hide all the group header that display as null or undefined. The rows of data that are in a null group will still show and are distinct from the group above them by different indentation. ","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    rowGrouping: {\n        autoGroupHiding: true\n    },\n};","tagName":"pre"},{"text":"Example with hidden null/undefined group","tagName":"h4"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\", \"Bosco-Terry\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\", null]\n});\ntr.DataGenerator.addFieldInfo(\"market\", {\n  type: \"set\",\n  members: [\"NASDAQ\", \"DJI\", \"NIKKEI\"]\n});\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 16 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    autoGroupHiding: true,\n    groupSortLogic: function(grpId1, grpId2, grpView1, grpView2) { // Move undefined or null group to the top\n      var grpVal1 = grpView1.getGroupValue();\n      var grpVal2 = grpView2.getGroupValue();\n      if (!grpVal1) {\n        if (grpVal2) {\n          return -1;\n        }\n        return 0; // both grpVal1 and grpVal2 is null or undefined group\n      } else if (!grpVal2) {\n        return 1;\n      }\n\n      if (grpId1 < grpId2) return -1;\n      if (grpId1 > grpId2) return 1;\n      return 0;\n    },\n    groupBy: fields[2]\n  },\n  extensions: [\n    new tr.RowGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Rows in multiple groups","tagName":"h3"},{"text":"In the case that data used for grouping is an array, the data row will be added to multiple groups according to the array's member. See the following example for an illustration.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\", \"Bosco-Terry\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Finance\", \"Electric\", [\"Auto\", \"Electric\"],\n    [\"Chemicals\", \"Biotechnology\"]\n  ]\n});\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\", \"id\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 1, numRows: 12 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"ID\", field: fields[5], width: 80 },\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    groupBy: fields[2]\n  },\n  extensions: [\n    new tr.RowGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Content as a header","tagName":"h3"},{"text":"In this mode, the header of the nested group will be hidden while the data row will act as a header instead. The first level group header expand/collapse button will be disabled by default.","tagName":"p"},{"text":"To turn on this mode, set contentAsHeader to true.","tagName":"p"},{"text":"Note: This mode currently supports at most 2 levels of grouping.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    rowGrouping: {\n        contentAsHeader: true,\n        groupBy: ['col1', 'col2'] // Support at most 2 levels of grouping if contentAsHeader is enabled.\n    },\n};","tagName":"pre"},{"text":"\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var rgExt = new tr.RowGroupingExtension();\n\ngroup_btn1.addEventListener(\"click\", function(e) {\n  rgExt.groupBy(null);\n});\ngroup_btn2.addEventListener(\"click\", function(e) {\n  rgExt.groupBy(fields[0]);\n  rgExt.collapseAll();\n});\ngroup_btn3.addEventListener(\"click\", function(e) {\n  rgExt.groupBy([fields[1], fields[0]]);\n  rgExt.collapseAll();\n});\n\ntr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n});\ntr.DataGenerator.addFieldInfo(\"market\", {\n  type: \"set\",\n  members: [\"NASDAQ\", \"DJI\", \"NIKKEI\"]\n});\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 14 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    groupBy: [fields[1], fields[0]],\n    contentAsHeader: true\n  },\n  extensions: [\n    rgExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 225px;\n}","tagName":"pre"},{"text":"Predefined color","tagName":"h3"},{"text":"The extension supports color from the predefined colors. To do this you need to assign predefined class object to the predefinedColors property then specify group ID and color mapping object to the groupColors property.","tagName":"p"},{"text":"
                                                                                              \n  Predefined color #1\n  
                                                                                              \n  \n
                                                                                              \n
                                                                                              \n  Predefined color #2\n  
                                                                                              \n  \n
                                                                                              \n\n
                                                                                              \n\n","tagName":"pre"},{"text":"var predefinedColorsSet1 = {\n  \"color-1\": {\n    backgroundColor: \"#e41a1c\"\n  },\n  \"color-2\": {\n    backgroundColor: \"#377eb8\"\n  },\n  \"color-3\": {\n    backgroundColor: \"#4daf4a\"\n  },\n  \"color-4\": {\n    backgroundColor: \"#984ea3\"\n  },\n  \"color-5\": {\n    backgroundColor: \"#ff7f00\"\n  },\n  \"color-6\": {\n    backgroundColor: \"#ffff33\"\n  },\n  \"color-7\": {\n    backgroundColor: \"#a65628\"\n  }\n};\n\nvar predefinedColorsSet2 = {\n  \"color-1\": {\n    backgroundColor: \"#8dd3c7\"\n  },\n  \"color-2\": {\n    backgroundColor: \"#ffffb3\"\n  },\n  \"color-3\": {\n    backgroundColor: \"#bebada\"\n  },\n  \"color-4\": {\n    backgroundColor: \"#fb8072\"\n  },\n  \"color-5\": {\n    backgroundColor: \"#80b1d3\"\n  },\n  \"color-6\": {\n    backgroundColor: \"#fdb462\"\n  },\n  \"color-7\": {\n    backgroundColor: \"#b3de69\"\n  }\n};\n\nvar color, el;\nvar parent = document.getElementById(\"set1\");\nvar div = document.createElement(\"div\");\nfor (color in predefinedColorsSet1) {\n  el = div.cloneNode();\n  el.textContent = color;\n  el.classList.add(\"example-color\");\n  el.style.backgroundColor = predefinedColorsSet1[color].backgroundColor;\n  parent.appendChild(el);\n}\n\nparent = document.getElementById(\"set2\");\nfor (color in predefinedColorsSet2) {\n  el = div.cloneNode();\n  el.textContent = color;\n  el.classList.add(\"example-color\");\n  el.style.backgroundColor = predefinedColorsSet2[color].backgroundColor;\n  parent.appendChild(el);\n}\n\ntr.DataGenerator.addFieldInfo(\"companyName\", {\n  type: \"set\",\n  members: [\"Kunze LLC\", \"Rohan-Kohler\", \"Bosco-Terry\", \"Prohaska\", \"Ziemann Group\"]\n});\ntr.DataGenerator.addFieldInfo(\"industry\", {\n  type: \"set\",\n  members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n});\n\nvar fields = [\"companyName\", \"market\", \"industry\", \"CF_NETCHNG\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar ext = new tr.RowGroupingExtension();\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Industry\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Updated\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowGrouping: {\n    predefinedColors: predefinedColorsSet1,\n    groupColors: {\n      NYSE: \"color-1\",\n      NASDAQ: \"color-2\",\n      SET: \"color-3\",\n      DJI: \"color-4\",\n      HSCEI: \"color-5\",\n      HKEX: \"color-6\",\n      NIKKEI: \"color-7\"\n    },\n    groupBy: fields[1]\n  },\n  extensions: [\n    ext\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"apply_btn1\").addEventListener(\"click\", function(e) {\n  ext.setPredefinedColors(predefinedColorsSet1);\n});\n\ndocument.getElementById(\"apply_btn2\").addEventListener(\"click\", function(e) {\n  ext.setPredefinedColors(predefinedColorsSet2);\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 300px;\n}\n\n.example-container {\n  display: inline;\n}\n\n.example-color {\n  width: 50px;\n  height: 24px;\n  margin: 4px;\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 24px;\n  color: #333;\n  text-align: center;\n}\n\nbutton {\n  vertical-align: middle;\n}","tagName":"pre"},{"text":"Statistic Calculation with Row Grouping","tagName":"h3"},{"text":"The Row Grouping Extension offers comprehensive support for statistic calculation with row grouping, allowing users to customize binding for header and footer rows seamlessly.","tagName":"p"},{"text":"In the example below, we demonstrate how to leverage the power of row grouping to perform detailed statistical analysis within the grid. By incorporating both header and footer rows, users can easily access relevant group statistics. We achieve optimal performance by utilizing the beforeContentBinding event, which triggers whenever there are data changes. This approach ensures efficient row virtualization, displaying only the necessary data visible to the user. As a result, the application's speed and responsiveness are significantly improved, especially when working with large datasets.","tagName":"p"},{"text":"Additionally, the beforeContentBinding feature plays a crucial role in optimizing performance. Whenever there are changes in the underlying data, this event is triggered, allowing you to perform necessary calculations or updates before the content is rendered. This approach enhances efficiency and provides real-time updates, ensuring that users always have access to the most accurate and up-to-date information.","tagName":"p"},{"text":"
                                                                                              \n   Operations \n   Position (rowIndex) :  \n  \n  \n  \n  \n
                                                                                              \n
                                                                                              \n","tagName":"pre"},{"text":" var rowGrouping = new tr.RowGroupingExtension();\n var statisticRows = new tr.StatisticsRowExtension();\n\n tr.DataGenerator.addFieldInfo(\"industry\", {\n   type: \"set\",\n   members: [\"Chemicals\", \"Auto\", \"Finance\", \"Electric\", \"Biotechnology\"]\n });\n\n var fields = [\"industry\", \"words\", \"PRICECLOSE\", \"PRICELAST\"];\n const SUMMATIONFIELDS = [\"PRICECLOSE\", \"PRICELAST\"];\n const GROUPFIELD = \"industry\";\n\n function onGroupBinding(e) {\n   // row header binding only called when cell colIndex = 0 (so for another column we need to  loop colCount to set another cell)\n   var groupId = e.groupId;\n   var rows = e.dataSource.getAllRowData();\n   var rowCount = rows.length;\n   var colCount = e.api.getColumnCount();\n   var section = e.section;\n   var footerRow = e.footerRow;\n   for (let c = 0; c < colCount; c++) {\n     var field = e.api.getColumnField(c);\n\n     if (field === GROUPFIELD) {\n       var cell = section.getCell(c, e.rowIndex);\n       var prefix = footerRow ? \"FOOTER: \" : \"HEADER: \";\n       cell.setContent(prefix + groupId + \" (\" + rowCount + \")\");\n     }\n\n     if (SUMMATIONFIELDS.indexOf(field) >= 0) {\n       var cell = section.getCell(c, e.rowIndex);\n       var statData = stats[field][groupId];\n       cell.setContent(addSymbol(statData || 0));\n     }\n   }\n }\n\n var records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 6 });\n var configObj = {\n   rowGrouping: {\n     groupBy: fields[0],\n     headerSpanning: false,\n     groupHeaderBinding: onGroupBinding,\n     groupFooterBinding: onGroupBinding,\n     nonGroupBinding: function(e) {}\n   },\n   columns: [{\n       name: \"Industry\",\n       field: fields[0],\n       statistics: \"label\"\n     },\n     {\n       name: \"Describe\",\n       field: fields[1]\n     },\n     {\n       name: \"Price Close\",\n       field: fields[2],\n       alignment: \"right\",\n       binding: currencyBinding,\n       statistics: \"currencyStat\"\n     },\n     {\n       name: \"Price Last\",\n       field: fields[3],\n       alignment: \"center\",\n       binding: currencyBinding,\n       statistics: \"currencyStat\"\n     }\n   ],\n   staticDataRows: records,\n   extensions: [rowGrouping, statisticRows],\n   statisticsRow: {\n     rows: [{ statistic: \"currencyStat\", label: \"Footer Summation\" }],\n     postCalculation: postCalculationCurrency\n   }\n };\n\n var grid = (window.grid = document.getElementById(\"grid\"));\n grid.config = configObj;\n\n grid.addEventListener(\"configured\", function(e) {\n   grid.api.listen(\"beforeContentBinding\", onBeforeContentBinding);\n });\n\n var stats = (window.stats = {});\n var summationFieldLen = SUMMATIONFIELDS.length;\n initializeStates();\n\n function initializeStates() {\n   for (let f = 0; f < summationFieldLen; f++) {\n     var field = SUMMATIONFIELDS[f];\n     if (!stats[field]) {\n       stats[field] = {};\n     }\n   }\n }\n\n function onBeforeContentBinding(e) {\n   if (!e.actualUpdate) {\n     return;\n   }\n   var rows = grid.api.getAllRowDefinitions();\n\n   var len = rows.length;\n\n   for (let c = 0; c < summationFieldLen; c++) {\n     var field = SUMMATIONFIELDS[c];\n     stats[field] = {}; // Assign new values\n     for (let r = 0; r < len; r++) {\n       var rowDef = rows[r];\n       var rowData = rowDef.getRowData();\n       var groupId = rowData[GROUPFIELD];\n       var sum = rowData[field] || 0; // for row doens't contains the summation field\n       stats[field][groupId] = (stats[field][groupId] || 0) + sum;\n     }\n   }\n }\n\n function postCalculationCurrency(e) {\n   e.statistics[2].currencyStat = addSymbol(e.statistics[2][\"sum\"]);\n   e.statistics[3].currencyStat = addSymbol(e.statistics[3][\"sum\"]);\n }\n\n function currencyBinding(e) {\n   var cell = e.cell;\n   var data = e.data;\n   cell.setContent(addSymbol(data));\n }\n\n function addSymbol(data) {\n   var symbol = \"$\";\n   return symbol + data;\n }\n\n document.getElementById(\"change_group\").addEventListener(\"click\", function(e) {\n   var rowIndex = +document.getElementById(\"rowIndex_txt\").value;\n   var rowDef = grid.api.getRowDefinition(rowIndex);\n   if (rowDef) {\n     rowDef.updateRowData({ industry: \"Electric\" });\n   }\n });\n\n document.getElementById(\"add_row\").addEventListener(\"click\", function(e) {\n   var rowIndex = +document.getElementById(\"rowIndex_txt\").value;\n   var record = tr.DataGenerator.generateRecord(fields);\n   record[\"industry\"] = \"Chemicals\";\n   grid.api.insertRow({ values: record }, rowIndex);\n });\n\n document.getElementById(\"remove_row\").addEventListener(\"click\", function(e) {\n   var rowIndex = +document.getElementById(\"rowIndex_txt\").value;\n   grid.api.removeRow(rowIndex);\n });\n\n document.getElementById(\"update_row\").addEventListener(\"click\", function(e) {\n   var rowIndex = +document.getElementById(\"rowIndex_txt\").value;\n   var record = tr.DataGenerator.generateRecord(fields);\n   record[\"industry\"] = \"Chemicals\"; // FORCE assign to Chemicals\n   var rowDef = grid.api.getRowDefinition(rowIndex);\n   if (rowDef) {\n     rowDef.updateRowData(record);\n   }\n });","tagName":"pre"},{"text":" html body {\n   padding: 20px;\n   box-sizing: border-box;\n }\n \n hr {\n   margin: 5px;\n }\n \n efx-grid {\n   height: 400px;\n }","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"GroupCriteria","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"GroupingState","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                                                                                ","tagName":"tr"},{"text":"                            groupId                                                    number | string                                                                                                                                                                                    ","tagName":"tr"},{"text":"GroupSortLogic(grpValA, grpValB, grpDataViewAopt, grpDataViewBopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            autoGroupRemoval                                                    boolean                                                                                                                                                                                                                    false                                                        Remove group that has no row member.        ","tagName":"tr"},{"text":"                            autoGroupHiding                                                    boolean                                                                                                                                                                                                                    false                                                        Hide \"null\" or \"undefined\" group headers, while keeping the group's items intact.        ","tagName":"tr"},{"text":"                            predefinedGroups                                                    Array | Array.                                                                                                                                                                                                                    null                                                        Add groups without content rows. Use 2D array for multi-level grouping.        ","tagName":"tr"},{"text":"                            groupBy                                                    RowGroupingPlugin~GroupCriteria                                                                                                                                                                                                                    null                                                        GroupCriteria can be string, function, or array of string.        ","tagName":"tr"},{"text":"RowGroupingPlugin~GroupCriteria","tagName":"a"},{"text":"                            groupCriteria                                                    RowGroupingPlugin~GroupCriteria                                                                                                                                                                                                                    null                                                        Alias to `groupBy`.        ","tagName":"tr"},{"text":"RowGroupingPlugin~GroupCriteria","tagName":"a"},{"text":"                            displayColumn                                                    number                                                                                                                                                                                                                    0                                                        Column Index for group header rendering.        ","tagName":"tr"},{"text":"                            fixedDisplayColumn                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, displayColumn will remain in the same index, even if columns are shifted by insertion or removal.        ","tagName":"tr"},{"text":"                            noCollapsible                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, arrows will be hidden and cell is not clickable. This flag takes precedence over `clickableCell` and `hiddenArrow`.        ","tagName":"tr"},{"text":"                            clickableCell                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, clicking at cell will not expand that group        ","tagName":"tr"},{"text":"                            hiddenArrow                                                    boolean | number | Array.                                                                                                                                                                                                                                        Specify header levels which is a single number start from 1 or an array of number that want to hide arrow icon. If specify true all arrows will be hidden.        ","tagName":"tr"},{"text":"                            contentAsHeader                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, second level group header rows are hidden, the first content rows become a header, cells are not be clickable, and arrows are hidden.        ","tagName":"tr"},{"text":"                            headerSpanning                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, every cell on the group header row is displayed        ","tagName":"tr"},{"text":"                            footerSpanning                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, only cells from the first column will be shown, spanning over other cells        ","tagName":"tr"},{"text":"                            groupSortLogic                                                    RowGroupingPlugin~GroupSortLogic                                                                                                                                                                                                                    null                                                        Logic for group sorting. There is no sorting by default (i.e. groups are placed in order of their creation time)        ","tagName":"tr"},{"text":"RowGroupingPlugin~GroupSortLogic","tagName":"a"},{"text":"                            autoGroupSorting                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, group sorting will be performed after each `groupAdded` event        ","tagName":"tr"},{"text":"                            indentSize                                                    boolean | number | Array.                                                                                                                                                                                                                                        Use array to define indent for each group level. Use boolean to turn on or off indentation. Use number to define incremental step.        ","tagName":"tr"},{"text":"                            colorTag                                                    boolean                                                                                                                                                                                                                                        If not specified, the color tag will be disabled when using extension without halo theme.        ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                                                                                                                                                                        Predefined color object map for color tag        ","tagName":"tr"},{"text":"                            groupColors                                                    Object                                                                                                                                                                                                                                        The object map of group ID and predefined color.        ","tagName":"tr"},{"text":"                            defaultCollapse                                                    boolean                                                                                                                                                                                                                    false                                                        Collapsing groups by default when a group is created        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                                                                                                                                                    null                                                        Event handler when user clicks on arrows or cells        ","tagName":"tr"},{"text":"                            groupAdded                                                    function                                                                                                                                                                                                                    null                                                        Event handler        ","tagName":"tr"},{"text":"                            beforeGroupAdded                                                    function                                                                                                                                                                                                                    null                                                        Event handler        ","tagName":"tr"},{"text":"                            groupHeaderBinding                                                    function                                                                                                                                                                                                                    null                                                        Logic that will be executed on each group header row        ","tagName":"tr"},{"text":"                            groupFooterBinding                                                    function                                                                                                                                                                                                                    null                                                        Once defined, footer row will be added on each group        ","tagName":"tr"},{"text":"                            headerBinding                                                    function                                                                                                                                                                                                                    null                                                        Shorthand for `groupHeaderBinding`        ","tagName":"tr"},{"text":"                            footerBinding                                                    function                                                                                                                                                                                                                    null                                                        Shorthand for `groupFooterBinding`        ","tagName":"tr"},{"text":"                            nonGroupBinding                                                    function                                                                                                                                                                                                                    null                                                        This is used to clear any custom styling defined in groupHeaderBinding or groupFooterBinding        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"beforeProcessOption(optionName, optionVal) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"collapse(groupRowId, opt_collapsedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"collapseAll(opt_collapsedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableClicking(opt_disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableFixedDisplayColumn(opt_enabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableFooterRow(opt_numopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"expand(groupRowId, opt_expandedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"expandAll(opt_expandedopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getColumnMenu(colIndex, config) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDataView() → {Object}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getDefaultCollapse() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupingCriteria() → {Array.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupingStates() → {Array.}","tagName":"h4"},{"text":"RowGroupingPlugin~GroupingState","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowGroupingPlugin~GroupingState","tagName":"a"},{"text":"getGroupSortingLogic() → {function}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"groupBy(criteria)","tagName":"h4"},{"text":"RowGroupingPlugin#setGroupingCriteria","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"RowGroupingPlugin~GroupCriteria","tagName":"a"},{"text":"RowGroupingPlugin#setGroupingCriteria","tagName":"a"},{"text":"hasGroupingCriteria() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDefaultCollapse(collapse)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setGroupingCriteria(criteria)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowGroupingPlugin~GroupCriteria","tagName":"a"},{"text":"setGroupingStates(states)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowGroupingPlugin~GroupingState","tagName":"a"},{"text":"setGroupSortingLogic(sortFunction)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowGroupingPlugin~GroupSortLogic","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var compare = function(grpA, grpB, dataViewA, dataViewB) {\n  return (grpA <= grpB) ? -1 : 1;\n}\nvar dstp = new RowGroupingExtension();\ndstp.setGroupSortingLogic(compare);","tagName":"pre"},{"text":"setPredefinedColors(predefinedColors)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setPredefinedGroups(predefinedGroups)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"sortGroups()","tagName":"h4"},{"text":"unload(hostopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"updateHeaders()","tagName":"h4"},{"text":"Events","tagName":"h3"},{"text":"beforeGroupAdded","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            dataView                                                    Object                                                            DataView instance        ","tagName":"tr"},{"text":"                            newGroupId                                                    string                                                                    ","tagName":"tr"},{"text":"                            newGroupValue                                                    *                                                                    ","tagName":"tr"},{"text":"                            newGroupRowId                                                    string                                                            Unique row Id given for the group        ","tagName":"tr"},{"text":"clicked","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            expanded                                                    boolean                                                                    ","tagName":"tr"},{"text":"                            group                                                    Object                                                            Data view that represents currently clicked group header row        ","tagName":"tr"},{"text":"groupAdded","tagName":"h4"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            dataView                                                    Object                                                            Parent DataView that create the new group        ","tagName":"tr"},{"text":"                            newGroup                                                    Object                                                            Child DataView that is newly created        ","tagName":"tr"},{"text":"groupFooterBinding","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            rowData                                                    object                                                                    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            rowId                                                    string                                                                    ","tagName":"tr"},{"text":"                            footerIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            groupId                                                    string                                                                    ","tagName":"tr"},{"text":"                            footerRow                                                    boolean                                                                    ","tagName":"tr"},{"text":"                            cell                                                    Object                                                            Grid cell instance        ","tagName":"tr"},{"text":"                            section                                                    Object                                                            VirtualizedLayoutGrid        ","tagName":"tr"},{"text":"                            dataSource                                                    Object                                                            Parent DataView of group        ","tagName":"tr"},{"text":"groupHeaderBinding","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            rowData                                                    object                                                                    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            rowId                                                    string                                                                    ","tagName":"tr"},{"text":"                            footerIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            groupId                                                    string                                                                    ","tagName":"tr"},{"text":"                            footerRow                                                    boolean                                                                    ","tagName":"tr"},{"text":"                            cell                                                    Object                                                            Grid cell instance        ","tagName":"tr"},{"text":"                            section                                                    Object                                                            VirtualizedLayoutGrid        ","tagName":"tr"},{"text":"                            dataSource                                                    Object                                                            Parent DataView of group        ","tagName":"tr"},{"text":"nonGroupBinding","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            rowData                                                    object                                                                    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            rowId                                                    string                                                                    ","tagName":"tr"},{"text":"                            cell                                                    Object                                                            Grid cell instance        ","tagName":"tr"},{"text":"                            section                                                    Object                                                            VirtualizedLayoutGrid        ","tagName":"tr"},{"text":"                            dataSource                                                    Object                                                            Root DataView of all group        ","tagName":"tr"},{"text":"                            noIndent                                                    boolean                                                            set this property to true to prevent cell add indent        ","tagName":"tr"}]},{"title":"Row Segmenting","filename":"extensions/row-segmenting.html","contents":[{"text":"Row Segmenting","tagName":"h2"},{"text":"The Row Segmenting Extension provides a way to group row content based on row index. By specifying a row index, the row becomes a group header. Any row below the group header can then be added as a group member. This provides more flexibility in how you define a group, unlike Row Grouping Extension where groups are based on strictly defined criteria. ","tagName":"p"},{"text":"\n\n\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var rowSegmentingExt = new tr.RowSegmentingExtension();\nvar rowDraggingExt = new tr.RowDraggingExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    rowSegmentingExt,\n    rowDraggingExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.addEventListener(\"configured\", function() {\n  rowSegmentingExt.setSegmentSeparator(2);\n  rowSegmentingExt.setSegmentSeparator(5);\n  rowSegmentingExt.setSegmentSeparator(8);\n  rowSegmentingExt.fillSegments();\n});\ngrid.config = configObj;\n\ndocument.getElementById(\"set_btn1\").addEventListener(\"click\", function(e) {\n  rowSegmentingExt.removeAllSegmentChildren();\n  rowSegmentingExt.setSegmentSeparator(2, !rowSegmentingExt.isSegmentSeparator(2));\n  rowSegmentingExt.fillSegments();\n});\ndocument.getElementById(\"set_btn2\").addEventListener(\"click\", function(e) {\n  rowSegmentingExt.removeAllSegmentChildren();\n  rowSegmentingExt.setSegmentSeparator(5, !rowSegmentingExt.isSegmentSeparator(5));\n  rowSegmentingExt.fillSegments();\n});\ndocument.getElementById(\"set_btn3\").addEventListener(\"click\", function(e) {\n  rowSegmentingExt.removeAllSegmentChildren();\n  rowSegmentingExt.setSegmentSeparator(8, !rowSegmentingExt.isSegmentSeparator(8));\n  rowSegmentingExt.fillSegments();\n});\ndocument.getElementById(\"unset_btn\").addEventListener(\"click\", function(e) {\n  rowSegmentingExt.unsetAllSegmentSeparators();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Differences between Row Segmenting Extension and Row Grouping Extension","tagName":"h2"},{"text":"Both extensions produce very similar looking results, but there are some key differences in behaviors and functionalities. ","tagName":"p"},{"text":"Group header (segment separator)","tagName":"h3"},{"text":"The group headers in Row Segmenting Extension have their own data/content, whereas those in Row Grouping Extension have no data. Group headers in Row Segmenting Extension are actually normal row with a separator mark on it. This means you can perform sorting and filtering on the group headers.","tagName":"p"},{"text":"The group headers in the Row Grouping Extension have no data because they are automatically generated based on the specified criteria. So they have no place to hold their data and you will need to have a separate place to hold it. Because of this extra place to manage, it's more difficult to perform sorting and filtering on these group headers.","tagName":"p"},{"text":"Dragging group header","tagName":"h3"},{"text":"The group headers in Row Segmenting Extension can be moved by dragging, if we use Row Dragging Extension. Moving group header is the same as moving row content. After moving, group headers will also move their row members along with them.","tagName":"p"},{"text":"The group headers in Row Grouping Extension cannot be moved freely. They can only moved or ordered by sorting operation. This is because they are automatically generated and constantly added or removed according to data updates. ","tagName":"p"},{"text":"Note: dragging behaviors for group headers have not yet finalized and are subject to change.","tagName":"p"},{"text":"Grouping criteria","tagName":"h3"},{"text":"Specifying a group header in Row Segmenting Extension is a bit more difficult. Each group header has to be set manually through the extension's APIs. Use the setSegmentSeparator() method to specify group header. Group members need to be manually added to the new groups by addSegmentChild() or addSegmentChildren() methods. Any row added to the group will be moved below the group header position. Rows that are already a group member cannot be added to another group. ","tagName":"p"},{"text":"Grouping in Row Grouping Extension are based on row content. So, you can add or remove a group by just changing content of a row. A row can be moved between different groups by changing content of the row as well. ","tagName":"p"},{"text":"More APIs will be implemented to accommodate adding or removing member in the future updates.","tagName":"p"},{"text":"Segment Classification (multi-level/nested grouping)","tagName":"h3"},{"text":"With Row Segmenting Extension, you can specify classfication on individual segment to add nested segments. The criteria can be defined by using setSegmentClassification method with array of fields as its parameter. ","tagName":"p"},{"text":"\n\n\n\n
                                                                                              \n\n\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var segmentIdx = 1;\nset_btn1.addEventListener(\"click\", function(e) {\n  rowSegmentingExt.setSegmentClassification(segmentIdx, [\"market\"]);\n});\nset_btn2.addEventListener(\"click\", function(e) {\n  rowSegmentingExt.setSegmentClassification(segmentIdx, [\"industry\"]);\n});\nset_btn3.addEventListener(\"click\", function(e) {\n  rowSegmentingExt.setSegmentClassification(segmentIdx, [\"market\", \"industry\"]);\n});\nset_btn4.addEventListener(\"click\", function(e) {\n  rowSegmentingExt.setSegmentClassification(segmentIdx, null);\n});\n\ndata_btn1.addEventListener(\"click\", function(e) {\n  grid.api.setStaticData(row5, \"market\", \"NASDAQ\");\n});\ndata_btn2.addEventListener(\"click\", function(e) {\n  grid.api.setStaticData(row5, \"market\", \"DJI\");\n});\ndata_btn3.addEventListener(\"click\", function(e) {\n  grid.api.setStaticData(row5, \"industry\", \"Investment Managers\");\n});\ndata_btn4.addEventListener(\"click\", function(e) {\n  grid.api.setStaticData(row5, \"industry\", \"Paper\");\n});\n\nvar row5 = null;\nvar rowSegmentingExt = new tr.RowSegmentingExtension();\nvar fields = [\"companyName\", \"id\", \"market\", \"industry\", \"number_2\", \"float_1\"];\nvar columnMap = {};\nvar columns = fields.map(function(f) {\n  var column = {\n    name: f,\n    field: f\n  };\n  columnMap[f] = column;\n  return column;\n});\ncolumnMap[\"companyName\"].width = 200;\ncolumnMap[\"id\"].width = 60;\n\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, rowCount: 20 });\nvar configObj = {\n  columns: columns,\n  extensions: [\n    rowSegmentingExt\n  ]\n};\n\nvar grid = window.grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.addEventListener(\"configured\", function(e) {\n  row5 = e.detail.api.getRowDefinition(6);\n  rowSegmentingExt.setSegmentSeparator(segmentIdx);\n  rowSegmentingExt.addSegmentChildren(segmentIdx, [2, 3, 4, 5, 6, 7]);\n\n  rowSegmentingExt.setSegmentSeparator(10);\n  rowSegmentingExt.addSegmentChildren(10, [11, 12, 13]);\n});\ngrid.config = configObj;\ngrid.data = records;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 300px;\n}","tagName":"pre"},{"text":"Group sorting","tagName":"h3"},{"text":"Row segmenting can be sorted manually through an API sortSeparators from SortableTitlePlugin. The method accept a sorting function as parameter. If no parameter is passed to the function, the segments will be sorted according to the current sorting states of the grid.","tagName":"p"},{"text":"Note:","tagName":"p"},{"text":"\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var rowSegmentingExt = new tr.RowSegmentingExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 15 });\nvar segmentId = \"SegmentId\";\nrecords[2][\"segmentOrder\"] = 1;\nrecords[2][segmentId] = \"1\";\nrecords[3][segmentId] = \"1\";\nrecords[4][segmentId] = \"1\";\n\nrecords[5][\"segmentOrder\"] = 2;\nrecords[5][segmentId] = \"2\";\nrecords[6][segmentId] = \"2\";\nrecords[7][segmentId] = \"2\";\n\nrecords[10][\"segmentOrder\"] = 3;\nrecords[10][segmentId] = \"3\";\nrecords[11][segmentId] = \"3\";\nrecords[12][segmentId] = \"3\";\n\nvar originalSortFunc = function(rowA, rowB) {\n  var segmentOrderA = rowA[\"ROW_DEF\"].getData(\"segmentOrder\");\n  var segmentOrderB = rowB[\"ROW_DEF\"].getData(\"segmentOrder\");\n  if (segmentOrderA < segmentOrderB) {\n    return -1;\n  }\n  if (segmentOrderB < segmentOrderA) {\n    return 1;\n  }\n  return 0;\n}\n\nvar configObj = {\n  sorting: {\n    sortableColumns: true,\n    // After regular rows are sorted\n    // Sort segments by current grid sorting states\n    columnSorted: function(e) {\n      e.sender.sortSeparators();\n    }\n  },\n  rowSegmenting: {\n    segmentIdField: segmentId\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    rowSegmentingExt\n  ]\n};\nvar grid = window.grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;\ndocument.getElementById(\"clear_sort\").addEventListener(\"click\", function(e) {\n  var stPlugin = grid.api.getCoreGrid().getPlugin(\"SortableTitlePlugin\");\n  stPlugin.clearSortState();\n});\ndocument.getElementById(\"original_sort_segment\").addEventListener(\"click\", function(e) {\n  var stPlugin = grid.api.getCoreGrid().getPlugin(\"SortableTitlePlugin\");\n  stPlugin.sortSeparators(originalSortFunc);\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Content sorting","tagName":"h3"},{"text":"Row content is sorted within its own group. The behavior is the same for both Row Segmenting and Row Grouping Extension.","tagName":"p"},{"text":"Row Segmenting Extension features","tagName":"h2"},{"text":"Predefined color on the color tags","tagName":"h3"},{"text":"The extension supports color from the predefined colors. To do this you need to assign predefined class object to the predefinedColors property then specify field name of the cssField property.","tagName":"p"},{"text":"
                                                                                              \n  Predefined color #1\n  
                                                                                              \n  \n
                                                                                              \n
                                                                                              \n  Predefined color #2\n  
                                                                                              \n  \n
                                                                                              \n
                                                                                              \n
                                                                                              \n  Change color of 6th row\n  \n  \n  \n
                                                                                              \n
                                                                                              \n\n","tagName":"pre"},{"text":"var predefinedColorsSet1 = {\n  \"color-1\": {\n    backgroundColor: \"#FF2848\"\n  },\n  \"color-2\": {\n    backgroundColor: \"#FFB27B\"\n  },\n  \"color-3\": {\n    backgroundColor: \"#EEF3B4\"\n  }\n};\n\nvar predefinedColorsSet2 = {\n  \"color-1\": {\n    backgroundColor: \"#64864A\"\n  },\n  \"color-2\": {\n    backgroundColor: \"#F56093\"\n  },\n  \"color-3\": {\n    backgroundColor: \"#FFCCCD\"\n  }\n};\n\nvar color, el;\nvar parent = document.getElementById(\"set1\");\nvar div = document.createElement(\"div\");\nfor (color in predefinedColorsSet1) {\n  el = div.cloneNode();\n  el.textContent = color;\n  el.classList.add(\"example-color\");\n  el.style.backgroundColor = predefinedColorsSet1[color].backgroundColor;\n  parent.appendChild(el);\n}\n\nparent = document.getElementById(\"set2\");\nfor (color in predefinedColorsSet2) {\n  el = div.cloneNode();\n  el.textContent = color;\n  el.classList.add(\"example-color\");\n  el.style.backgroundColor = predefinedColorsSet2[color].backgroundColor;\n  parent.appendChild(el);\n}\n\nvar ext = new tr.RowSegmentingExtension();\nvar fields = [\"companyName\", \"CF_NETCHNG\", \"CF_VOLUME\"];\nvar columns = fields.map(function(f) {\n  return {\n    name: f,\n    field: f\n  };\n});\n\ncolumns.push({\n  name: \"color\",\n  field: \"TAG_CSS_CLASS\"\n});\n\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 1, rowCount: 20 });\n\nrecords[2][\"TAG_CSS_CLASS\"] = \"color-1\";\nrecords[5][\"TAG_CSS_CLASS\"] = \"color-2\";\nrecords[8][\"TAG_CSS_CLASS\"] = \"color-3\";\n\nvar configObj = {\n  rowSegmenting: {\n    cssField: \"TAG_CSS_CLASS\",\n    predefinedColors: predefinedColorsSet1\n  },\n  columns: [{\n      field: fields[0],\n      name: \"companyName\"\n    },\n    {\n      field: fields[1],\n      name: \"Net. Chng\"\n    },\n    {\n      field: fields[2],\n      name: \"Volume\"\n    }\n  ],\n  extensions: [\n    ext\n  ]\n};\nvar grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.addEventListener(\"configured\", function(e) {\n  ext.setSegmentSeparator(2);\n  ext.setSegmentSeparator(5);\n  ext.setSegmentSeparator(8);\n  ext.fillSegments();\n});\ngrid.config = configObj;\ngrid.data = records;\n\ndocument.getElementById(\"apply_btn1\").addEventListener(\"click\", function(e) {\n  ext.setPredefinedColors(predefinedColorsSet1);\n});\n\ndocument.getElementById(\"apply_btn2\").addEventListener(\"click\", function(e) {\n  ext.setPredefinedColors(predefinedColorsSet2);\n});\n\ndocument.getElementById(\"set_color_btn1\").addEventListener(\"click\", function(e) {\n  grid.api.setStaticData(5, \"TAG_CSS_CLASS\", \"color-1\");\n});\n\ndocument.getElementById(\"set_color_btn2\").addEventListener(\"click\", function(e) {\n  grid.api.setStaticData(5, \"TAG_CSS_CLASS\", \"color-2\");\n});\n\ndocument.getElementById(\"set_color_btn3\").addEventListener(\"click\", function(e) {\n  grid.api.setStaticData(5, \"TAG_CSS_CLASS\", \"color-3\");\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 300px;\n}\n\n.example-container {\n  display: inline;\n}\n\n.example-color {\n  width: 50px;\n  height: 24px;\n  margin: 4px;\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 24px;\n  color: #333;\n  text-align: center;\n}\n\nbutton {\n  vertical-align: middle;\n}","tagName":"pre"},{"text":"Saving and loading segments","tagName":"h3"},{"text":"In atlas-blotter with Row Segmenting Extension we have spanningField, predefinedColor, segmentId can be implement save/load grid config,We provide the user to set those properties with setStaticRowData or setStaticData.When you set static data to pass grid API. It will be applied API in Row Segmenting Extension too. Such as, setPredefiniedColor can be set static value with grid.api.setStaticData(0,\"TAG_CSS_CLASS\", \"color1\") in runtime mode.And also, in the initialization grid, it will get values from rows or staticDataRows, which is static data.","tagName":"p"},{"text":"The example of set static data, which edits values in runtime,we provide the use case save/load config from the grid.You can get the config from the grid and use this config in another grid.","tagName":"p"},{"text":"You can follow in below example for implement save/load functionality.The first example it will be grid that can be change data with click \"Save config\".And then you can paste this config on the example 2 and click \"Start Grid\" and both grids look the same. ","tagName":"p"},{"text":"Example 1: saving segment configuration from grid","tagName":"h4"},{"text":"Row Index\n\n\n\n
                                                                                              \n Set segment color\n\n\n\n\n
                                                                                              \n Toggle Spanning \n\n
                                                                                              \n Save grid config for restore \n\n \n","tagName":"pre"},{"text":"var rowSegmentingExt = window.rowSegmentingExt = new tr.RowSegmentingExtension();\n\nvar fields = [\"companyName\", \"industry\", \"CF_NETCHNG\", \"PCTCHNG\", \"CF_VOLUME\"];\n\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 1, rowCount: 12 });\n\n// Initialize grid with segment separators\nrecords[1].segmentId = \"1\";\nrecords[2].segmentId = \"1\";\nrecords[3].segmentId = \"1\";\n\nrecords[4].segmentId = \"3\";\nrecords[5].segmentId = \"3\";\nrecords[6].segmentId = \"3\";\n\nrecords[7].segmentId = \"2\";\nrecords[8].segmentId = \"2\";\nrecords[9].segmentId = \"2\";\n\n// Set colors to each segment\nrecords[1].rowSegmentingColoringClass = \"color-1\";\nrecords[4].rowSegmentingColoringClass = \"color-2\";\nrecords[7].rowSegmentingColoringClass = \"color-3\";\n\nrecords[4].customGroup = \"Custom Group 1\";\nrecords[4].spanning = true;\nrecords[7].spanning = 2;\n\n\nvar predefinedColorsSet1 = {\n  \"color-1\": {\n    backgroundColor: \"#FF2848\"\n  },\n  \"color-2\": {\n    backgroundColor: \"#FFB27B\"\n  },\n  \"color-3\": {\n    backgroundColor: \"#EEF3B4\"\n  }\n};\n\nvar configObj = {\n  columns: [{\n      name: \"Company Name\",\n      field: fields[0],\n      width: 120\n    },\n    {\n      name: \"Industry\",\n      field: fields[1]\n    },\n    {\n      name: \"Net. Chng\",\n      field: fields[2]\n    },\n    {\n      name: \"Price. Chng\",\n      field: fields[3]\n    },\n    {\n      name: \"Volume\",\n      field: fields[4]\n    }\n  ],\n  extensions: [rowSegmentingExt],\n  rowSegmenting: {\n    cssField: \"rowSegmentingColoringClass\",\n    predefinedColors: predefinedColorsSet1,\n    rowSpanningField: \"spanning\",\n    segmentIdField: \"segmentId\",\n    segmentSeparatorBinding: function(e) {\n      if (e.rowData[\"customGroup\"]) {\n        e.cell.setTextContent(e.rowData[\"customGroup\"]);\n      } else {\n        e.cell.setTextContent(e.rowData[\"companyName\"]);\n      }\n    }\n  },\n  staticDataRows: records,\n};\n\nvar grid = window.grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;\nwindow.grid = grid;\n\n// listening Click Events\n\nset_segment_color_1.addEventListener(\"click\", function(e) {\n  var rowIndex = +row_index.value;\n  grid.api.setStaticData(rowIndex, \"rowSegmentingColoringClass\", \"color-1\");\n});\n\nset_segment_color_2.addEventListener(\"click\", function(e) {\n  var rowIndex = +row_index.value;\n  grid.api.setStaticData(rowIndex, \"rowSegmentingColoringClass\", \"color-2\");\n});\n\nset_segment_color_3.addEventListener(\"click\", function(e) {\n  var rowIndex = +row_index.value;\n  grid.api.setStaticData(rowIndex, \"rowSegmentingColoringClass\", \"color-3\");\n});\n\nunset_segment_color.addEventListener(\"click\", function(e) {\n  var rowIndex = +row_index.value;\n  grid.api.setStaticData(rowIndex, \"rowSegmentingColoringClass\", null);\n});\n\n\nspanning_segment_separator.addEventListener(\"click\", function(e) {\n  var rowIndex = +row_index.value;\n  var rowSpanning = grid.api.getRowData(rowIndex).spanning;\n\n  var rowDef = grid.api.getRowDefinition(rowIndex);\n  rowDef.setStaticData(\"spanning\", !rowSpanning);\n\n});\n\nsave_config.addEventListener(\"click\", function(e) {\n  var config = grid.api.getConfigObject();\n  var configStr = JSON.stringify(config, null, 2);\n  copyToClipboard(configStr);\n  copy_success.textContent = \"Copied grid config to clipboard success\";\n  setTimeout(function(e) { copy_success.textContent = \"\" }, 5000); // clear alert user\n});\n\nfunction copyToClipboard(val) {\n  // tmpInput for copy text\n  var tmpInput = document.getElementById(\"tmp_input\");\n  if (!tmpInput) {\n    tmpInput = document.createElement(\"textarea\");\n    tmpInput.id = \"tmp_input\";\n    document.body.appendChild(tmpInput);\n  }\n  tmpInput.style.visibility = \"visible\";\n  tmpInput.value = val;\n  tmpInput.select();\n  document.execCommand(\"copy\");\n  tmpInput.style.visibility = \"hidden\";\n\n}","tagName":"pre"},{"text":"html body {\n  padding: 20px;\n  box-sizing: border-box;\n}\n\nhtml hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 300px;\n}\n\n#copy_success {\n  color: green;\n}\n\ninput[type=\"number\"] {\n  width: 40px;\n}","tagName":"pre"},{"text":"Example 2: restoring segments","tagName":"h4"},{"text":" You can load the grid config with pase in below text area and then click "Start Grid" \n
                                                                                              \n\n
                                                                                              \n\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"industry\", \"CF_NETCHNG\", \"PCTCHNG\", \"CF_VOLUME\"];\n\nfunction onSeparatorBinding(e) {\n  if (e.rowData[\"customGroup\"]) {\n    e.cell.setTextContent(e.rowData[\"customGroup\"]);\n  } else {\n    e.cell.setTextContent(e.rowData[\"companyName\"]);\n  }\n}\n\nstart_grid.addEventListener(\"click\", function(e) {\n  var grid = window.grid = window.grid = document.getElementsByTagName(\"atlas-blotter\")[0];\n\n  var valueConfig = JSON.parse(area_config.value);\n  var configObj = valueConfig;\n  if (configObj.rowSegmenting) {\n    configObj.rowSegmenting[\"segmentSeparatorBinding\"] = onSeparatorBinding;\n  }\n  grid.config = configObj;\n});","tagName":"pre"},{"text":"html body {\n  padding: 20px;\n  box-sizing: border-box;\n}\n\nhtml hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 300px;\n}\n\n#area_config {\n  width: 100%;\n  height: 100px;\n}","tagName":"pre"},{"text":"SegmentId field","tagName":"h3"},{"text":"If you intend to apply a segment separator using the segmentId field during runtime, whenever the row data is updated, it is necessary to call the requestSeparatorRefresh function to forcefully render the user interface (UI). This step ensures that the changes are reflected in the UI, allowing for an accurate representation of the updated segment separators.","tagName":"p"},{"text":"Currently, you can set the segment separator for the grid in two ways. The first method is by using the grid API through the setSegmentSeparator function. The second method involves setting the segmentId field in the row data. However, we strongly advise against using both methods simultaneously. Please choose one approach that suits your needs, keeping in mind that the user interface will appear similar regardless of the method chosen.","tagName":"p"},{"text":"Empty segment filtering and separator filtering","tagName":"h3"},{"text":"By default, segment header cannot be filtered out. However, Row Filtering Extension has emptySegmentFiltering option that allows empty segment to be filtered out. With the option turned on, any segment whose all of its members are not present by filtering will also be hidden. Empty segment will still be visible, if there is no active filter. Collapsing of the segment does not count as having an active filter.","tagName":"p"},{"text":"separatorFiltering option from Row Filtering Extension also allow separator rows to be filtered as if they were a normal row. Note that the separator rows can be filtered out, while their child rows may ramain visible.  ","tagName":"p"},{"text":"\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var chkBox = document.getElementById(\"empty_segment_chk\");\nchkBox.addEventListener(\"change\", function(e) {\n  var checked = e.currentTarget.checked;\n  rfExt.enableEmptySegmentFiltering(checked); // Changing mode at runtime\n});\nchkBox = document.getElementById(\"separator_chk\");\nchkBox.addEventListener(\"change\", function(e) {\n  var checked = e.currentTarget.checked;\n  rfExt.enableSeparatorFiltering(checked); // Changing mode at runtime\n});\n\nvar fields = [\"id\", \"companyName\", \"index4\", \"percent\", \"market\"];\nvar columns = fields.map(function(f, idx) {\n  return {\n    name: \"Column \" + idx,\n    field: f\n  };\n});\ncolumns[0].width = 80;\n\nvar segmentId = \"SegmentId\";\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, rowCount: 15 });\nrecords[1][segmentId] = \"0\"; // To illustrate empty segment\n\nrecords[3][segmentId] = \"1\";\nrecords[4][segmentId] = \"1\";\nrecords[5][segmentId] = \"1\";\nrecords[6][segmentId] = \"1\";\n\nrecords[8][segmentId] = \"2\";\nrecords[9][segmentId] = \"2\";\nrecords[10][segmentId] = \"2\";\nrecords[11][segmentId] = \"2\";\n\nvar fiExt = new tr.FilterInputExtension();\nvar rfExt = new tr.RowFilteringExtension();\nvar configObj = {\n  columns: columns,\n  rowFiltering: {\n    emptySegmentFiltering: true,\n    separatorFiltering: true\n  },\n  rowSegmenting: {\n    segmentIdField: segmentId\n  },\n  staticDataRows: records,\n  extensions: [rfExt, fiExt]\n};\n\nvar grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 300px;\n}\n\ni:empty {\n  padding-right: 20px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            spanning                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, segment separator rows will not be spanned/stretched across multiple cells        ","tagName":"tr"},{"text":"                            colorTag                                                    boolean                                                                                                                                                                                                                                        If not specified, the color tag will be disabled when using extension without halo theme.        ","tagName":"tr"},{"text":"                            cssField                                                    string                                                                                                                                                                                                                    \"TAG_CSS_CLASS\"                                                        Apply CSS class based on the given field        ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                                                                                                                                                                        Predefined color object map for color tag        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                                                                                                                                                    null                                                        Event handler when user clicks on arrows or cells        ","tagName":"tr"},{"text":"                            headerMenuClicked                                                    function                                                                                                                                                                                                                    null                                                        Event handler when user clicks on menu icon. The menu icon will be displayed if spanning option is true.        ","tagName":"tr"},{"text":"                            segmentSeparatorBinding                                                    function                                                                                                                                                                                                                    null                                                        Logic that will be executed on each segment separator row        ","tagName":"tr"},{"text":"                            nonSegmentSeparatorBinding                                                    function                                                                                                                                                                                                                    null                                                        Logic that will be executed for all non segment separator row        ","tagName":"tr"},{"text":"                            sortingLogic                                                    function                                                                                                                                                                                                                    null                                                        Logic to be used by sortSegments method        ","tagName":"tr"},{"text":"                            rowSpanningField                                                    string                                                                                                                                                                                                                    \"ROW_SPANNING\"                                                        selected field for apply row spanning in row separator        ","tagName":"tr"},{"text":"                            segmentIdField                                                    string                                                                                                                                                                                                                    \"SEGMENT_ID\"                                                        selected field for set segment separator row        ","tagName":"tr"},{"text":"SortingLogic(rowDataA, rowDataB) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Methods","tagName":"h3"},{"text":"addSegmentChild(segmentRef, rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"addSegmentChildren(segmentRef, rowRefs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"collapseSegment(rowRef, collapsedopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"expandAllSegments() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"expandSegment(rowRef, expandedopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"fillSegment(segmentRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"fillSegments()","tagName":"h4"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowConfigObject(rowData, rowId) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentChildIds(segmentRef) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentIds() → {Array.}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentParentRowId(rowRef) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"hasSegmentation() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isSegmentCollapsed(rowRef) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"isSegmentSeparator(rowRef) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"removeAllSegmentChildren()","tagName":"h4"},{"text":"removeSegmentChild(segmentRef, rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeSegmentChildren(segmentRef, rowRefs)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"requestSeparatorRefresh()","tagName":"h4"},{"text":"setPredefinedColors(predefinedColors)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSegmentClassification(rowRef, fields) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setSegmentCollapsingLogic(func)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSegmentSeparator(rowRef, enabledopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setSortingLogic(sortFunction)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowSegmentingPlugin~SortingLogic","tagName":"a"},{"text":"sortSegments(sortFunctionopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowSegmentingPlugin~SortingLogic","tagName":"a"},{"text":"spanSegmentSeparator(rowRef, spanning)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(hostopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unsetAllSegmentSeparators() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"updateHeaders()","tagName":"h4"}]},{"title":"Row Selection","filename":"extensions/tr-grid-row-selection.html","contents":[{"text":"Row Selection","tagName":"h2"},{"text":"The Row Selection Extension will add the ability to select a single row or multiple rows on Grid. ","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 15 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.RowSelectionExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"basedOnContent mode","tagName":"h3"},{"text":"Normally, when content is sorted and a row changes position, row selection will not change position like the content does (try example above). But if you do want the row selection to relocate itself with the content, you can turn on basedOnContent mode.","tagName":"p"},{"text":"For actual result, try to select one or more rows, then click the column header to sort data and see what happens with row selection.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 15 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.RowSelectionExtension()\n  ],\n  rowSelection: {\n    basedOnContent: true\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Copy text content from seletected rows","tagName":"h3"},{"text":"You can directly hook native copy event on Grid element to retrieve data and put it on system clipboard. Use the extension's APIs to get currently selected rows.  ","tagName":"p"},{"text":"native copy event","tagName":"a"},{"text":"Try copy (Ctrl/Command + C) text and paste the content on the text box below\n\n
                                                                                              \n\n
                                                                                              \n","tagName":"pre"},{"text":"function onCopy(e) {\n  var selectedRowIndices = rowSelExt.getSelectedRows();\n  var text = \"No Selected Row\";\n  if (selectedRowIndices) {\n    var rows = grid.api.getMultipleRowData(selectedRowIndices);\n    var values = rows.map(function getValueInTSV(row) {\n      return [\n        row[\"companyName\"],\n        row[\"market\"],\n        row[\"CF_LAST\"],\n        row[\"CF_NETCHNG\"],\n        row[\"industry\"]\n      ].join(\"\\t\");\n    });\n    text = values.join(\"\\n\");\n  }\n  e.clipboardData.setData(\"text/plain\", text);\n  e.preventDefault();\n}\n\nvar rowSelExt = new tr.RowSelectionExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    rowSelExt\n  ],\n  rowSelection: {\n    basedOnContent: true\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\ngrid.addEventListener(\"copy\", onCopy);","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 169px;\n}\n\ntextarea {\n  width: 100%;\n  height: 100px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            singleSelection                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, user can have one selection at any moment        ","tagName":"tr"},{"text":"                            selectionChanged                                                    function                                                                                                                                                                                                                    null                                                        Handler executed after selection is made        ","tagName":"tr"},{"text":"                            beforeSelection                                                    function                                                                                                                                                                                                                    null                                                        Handler executed before selection is made        ","tagName":"tr"},{"text":"                            basedOnContent                                                    boolean                                                                                                                                                                                                                    false                                                        Normally row selection will not move when data sorted, with this option turn on then selection will relocate strictly with row data.        ","tagName":"tr"},{"text":"                            selectionField                                                    string                                                                                                                                                                                                                    SELECTED_ROW                                                        Normally basedOnContent will set selection state in row data with field name \"SELECTED_ROW\" but you can change field name here.        ","tagName":"tr"},{"text":"                            menuClicked                                                    function                                                                                                                                                                                                                    null                                                        Event Handler when user clicks on menu icon.        ","tagName":"tr"},{"text":"                            menuPosition                                                    string                                                                                                                                                                                                                    \"outside\"                                                        show icon in column grid that have style outside and non-outside        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"clearAllSelections(preserveAnchoropt, activeGridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"clearSelectedRows(preserveAnchoropt, activeGridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowSelectionPlugin#clearAllSelections","tagName":"a"},{"text":"clearSelection(preserveAnchoropt, activeGridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"RowSelectionPlugin#clearAllSelections","tagName":"a"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disable(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableMultiSelection(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getActiveGrid() → {Object}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getFirstSelectedIndex(sectRefopt) → {number|null}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getLastSelectedIndex(sectRefopt) → {number|null}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowAnchor(sectRefopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedRowCount(sectRefopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedRowIds(sectRefopt) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedRows(sectRefopt) → {Array.}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedText() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"isEnabled() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"selectAllRows(activeGridopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"selectRowRange(rowIndex, length, sectRefopt, opt_scrollToRowopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"selectSingleRow(rowIndex, sectRefopt, activeGridopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setSelectedRow(rowIndex, opt_selectopt, sectRefopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(hostopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"beforeSelection","tagName":"h4"},{"text":"Example:","tagName":"h5"},{"text":"var ext = new RowSelectionPlugin();\next.listen(\"beforeSelection\" function(e) {\n  e.cancel = true; // Cancel user selection\n});","tagName":"pre"},{"text":"selectionChanged","tagName":"h4"}]},{"title":"Row Coloring","filename":"extensions/tr-grid-rowcoloring.html","contents":[{"text":"Row Coloring","tagName":"h2"},{"text":"The Row Coloring Extension provides a way to set text color and background color in each row.","tagName":"p"},{"text":"\n\nRow Index:  Color: \n","tagName":"pre"},{"text":"var rowColoringExt = new tr.RowColoringExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    rowColoringExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.addEventListener(\"configured\", function(e) {\n  // Set text color and BG color through extension\n  rowColoringExt.setRowColor(1, \"#ffc5bf\", rowColoringExt.getContrastColor(\"#ffc5bf\"));\n  rowColoringExt.setRowColor(2, \"#97c1a9\", rowColoringExt.getContrastColor(\"#97c1a9\"));\n  rowColoringExt.setRowColor(3, \"#d4f0f0\", rowColoringExt.getContrastColor(\"#d4f0f0\"));\n});\ngrid.config = configObj;\n\ndocument.getElementById(\"set_btn\").addEventListener(\"click\", function(e) {\n  var rowIndex = +document.getElementById(\"row_inp\").value;\n  var bgColor = document.getElementById(\"color_inp\").value || \"black\";\n  rowColoringExt.toggleRowColor(rowIndex, bgColor, rowColoringExt.getContrastColor(bgColor));\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}\n\ninput[type=number] {\n  width: 30px;\n}\n\ninput[type=color] {\n  display: inline-block;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"User fields","tagName":"h3"},{"text":"The extension supports text color and background color from the dataTable. To do this you need to set the bgColorField and textColorField properties in the rowColoring options with your specified field names.","tagName":"p"},{"text":"\n\n","tagName":"pre"},{"text":"var rowColoringExt = new tr.RowColoringExtension();\ntr.DataGenerator.addFieldInfo(\"color\", {\n  type: \"set\",\n  members: [\"#c6dbda\", \"#fee1e8\", \"#fed7c3\", \"#f6eac2\", \"#ecd5e3\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"]\n});\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"color\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowColoring: {\n    bgColorField: \"color\",\n  },\n  extensions: [\n    rowColoringExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}","tagName":"pre"},{"text":"Predefined color mode","tagName":"h3"},{"text":"The extension also supports text color and background color from the predefined colors. To do this you need to assign predefined class object to the predefinedColors property then set predefinedColoring properties to true and specify field name of the cssField property.","tagName":"p"},{"text":"
                                                                                              \n  Row index \n
                                                                                              \n
                                                                                              \n  Set color\n  
                                                                                              \n  
                                                                                              \n  \n
                                                                                              \n
                                                                                              \n  Predefiend color\n  \n  \n
                                                                                              \n","tagName":"pre"},{"text":"var predefinedColorsSet1 = {\n  \"c-yellow\": {\n    backgroundColor: \"#FFFF00\"\n  },\n  \"c-blue\": {\n    backgroundColor: \"#00FFFF\"\n  },\n  \"c-green\": {\n    backgroundColor: \"#80FF80\"\n  },\n  \"c-red\": {\n    backgroundColor: \"#FF8080\"\n  }\n};\n\nvar predefinedColorsSet2 = {\n  \"h-dark-red\": {\n    backgroundColor: \"#520804\",\n    color: \"#C2C2C2\"\n  },\n  \"h-dark-green\": {\n    backgroundColor: \"#01433C\",\n    color: \"#C2C2C2\"\n  },\n  \"h-dark-blue\": {\n    backgroundColor: \"#003D5A\",\n    color: \"#C2C2C2\"\n  },\n  \"h-cyan\": {\n    backgroundColor: \"#2FB4C8\",\n    color: \"#C2C2C2\"\n  },\n  \"h-yellow\": {\n    backgroundColor: \"#FFE433\",\n    color: \"#C2C2C2\"\n  },\n  \"h-orange\": {\n    backgroundColor: \"#FA4C11\",\n    color: \"#C2C2C2\"\n  }\n};\n\n// prepare button for color setting\nfunction setRowColor(e) {\n  var btn = e.currentTarget;\n  var colorName = btn._colorName;\n  var rowIndex = parseInt(row_index.value);\n  rowColoringExt.setRowPredefinedColor(rowIndex, colorName);\n}\n\nfunction updateButtons() {\n  var btnGroup = document.getElementById(\"btn_group\");\n  btnGroup.innerHTML = \"\";\n  var colors = rowColoringExt.getPredefinedColors();\n  for (var name in colors) {\n    var styles = colors[name];\n    var btn = document.createElement(\"button\");\n    btn.textContent = name;\n    btn.style.backgroundColor = styles.backgroundColor || \"\";\n    btn.style.color = styles.color || \"\";\n    btn._colorName = name;\n    btn.addEventListener(\"click\", setRowColor);\n    btnGroup.appendChild(btn);\n  }\n}\n\nvar rowColoringExt = new tr.RowColoringExtension();\nvar conditionalColoringExt = new tr.ConditionalColoringExtension();\ntr.DataGenerator.addFieldInfo(\"coloringClass\", {\n  type: \"set\",\n  members: [\"c-yellow\", \"c-blue\", \"c-green\", \"c-red\", \"\", \"\", \"\", \"\", \"\", \"\"]\n});\nvar randIndex = tr.DataGenerator.randIndex;\nvar randBetween = tr.DataGenerator.randBetween;\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"id\", \"coloringClass\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 10 });\nvar configObj = {\n  columns: [{\n      name: \"Index\",\n      field: fields[5],\n      width: 50,\n      alignment: \"center\"\n    },\n    {\n      name: \"Company\",\n      field: fields[0]\n    },\n    {\n      name: \"Market\",\n      field: fields[1],\n      width: 120\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 100\n    },\n    {\n      name: \"Net. Chng\",\n      field: fields[3],\n      width: 100,\n      blinking: true,\n      conditions: [{\n          backgroundColor: \"\",\n          color: \"green\",\n          expression: \"[number] > 0\"\n        },\n        {\n          backgroundColor: \"\",\n          color: \"red\",\n          expression: \"[number] < 0\"\n        },\n        {\n          backgroundColor: \"\",\n          color: \"blue\",\n          expression: \"[number] == 0\"\n        }\n      ]\n    },\n    {\n      name: \"Industry\",\n      field: fields[4]\n    }\n  ],\n  staticDataRows: records,\n  rowColoring: {\n    predefinedColors: predefinedColorsSet1,\n    predefinedColoring: true,\n    cssField: \"coloringClass\"\n  },\n  extensions: [\n    rowColoringExt, conditionalColoringExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.addEventListener(\"configured\", updateButtons);\ngrid.config = configObj;\n\nsetInterval(function simulateUpdates() {\n  if (grid.api) {\n    var rowDef = grid.api.getRowDefinition(randIndex(10))\n    rowDef.setRowData({\n      \"CF_NETCHNG\": randBetween(-100, 100)\n    });\n  }\n}, 300);\n\ndocument.getElementById(\"reset\").addEventListener(\"click\", function(e) {\n  var rowIndex = parseInt(row_index.value);\n  rowColoringExt.setRowPredefinedColor(rowIndex, null);\n});\n\ndocument.getElementById(\"extend_color\").addEventListener(\"click\", function(e) {\n  var colors = rowColoringExt.getPredefinedColors();\n  var newColors = {};\n  Object.assign(newColors, colors, predefinedColorsSet2);\n  rowColoringExt.setPredefinedColors(newColors);\n  updateButtons();\n});\n\ndocument.getElementById(\"shrink_color\").addEventListener(\"click\", function(e) {\n  var colors = rowColoringExt.getPredefinedColors();\n  var newColors = {};\n  Object.assign(newColors, colors);\n  for (var name in predefinedColorsSet2) {\n    delete newColors[name];\n  }\n  rowColoringExt.setPredefinedColors(newColors);\n  updateButtons();\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}\n\ninput[type=\"number\"] {\n  width: 40px;\n}\n\n.control-group {\n  margin: 10px 0;\n}\n\n.control-group button {\n  vertical-align: middle;\n}\n\n#btn_group {\n  display: inline;\n  margin-right: 15px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            bgColoring                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, background color will not be applied to the row        ","tagName":"tr"},{"text":"                            textColoring                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, text color will not be applied to the row        ","tagName":"tr"},{"text":"                            bgColorField                                                    string                                                                                                                                                                                                                    \"BG_COLOR\"                                                        Apply background color based on the given field        ","tagName":"tr"},{"text":"                            textColorField                                                    string                                                                                                                                                                                                                    \"TEXT_COLOR\"                                                        Apply text color based on the given field        ","tagName":"tr"},{"text":"                            cssField                                                    string                                                                                                                                                                                                                    \"CSS_CLASS\"                                                        Apply CSS class based on the given field        ","tagName":"tr"},{"text":"                            cssRangeField                                                    string                                                                                                                                                                                                                    \"\"                                                        Apply CSS class only on the given range field, which range will be array 2 element, the first element is start column used colour and the second one is the length of column applied        ","tagName":"tr"},{"text":"                            altCssField                                                    string                                                                                                                                                                                                                    \"\"                                                        Apply alternative CSS class based on the given field which not in range field        ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                                                                                                                                                                        Predefined color object map        ","tagName":"tr"},{"text":"                            predefinedColoring                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, predefined colors will be used instead of inline styling. The bgColoring and textColoring will be turned off.        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"getContrastColor(hexColor) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableBgColoring(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableRowColoring(disabledopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"disableTextColoring(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"forceUpdateRowColor()","tagName":"h4"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getContrastColor(hexColor) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getPredefinedColors() → {Object}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowColor(rowRef) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeRowColor(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setPredefinedColors(predefinedColors)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowColor(rowRef, bgColoropt, txtColoropt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setRowPredefinedColor(rowRef, coloropt, rangeopt, altColoropt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Example:","tagName":"h5"},{"text":"rowColoringExt.setRowPredefinedColor(2, \"c-red\") // set predefined color into row index 2 all row.\nrowColoringExt.setRowPredefinedColor(2, \"c-red\", [2, 5]) // set predefined color into row index 2 and applied since column 2 and next 5 columns\nrowColoringExt.setRowPredefinedColor(2, \"c-red\", [2]) // if pass only 1 element into rage parameter, the row will be applied since 2 to last column\nrowColoringExt.setRowPredefinedColor(2, \"c-red\", [2, 5], \"c-yellow\") // set predefined color into row index 2 and applied since column 2 and next 5 columns and another column will be set color c-yellow","tagName":"pre"},{"text":"toggleRowColor(rowRef, bgColoropt, txtColoropt, stateopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Statistics Row","filename":"extensions/statistics-row.html","contents":[{"text":"Statistics Row","tagName":"h2"},{"text":"The Statistics Row Extension provides special rows to show various statistics for the grid's content.","tagName":"p"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \"Company\",\n      field: fields[0],\n      statistics: \"label\"\n    },\n    {\n      name: \"Market\",\n      field: fields[1],\n      width: 120\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 200,\n      alignment: \"right\",\n      formatType: \"number\",\n      statistics: true\n    },\n    {\n      name: \"Net. Chng\",\n      field: fields[3],\n      width: 200,\n      alignment: \"right\",\n      formatType: \"percent\",\n      colorText: true,\n      statistics: true\n    }\n  ],\n  staticDataRows: records,\n  statisticsRow: {\n    rows: [\n      { statistic: \"count\" },\n      { statistic: \"average\" },\n      { placement: \"header\", statistic: \"sum\" },\n      { statistic: \"min\", placement: \"footer\", label: \"Min (Custom Label)\" },\n      { statistic: \"stddev\" },\n      { statistic: \"myCustomStat\" }\n    ],\n    invalidText: \"N/A\",\n    postCalculation: function(e) {\n      var stat = e.statistics[3]; // Calculate custom statistics for the forth column    \n      var rows = e.dataRows;\n\n      var field = stat.field;\n      var average = stat.average;\n      var sum = 0;\n      var rowCount = rows.length;\n      for (var r = 0; r < rowCount; ++r) {\n        var row = rows[r];\n        var val = row[field];\n        var diff = val - average;\n        sum = diff * diff;\n      }\n      var stddev = Math.sqrt(sum / stat.count);\n\n      stat.myCustomStat = 777.77;\n      stat.stddev = stddev;\n    },\n    postRendering: function(e) {\n      e.headerSection.setStyle(\"backgroundColor\", \"skyblue\");\n    }\n  },\n  extensions: [\n    new tr.StatisticsRowExtension(),\n    new tr.TextFormattingExtension(),\n    new tr.ConditionalColoringExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Installation and importing to your project","tagName":"h3"},{"text":"Installation details and examples, along with information on how to import the extension to your project, are available on the Overview page.","tagName":"p"},{"text":"Overview page","tagName":"a"},{"text":"Specifying columns for statistics calculation","tagName":"h3"},{"text":"Use the statistics property in the column configuration object to make the column qualify for the calculation. Set statistics value to label to show the statistic label on the column.","tagName":"p"},{"text":"//...\ncolumns: [\n    {field: \"Field A\", statistics: \"label\"},\n    {field: \"Field B\"}, // No stat\n    {field: \"Field C\", statistics: \"true\"},\n],\n//...","tagName":"pre"},{"text":"Specifying statistics rows","tagName":"h3"},{"text":"Use rows with the statistic property in the extension configuration object to specify the statistics row with a statistic of your choice.","tagName":"p"},{"text":"//...\nstatisticsRow: {\n    rows: [\n        {statistic: \"Average\"},\n        {statistic: \"sum\", placement: \"header\"},\n        {statistic: \"MyCustomStat\"} // You will need to calculate the value in postCalculation event by yourself\n    ],\n    postCalculation: function(e) {\n        // your custom logic\n    }\n},\n//...","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            statistics                                                    boolean | string                                                                                                                                                                                                                    false                                                        If enabled, the column is qualified for the calculation. If \"label\" is specified, the column will be used to show statistic label        ","tagName":"tr"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            rows                                                    Array                                                                                                                                                                                                                    null                                                        Array of StatisticsRowPlugin~RowOptions        ","tagName":"tr"},{"text":"                            invalidText                                                    string                                                                                                                                                                                                                    \"\"                                                        Text to be shown for invalid statistic (i.e. Not a Number value)        ","tagName":"tr"},{"text":"                            noColoring                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, all conditional coloring (i.e. tick coloring) will not automatically be applied.        ","tagName":"tr"},{"text":"                            noFormatting                                                    boolean                                                                                                                                                                                                                    false                                                        If enabled, all formatting (i.e. decimal places) will not automatically be applied.        ","tagName":"tr"},{"text":"                            postCalculation                                                    function                                                                                                                                                                                                                                        Function handler excuted after statistics calculation and before default rendering        ","tagName":"tr"},{"text":"                            postRendering                                                    function                                                                                                                                                                                                                                        Function handler excuted after default rendering        ","tagName":"tr"},{"text":"RowOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            placement                                                    string                                                                                                                                                                                                                    \"footer\"                                                        Available footer are \"header\", \"title\", and \"footer\"        ","tagName":"tr"},{"text":"                            statistic                                                    string                                                                                                                                                                                                                    \"\"                                                        Statistic to be calculated. Predefined values are \"average\", \"min\", \"max\", \"count\", and \"sum\"        ","tagName":"tr"},{"text":"                            label                                                    string                                                                                                                                                                                                                    null                                                        By default, label will be statistics name.        ","tagName":"tr"},{"text":"                            id                                                    string                                                                                                                                                                                                                    \"\"                                                        Text Id used for row referencing in extension's APIs        ","tagName":"tr"},{"text":"RowReference","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Stats","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                    ","tagName":"tr"},{"text":"                            label                                                    boolean                                                                                                                                                                            Indicating the column is used to show label        ","tagName":"tr"},{"text":"                            count                                                    number                                                                                                                                                                            Count of all valid values in the column. Invalid values such as empty, null, undefined, string values are excluded. For label column, counting method will include only truthy values except number 0, and exclude all other falsy values.        ","tagName":"tr"},{"text":"                            sum                                                    number                                                                                                                                                                            Summation        ","tagName":"tr"},{"text":"                            average                                                    number                                                                                                                                                                            Average        ","tagName":"tr"},{"text":"                            min                                                    number                                                                                                                                                                            Minimum        ","tagName":"tr"},{"text":"                            max                                                    number                                                                                                                                                                            Maximum        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"addStatisticsRow(options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"StatisticsRowPlugin~RowOptions","tagName":"a"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getStatisticsRows() → {Array.}","tagName":"h4"},{"text":"StatisticsRowPlugin~RowOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"StatisticsRowPlugin~RowOptions","tagName":"a"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeStatisticsRow(rowRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"StatisticsRowPlugin~RowReference","tagName":"a"},{"text":"setStatisticsRow(rowRef, options) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"StatisticsRowPlugin~RowReference","tagName":"a"},{"text":"StatisticsRowPlugin~RowOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"setStatisticsRows(rows)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"StatisticsRowPlugin~RowOptions","tagName":"a"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"postCalculation","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colCount                                                    number                                                                    ","tagName":"tr"},{"text":"                            fields                                                    Array.                                                            Fields for current columns        ","tagName":"tr"},{"text":"                            statistics                                                    Array.                                                            Array of statistic values. You should add your custom statistics to the object        ","tagName":"tr"},{"text":"StatisticsRowPlugin~Stats","tagName":"a"},{"text":"                            dataRows                                                    Array.                                                            Data row used for the calculation        ","tagName":"tr"},{"text":"                            dataView                                                    Object                                                            Class object representing current view of grid        ","tagName":"tr"},{"text":"                            dataTable                                                    Object                                                            Class object contains all data        ","tagName":"tr"},{"text":"postRendering","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colCount                                                    number                                                                    ","tagName":"tr"},{"text":"                            fields                                                    Array.                                                            Fields for current columns        ","tagName":"tr"},{"text":"                            statistics                                                    Array.                                                            Array of statistic values        ","tagName":"tr"},{"text":"StatisticsRowPlugin~Stats","tagName":"a"},{"text":"                            headerSection                                                    Object                                                            ILayoutGrid UI Section representing header part        ","tagName":"tr"},{"text":"                            footerSection                                                    Object                                                            ILayoutGrid UI Section representing footer part        ","tagName":"tr"},{"text":"                            headerRows                                                    Array.                                                            Definition objects given at the configuration time        ","tagName":"tr"},{"text":"                            footerRows                                                    Array.                                                            Definition objects given at the configuration time        ","tagName":"tr"}]},{"title":"Text Formatting","filename":"extensions/tr-grid-textformatting.html","contents":[{"text":"Text Formatting","tagName":"h2"},{"text":"The Text Formatting Extension provides special formatting for presenting actual data. By default, the possible formats are number, scaled, percent, and datetime. However, the custom formatting can also be created to handle particular cases.","tagName":"p"},{"text":"","tagName":"pre"},{"text":"tr.DataGenerator.addFieldInfo(\"volume\", {\n  type: \"number\",\n  min: 10,\n  max: 10e6\n});\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"volume\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [{\n      name: \"Company\",\n      field: fields[0]\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 100,\n      alignment: \"right\",\n      formatType: \"number\"\n    },\n    {\n      name: \"4 Decimal Places\",\n      field: fields[2],\n      width: 100,\n      alignment: \"right\",\n      formatType: {\n        type: \"number\",\n        decimalPlaces: 4\n      }\n    },\n    {\n      name: \"Net. Chng\",\n      field: fields[3],\n      width: 100,\n      alignment: \"right\",\n      formatType: \"percent\"\n    },\n    {\n      name: \"Volume\",\n      field: fields[4],\n      alignment: \"right\",\n      formatType: \"scaled\"\n    },\n    {\n      name: \"IPO Date\",\n      field: fields[5],\n      alignment: \"center\",\n      formatType: \"dateTime\"\n    }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.TextFormattingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Formatting Types","tagName":"h3"},{"text":"There are 5 formatting types you can use to format your data. They are \"freetext\", \"number\", \"scaled\", \"percent\",and \"datetime\".","tagName":"p"},{"text":"To change formatting type, set formatType on the column configuration to an object with type property. In case of advance formatting, Please see FormatOptions for more properties that can be specified in formatType","tagName":"p"},{"text":"Default format property","tagName":"h4"},{"text":"\nTypes\ndecimalPlaces\nprecisionEnabled\npercentSign\nscalingUnit\ndateTimeFormat\n","tagName":"tr"},{"text":"\nnumber\n2\ntrue\n-\n-\n-\n","tagName":"tr"},{"text":"\npercent\n2\ntrue\ntrue\n-\n-\n","tagName":"tr"},{"text":"\nscaled\n2\n-\n-\n\"million\"\n-\n","tagName":"tr"},{"text":"\ndatetime\n-\n-\n-\n-\n\"MM/DD/YYYY\"\n","tagName":"tr"},{"text":"Data preparation","tagName":"h3"},{"text":"Grid provides ability for data conversion. Please see the page Data conversion for more details.","tagName":"p"},{"text":"Data conversion","tagName":"a"},{"text":"Formatting custom content","tagName":"h3"},{"text":"Text Formatting Extension work by overwritten any existing cell content with a formatted text. By default, any use of custom rendering or formatters will not work with Text Formatting Extension (i.e., custom content is replaced with a formatted text). There are two ways to apply formatted text on a custom content.","tagName":"p"},{"text":"custom rendering or formatters","tagName":"a"},{"text":"Note: more details about custom rendering can be found here","tagName":"p"},{"text":"here","tagName":"a"},{"text":"Formatting custom content by using formatLogic","tagName":"h4"},{"text":"The first way is to use formatLogic. You can specify a function on how to apply formatted text to your custom content. formattedText and cell will be provided through the event argument when formatLogic is executed. Inside the function, you can then put formatted text in your custom content at the appropriate place, as illustrated below:","tagName":"p"},{"text":"","tagName":"pre"},{"text":"var customRenderer1 = function(e) {\n  var cell = e.cell;\n  var content = cell.getContent();\n  if (!content || !content._textSpan) {\n    content = document.createElement(\"div\");\n    content._iconElem = document.createElement(\"coral-icon\");\n    content._textSpan = document.createElement(\"span\");\n\n    content._iconElem.icon = \"history\";\n    content._iconElem.style.marginRight = \"4px\";\n    content._iconElem.style.color = \"red\";\n\n    content.appendChild(content._iconElem);\n    content.appendChild(content._textSpan);\n  }\n\n  content._textSpan.textContent = e.data;\n\n  cell.setContent(content);\n};\nvar formatLogic1 = function(e) {\n  var content = e.cell.getContent();\n  if (content && content._textSpan) {\n    content._textSpan.textContent = e.formattedText;\n  }\n};\n\nvar fields = [\"companyName\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [{\n      name: \"Company\",\n      field: fields[0]\n    },\n    {\n      name: \"Custom Content\",\n      field: fields[1],\n      binding: customRenderer1,\n      formatType: {\n        type: \"dateTime\",\n        formatLogic: formatLogic1\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.TextFormattingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Formatting custom content by manual formatting","tagName":"h4"},{"text":"The second way is to apply the format within your custom rendering/formatter by using the extension's formatText method. This second method requires modification to custom rendering/formatter. First, you have to disable automatic text formatting by setting autoTextFormatting to false, so that your custom content is not overwritten. Secondly, you need to keep reference to the extension instance, so that it will be available within your custom rendering. Lastly, use the extension's formatText to obtain formatted text. The example below shows the same result as the example above, but without using formatLogic: ","tagName":"p"},{"text":"","tagName":"pre"},{"text":"var tfExt = new tr.TextFormattingExtension(); // for quick referencing\nvar customRenderer1 = function(e) {\n  var cell = e.cell;\n  var content = cell.getContent();\n  if (!content || !content._textSpan) {\n    content = document.createElement(\"div\");\n    content._iconElem = document.createElement(\"coral-icon\");\n    content._textSpan = document.createElement(\"span\");\n\n    content._iconElem.icon = \"history\";\n    content._iconElem.style.marginRight = \"4px\";\n    content._iconElem.style.color = \"red\";\n\n    content.appendChild(content._iconElem);\n    content.appendChild(content._textSpan);\n  }\n\n  content._textSpan.textContent = tfExt.formatText(e.colIndex, e.data);\n\n  cell.setContent(content);\n};\n\nvar fields = [\"companyName\", \"date1\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [{\n      name: \"Company\",\n      field: fields[0]\n    },\n    {\n      name: \"Custom Content\",\n      field: fields[1],\n      binding: customRenderer1,\n      formatType: {\n        type: \"dateTime\",\n        autoTextFormatting: false\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [\n    tfExt // Text Formatting Extension still needs to be put into the grid\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"ColumnOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            formatType                                                    string | TextFormattingPlugin~FormatOptions                                                                                                                                                                                                                                        Format options or a shorthand text (e.g. number, scaled, percent, and datetime).        ","tagName":"tr"},{"text":"TextFormattingPlugin~FormatOptions","tagName":"a"},{"text":"                            autoTextFormatting                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the extension's automatic formatting will not be triggered, including `formatLogic`        ","tagName":"tr"},{"text":"FormatLogicArguments","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            rowIndex                                                    number                                                                    ","tagName":"tr"},{"text":"                            field                                                    string                                                                    ","tagName":"tr"},{"text":"                            formattedText                                                    string                                                            Text that is formatted by the formatter of the specified column        ","tagName":"tr"},{"text":"                            cell                                                    *                                                            Grid cell instance        ","tagName":"tr"},{"text":"                            rowData                                                    Object                                                            Row data object        ","tagName":"tr"},{"text":"                            format                                                    function                                                            Function that is used to produce formattedText        ","tagName":"tr"},{"text":"FormatOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            formatType                                                    string                                                                                                                                                                                                                                        Available options are: number, scaled, percent, and datetime        ","tagName":"tr"},{"text":"                            type                                                    string                                                                                                                                                                                                                                        Alias to formatType        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                                                        Field is required but can be defined in the column definition object        ","tagName":"tr"},{"text":"                            decimalPlaces                                                    number | boolean                                                                                                                                                                                                                    2                                                                ","tagName":"tr"},{"text":"                            precisionEnabled                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, number of decimal will remain as original.        ","tagName":"tr"},{"text":"                            plusSign                                                    boolean                                                                                                                                                                                                                    false                                                                ","tagName":"tr"},{"text":"                            separator                                                    boolean                                                                                                                                                                                                                    false                                                        Thousands separators        ","tagName":"tr"},{"text":"                            percentSign                                                    boolean                                                                                                                                                                                                                    false                                                                ","tagName":"tr"},{"text":"                            scalingUnit                                                    string                                                                                                                                                                                                                                        Value can be million or billion        ","tagName":"tr"},{"text":"                            multiplyBy100                                                    boolean                                                                                                                                                                                                                    false                                                                ","tagName":"tr"},{"text":"                            mutiplyBy100                                                    boolean                                                                                                                                                                                                                    false                                                        Alias of multiplyBy100        ","tagName":"tr"},{"text":"                            dateTimeFormat                                                    string                                                                                                                                                                                                                    \"MM/DD/YYYY\"                                                                ","tagName":"tr"},{"text":"                            useUTCTime                                                    boolean                                                                                                                                                                                                                    true                                                                ","tagName":"tr"},{"text":"                            autoTextFormatting                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the extension's automatic formatting will not be triggered, including `formatLogic`        ","tagName":"tr"},{"text":"                            formatLogic                                                    function                                                                                                                                                                                                                    null                                                        If specified all default formatting will be prevented and replaced by the given function. This should be used when the column has custom rendering. The function must retrieve, format, and insert the data with the provided arguments (i.e., TextFormattingPlugin~FormatLogicArguments).        ","tagName":"tr"},{"text":"GridOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            autoTextFormatting                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, the extension's automatic formatting will be disabled for all columns        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"formatText(colIndex, obj) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnFormatOptions(colIndex, optionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getFormatter(colIndex) → {FieldFormatter}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"openDialog(colIndex)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnFormat(colIndex, formatOptions)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"TextFormattingPlugin~FormatOptions","tagName":"a"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"formatChanged","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            colIndex                                                    number                                                                                                                                                                                                            ","tagName":"tr"},{"text":"                            formatType                                                    string                                                                                                                                                                                                    Available options are: number, scaled, percent, and datetime        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                                                                                                                                    Field defined in the column        ","tagName":"tr"},{"text":"                            decimalPlaces                                                    number | boolean                                                                                                                                                                                                                    2                                                                ","tagName":"tr"},{"text":"                            plusSign                                                    boolean                                                                                                                                                                                                                                                ","tagName":"tr"},{"text":"                            separator                                                    boolean                                                                                                                                                                                                                                                ","tagName":"tr"},{"text":"                            percentSign                                                    boolean                                                                                                                                                                                                                                                ","tagName":"tr"},{"text":"                            scalingUnit                                                    string                                                                                                                                                                                                                                        Value can be million or billion        ","tagName":"tr"},{"text":"                            multiplyBy100                                                    boolean                                                                                                                                                                                                                                                ","tagName":"tr"},{"text":"                            dateTimeFormat                                                    string                                                                                                                                                                                                                                                ","tagName":"tr"},{"text":"                            useUTCTime                                                    boolean                                                                                                                                                                                                                                                ","tagName":"tr"}]},{"title":"Title Wrap","filename":"extensions/tr-grid-titlewrap.html","contents":[{"text":"Title Wrap","tagName":"h2"},{"text":"The Title Wrap Extension wraps column headers into multiple lines if the text is too long, instead of cutting off the text.","tagName":"p"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Very Long Column Header Name\", field: fields[1], width: 120 },\n    { name: \"Average Price (last year)\", field: fields[2], width: 100, alignment: \"right\" },\n    { name: \"Average Net. Change (last year)\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.TitleWrapExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"Title wrap with no padding top and bottom","tagName":"h3"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Very Long Column Header Name\", field: fields[1], width: 120 },\n    { name: \"Average Price (last year)\", field: fields[2], width: 100, alignment: \"right\" },\n    { name: \"Average Net. Change (last year)\", field: fields[3], width: 100, alignment: \"right\" },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  titleWrap: {\n    padding: 0\n  },\n  extensions: [\n    new tr.TitleWrapExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Title wrap with group column","tagName":"h3"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { id: \"c1\", name: \"Company\", field: fields[0] },\n    { id: \"c2\", name: \"Long Column Header Name\", field: fields[1], width: 120 },\n    { id: \"c3\", name: \"Average Price (last year)\", field: fields[2], width: 100, alignment: \"right\" },\n    { id: \"c4\", name: \"Average Net. Change (last year)\", field: fields[3], width: 100, alignment: \"right\" },\n    { id: \"c5\", name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  columnGrouping: [{\n      id: \"g1\",\n      name: \"Company Information\",\n      alignment: \"center\",\n      children: [\"c1\", \"c2\"]\n    },\n    {\n      id: \"g2\",\n      name: \"Price\",\n      alignment: \"center\",\n      children: [\"c3\", \"c4\"]\n    }\n  ],\n  extensions: [\n    new tr.TitleWrapExtension(), new tr.ColumnGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Title wrap with nested group column","tagName":"h3"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { id: \"c1\", name: \"Company\", field: fields[0] },\n    { id: \"c2\", name: \"Very Long Column Header Name\", field: fields[1], width: 120 },\n    { id: \"c3\", name: \"Average Price (last year)\", field: fields[2], width: 100, alignment: \"right\" },\n    { id: \"c4\", name: \"Average Net. Change (last year)\", field: fields[3], width: 100, alignment: \"right\" },\n    { id: \"c5\", name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  columnGrouping: [{\n      id: \"g1\",\n      name: \"Company Information\",\n      alignment: \"center\",\n      children: [\"c1\", \"c2\"]\n    },\n    {\n      id: \"g2\",\n      name: \"Price\",\n      alignment: \"center\",\n      children: [\"c3\", \"c4\"]\n    }, {\n      id: \"g3\",\n      name: \"Top 5 Companies\",\n      alignment: \"center\",\n      children: [\"g1\", \"g2\", \"c5\"]\n    }\n  ],\n  extensions: [\n    new tr.TitleWrapExtension(), new tr.ColumnGroupingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Methods","tagName":"h3"},{"text":"_adjustRowHeightRefByHost(host, sectionRef, fromopt, toopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"adjustRowHeight(sectionRef, fromopt, toopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"adjustRowHeightAt(sectionRef, rowIndex) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getName() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize(host, optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload(host)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Zoom","filename":"extensions/zoom.html","contents":[{"text":"Zoom","tagName":"h2"},{"text":"The Zoom Extension adds Grid's ability to zoom in or zoom out.","tagName":"p"},{"text":"Ctrl + Mouse Scroll to zoom in/out.\n\n
                                                                                              \n","tagName":"pre"},{"text":"var zoomExt = new tr.ZoomExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 250, leftPinned: true },\n    { name: \"Market\", field: fields[1], width: 160 },\n    { name: \"Last\", field: fields[2], width: 160 },\n    { name: \"Net. Chng\", field: fields[3], width: 160 },\n    { name: \"Industry\", field: fields[4], width: 200, rightPinned: true }\n  ],\n  staticDataRows: records,\n  extensions: [\n    zoomExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 208px;\n}","tagName":"pre"},{"text":"Installation and how to import to a project","tagName":"h3"},{"text":"Installation examples and details of how to import the extension to a project are available on the Overview page.","tagName":"p"},{"text":"Overview","tagName":"a"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Options","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            zoomFactor                                                    number                                                                                                                                                                                                                    1                                                        Default zoom level range from 0.6 to 2        ","tagName":"tr"},{"text":"                            step                                                    number                                                                                                                                                                                                                    0.1                                                        Steps size of each zoom level        ","tagName":"tr"},{"text":"                            wheel                                                    boolean                                                                                                                                                                                                                    true                                                        If disabled, not allow wheel event to change zoom        ","tagName":"tr"},{"text":"                            maxFactor                                                    number                                                                                                                                                                                                                    2                                                        Maximum zoom factor level        ","tagName":"tr"},{"text":"                            minFactor                                                    number                                                                                                                                                                                                                    0.5                                                        Minimum zoom factor level        ","tagName":"tr"},{"text":"                            zoomChanged                                                    function                                                                                                                                                                                                                    null                                                        Event handler when zoom factor is changed through the APIs or mouse wheel.        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"addElement(elem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"enableWheelToZoom(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getConfigObject(gridOptionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getDefaultMouseWheelLogic() → {function}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getName()","tagName":"h4"},{"text":"getZoomFactor() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasMultiTableSupport() → {boolean}","tagName":"h4"},{"text":"GridPlugin#hasMultiTableSupport","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"initialize()","tagName":"h4"},{"text":"removeElement(elem) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setStep(step)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unload()","tagName":"h4"},{"text":"updateZoomedLayout()","tagName":"h4"},{"text":"zoomDefault(zoomFactoropt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"zoomIn() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"zoomOut() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"zoomTo(factoropt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"Events","tagName":"h3"},{"text":"zoomChanged","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            zoomFactor                                                    number                                                            Current zoom factor        ","tagName":"tr"},{"text":"                            prevZoomFactor                                                    number                                                            Previous zoom factor        ","tagName":"tr"}]},{"title":"Default Rendering","filename":"rendering/column-formatter.html","contents":[{"text":"Formatter is what Grid uses to render content. Grid's default formatter will render any data in plain text. When data is updated, Grid will bind the data from its own internal data source to render the data in plain text using the formatter. The data given to grid can be any data type.","tagName":"p"},{"text":"Note: The formatter will be repeatedly executed multiple times for every update and scrolling. ","tagName":"p"},{"text":"Default rendering is already optimized for row virtualization. This means that grid uses the same text element to render different data for different rows. It should be fast enough to handle rendering a million of rows.","tagName":"p"},{"text":"To update what is shown on the Grid, please use Grid's APIs to manipulate the data from the instance.","tagName":"p"},{"text":"manipulate the data","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 40 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1] },\n    { name: \"Last\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3] },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 200px;\n}","tagName":"pre"},{"text":"Internal Default Formatter Implementation","tagName":"h2"},{"text":"Internally, Grid implements the formatter as the following code: ","tagName":"p"},{"text":"var configObj = {\n    columns: [\n        { binding: function(e){\n                e.cell.setContent(e.data);\n            }\n        }\n    ]\n};","tagName":"pre"},{"text":"If we want anything other than simple text, we need to define a custom formatter. You can find more details about this in the Custom Formatter section. ","tagName":"p"},{"text":"Custom Formatter section","tagName":"a"}]},{"title":"Custom Rendering","filename":"rendering/custom-formatter.html","contents":[{"text":"Since Grid utilizes a row virtualization technique, where the same cell is reused across different rows, you cannot simply just create any content and stop there. With row virtualization the custom content that you are trying to create or render will be reused in the different rows. So you have to create the content once and reuse it from the cache. Then, you need to bind data from Grid's data store to the content for each data update and scrolling.","tagName":"p"},{"text":"The process for writing the formatter is usually something like the following code:","tagName":"p"},{"text":"var formatter = function(e) {\n    var cell = e.cell;\n    // Cache checking part (Reuse the same element)\n    var element = cell.getContent();\n    if (!element) {\n        // Element creation part\n        element = document.createElement('tag-name');\n\n        // Apply common static settings (once per element creation) here\n        // This could be attributes, styles, event listeners, and etc.\n        element.style.color = \"red\";\n    }\n\n    // Element updating part (bind data to the UI element)\n    element.value = e.data; // IMPORTANT\n\n    // The below code is required. It does not post any significant performance impact\n    cell.setContent(element);\n};","tagName":"pre"},{"text":"Defining the formatter","tagName":"h2"},{"text":"The formatter can be specified as a function on the binding property of the column configuration object.","tagName":"p"},{"text":"var configObj = {\n    ...\n    columns: [\n        {\n            field: \"Field 1\", \n            binding: function(e) {\n                e.cell.setContent(e.data);\n            }\n        },\n        ...\n    ],\n    ...\n}","tagName":"pre"},{"text":"For displaying simple text you do not need to create a custom formatter, as Grid already has simple text as its default formatter.","tagName":"p"},{"text":"Common form and structure","tagName":"h3"},{"text":"binding method will be called multiple times during user scrolling. The key here is to create a DOM element only once, reuse the same element and update the data every time the method is called. ","tagName":"p"},{"text":"In general, the steps are as the following steps:","tagName":"p"},{"text":"Below is the most common form of formatter. It is recommended to write most custom formatters in this form and structure. ","tagName":"p"},{"text":"var formatter = function(e){\n    var cell = e.cell;\n    var content = cell.getContent(); // Utilize cache\n    if (!content) { // Check if cache exists\n        content = document.createElement(\"xxx-xxxx\");\n        // Initialize element once\n        var subContent = document.createElement(\"yyyy\");\n        subContent.style.color = \"brown\"; \n\n        var subContent2 = document.createElement(\"zz-zzz\");\n        content._myContent = subContent2;\n\n        content.appendChild(subContent);\n        content.appendChild(subContent2);\n    }\n\n    content._myContent.textContent = e.data; // IMPORTANT\n\n    cell.setContent(content); // Always set the content to allow multiple types of content in the same column\n};","tagName":"pre"},{"text":"Setting styles in the formatter","tagName":"h3"},{"text":"When making any type of modification in the binding method, you must reset the value back because the same cell will be reused by different rows.","tagName":"p"},{"text":"var formatter = function(e){\n    var cell = e.cell;\n    var data = e.data;\n    var content = cell.getContent();\n    if (!content) {\n        content = document.createElement(\"span\");\n        content.style.color = \"salmon\"; // Static styling\n    }\n\n    // Dynamic styling\n    if(data > 0) {\n        content.style.backgroundColor = \"green\";\n    } else if(data < 0) {\n        content.style.backgroundColor = \"red\";\n    } else {\n        content.style.backgroundColor = \"\"; // Reset the background\n    }\n    cell.setStyle(\"fontSize\", Math.abs(data) > 10 ? \"1.5em\" : \"\"); // Styles can be applied to either the cell content or the cell itself.\n\n    content.textContent = data;\n    cell.setContent(content);\n};","tagName":"pre"},{"text":"Interactive content","tagName":"h3"},{"text":"States must be saved back to Grid after users make changes to the content. This is because Grid's row virtualization will reuse the same content during the scroll. Also note that user interaction does not happen during the data binding. User interaction is an asynchronous operation. So do not rely on closure variables or inline functions. ","tagName":"p"},{"text":"Contexts and values may be a different. You will need to resolve the position or context at runtime by using getRelativePosition().","tagName":"p"},{"text":"getRelativePosition()","tagName":"a"},{"text":"var formatter = function(e){\n    var cell = e.cell;\n    var dropdown = cell.getContent();\n    if (!dropdown) {\n        dropdown = document.createElement(\"select\");\n        dropdown.addEventListener(\"change\", dropdownChangeHandler); // Handle user interaction\n\n        for(var i = 0; i < 3; ++i) {\n            var option = document.createElement(\"option\");\n            option.value = i;\n            option.textContent = \"Value \" + i;\n            dropdown.appendChild(option);\n        }\n    }\n\n    dropdown.selectedIndex = e.data;\n    cell.setContent(dropdown);\n};\nvar dropdownChangeHandler = function(e) {\n    var dropdown = e.currentTarget;\n    var selectedIndex = dropdown.selectedIndex;\n\n    var pos = grid.api.getRelativePosition(e);\n    var rowDef = grid.api.getRowDefinition(pos.rowIndex);\n\n    rowDef.setData(\"Field XXXX\", selectedIndex); // It is important to set the new data\n};","tagName":"pre"},{"text":"Find out more information about event handling here.","tagName":"p"},{"text":"here","tagName":"a"},{"text":"Content with multiple states","tagName":"h3"},{"text":"Content with multiple states (for example, colors, disabled and invalid states) must have all states stored in the Grid. You can have as many columns' data or fields as we want in order to represent the content. ","tagName":"p"},{"text":"The example below shows input with multiple states depending on the data on other fields.","tagName":"p"},{"text":"var formatter = function(e){\n    var cell = e.cell;\n    var rowData = e.rowData;\n    var inputElem = cell.getContent();\n    if (!inputElem) {\n        inputElem = document.createElement(\"input\");\n    }\n\n    var state1 = rowData[\"someField\"];\n    if(state1) {\n        inputElem.setAttribute(\"disabled\", \"\");\n    } else {\n        inputElem.removeAttribute(\"disabled\");\n    }\n\n    var state2 = rowData[\"anotherField\"];\n    if(state2) {\n        inputElem.setAttribute(\"error\", \"\");\n    } else {\n        inputElem.removeAttribute(\"error\");\n    }\n\n    inputElem.value = e.data;\n    cell.setContent(inputElem);\n};","tagName":"pre"},{"text":"Note: data is completely independent from column UIs. This means you do not have to create a column for data to exist. Data can be added or removed separately from Grid's columns.","tagName":"p"},{"text":"Formatter/binding method parameters","tagName":"h2"},{"text":"Event argument binding method has the following parameter list:","tagName":"p"},{"text":"Understanding row virtualization","tagName":"h2"},{"text":"The row virtualization technique is different from the lazy initialization technique, which creates more content as users scroll down through all the available rows. For example, suppose you have 10,000 rows and Grid's view port can show 20 rows. With row virtualization Grid will create content for around 24 rows (20 rows + buffer rows) throughout Grid's life cycle. With lazy initialization Grid will create content for 24 rows at first load. As users scroll down through the available rows, more and more content will be created. Eventually, all content will be created for all 10,000 rows when using the lazy initialization technique.","tagName":"p"},{"text":"A web page will get slower as more content/elements are put into the DOM tree. So it's better to reuse the same element whenever possible.","tagName":"p"},{"text":"Examples","tagName":"h2"},{"text":"Click the green button on the bottom right corner of the live example to see the code.","tagName":"p"},{"text":"\n","tagName":"pre"},{"text":"var rangeBarFormatter = function(e) {\n  var cell = e.cell;\n  var bar = cell.getContent(); // Utilize caching\n  if (!bar) {\n    bar = document.createElement(\"div\");\n    bar.style.height = \"8px\";\n    bar.style.position = \"relative\";\n    bar.style.backgroundColor = \"#EA7D22\";\n\n    var indi = bar.indi = document.createElement(\"div\");\n    indi.style.position = \"absolute\";\n    indi.style.top = \"0\";\n    indi.style.left = \"10px\";\n    indi.style.width = \"3px\";\n    indi.style.height = \"100%\";\n    indi.style.backgroundColor = \"white\";\n    bar.appendChild(indi);\n  }\n  cell.setContent(bar);\n  bar.indi.style.left = (e.data * 100) + \"%\";\n};\n\nvar capitalizer = function(e) {\n  e.cell.setContent(e.data.toString().toUpperCase());\n};\n\nvar yearDisplay = function(e) {\n  var cell = e.cell;\n  cell.setStyle(\"color\", \"black\");\n  cell.setStyle(\"background-color\", \"#EA7D22\");\n  cell.setContent(\"Year \" + e.data.getFullYear());\n};\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"float_1\", \"ISODate\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 40 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], binding: capitalizer },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Buy/Sell\", field: fields[3], width: 100, binding: rangeBarFormatter },\n    { name: \"IPO\", field: fields[4], alienment: \"center\", binding: yearDisplay }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 200px;\n}","tagName":"pre"},{"text":"When using Text Formatting Extension, by default, custom content will be overwritten due to the need for rendering a formatted text by the extension. To format the text inside the custom content and avoid the overriding, you will need to instruct the extension on how and where to do the formatting. See this page for more information.","tagName":"p"},{"text":"this page","tagName":"a"},{"text":"Be mindful that the binding method will be executed repeatedly and multiple times during data updates and scrolling. Performance is crucial, so you should write the code with caution. See the following guidelines for writing a good formatter.","tagName":"p"},{"text":"Use predefined formatters","tagName":"h2"},{"text":"The most common formatters are already prewritten for you. Predefined formatters are optimized and easy to use. See this page for more details.","tagName":"p"},{"text":"this page for more details","tagName":"a"},{"text":"Avoid using innerHTML and innerText","tagName":"h2"},{"text":"innerHTML and innerText from native elements involve text parsing and element creation, both of which are computationally expensive. You can improve performance by avoiding using them.","tagName":"p"},{"text":"function binding1(e) {\n    var content = document.createElement(\"div\"); // Unneccessary creation as it will be called and created multiple times\n    content.innerHTML = \"\" + e.data + \"2\"; // Slow due to text parsing and element creations\n\n    e.cell.setContent(content);\n}\n\n// The above function can be re-writen as the following function\nfunction binding2(e) {\n    var cell = e.cell;\n    var content = cell.getContent();\n    if(!content) {\n        content = document.createElement(\"div\");\n        var span1 = content._span1 = document.createElement(\"span\"); \n        var span2 = document.createElement(\"span\");\n        span2.textContent = 2;\n\n        content.appendChild(span1);\n        content.appendChild(span2);\n    }\n    content._span1.textContent = e.data;\n    cell.setContent(content);\n}","tagName":"pre"},{"text":"Avoid creating an element for simple text","tagName":"h2"},{"text":"setContent method is already optimized for simple text.","tagName":"p"},{"text":"function binding1(e) {\n    var content = document.createElement(\"div\"); // Unneccessary creation\n    content.textContent = e.data + \" text\";\n\n    e.cell.setContent(content);\n}\n\n// The above function can be re-writen as the following function\nfunction binding2(e) {\n    e.cell.setContent(e.data + \" text\");\n}","tagName":"pre"},{"text":"Reuse the same content to avoid element creation","tagName":"h2"},{"text":"Bind method will be executed repeatedly and multiple times during data update and scrolling. Minimize element creation by using cache.","tagName":"p"},{"text":"function binding1(e) {\n    var content = document.createElement(\"input\"); // Slow\n    content.value = e.data;\n    e.cell.setContent(content);\n}\n\n// The above function can be re-writen as the following function\nfunction binding2(e) {\n    var cell = e.cell;\n    var content = cell.getContent(); // Get previous content\n    if(!content) {\n        content = document.createElement(\"input\");\n    }\n    content.value = e.data;\n    cell.setContent(content);\n}","tagName":"pre"},{"text":"Store element in a variable for easy access","tagName":"h2"},{"text":"For complex structure content, it is faster and easier to use a variable for referencing rather than navigating through a DOM tree.","tagName":"p"},{"text":"function binding1(e) {\n    var cell = e.cell;\n    var content = cell.getContent();\n    if(!content) {\n        content = document.createElement(\"div\");\n        var span1 = document.createElement(\"span\");\n        var span2 = document.createElement(\"span\");\n\n        content.appendChild(span1);\n        content.appendChild(span2);\n    }\n    cell.setContent(content);\n    var spans = content.getElementsByTagName(\"span\"); // Slow\n    spans[0].textContent = e.data % 5;\n    spans[1].textContent = e.data % 3;\n}\n\n// The above function can be re-writen as the following function\nfunction binding2(e) {\n    var cell = e.cell;\n    var content = cell.getContent();\n    if(!content) {\n        content = document.createElement(\"div\");\n        var span1 = content._span1 = document.createElement(\"span\");\n        var span2 = content._span2 = document.createElement(\"span\");\n\n        content.appendChild(span1);\n        content.appendChild(span2);\n    }\n    content._span1.textContent = e.data % 5;\n    content._span2.textContent = e.data % 3;\n    cell.setContent(content);\n}","tagName":"pre"},{"text":"Note: Cell can contain only one top level node/element (such as, single content). But a content element can have multiple nested elements.","tagName":"p"},{"text":"Use RowDefinition object for asynchronous operation","tagName":"h2"},{"text":"When dealing with asynchronous operations such as server request and response, it is important to use the correct context and data. Row index, cell element, and page can all be changed during the waiting time. Sorting, filtering, grouping, and pagination can also affect row order. So the most reliable way to identify Grid's row is to use RowDefinition object. ","tagName":"p"},{"text":"function binding1(e) {\n    var cell = e.cell;\n    var content = cell.getContent();\n    if(!content) {\n        content = document.createElement(\"button\");\n        content.addEventListener(\"click\", onRequestingData);\n    }\n    cell.setContent(content);\n}\n\nfunction onRequestingData(e) {\n    var pos = grid.api.getRelativePosition(e);\n    var rowDef = grid.api.getRowDefinition(pos.rowIndex);\n\n    requestServerData({}, onServerResponse.bind(null, rowDef));\n}\n\nfunction onServerResponse(rowDef, resp) {\n    // do something\n}","tagName":"pre"}]},{"title":"Changing Formatter at Runtime","filename":"rendering/change-formatter.html","contents":[{"text":"Sometimes you might want to change a custom rendering at runtime. This can be achieved by using  setColumnFormatter method.","tagName":"p"},{"text":"APIs for Grid and the setColumnFormatter() method description can be found here.","tagName":"p"},{"text":"here","tagName":"a"},{"text":"var grid = document.getElementsByTagName(\"efx-grid\")[0];\n\n// formatter can be a function\nvar formatter = function(e) {\n    var value = e.grid.getRowData(e.rowIndex)[e.field];\n    e.cell.setContent(value);\n};\n\n/*\n// or can be an object.\nvar formatter = {\n    binding: function(e) {\n        var value = e.grid.getRowData(e.rowIndex)[e.field];\n        e.cell.setContent(value);\n    }\n};\n// or can be a predefined formatter\nvar formatter = SimpleLinkFormatter.create()\n*/\n\nfunction handleChangeFormatter() {\n    grid.api.setColumnFormatter(0 /* Column Index */, formatter);\n}","tagName":"pre"}]},{"title":"Event Handling in Formatter","filename":"rendering/formatter-event-handling.html","contents":[{"text":"If your custom formatter contains some input elements or controls, it's important to bind data back to Grid's internal data source when users input new data through the UI from your custom formatter. Remember, the same element will be used on different rows due to the row virtualization mechanic. If the data is changed by user actions, you need to update the change back to Grid's data source, or else the binding mechanism will replace what the user has changed with the data stored from the Grid's internal source. ","tagName":"p"},{"text":"In short, data should be updated after users interact with the UI input. getRelativePosition() method should be used to resolve current positions relative to the grid element.","tagName":"p"},{"text":"APIs for data manipulation can be found here. APIs for Grid and getRelativePosition() method description can be found here.","tagName":"p"},{"text":"here","tagName":"a"},{"text":"here","tagName":"a"},{"text":"The 'reverted' problem","tagName":"h2"},{"text":"When we don't set data back, row virtualization will not work properly and content will not be rendered properly. Suppose that we have a dropdown element in one of the grid columns. Any change that is done to the dropdown box will be reverted if we don't update the data.","tagName":"p"},{"text":"In the live example below, try the following steps to produce the problem:","tagName":"p"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"id\", \"dropdownVal\", \"boolean\", \"text\"];\n// For static data initialization\nvar records = [];\nfor (var i = 0; i < 50; i++) {\n  var record = {};\n  record[fields[0]] = i;\n  record[fields[1]] = i % 4;\n  record[fields[2]] = i & 1 ? true : false;\n  record[fields[3]] = i + \" Some Texts\";\n  records.push(record);\n}\n\nvar dropdownFormatter = function(e) {\n  var cell = e.cell;\n  var dropdown = cell.getContent();\n  if (!dropdown || !dropdown._myDropdown) {\n    dropdown = document.createElement(\"select\");\n    dropdown._myDropdown = true;\n    [0, 1, 2, 3].forEach(function(val) {\n      var option = document.createElement(\"option\");\n      option.value = val;\n      option.textContent = \"Value \" + val;\n      dropdown.appendChild(option);\n    });\n  }\n\n  dropdown.selectedIndex = e.data;\n  cell.setContent(dropdown);\n};\n\nvar configObj = {\n  columns: [\n    { name: \"Row Index\", field: fields[0], width: 80 },\n    { name: \"Dropdown\", field: fields[1], binding: dropdownFormatter },\n    { name: \"Dropdown Value\", field: fields[1] },\n    { name: \"Column 3\", field: fields[2], alignment: \"center\" },\n    { name: \"Column 4\", field: fields[3] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n  margin-bottom: 40px;\n}","tagName":"pre"},{"text":"You will see that the selected option is reverted back to the original option.","tagName":"p"},{"text":"The fix","tagName":"h2"},{"text":"To avoid the problem, we have to add an event listener to our custom formatter for binding the change from users. You have added dropdownChangeHandler to fix the problem as shown below:","tagName":"p"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"id\", \"dropdownVal\", \"boolean\", \"text\"];\n// For static data initialization\nvar records = [];\nfor (var i = 0; i < 50; i++) {\n  var record = {};\n  record[fields[0]] = i;\n  record[fields[1]] = i % 4;\n  record[fields[2]] = i & 1 ? true : false;\n  record[fields[3]] = i + \" Some Texts\";\n  records.push(record);\n}\n\n// Show how to render custom content with an event listener\nvar dropdownFormatter = function(e) {\n  var cell = e.cell;\n  var dropdown = cell.getContent();\n  if (!dropdown || !dropdown._myDropdown) {\n    dropdown = document.createElement(\"select\");\n    dropdown._myDropdown = true;\n    [0, 1, 2, 3].forEach(function(val) {\n      var option = document.createElement(\"option\");\n      option.value = val;\n      option.textContent = \"Value \" + val;\n      dropdown.appendChild(option);\n    });\n\n    dropdown.addEventListener(\"change\", dropdownChangeHandler);\n  }\n  dropdown.selectedIndex = e.data;\n  cell.setContent(dropdown);\n};\n// Show how to set data based on interaction from custom content\nvar dropdownChangeHandler = function(e) {\n  var dropdown = e.currentTarget;\n  var selectedIndex = +(dropdown.options[dropdown.selectedIndex].value);\n\n  var pos = grid.api.getRelativePosition(e);\n  var rowDef = grid.api.getRowDefinition(pos.rowIndex);\n  rowDef.setData(grid.api.getColumnField(pos.colIndex), selectedIndex);\n};\n\nvar configObj = {\n  columns: [\n    { name: \"Row Index\", field: fields[0], width: 80 },\n    { name: \"Dropdown\", field: fields[1], binding: dropdownFormatter },\n    { name: \"Dropdown Value\", field: fields[1] },\n    { name: \"Column 3\", field: fields[2], alignment: \"center\" },\n    { name: \"Column 4\", field: fields[3] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n  margin-bottom: 40px;\n}","tagName":"pre"},{"text":"Writing event listeners","tagName":"h2"},{"text":"Since the same element will be used on different rows, you cannot use closure variables that are created or given from the event arguments. Row index, column index, or cell reference must be resolved at runtime inside the event listener. You can resolve the position by using Grid's getRelativePosition() method.","tagName":"p"},{"text":"    var dropdownChangeHandler = function(e) {\n        var dropdown = e.currentTarget;\n        var selectedIndex = +(dropdown.options[dropdown.selectedIndex].value);\n\n        var pos = grid.api.getRelativePosition(e);\n        var rowDef = grid.api.getRowDefinition(pos.rowIndex);\n        rowDef.setData(grid.api.getColumnField(pos.colIndex), selectedIndex);\n    };","tagName":"pre"},{"text":"See this page on how to update data.","tagName":"p"},{"text":"this page","tagName":"a"}]},{"title":"Overview","filename":"rendering/predefined-formatter.html","contents":[{"text":"Setup guide","tagName":"h2"},{"text":"Use import syntax to import the formatter into your app.","tagName":"p"},{"text":"import { EFButtonFormatter } from \"@refinitiv-ui/efx-grid/formatters/EFButtonFormatter\";\nimport { EFSelectFormatter } from \"@refinitiv-ui/efx-grid/formatters/EFSelectFormatter\";","tagName":"pre"},{"text":"The basics","tagName":"h2"},{"text":"The simplest way to get the basic formatter is by calling create() without options, for example SimpleInputFormatter.create(). Then pass it to Grid using configuration, as shown below:","tagName":"p"},{"text":"var config = {\n    columns: [{\n        name: \"Company Info\",\n        field: \"info\",\n        binding: SimpleInputFormatter.create()\n    }, {\n        name: \"Currency\",\n        field: \"currency\",\n        binding: EFSelectFormatter.create()\n    }, {\n        name: \"DatePicker\",\n        field: \"date\",\n        binding: EFDateTimePickerFormatter.create()\n    }]\n}","tagName":"pre"},{"text":"Formatter with default options supports basic functioning and can be used for general usage. For input formatters, like SimpleInputFormatter, EFTextFieldFormatter, EFComboBoxFormatter, and so on, when the value has changed the new value will be saved to the dataTable of Grid. See basic formatters in the below example:","tagName":"p"},{"text":"\n","tagName":"pre"},{"text":"var currencies = [\"THB\", \"AUD\", \"USD\", \"YEN\", \"TWD\"];\nDataGenerator.addFieldInfo(\"currency\", { type: \"set\", members: currencies });\n\nvar fields = [\"number_1\", \"currency\", \"CF_NETCHNG\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\nvar configObj = {\n  columns: [{\n      name: \"SimpleLink\",\n      field: fields[0],\n      alignment: \"center\",\n      binding: SimpleLinkFormatter.create()\n    },\n    {\n      name: \"Input\",\n      field: fields[0],\n      alignment: \"center\",\n      binding: EFNumberFieldFormatter.create()\n    },\n    {\n      name: \"Select\",\n      field: fields[1],\n      alignment: \"center\",\n      binding: EFSelectFormatter.create({\n        data: currencies\n      })\n    },\n    {\n      name: \"PercentBar\",\n      field: fields[2],\n      alignment: \"center\",\n      binding: PercentBarFormatter.create()\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"},{"text":"Advance usage","tagName":"h2"},{"text":"Customizations are allowed through various options, as detailed in the following sections.","tagName":"p"},{"text":"Common options","tagName":"h3"},{"text":"There are some options that are available for all formatters, see the below table for more details.","tagName":"p"},{"text":"\nName\nType\nAttributes\nDescription\n","tagName":"tr"},{"text":"\nattributes\nObject\noptional\nList of attributes name and values\n","tagName":"tr"},{"text":"\nstyles\nObject\noptional\nList of inline styles for the element\n","tagName":"tr"},{"text":"\nevents\nObject\noptional\nList of event names and listeners\n","tagName":"tr"},{"text":"\ndisablingField\nstring\noptional\nField to be used for representing disabled attribute of the element\n","tagName":"tr"},{"text":"\nerrorField\nstring\noptional\nField to be used for representing error attribute of the element\n","tagName":"tr"},{"text":"\nonElementRendered\nFunction\noptional\nEvent handler after default rendering. It is useful for additional styling\n","tagName":"tr"},{"text":"Note: The available value for each option is dependent on the type of element. In the case of the EF element, more information about attributes and events can be found here.","tagName":"p"},{"text":"here","tagName":"a"},{"text":"Below is an example of showing a button with a label, icon, light coral background color, and listen for click and active-changed event.","tagName":"p"},{"text":"var config = {\n    columns: [{\n        name: \"Number\",\n        field: \"number\",\n        binding: EFButtonFormatter.create({\n            label: \"More detail\",\n            attributes: {\n                \"icon\": \"info\"\n            },\n            styles: {\n                \"background\": \"lightcoral\"\n            },\n            events: {\n                \"active-changed\": function(e, context) { // Custom event exposed by the element\n\n                },\n                \"click\": function(e, context) { // Native events are also supported\n\n                }\n            },\n            onElementRendered: function(element, context) {\n\n            }\n        })\n    }]\n}","tagName":"pre"},{"text":"Event listener's parameters","tagName":"h3"},{"text":"Available parameters for all listeners are described below:","tagName":"p"},{"text":"\nName\nType\nDescription\n","tagName":"tr"},{"text":"\nevent\nEvent\nNative event argument object\n","tagName":"tr"},{"text":"\ncontext\nObject\nContext object, contains all kind of information and methods\n","tagName":"tr"},{"text":"Context object also contains information about the position of the element (the same information from getRelativePosition method).","tagName":"p"},{"text":"getRelativePosition","tagName":"a"},{"text":"Context object methods","tagName":"h3"},{"text":"Context object also provides helper methods as shown below:","tagName":"p"},{"text":"\nName\nDescription\n","tagName":"tr"},{"text":"\ngetData(field)\nGet field value from the current row\n","tagName":"tr"},{"text":"\nsetData(field, value)\nSet field value to the current row\n","tagName":"tr"},{"text":"\nisElementDisabled()\nGet data from the disablingField of the current row\n","tagName":"tr"},{"text":"\ndisableElement(bool)\nSet data to the disablingField of the current row\n","tagName":"tr"},{"text":"\ngetError()\nGet data from the errorField of the current row\n","tagName":"tr"},{"text":"\nsetError(value)\nSet data to the errorField of the current row\n","tagName":"tr"},{"text":"Specific Options","tagName":"h3"},{"text":"The specific options for each formatters are separately described on each formatter page.","tagName":"p"}]},{"title":"SimpleImageFormatter","filename":"rendering/predefined_formatters/simple-image-formatter.html","contents":[{"text":"This formatter creates an image from the column's field by default.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"image\", \"s_image\"];\nvar records = new Array(40);\nfor (var i = 0; i < 40; ++i) {\n  var record = records[i] = {};\n  record[fields[0]] = \"https://dummyimage.com/40x40&text=\" + i;\n  record[fields[1]] = \"https://dummyimage.com/15x15&text=\" + i;\n}\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \"Image\",\n      field: fields[0],\n      alignment: \"c\",\n      binding: SimpleImageFormatter.create()\n    },\n    {\n      name: \"Small Image\",\n      field: fields[1],\n      alignment: \"c\",\n      binding: SimpleImageFormatter.create()\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"SimpleInputFormatter","filename":"rendering/predefined_formatters/simple-input-formatter.html","contents":[{"text":"This formatter creates an input without a margin and 100% width. By default the input's value will be the column's field.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"number_1\", \"float_1\"];\nvar records = DataGenerator.generateRecords(fields, 40);\n\nvar configObj = {\n  columns: [{\n      name: \"Column 1\",\n      field: fields[0],\n      alignment: \"center\"\n    },\n    {\n      name: \"Column 2\",\n      field: fields[1],\n      alignment: \"center\"\n    },\n    {\n      name: \"Input\",\n      field: fields[0],\n      alignment: \"center\",\n      binding: SimpleInputFormatter.create()\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"SimpleLinkFormatter","filename":"rendering/predefined_formatters/simple-link-formatter.html","contents":[{"text":"This formatter creates a link with text from the column's field by default.","tagName":"p"},{"text":"Specific options","tagName":"h2"},{"text":"\nName\nType\nAttributes\nDescription\n","tagName":"tr"},{"text":"\nurlField\nstring\noptional\nField used for href attribute\n","tagName":"tr"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var href = \"https://www.refinitiv.com/#\";\n\nvar fields = [\"id\", \"url\"];\nvar records = new Array(40);\nfor (var i = 0; i < 40; ++i) {\n  var record = records[i] = {};\n  record[fields[0]] = i;\n  record[fields[1]] = \"https://www.refinitiv.com/#\" + i;\n}\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \"Data\",\n      field: fields[0],\n      alignment: \"c\"\n    },\n    {\n      name: \"Simplest\",\n      field: fields[0],\n      alignment: \"c\",\n      binding: SimpleLinkFormatter.create({\n        attributes: {\n          href: \"https://www.refinitiv.com\"\n        }\n      })\n    },\n    {\n      name: \"Some options\",\n      field: fields[0],\n      alignment: \"c\",\n      binding: SimpleLinkFormatter.create({\n        label: \"click here\",\n        attributes: {\n          href: \"https://www.refinitiv.com\"\n        },\n        styles: {\n          color: \"red\"\n        },\n        events: {\n          \"click\": function(e) {\n            console.log(\"clicked\");\n            e.preventDefault();\n          }\n        }\n      })\n    },\n    {\n      name: \"Dynamic URL\",\n      field: fields[0],\n      alignment: \"c\",\n      binding: SimpleLinkFormatter.create({\n        label: \"see URL\",\n        urlField: fields[1]\n      })\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"SimpleTickerFormatter","filename":"rendering/predefined_formatters/simple-ticker-formatter.html","contents":[{"text":"This formatter creates a ticker column.","tagName":"p"},{"text":"Specific options","tagName":"h2"},{"text":"\nName\nType\nAttributes\nDescription\n","tagName":"tr"},{"text":"\nnegativeColor\nstring\noptional\nColor code\n","tagName":"tr"},{"text":"\npositiveColor\nstring\noptional\nColor code\n","tagName":"tr"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"last\", \"changes\", \"percent\", \"tick_1\"];\nvar records = new Array(40);\nfor (var i = 0; i < 40; ++i) {\n  var changes = i * (i % 7) - i % 13;\n  var last = 5 + i % 13;\n  var percent = (changes / last) * 100;\n  var tick;\n  if (percent > 0) {\n    tick = 1;\n  } else if (percent < 0) {\n    tick = -1;\n  } else {\n    tick = 0;\n  }\n  var record = records[i] = {};\n  record[fields[0]] = last;\n  record[fields[1]] = changes;\n  record[fields[2]] = percent.toFixed(2);\n  record[fields[3]] = tick;\n}\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \"Last\",\n      field: fields[0],\n      alignment: \"c\"\n    },\n    {\n      name: \"Changes\",\n      field: fields[1],\n      alignment: \"c\",\n    },\n    {\n      name: \"Changes %\",\n      field: fields[2],\n      alignment: \"c\",\n    },\n    {\n      name: \"Default\",\n      field: fields[3],\n      alignment: \"c\",\n      binding: SimpleTickerFormatter.create()\n    },\n    {\n      name: \"Custom\",\n      field: fields[3],\n      alignment: \"c\",\n      binding: SimpleTickerFormatter.create({\n        negativeColor: \"#FF6333\",\n        positiveColor: \"#607EFF\",\n      })\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"SimpleToggleFormatter","filename":"rendering/predefined_formatters/simple-toggle-formatter.html","contents":[{"text":"This formatter creates a toggle column with a default \"eye\" icon.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"toggle\", \"number_1\"];\nvar records = new Array(40);\nfor (var i = 0; i < 40; ++i) {\n  var record = records[i] = {};\n  record[fields[0]] = i % 2 === 0;\n  record[fields[1]] = i;\n}\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \"\",\n      field: fields[0],\n      alignment: \"c\",\n      binding: SimpleToggleFormatter.create()\n    },\n    {\n      name: \"Column 2\",\n      field: fields[1],\n      alignment: \"c\",\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"PercentBarFormatter","filename":"rendering/predefined_formatters/percent-bar-formatter.html","contents":[{"text":"This formatter creates a percent bar.","tagName":"p"},{"text":"Specific options","tagName":"h2"},{"text":"\nName\nType\nAttributes\nDefault\nDescription\n","tagName":"tr"},{"text":"\nalignment\nstring\noptional\n\"left\"\nPossible values are l, r, c, left, right, and center\n","tagName":"tr"},{"text":"\nmovementColor\nboolean\noptional\ntrue\nIf disabled, percent bar will not use up and down colors\n","tagName":"tr"},{"text":"\nbarColor\nstring\noptional\n\"\"\nCustom color for bar element\n","tagName":"tr"},{"text":"\ntextHidden\nboolean\noptional\nfalse\nIf enabled, text label will not be shown\n","tagName":"tr"},{"text":"\ntextWidth\nnumber or string\noptional\n56\nNumber of pixel or percentage width\n","tagName":"tr"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"myPercent\", \"word\"];\nvar num = -100;\nDataGenerator.addFieldInfo(\"myPercent\", function(e) {\n  return num += 5;\n});\n\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 40 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \"Percent bar (Default)\",\n      field: fields[0],\n      alignment: \"c\",\n      binding: PercentBarFormatter.create()\n    },\n    {\n      name: \"Center alignment + No Movement Color\",\n      field: fields[0],\n      alignment: \"c\",\n      binding: PercentBarFormatter.create({\n        alignment: \"c\",\n        movementColor: false\n      })\n    },\n    {\n      name: \"No Label + Custom Color\",\n      field: fields[0],\n      alignment: \"c\",\n      binding: PercentBarFormatter.create({\n        alignment: \"r\",\n        textHidden: true,\n        barColor: \"purple\"\n      })\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"TextFormatter","filename":"rendering/predefined_formatters/text-formatter.html","contents":[{"text":"This formatter creates a simple div element with text from the column's field by default. The div element can be modified in the handler (for example, onElementRendered) and passed through configuration object for multiple use cases. ","tagName":"p"},{"text":"Specific options","tagName":"h2"},{"text":"The purpose of this formatter is creating a generic element for further modifications, so there are no specific options.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"number_1\", \"word\", \"float_1\"];\nvar records = DataGenerator.generateRecords(fields, 40);\n\nvar configObj = {\n  columns: [{\n      name: \"Column 1\",\n      field: fields[0],\n      alignment: \"right\",\n      binding: TextFormatter.create()\n    },\n    {\n      name: \"Column 2\",\n      field: fields[1],\n      alignment: \"center\",\n      binding: TextFormatter.create({\n        styles: {\n          \"backgroundColor\": \"thistle\"\n        }\n      })\n    },\n    {\n      name: \"Big Text\",\n      field: fields[2],\n      binding: TextFormatter.create({\n        styles: {\n          \"fontSize\": \"1.5em\"\n        }\n      })\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"},{"text":"Formatting predefined formatter using Text Formatting Extension","tagName":"h2"},{"text":"When using Text Formatting Extension, by default, predefined formatter will be overwritten due to the need for rendering a formatted text by the extension. To format the text inside predefined formatter and avoid the overriding, you will need to instruct the extension on how and where to do the formatting. See this page for more information.","tagName":"p"},{"text":"this page","tagName":"a"},{"text":"In this case, you can use onElementRendered and Text Formatting Extension to do the formatting.","tagName":"p"}]},{"title":"EFButtonFormatter","filename":"rendering/predefined_formatters/ef-button-formatter.html","contents":[{"text":"This formatter creates a ef-button without a margin. By default the text inside the button will be data from the column's field.","tagName":"p"},{"text":"ef-button","tagName":"a"},{"text":"Specific options","tagName":"h2"},{"text":"\nName\nType\nAttributes\nDescription\n","tagName":"tr"},{"text":"\nlabel\nstring\noptional\nText inside the button, default text is the value from the column's field\n","tagName":"tr"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"number_1\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  columns: [{\n      name: \"Data\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\"\n    },\n    {\n      name: \"Simplest\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\",\n      binding: EFButtonFormatter.create()\n    },\n    {\n      name: \"Some options\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\",\n      binding: EFButtonFormatter.create({\n        label: \"\",\n        attributes: {\n          icon: \"cross\"\n        },\n        styles: {\n          width: \"23px\"\n        },\n        events: {\n          \"click\": function(e) {\n            console.log(\"clicked\");\n          }\n        }\n      })\n    }\n  ],\n  extensions: [],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"EFCheckboxFormatter","filename":"rendering/predefined_formatters/ef-checkbox-formatter.html","contents":[{"text":"This formatter creates a ef-checkbox which will be unchecked by default.","tagName":"p"},{"text":"ef-checkbox","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"word\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      alignment: \"c\",\n      field: \"myCheckBoxState\",\n      width: 34,\n      binding: EFCheckboxFormatter.create({\n        events: {\n          \"click\": function(e) {\n            console.log(\"clicked\");\n          }\n        }\n      })\n    },\n    {\n      name: \"Grid Checkbox State\",\n      field: \"myCheckBoxState\",\n      alignment: \"c\",\n    },\n    {\n      name: \"Text\",\n      field: fields[0],\n      alignment: \"c\",\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"},{"text":"Checkbox with a label","tagName":"h3"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"word\", \"words\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      alignment: \"l\",\n      field: \"myCheckBoxState\",\n      width: 150,\n      binding: EFCheckboxFormatter.create({\n        events: {\n          \"click\": function(e) {\n            console.log(\"clicked\");\n          }\n        },\n        labelField: \"word\"\n      })\n    },\n    {\n      name: \"Grid Checkbox State\",\n      field: \"myCheckBoxState\",\n      alignment: \"c\",\n    },\n    {\n      name: \"Text\",\n      field: fields[1],\n      alignment: \"c\",\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"EFComboBoxFormatter","filename":"rendering/predefined_formatters/ef-combo-box-formatter.html","contents":[{"text":"This formatter creates a ef-combo-box without margin. Its options come from passed options.data.","tagName":"p"},{"text":"ef-combo-box","tagName":"a"},{"text":"Specific options","tagName":"h2"},{"text":"\nName\nType\nAttributes\nDescription\n","tagName":"tr"},{"text":"\ndata\narray\nrequired\nList of items, see ef-combo-box for more detail.\n","tagName":"tr"},{"text":"ef-combo-box","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var currencies = [\"THB\", \"AUD\", \"USD\", \"YEN\", \"TWD\"];\nDataGenerator.addFieldInfo(\"currency\", { type: \"set\", members: currencies });\n\nvar fields = [\"number_1\", \"boolean\", \"currency\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  columns: [{\n      name: \"Column 1\",\n      field: fields[0],\n      alignment: \"center\"\n    },\n    {\n      name: \"Column 2\",\n      field: fields[1],\n      alignment: \"center\"\n    },\n    {\n      name: \"Select\",\n      field: fields[2],\n      alignment: \"center\",\n      binding: EFComboBoxFormatter.create({\n        data: currencies\n      })\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"EFDateTimePickerFormatter","filename":"rendering/predefined_formatters/ef-datetime-picker-formatter.html","contents":[{"text":"This formatter creates ef-datetime-picker without margin. ","tagName":"p"},{"text":"ef-datetime-picker","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"date\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  columns: [{\n      name: \"Data\",\n      field: fields[0],\n      sortBy: fields[0],\n      alignment: \"c\",\n      binding: function(e) {\n        var value = e[\"data\"];\n        var cell = e[\"cell\"];\n        cell.setContent(value.toDateString());\n      }\n    },\n    {\n      name: \"Simplest\",\n      field: fields[0],\n      sortBy: fields[0],\n      alignment: \"c\",\n      binding: EFDateTimePickerFormatter.create()\n    },\n    {\n      name: \"Some options\",\n      field: fields[0],\n      sortBy: fields[0],\n      alignment: \"c\",\n      binding: EFDateTimePickerFormatter.create({\n        attributes: {\n          format: \"yyyy-MM-dd\"\n        },\n        styles: {\n          width: \"120px\"\n        },\n        events: {\n          \"value-changed\": function(e) {\n            // console.log(\"value changed: \" + e.detail.value);\n          }\n        }\n      })\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"EFIconFormatter","filename":"rendering/predefined_formatters/ef-icon-formatter.html","contents":[{"text":"This formatter creates a ef-icon from the column's field by default.","tagName":"p"},{"text":"ef-icon","tagName":"a"},{"text":"A full list of available icons can be found here. ","tagName":"p"},{"text":"here","tagName":"a"},{"text":"Specific options","tagName":"h2"},{"text":"\nName\nType\nAttributes\nDescription\n","tagName":"tr"},{"text":"\nicon\nstring or object\noptional\nIcon shown in the cell\n","tagName":"tr"},{"text":"\nsize\nstring or number\noptional\nSize of an icon in pixels\n","tagName":"tr"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var icons = [\"3d-surface\", \"api\", \"eye\", \"conference\", \"flame\"];\nDataGenerator.addFieldInfo(\"number\", { type: \"number\", min: 0, max: 5 });\nDataGenerator.addFieldInfo(\"icon\", { type: \"set\", members: icons });\nvar fields = [\"number\", \"icon\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  columns: [{\n      name: \"Static Icon\",\n      alignment: \"c\",\n      binding: EFIconFormatter.create({\n        icon: \"3d-surface\",\n      })\n    },\n    {\n      name: \"Dynamic Icon With Mapper\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\",\n      binding: EFIconFormatter.create({\n        icon: {\n          0: \"up\",\n          1: \"down\",\n          2: \"left\",\n          3: \"right\",\n          4: \"line\"\n        },\n        size: 20\n      })\n    },\n    {\n      name: \"Dynamic Icon\",\n      field: fields[1],\n      sort: fields[1],\n      alignment: \"c\",\n      binding: EFIconFormatter.create()\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"EFNumberFieldFormatter","filename":"rendering/predefined_formatters/ef-number-field-formatter.html","contents":[{"text":"This formatter creates a ef-number-field without a margin and 100% width. By default the input's value will be the column's field.","tagName":"p"},{"text":"ef-number-field","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"number_1\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  columns: [{\n      name: \"Number\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\"\n    },\n    {\n      name: \"Simplest\",\n      field: fields[0],\n      sort: fields[0],\n      binding: EFNumberFieldFormatter.create()\n    },\n    {\n      name: \"Some options (Step)\",\n      field: fields[0],\n      sort: fields[0],\n      binding: EFNumberFieldFormatter.create({\n        attributes: {\n          step: 100\n        }\n      })\n    }\n  ],\n  extensions: [],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"EFRadioButtonFormatter","filename":"rendering/predefined_formatters/ef-radio-button-formatter.html","contents":[{"text":"This formatter creates a ef-radio-button which will be unchecked by default.","tagName":"p"},{"text":"ef-radio-button","tagName":"a"},{"text":"Specific options","tagName":"h2"},{"text":"\nName\nType\nAttributes\nDescription\n","tagName":"tr"},{"text":"\ninitialIndex\nnumber\noptional\nInitial checked row index\n","tagName":"tr"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"number\", \"word\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \" \",\n      alignment: \"c\",\n      field: \"radio\",\n      width: 34,\n      binding: EFRadioButtonFormatter.create({\n        initialIndex: 0,\n        events: {\n          \"click\": function(e) {\n            console.log(\"clicked\");\n          }\n        }\n      })\n    },\n    {\n      name: \"Number\",\n      field: fields[0],\n      alignment: \"c\",\n    },\n    {\n      name: \"Description\",\n      field: fields[1],\n      alignment: \"c\",\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"EFSelectFormatter","filename":"rendering/predefined_formatters/ef-select-formatter.html","contents":[{"text":"This formatter creates ef-select without margin. Its options come from passed options.data.","tagName":"p"},{"text":"ef-select","tagName":"a"},{"text":"Specific options","tagName":"h2"},{"text":"\nName\nType\nAttributes\nDescription\n","tagName":"tr"},{"text":"\ndata\nArray\nrequired\nList of items, see ef-select for more detail.\n","tagName":"tr"},{"text":"ef-select","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var currencies = [\"THB\", \"AUD\", \"USD\", \"YEN\", \"TWD\"];\nDataGenerator.addFieldInfo(\"currency\", { type: \"set\", members: currencies });\n\nvar fields = [\"currency\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  columns: [{\n      name: \"Data\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\"\n    },\n    {\n      name: \"Simplest\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\",\n      binding: EFSelectFormatter.create({\n        entries: currencies\n      })\n    },\n    {\n      name: \"Some options\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\",\n      binding: EFSelectFormatter.create({\n        data: currencies,\n        attributes: {\n\n        },\n        styles: {\n          width: \"80px\"\n        },\n        events: {\n          \"value-changed\": function(e) {\n            // console.log(\"value changed: \" + e.detail.value);\n          }\n        }\n      })\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"EFTextFieldFormatter","filename":"rendering/predefined_formatters/ef-text-field-formatter.html","contents":[{"text":"This formatter creates a ef-text-field without a margin and 100% width. By default the input's value will be the column's field.","tagName":"p"},{"text":"ef-text-field","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"number_1\", \"word\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  columns: [{\n      name: \"Word\",\n      field: fields[1],\n      sort: fields[1]\n    },\n    {\n      name: \"Simplest\",\n      field: fields[1],\n      sort: fields[1],\n      alignment: \"c\",\n      binding: EFTextFieldFormatter.create()\n    },\n    {\n      name: \"Identified field\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\",\n      binding: EFTextFieldFormatter.create({\n        field: fields[1]\n      })\n    },\n    {\n      name: \"Some options\",\n      field: fields[1],\n      sort: fields[1],\n      alignment: \"c\",\n      binding: EFTextFieldFormatter.create({\n        attributes: {\n          icon: \"edit\"\n        },\n        events: {\n          \"value-changed\": function(e) {\n            // console.log(\"value changed: \" + e.detail.value);\n          }\n        }\n      })\n    }\n  ],\n  extensions: [],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"EFToggleFormatter","filename":"rendering/predefined_formatters/ef-toggle-formatter.html","contents":[{"text":"This formatter creates a ef-toggle. The toggle will be off by default.","tagName":"p"},{"text":"ef-toggle","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"boolean\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\n\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [{\n      name: \" \",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\",\n      width: 100,\n      binding: EFToggleFormatter.create({\n        events: {\n          \"click\": function(e) {\n            // blotter.api.getDataView().log();\n          }\n        }\n      })\n    },\n    {\n      name: \"Label\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\",\n      width: 100,\n      binding: EFToggleFormatter.create({\n        events: {\n          \"checked-changed\": function(e) {\n\n          }\n        },\n        styles: {\n          width: \"54px\"\n        },\n        attributes: {\n          label: \"OFF\",\n          \"checked-label\": \"ON\"\n        }\n      })\n    },\n    {\n      name: \"Checked\",\n      field: fields[0],\n      sort: fields[0],\n      alignment: \"c\"\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"Columns and Data","filename":"data/columns-and-data.html","contents":[{"text":"Grid provides columns and data properties that allow clearing and setting new data/column set at runtime.","tagName":"p"},{"text":"Note: The properties will only work after Grid's config property has been set.The properties do not support two-way binding. Meaning, any change within the internal structure will not reflect or synchronize back to the property value. This means, regardless of any change in Grid, the property will remain the same. ","tagName":"p"},{"text":"Resetting data","tagName":"h2"},{"text":"Data property","tagName":"h3"},{"text":"data property supports only an array of objects, with each object representing a field and its corresponding value within Grid, as demonstrated below:","tagName":"p"},{"text":"grid.data = [\n  {\"Field 1\": 1, \"Field 2\": 0},\n  {\"Field 1\": 3, \"Field 2\": 4, \"Field 3\": 5}\n];","tagName":"pre"},{"text":"In this code snippet, grid.data property accepts an array of objects, where each object represents a field and its associated value within Grid.","tagName":"p"},{"text":"Columns property","tagName":"h3"},{"text":"columns property takes the same type of input as the columns property in the grid configuration object (grid.config). The data and grid configuration will not be affected by this property. ","tagName":"p"},{"text":"To change a new set of columns and keep the current settings and data, do the following:","tagName":"p"},{"text":"grid.columns = newColumns; // Clear all existing columns and set entirely new set of columns\n\ngrid.columns = null; // Clear all existing columns. All data stored in grid stays intact.","tagName":"pre"},{"text":"You can keep the current set of columns and change the current settings by leaving out the columns property from the config object.","tagName":"p"},{"text":"grid.columns = newColumns;\ngrid.config = {\n\n}; // current columns are kept","tagName":"pre"},{"text":"Clearing data","tagName":"h2"},{"text":"To clear all existing data, set data property to null. This is a quick way to remove all data. It is equivalent to calling removeAllRows() API.","tagName":"p"},{"text":"grid.data = null; // Clear all existing data","tagName":"pre"},{"text":"Columns and data property example","tagName":"h2"},{"text":"
                                                                                              \n  Setting Columns\n  \n  \n  \n
                                                                                              \n
                                                                                              \n  Setting Data\n  \n  \n  \n
                                                                                              \n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 4, seed: 0 });\nvar records1 = tr.DataGenerator.generateRecords(fields, { numRows: 5, seed: 10 });\nvar records2 = tr.DataGenerator.generateRecords(fields, { numRows: 3, seed: 20 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"column_btn1\").addEventListener('click', function() {\n  grid.columns = [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ];\n});\ndocument.getElementById(\"column_btn2\").addEventListener('click', function() {\n  grid.columns = [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 }\n  ];\n});\ndocument.getElementById(\"column_btn3\").addEventListener('click', function() {\n  grid.columns = null;\n});\n\ndocument.getElementById(\"data_btn1\").addEventListener('click', function() {\n  grid.data = records1;\n});\ndocument.getElementById(\"data_btn2\").addEventListener('click', function() {\n  grid.data = records2;\n});\ndocument.getElementById(\"data_btn3\").addEventListener('click', function() {\n  grid.data = null;\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"As there are more states and options for each row in Grid, rows property is provided as a way to set those options. Setting rows property will change number of rows and reset existing data and data requests. Changing rows property will always remove existing rows, so you should use this for changing to completely new set of rows. ","tagName":"p"},{"text":"You can also use data property to manage rows within Grid including removal, insertion, and updating of rows in Grid. When you update data property, it compares the existing data with the new data based on row indices with following:","tagName":"p"},{"text":"As demonstrated below:","tagName":"p"},{"text":"// 1. Begin by assigning three rows of data. Grid displaying 3 rows.\ngrid.data = [\n    {\"f1\": 1},\n    {\"f1\": 2},\n    {\"f1\": 3}\n];\n\n// 2. Grid displaying 1 row.\ngrid.data = [\n    {\"f1\": 1} \n];\n\n// 3. Grid display 5 rows.\ngrid.data = [\n    {\"f1\": 1},\n    {\"f1\": 2},\n    {\"f1\": 3},\n    {\"f1\": 4},\n    {\"f1\": 5}\n];\n\n// 4. Grid displaying 5 rows with re-ordered positions.\ngrid.data = [\n    {\"f1\": 3},\n    {\"f1\": 1},\n    {\"f1\": 4},\n    {\"f1\": 2},\n    {\"f1\": 5}\n];\n","tagName":"pre"},{"text":"However, if either rows or data property is set to null, all rows and data will be removed.","tagName":"p"},{"text":"Note: you should not use rows property for adding new rows because it is not very efficient (i.e., existing data will be cleared and re-requested). You should use provided APIs for dynamically adding new rows. ","tagName":"p"},{"text":"Rows and data property example","tagName":"h2"},{"text":"
                                                                                              \n  Setting Rows\n  \n  \n  \n  \n
                                                                                              \n
                                                                                              \n  Updating Data\n  \n  \n  \n  \n
                                                                                              \n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 4, seed: 0 });\n// For data property\nvar records1 = tr.DataGenerator.generateRecords(fields, { numRows: 3, seed: 10 });\nvar records2 = tr.DataGenerator.generateRecords(fields, { numRows: 4, seed: 20 });\nvar records3 = tr.DataGenerator.generateRecords(fields, { numRows: 5, seed: 30 });\n// For rows property\nvar records4 = tr.DataGenerator.generateRecords(fields, { numRows: 3, seed: 40 });\nvar records5 = tr.DataGenerator.generateRecords(fields, { numRows: 4, seed: 50 });\nvar records6 = tr.DataGenerator.generateRecords(fields, { numRows: 5, seed: 60 });\n\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"row_btn1\").addEventListener('click', function() {\n  grid.rows = records4.map(function(data, idx) {\n    return {\n      ric: \"RIC_\" + idx,\n      values: data\n    };\n  });\n});\ndocument.getElementById(\"row_btn2\").addEventListener('click', function() {\n  grid.rows = records5.map(function(data, idx) {\n    return {\n      ric: \"RIC_\" + idx,\n      values: data\n    };\n  });\n});\ndocument.getElementById(\"row_btn3\").addEventListener('click', function() {\n  grid.rows = records6.map(function(data, idx) {\n    return {\n      ric: \"RIC_\" + idx,\n      values: data\n    };\n  });\n});\ndocument.getElementById(\"row_btn4\").addEventListener('click', function() {\n  grid.rows = null;\n});\n\ndocument.getElementById(\"data_btn1\").addEventListener('click', function() {\n  grid.data = records1;\n});\ndocument.getElementById(\"data_btn2\").addEventListener('click', function() {\n  grid.data = records2;\n});\ndocument.getElementById(\"data_btn3\").addEventListener('click', function() {\n  grid.data = records3;\n});\ndocument.getElementById(\"data_btn4\").addEventListener('click', function() {\n  grid.data = null;\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhr {\n  margin: 5px;\n}","tagName":"pre"}]},{"title":"Creating Data","filename":"data/create.html","contents":[{"text":"Grid can be created with data by providing staticDataRows in the grid configuration object as described on the Initializing Data page. However, staticDataRows is entirely optional. You can add additional data to Grid at runtime by using Grid's APIs. Adding data after initialization can be useful when you have some data from real-time sources or servers.","tagName":"p"},{"text":"the Initializing Data page","tagName":"a"},{"text":"APIs","tagName":"a"},{"text":"Note: row index is not good for referencing as the row index will be shifted by various operations such as sorting, filtering, adding, and so on. It's recommended that you should use RowDefinition object for referencing, so that you can reference them later in a situation where you have some real-time data. ","tagName":"p"},{"text":"Static data will be defined in values property of row configuration object.","tagName":"p"},{"text":"Use insertRows(rows) method to add multiple rows at once. The parameter is defined as an array of row configuration objects as shown below:  ","tagName":"p"},{"text":"var rows = [\n    {values: {\"field1\": \"a\", \"field2\": 1, \"field3\": null}},\n    {values: {\"field1\": \"b\", \"field2\": 5, \"field3\": {\"someKey\": 10}}},\n    {values: {\"field1\": \"c\", \"field2\": 7, \"field3\": [1, 2, 3]}},\n    {values: {\"field1\": \"c\", \"field4\": \"some value\"}}, // Data don't need to be in uniform structure\n];\n\ngrid.api.insertRows(rows); // 4 rows are added","tagName":"pre"},{"text":"Use insertRow(row) to add a single row to the bottom.","tagName":"p"},{"text":"grid.api.insertRow({values: {\"field1\": \"a\", \"field2\": 1, \"field3\": null}});","tagName":"pre"},{"text":"Use insertRow(row, rowIndex) if you want to add a row to a specific position. ","tagName":"p"},{"text":"grid.api.insertRow({values: {\"field1\": \"a\", \"field2\": 1}, 2); // Add a new row as the third row to the top (row index #2)","tagName":"pre"},{"text":"All available row options can be found here","tagName":"p"},{"text":"here","tagName":"a"},{"text":"All available APIs can be found here","tagName":"p"},{"text":"here","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ]\n  // staticDataRows property is entirely optional \n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"multi_add_btn\").addEventListener(\"click\", function(e) {\n  var records = DataGenerator.generateRecords(fields, 5);\n  var rows = records.map(function toRowOption(record) {\n    return { values: record };\n  });\n  grid.api.insertRows(rows);\n});\n\ndocument.getElementById(\"add_btn\").addEventListener(\"click\", function(e) {\n  var record = DataGenerator.generateRecord(fields);\n  grid.api.insertRow({ values: record });\n});\n\ndocument.getElementById(\"add_top_btn\").addEventListener(\"click\", function(e) {\n  var record = DataGenerator.generateRecord(fields);\n  grid.api.insertRow({ values: record }, 0);\n});","tagName":"pre"},{"text":"efx-grid {\n  height: 400px;\n  margin-bottom: 20px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"}]},{"title":"Reading Data","filename":"data/read.html","contents":[{"text":"As Grid may need to display and store tons of rows, Grid does not provide two-way data binding or a way to directly reference the stored data. All data manipulations, such as sorting, grouping, or filtering, must be done through APIs. To access data stored inside Grid, we need to use Grid's APIs.","tagName":"p"},{"text":"APIs","tagName":"a"},{"text":"APIs","tagName":"h2"},{"text":"Use getRowData(rowIndex) to get data of the specified row.","tagName":"p"},{"text":"console.log(grid.api.getRowData(2));","tagName":"pre"},{"text":"Use getMultipleRowData() to retrieve all rows","tagName":"p"},{"text":"console.log(grid.api.getMultipleRowData());","tagName":"pre"},{"text":"getMultipleRowData(rowIndices) to get multiple row data from specific row indices at once.","tagName":"p"},{"text":"grid.api.getMultipleRowData([0, 2, 4]);","tagName":"pre"},{"text":"Use logDV() or logDT() to quickly log data in table format to developer console","tagName":"p"},{"text":"console.log(\"=== Data View ===\");\ngrid.api.logDV(); // Rows after sorting and filtering\n\nconsole.log(\"=== Data Table ===\");\ngrid.api.logDT(); // Rows in original order","tagName":"pre"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"top_row_btn\").addEventListener(\"click\", function(e) {\n  var rowData = grid.api.getRowData(0);\n  alert(JSON.stringify(rowData, function replacer(key, value) {\n    if (key === \"ROW_DEF\") {\n      return undefined;\n    }\n    return value;\n  }));\n});\ndocument.getElementById(\"col_btn\").addEventListener(\"click\", function(e) {\n  var allRowData = grid.api.getMultipleRowData();\n  var columnData = allRowData.map(function toCompanyName(rowData) {\n    return rowData[\"companyName\"];\n  });\n  alert(JSON.stringify(columnData));\n});\ndocument.getElementById(\"all_btn\").addEventListener(\"click\", function(e) {\n  var allRowData = grid.api.getMultipleRowData();\n  alert(JSON.stringify(\n    allRowData,\n    function replacer(key, value) {\n      if (key === \"ROW_DEF\") {\n        return undefined;\n      }\n      return value;\n    },\n    2\n  ));\n});","tagName":"pre"},{"text":"efx-grid {\n  margin-bottom: 40px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"}]},{"title":"Updating Data","filename":"data/update.html","contents":[{"text":"The row order can be shifted by data manipulation, such as sorting and filtering. So, the row index is not good for referencing or storing/saving operations. A RowDefinition object needs to be obtained, in order to update data at a later stage. Once you can refer to the row, then we can use setRowData() method to update the data. ","tagName":"p"},{"text":"Updating a row","tagName":"h2"},{"text":"Use getRowDefinition(rowRef) method to retrieve RowDefinition object from Grid.","tagName":"p"},{"text":"Use setRowData(rowData) method from RowDefinition object to update the data.","tagName":"p"},{"text":"Note: insertRow method also returns reference of newly created RowDefinition object","tagName":"p"},{"text":"var records = [\n    {\"field1\": \"a\", \"field2\": 1, \"field3\": null},\n    {\"field1\": \"b\", \"field2\": 5, \"field3\": {\"someKey\": 10}},\n    {\"field1\": \"c\", \"field2\": 7, \"field3\": [1, 2, 3]},\n    {\"field1\": \"c\", \"field4\": \"some value\"}\n];\nvar rows = records.map(function toRowOption(record) {\n    return { values: record };\n});\ngrid.api.insertRows(rows);\nvar rowDef = grid.api.getRowDefinition(2); // Get a reference for the third row\n\nconsole.log(rowDef.getData(\"field2\"));\n\nrowDef.setRowData({\"field2\": 33, \"field1\": \"aa\"}); // Update the third row\n\nconsole.log(rowDef.getData(\"field2\"));\n\nsetTimeout(function(){\n    rowDef.setRowData({\"field2\": 44});\n\n    console.log(rowDef.getData(\"field2\"));\n}, 1000);","tagName":"pre"},{"text":"Example","tagName":"h2"},{"text":"The following example use object to map between RIC (text) and RowDefinition created from insertRow method.","tagName":"p"},{"text":"\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"RIC\", \"CF_LAST\", \"PCTCHNG\", \"CF_NETCHNG\", \"CF_CLOSE\"];\nvar ricList = [\"EUR=\", \"GBP=\", \"THB=\", \"JPY=\", \"AUD=\"];\nvar rowDefMap = {}; // Object for mapping\nvar realtimeInterval = 0;\n\ndocument.getElementById(\"realtime_btn\").addEventListener(\"click\", function(e) {\n  if (realtimeInterval) {\n    clearInterval(realtimeInterval);\n    realtimeInterval = 0;\n  } else {\n    realtimeInterval = setInterval(onRealtimeUpdate, 1200); // Simulate real-time update\n    onRealtimeUpdate(); // Update data immediately after click\n  }\n});\ndocument.getElementById(\"eur_btn\").addEventListener(\"click\", function(e) {\n  updateGridData(getRowUpdate(\"EUR=\"));\n});\ndocument.getElementById(\"jpy_btn\").addEventListener(\"click\", function(e) {\n  updateGridData(getRowUpdate(\"JPY=\"));\n});\n\nfunction onRealtimeUpdate() {\n  updateGridData(getRowUpdates());\n}\n\nfunction updateGridData(rowUpdates) {\n  for (var ric in rowUpdates) {\n    var rowDef = rowDefMap[ric];\n    if (!rowDef) { // Check if rowDef has been created for the updated ric \n      rowDef = rowDefMap[ric] = grid.api.insertRow({}); // Use ric as key for mapping\n    }\n    rowDef.setRowData(rowUpdates[ric]); // Update the data\n  }\n}\n\nfunction getFieldUpdate(dataObj) {\n  // Simulate data updates for multiple field\n  if (!dataObj) {\n    dataObj = {};\n  }\n  var fieldCount = fields.length;\n  for (var i = 1; i < fieldCount; ++i) {\n    if (randInt(0, 10) < 6) {\n      var field = fields[i];\n      dataObj[field] = round(randFloat(-100, 100));\n    }\n  }\n  return dataObj;\n}\n\nfunction getRowUpdate(ric, rowUpdates) {\n  // Simulate data updates for a single row\n  if (!ric) {\n    ric = ricList[randInt(0, ricList.length)];\n  }\n  if (!rowUpdates) {\n    rowUpdates = {};\n  }\n  var dataObj = getFieldUpdate(rowUpdates[ric]);\n  dataObj[fields[0]] = ric;\n\n  rowUpdates[ric] = dataObj;\n  return rowUpdates;\n}\n\nfunction getRowUpdates() {\n  // Simulate data updates for multiple rows\n  var ricCount = ricList.length;\n  var rowUpdates = {};\n  for (var i = 0; i < ricCount; ++i) {\n    if (randInt(0, 10) < 4) {\n      getRowUpdate(ricList[i], rowUpdates);\n    }\n  }\n  return rowUpdates;\n}\n\nfunction randInt(min, exclusive_max) {\n  return Math.floor(randFloat(min, exclusive_max));\n}\n\nfunction randFloat(min, exclusive_max) {\n  return Math.random() * (exclusive_max - min) + min;\n}\n\nfunction round(num) {\n  return Math.round(num * 100) / 100;\n}\n\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  columns: [\n    { name: \"RIC\", field: fields[0], width: 70 },\n    { name: \"Last\", field: fields[1], alignment: \"right\", blinking: true },\n    { name: \"Pct. Chng\", field: fields[2], alignment: \"right\", blinking: true },\n    { name: \"Net. Chng\", field: fields[3], alignment: \"right\", blinking: true },\n    { name: \"Close\", field: fields[4], alignment: \"right\", blinking: true }\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 230px;\n  margin-bottom: 40px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"}]},{"title":"Deleting Data","filename":"data/delete.html","contents":[{"text":"Use removeRow(rowRef) to remove the specified row. ","tagName":"p"},{"text":"grid.api.insertRows([\n    {values: {\"field1\": \"a\", \"field2\": 1, \"field3\": null}},\n    {values: {\"field1\": \"b\", \"field2\": 5, \"field3\": {\"someKey\": 10}}},\n    {values: {\"field1\": \"c\", \"field2\": 7, \"field3\": [1, 2, 3]}},\n    {values: {\"field1\": \"c\", \"field4\": \"some value\"}}\n]);\n\ngrid.api.logDV();\n\ngrid.api.removeRow(2); // Remove the third row\ngrid.api.logDV();","tagName":"pre"},{"text":"Use removeRows() to remove multiple rows at once.","tagName":"p"},{"text":"Use removeAllRows() methods to remove all rows.","tagName":"p"},{"text":"All available APIs can be found here","tagName":"p"},{"text":"here","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"remove_top_btn\").addEventListener(\"click\", function(e) {\n  grid.api.removeRow(0);\n});\n\ndocument.getElementById(\"remove_all_btn\").addEventListener(\"click\", function(e) {\n  grid.api.removeAllRows();\n});\n\ndocument.getElementById(\"add_5_btn\").addEventListener(\"click\", add5Rows);\n\nfunction add5Rows() {\n  var records = DataGenerator.generateRecords(fields, 5);\n  var rows = records.map(function toRowOption(record) {\n    return { values: record };\n  });\n  grid.api.insertRows(rows);\n}","tagName":"pre"},{"text":"efx-grid {\n  height: 230px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"}]},{"title":"Data Conversion","filename":"data/data-conversion.html","contents":[{"text":"Sometimes data adding to Grid is not sanitized, for example the value represented changed price can be -2, +4, \"-0.3\", \"+5\" or even null. To prevent Grid from displaying unexpected data, data parser or data sanitizer need to verify data before rendering. So Grid provides dataComposed event and autoDateConversion for this kind of task.","tagName":"p"},{"text":"dataComposed event","tagName":"h2"},{"text":"Once Grid get data the dataComposed event will be triggered. The event will be fired before rendering. Performing any data update during the dataComposed event will not cause more dataChanged events.","tagName":"p"},{"text":"To add event listener for dataComposed event, just set the listener to the dataComposed property of Grid's configuration like the following:","tagName":"p"},{"text":"    function onDataComposed(e) {\n        var grid = e.grid;\n        var rowDef = e.rowDef;\n        var values = e.changes;\n\n        // parse or sanitize data here\n\n        // save the parsed data through RowDefinition's API \n    }\n\n    var config = {\n        // other grid's options\n        dataComposed: onDataComposed\n    };","tagName":"pre"},{"text":"\n\n","tagName":"pre"},{"text":"var onDataComposed = function(e) {\n  // Perform any data update during the event will NOT cause more dataChanged events\n  var grid = e.grid;\n  var rowDef = e.rowDef;\n  var values = e.changes;\n\n  if (!values) {\n    return;\n  }\n\n  var value = values[\"change\"];\n  rowDef.setData(\"change_RAW\", value);\n\n  if (value == null || value === \"N/A\") {\n    value = null;\n    rowDef.setData(\"change_STATUS\", \"Invalid\");\n  } else {\n    value = parseFloat(value);\n  }\n\n  rowDef.setData(\"change\", value);\n};\n\nvar records = [{\n  values: {\n    id: \"1\",\n    change: \"-0.58\"\n  }\n}, {\n  values: {\n    id: \"2\",\n    change: \"0.78\"\n  }\n}, {\n  values: {\n    id: \"3\",\n    change: \"+0.0475\"\n  }\n}, {\n  values: {\n    id: \"4\",\n    change: null\n  }\n}, {\n  values: {\n    id: \"5\",\n    change: \"N/A\"\n  }\n}];\n\nvar configObj = {\n  defaultColumnOptions: {\n    notRealTimeField: true\n  },\n  columns: [{\n      name: \"Id\",\n      field: \"id\"\n    },\n    {\n      name: \"Raw data\",\n      field: \"change_RAW\"\n    },\n    {\n      name: \"Converted data\",\n      field: \"change\"\n    },\n    {\n      name: \"Status\",\n      field: \"change_STATUS\"\n    }\n  ],\n  dataComposed: onDataComposed, // attach handler for dataComposed event\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\n// To emitate the dalay of reqeusting data from server\nsetTimeout(function(e) {\n  grid.api.insertRows(records);\n}, 4000);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 168px\n}","tagName":"pre"},{"text":"Auto date conversion","tagName":"h2"},{"text":"When dealing with date-time data it may be hard to handle the various types of incoming data, which can be number, string, ISO date string, seconds or milliseconds. So it is better to enable autoDateConversion in the Grid's configuration and let Grid automatically convert data to JavaScript native Date object. To let Grid know that the column's data is data-time, the dataType: \"datatime\" should be specified in the column's options.","tagName":"p"},{"text":"","tagName":"pre"},{"text":"var descriptions = [\n  \"Invalid\",\n  \"Negative value (milliseconds)\",\n  \"Excel date\",\n  \"Second\",\n  \"Millisecond\",\n  \"Native date object (now)\",\n  \"ISO date-time string\"\n];\n\nvar dateSamples = [\n  \"abc\", -1,\n  1,\n  Date.UTC(2021, 11, 24, 10) / 1000,\n  Date.UTC(2021, 11, 24, 10),\n  new Date(),\n  \"2021-11-25T10:00:00\"\n];\n\nvar records = [];\nfor (var i = 0; i < descriptions.length; i++) {\n  records.push({\n    des: descriptions[i],\n    date: dateSamples[i]\n  });\n}\n\nvar configObj = {\n  autoDateConversion: true,\n  defaultColumnOptions: {\n    notRealTimeField: true\n  },\n  columns: [{\n      name: \"Description\",\n      field: \"des\"\n    },\n    {\n      name: \"Raw data\",\n      field: \"date_RAW\"\n    },\n    {\n      name: \"Converted data\",\n      field: \"date\",\n      dataType: \"datetime\"\n    },\n    {\n      name: \"Formatted data\",\n      field: \"date\",\n      formatType: {\n        formatType: \"DateTime\",\n        dateTimeFormat: \"DD/MM/YYYY HH:mm\",\n        useUTCTime: true\n      }\n    },\n    {\n      name: \"Realtime Data\",\n      field: \"last_update\",\n      dataType: \"datetime\",\n      alignment: \"center\",\n      formatType: {\n        formatType: \"DateTime\",\n        dateTimeFormat: \"DD/MM/YYYY HH:mm:ss\",\n        useUTCTime: true\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.TextFormattingExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.addEventListener(\"configured\", function(e) {\n  var api = e.detail.api;\n  var randIndex = tr.DataGenerator.randIndex;\n  setInterval(function() {\n    var index = randIndex(records.length);\n    api.setRowData(index, {\n      last_update: Date.now()\n    });\n  }, 400);\n});\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"}]},{"title":"Column Resetting","filename":"columns/column-resetting.html","contents":[{"text":"To change or reset an entire set of columns, see Columns and Data in the Data section.","tagName":"p"},{"text":"Columns and Data","tagName":"a"}]},{"title":"Column Formatter","filename":"columns/column-formatter.html","contents":[{"text":"This page has moved to the Custom Formatter page in the Rendering section.","tagName":"p"},{"text":"Custom Formatter","tagName":"a"},{"text":"If you don't want to create a custom formatter yourself, check out the predefined formatters.","tagName":"p"},{"text":"predefined formatters","tagName":"a"}]},{"title":"Column Alignment","filename":"columns/column-alignment.html","contents":[{"text":"Column content can be aligned to the left, center, or right using the property alignment in the column definition. The alignment property will be applied for both column content and header by default. ","tagName":"p"},{"text":"Column header alignment can be separately set on headerAlignment property. The headerAlignment property will override the alignment property for the column header. ","tagName":"p"},{"text":"The default value for both alignment and headerAlignment is left.","tagName":"p"},{"text":"var configObj = {\n    ...\n    columns: [\n        {\n            alignment: \"left\",\n            headerAlignment: \"center\"\n        }, \n        ...\n    ],\n    ...\n}","tagName":"pre"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n\n
                                                                                              \n","tagName":"pre"},{"text":"function setAlignment(alignment) {\n  var core = grid.api.getCoreGrid();\n  var colCount = core.getColumnCount();\n  for (var c = 0; c < colCount; ++c) {\n    core.setColumnAlignment(c, alignment);\n  }\n}\n\nlft_btn.addEventListener(\"click\", function(e) {\n  setAlignment(\"l\");\n});\nctr_btn.addEventListener(\"click\", function(e) {\n  setAlignment(\"c\");\n});\nrgt_btn.addEventListener(\"click\", function(e) {\n  setAlignment(\"r\");\n});\nreset_btn.addEventListener(\"click\", function(e) {\n  setAlignment(\"\");\n});\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Default\", field: fields[0] },\n    { name: \"Center Header\", field: fields[1], alignment: \"center\", headerAlignment: \"center\" },\n    { name: \"Last\", field: fields[2], alignment: \"right\", headerAlignment: \"left\" },\n    { name: \"Net. Chng\", field: fields[3], alignment: \"right\" },\n    { name: \"Center Header\", field: fields[4], headerAlignment: \"center\" }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Column Add/insert","filename":"columns/dynamic-add-insert-column.html","contents":[{"text":"Columns can be inserted dynamically at runtime. The definition of the column to be inserted is the same as in the column array specified at initialization.","tagName":"p"},{"text":"Use the insertColumn() methods to insert a column with its configuration.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n

                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"id\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columns: [\n    { name: \"Column 1\", minWidth: 100, field: fields[0] },\n    { name: \"Column 2\", minWidth: 100, field: fields[0] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\nvar idRunner = 2;\n\naddingStyles = {\n  backgroundColor: \"#32ab60\",\n  color: \"white\"\n};\n\ninsertingStyles = {\n  backgroundColor: \"#db4052\",\n  color: \"white\"\n};\n\ndocument.getElementById(\"insert_col_btn\").addEventListener(\"click\", function() {\n  idRunner++;\n  var lastIndex = grid.api.getColumnCount - 1;\n  grid.api.insertColumn({ name: \"Column \" + idRunner, minWidth: 100, field: fields[0], styles: insertingStyles }, lastIndex);\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Column Hide/remove","filename":"columns/dynamic-remove-column.html","contents":[{"text":"You can choose to hide a column in the column definition by toggling the property visible between true and false. Columns can be hidden/removed dynamically at runtime. You can remove multiple columns in one method call to boost performance.","tagName":"p"},{"text":"Use the hideColumn() method to set the visibility of the specified column (that is, hide or show the column).","tagName":"p"},{"text":"Use the removeColumn(), removeColumns() or removeAllColumns() methods to remove the specified column(s).","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n\n\n

                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"id\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columns: [\n    { name: \"Column 0\", field: fields[0] },\n    { name: \"Column 1\", field: fields[0] },\n    { name: \"Column 2\", field: fields[0] },\n    { name: \"Column 3\", field: fields[0] },\n    { name: \"Column 4\", field: fields[0] },\n    { name: \"Column 5\", field: fields[0], visible: false }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;\n\ndocument.getElementById(\"hideColumnButton\").addEventListener(\"click\", function() {\n  grid.api.hideColumn(0);\n});\n\ndocument.getElementById(\"showColumnButton\").addEventListener(\"click\", function() {\n  grid.api.hideColumn(0, false);\n});\n\ndocument.getElementById(\"showColumn5Button\").addEventListener(\"click\", function() {\n  grid.api.hideColumn(5, false);\n});\n\ndocument.getElementById(\"removeColumnButton\").addEventListener(\"click\", function() {\n  grid.api.removeColumn(0);\n});\n\ndocument.getElementById(\"removeAllColumns\").addEventListener(\"click\", function() {\n  grid.api.removeAllColumns();\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Column Width","filename":"columns/column-width.html","contents":[{"text":"Column widths can be defined in the following ways:","tagName":"p"},{"text":"To fit the column width to the column content, please use the Column Resizing Extension.","tagName":"p"},{"text":"Column Resizing Extension","tagName":"a"},{"text":"Note: once a column is resized it will automatically have a fixed width.","tagName":"p"},{"text":"Preserving Grid's size","tagName":"h2"},{"text":"After column resizing if the total columns' width is less than Grid' size, there will be empty space next to last column. In contrast the horizontal scrollbar will be shown. To prevent Grid from this kind of cases the preserving Grid's size mode must be enabled, please see Column Resizing Extension for configuration document.","tagName":"p"},{"text":"Column Resizing Extension","tagName":"a"},{"text":"Default Grid width with default column width","tagName":"h2"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1] },\n    { name: \"Last\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3] },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Fixed Grid width with default column width","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1] },\n    { name: \"Last\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3] },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  width: 400px;\n}","tagName":"pre"},{"text":"Fixed Grid width with fixed column width","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 200 },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4], width: 200 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  width: 400px;\n}","tagName":"pre"},{"text":"Default Grid width with fixed column width","tagName":"h2"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  autoHideScrollbar: false,\n  columns: [\n    { name: \"Company\", field: fields[0], width: 200 },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4], width: 200 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Fixed column width with proportional column width","tagName":"h2"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  autoHideScrollbar: false,\n  columns: [\n    { name: \"Company\", field: fields[0], width: 200 },\n    { name: \"Market\", field: fields[1], width: 1.5, scalable: true },\n    { name: \"Last\", field: fields[2], width: 1, scalable: true },\n    { name: \"Net. Chng\", field: fields[3], width: 1, scalable: true },\n    { name: \"Industry\", field: fields[4], width: 1.5, scalable: true }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Pinning right columns","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  autoHideScrollbar: false,\n  columns: [\n    { name: \"Company\", field: fields[0], width: 200 },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4], width: 150, rightPinned: true }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  width: 400px;\n}","tagName":"pre"},{"text":"Pinning both sides","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  autoHideScrollbar: false,\n  columns: [\n    { name: \"Company\", field: fields[0], width: 200, leftPinned: true },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4], width: 150, rightPinned: true }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  width: 500px;\n}","tagName":"pre"},{"text":"Delayed initialization (after 5 seconds)","tagName":"h2"},{"text":"
                                                                                              \n
                                                                                              ","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 200, leftPinned: true },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4], width: 150, rightPinned: true }\n  ],\n  staticDataRows: records\n};\nvar grid = null;\nsetTimeout(function() {\n  grid = document.createElement(\"atlas-blotter\");\n  grid.config = configObj;\n  document.getElementById(\"container\").appendChild(grid);\n}, 5000);","tagName":"pre"},{"text":"#container {\n  height: 200px;\n}\n\natlas-blotter {\n  width: 500px;\n}","tagName":"pre"}]},{"title":"Column Reordering","filename":"columns/column-reordering.html","contents":[{"text":"This page has moved to the Column Moving page.","tagName":"p"},{"text":"Column Moving","tagName":"a"}]},{"title":"Column Moving","filename":"columns/column-moving.html","contents":[{"text":"Drag and drop","tagName":"h2"},{"text":"The ability of drag and drop column is enabled by default. But it can be turned off by setting noColumnDragging to true. The default value is false. ","tagName":"p"},{"text":"Drag and drop to move a column example (default)","tagName":"h3"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"Disabled drag and drop example","tagName":"h3"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  noColumnDragging: true, // disabled column re-order\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"Using APIs to move a column","tagName":"h2"},{"text":"Columns can be moved using the grid.api.moveColumnById(sourceColumn, destinationPosition) API, which allows you to move specified column by index or id to the position before the specified destination. If the specified destination is invalid or doesnot exist, the column will be moved to the end of Grid.","tagName":"p"},{"text":"To move multiple columns at once, use reorderColumns API. ","tagName":"p"},{"text":"See available APIs for more details.","tagName":"p"},{"text":"available APIs","tagName":"a"},{"text":"Example","tagName":"h3"},{"text":"Move\n\nto the position before\n
                                                                                              \n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar colNames = [\"Company\", \"Market\", \"Last\", \"Net. Chng\", \"Industry\"];\nvar columns = fields.map(function(f, idx) {\n  var colName = colNames[idx];\n  var colId = \"c\" + idx;\n  return {\n    id: colId,\n    field: f,\n    name: colName\n  };\n});\ncolumns[1].width = 100;\ncolumns[2].width = 80;\ncolumns[3].width = 80;\n\ncolumns.forEach(function(col, idx) {\n  var opt = document.createElement(\"option\");\n  opt.value = col.id;\n  opt.textContent = col.name + \" column\";\n  if (col.name === \"Industry\") {\n    opt.selected = true;\n  }\n  source_sel.appendChild(opt);\n\n  var btn = document.createElement(\"button\");\n  btn.colId = col.id;\n  btn.textContent = col.name;\n  btn.addEventListener(\"click\", onClickMoveBtn);\n  destination_div.appendChild(btn);\n});\n\nvar lastBtn = document.createElement(\"button\");\nlastBtn.textContent = \"End of Grid\";\nlastBtn.addEventListener(\"click\", onClickMoveBtn);\ndestination_div.appendChild(lastBtn);\n\nfunction onClickMoveBtn(e) {\n  var btn = e.currentTarget;\n  var destId = btn.colId;\n\n  var sourceOpt = source_sel.selectedOptions[0];\n  var srcId = sourceOpt.value;\n  grid.api.moveColumnById(srcId, destId);\n}\n\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar configObj = {\n  columns: columns,\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhtml hr {\n  margin: 5px;\n}\n\nbutton {\n  margin: 2px;\n}","tagName":"pre"},{"text":"Preventing a column from moving","tagName":"h2"},{"text":"By marking a column to be a stationary column, any column on the left and the stationary column will be locked in the position (i.e., columns cannot be moved). A column can still be added to or removed from the stationary section. Once stationary column is removed or unmarked as stationary, the columns in the section will be free to be moved. See Column Definition for more details of column options.","tagName":"p"},{"text":"Column Definition","tagName":"a"},{"text":"Example","tagName":"h3"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { name: \"Company (stationary)\", field: fields[0], stationary: true },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [new tr.CheckboxExtension()]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"Column Freezing","filename":"columns/column-freezing.html","contents":[{"text":"This page has moved to the Scrollbars section.","tagName":"p"},{"text":"Scrollbars","tagName":"a"}]},{"title":"Column Pinning","filename":"columns/column-pinning.html","contents":[{"text":"This page has moved to the Scrollbars section.","tagName":"p"},{"text":"Scrollbars","tagName":"a"}]},{"title":"Column Styling","filename":"columns/column-styling.html","contents":[{"text":"Columns can be styled by using CSS in the styles property of the column definition.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 5 });\nvar styles = {\n  \"font-weight\": \"bold\",\n  \"font-size\": \"15px\",\n  \"color\": \"#32ab60\",\n  \"background-color\": \"#0b2615\"\n};\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], styles: styles },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"}]},{"title":"Column Custom Title","filename":"columns/custom-title-formatter.html","contents":[{"text":"In addition to formatting the cells in content rows, you can also create a custom formatter for the column title. ","tagName":"p"},{"text":"var customFormatter = function(e){\n    e.cell.setContent(\"Custom \" + e.columnDef.getName());\n}\n\nvar configObj = {\n    // Other grid's config\n    columns: [\n        {name: \"Column 1\", field: \"intCol\", headerBinding: customFormatter},\n    ]\n}\ngrid.config = configObj;","tagName":"pre"},{"text":"Example","tagName":"h2"},{"text":"","tagName":"pre"},{"text":"function TitleColorTagFormatter(color, e) {\n  var tag = document.createElement('div');\n  tag.style.width = \"0px\";\n  tag.style.height = \"0px\";\n  tag.style.borderStyle = \"solid\";\n  tag.style.borderWidth = \"0 15px 15px 0\";\n  tag.style.position = \"absolute\";\n  tag.style.top = \"0px\";\n  tag.style.right = \"0px\";\n  tag.style.borderColor = \"transparent \" + color + \" transparent transparent\";\n\n  e.cell.addContent(tag);\n  e.cell.setContent(e.columnDef.getName());\n}\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columns: [{\n      name: \"Company\",\n      field: fields[0],\n      headerBinding: TitleColorTagFormatter.bind(null, \"#ff9933\")\n    },\n    {\n      name: \"Market\",\n      field: fields[1],\n      width: 100,\n      headerBinding: TitleColorTagFormatter.bind(null, \"#f5475b\")\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 80,\n      headerBinding: TitleColorTagFormatter.bind(null, \"#39c46e\")\n    },\n    {\n      name: \"Net. Chng\",\n      field: fields[3],\n      width: 80,\n      headerBinding: TitleColorTagFormatter.bind(null, \"#46a0f0\")\n    },\n    {\n      name: \"Industry\",\n      field: fields[4],\n      headerBinding: TitleColorTagFormatter.bind(null, \"#2fb4c8\")\n    }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"}]},{"title":"Column Grouping","filename":"columns/column-grouping.html","contents":[{"text":"This page has moved to the Column Grouping Extension page.","tagName":"p"},{"text":"Column Grouping Extension","tagName":"a"}]},{"title":"Row Highlighting / Selection","filename":"rows/row-highlight-selection.html","contents":[{"text":"Row highlighting can be turned on/off by setting the options for rowHighlighting to true and false respectively. Row highlighting will be turn on by default.","tagName":"p"},{"text":"All related row selection functionalities can be added through the Row Selection Extension.","tagName":"p"},{"text":"Row Selection Extension","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"Hover mouse over Grid to see row highlighting\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  rowHighlighting: true, // Add This Property to turn on/off\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"}]},{"title":"Row Height","filename":"rows/row-height.html","contents":[{"text":"The height of content rows can be adjusted using the rowHeight property. Since Grid uses a row virtualization rendering technique, all of the rows must have the same height by default.","tagName":"p"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  rowHeight: 60,\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"Variable row height","tagName":"h2"},{"text":"If you want to wrap long text content in the grid's cell, use the Content Wrap Extension. The extension will wrap text content that exceeds the cell width, making Grid act as if it is a native table.","tagName":"p"},{"text":"Content Wrap Extension","tagName":"a"},{"text":"However, text wrapping is resource-intensive, so it is turned off by default. To specify the column to be wrapped, set contentWrap to true in the column configuration.","tagName":"p"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4], width: 100, contentWrap: true }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new tr.ContentWrapExtension()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Row Showing / Hiding","filename":"rows/row-show-hide.html","contents":[{"text":"Content rows can be hidden and shown based on their row ID, and an additional API unhides all currently hidden rows.","tagName":"p"},{"text":"Note: In most cases, the row ID is not equivalent to the row index. It can, however, be retrieved if you know the index (refer to the JavaScript section in the demo).","tagName":"p"},{"text":"Both the showRows() and hideRows() APIs accept either an individual value (string or integer) or an array of values.  This kind of state is independent of the programmatic filtering of content, and will correctly reclassify hidden rows on sorting/grouping.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n

                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\nvar rowId1, rowId2, rowId3;\ndocument.getElementById(\"hide_btn\").addEventListener(\"click\", function() {\n  // Hide rows at index 0 and 1 (rowIds are \"0\" and \"1\" respectively since rows haven\"t been sorted/filtered)\n  var dataView = grid.api.getDataView();\n  rowId1 = dataView.getRowId(0);\n  rowId2 = dataView.getRowId(1)\n  rowId3 = dataView.getRowId(2)\n  grid.api.hideRows([rowId1, rowId2, rowId3]);\n});\n\ndocument.getElementById(\"show_btn\").addEventListener(\"click\", function() {\n  grid.api.showRows([rowId1, rowId2]);\n});\n\ndocument.getElementById(\"clear_btn\").addEventListener(\"click\", function() {\n  // Unhide all currently hidden rows\n  grid.api.unhideAllRows();\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Row Reordering","filename":"rows/row-reordering.html","contents":[{"text":"To allow the user to drag and reorder selected rows, add Row Dragging Extension instance to extensions property. The visual content of the dragged row can be rendered using the renderer function provided in the property dragBoxRenderer of the rowDragging option object. For more details, see Row Dragging Extension.","tagName":"p"},{"text":"Row Dragging Extension","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  rowDragging: {\n    dragBoxRenderer: function(e) {\n      e.dragBox.textContent = e.dataRow[fields[0]];\n    }\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [new tr.RowDraggingExtension()]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Adding Header & Footer Sections","filename":"rows/add-header-footer.html","contents":[{"text":"Additional header and footer sections can be added, and are automatically frozen. Both methods (header and footer) return the new section (with the row count of one), which can then be populated programmatically.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"header_btn\").addEventListener(\"click\", function() {\n  var newSection = grid.api.addHeaderSection(\"My_Header\");\n  if (newSection) { // New section can only be created, if the name of the section is unique\n    newSection.setCellColSpan(0, 0, 5);\n    var cell = newSection.getCell(0, 0);\n    cell.setContent(\"Header\");\n  }\n});\n\ndocument.getElementById(\"footer_btn\").addEventListener(\"click\", function() {\n  var newSection = grid.api.addFooterSection(\"My_Footer\");\n  if (newSection) { // New section can only be created, if the name of the section is unique\n    newSection.getCell(0, 0).setContent(\"Footer\");\n    newSection.getCell(1, 0).setContent(\"100\");\n    newSection.getCell(2, 0).setContent(\"200\");\n    newSection.getCell(3, 0).setContent(\"300\");\n    newSection.getCell(4, 0).setContent(\"400\");\n  }\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Row Grouping","filename":"rows/row-grouping.html","contents":[{"text":"Note: Built-in row grouping is deprecated in favor of the Row Grouping Extension. In terms of both functionalities and UIs, the extension provides more control and flexibility over the current APIs.","tagName":"p"},{"text":"Row Grouping Extension","tagName":"a"},{"text":"Row grouping can be done by using the Row Grouping Extension.  To do the grouping, you will need to provide grouping criteria to the groupBy property of the rowGrouping option in the grid configuration object.","tagName":"p"},{"text":"Row Grouping Extension","tagName":"a"},{"text":"var configObj = {\n    ...\n    rowGrouping: {\n        groupBy: [\"field1\", \"criteria\"],\n    },\n    ...\n}","tagName":"pre"},{"text":"Example","tagName":"h2"},{"text":"Group By:\n\n\n\n\n\n

                                                                                              \nExpand:\n\n\n

                                                                                              \n","tagName":"pre"},{"text":"var rowGroupingExt = new tr.RowGroupingExtension();\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 100 });\nvar configObj = {\n  rowGrouping: {\n    groupBy: [\"market\", \"industry\"],\n    headerBinding: function(e) {\n      e.cell.setContent(e.groupId + \" (\" + e.dataSource.getAllRowIds().length + \")\");\n    },\n    groupSortLogic: function(a, b) { // Optional\n      return (a < b ? -1 : (a > b ? 1 : 0));\n    },\n    headerSpanning: true // Optional\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  extensions: [rowGroupingExt]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ng1_btn.addEventListener(\"click\", function(e) {\n  rowGroupingExt.groupBy(fields[1]);\n});\ng2_btn.addEventListener(\"click\", function(e) {\n  rowGroupingExt.groupBy(fields[4]);\n});\ng23_btn.addEventListener(\"click\", function(e) {\n  rowGroupingExt.groupBy([fields[1], fields[4]]);\n});\nclear_btn.addEventListener(\"click\", function(e) {\n  rowGroupingExt.groupBy(null);\n});\nexpand_btn.addEventListener(\"click\", function(e) {\n  rowGroupingExt.expandAll();\n});\ncollapse_btn.addEventListener(\"click\", function(e) {\n  rowGroupingExt.collapseAll();\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 320px;\n}","tagName":"pre"}]},{"title":"Vertical Scrollbar","filename":"scrollbars/vertical-scrollbar.html","contents":[{"text":"By default, Grid behaves like a native div element that has CSS \"display: block;\". This means Grid's height will be expanded as the number of its rows is increasing. In other words, it has a dynamic height equal to its content height. So Grid will never show a vertical scrollbar by default, as the content height does not exceed its container (grid element) height.","tagName":"p"},{"text":"If you want to enable the vertical scrollbar, two conditions must be met:","tagName":"p"},{"text":"Note: once Grid's vertical scrollbar is shown, Grid's row virtualization will also be activated. Not all elements will be created or rendered. The same cells will be shared across multiple rows.","tagName":"p"},{"text":"Also, if the containers or Grid styles have been changed by JavaScript, you need to notify Grid about the change in order to update the layout. Use getCoreGrid().updateLayout() to force updating the layout.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n

                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"reset_btn\").addEventListener(\"click\", function(e) {\n  grid.style.height = \"\";\n  grid.api.getCoreGrid().updateLayout(); // Notify grid that some CSS have been changed\n});\ndocument.getElementById(\"set_200_btn\").addEventListener(\"click\", function(e) {\n  grid.style.height = \"200px\";\n  grid.api.getCoreGrid().updateLayout(); // Notify grid that some CSS have been changed\n});\ndocument.getElementById(\"set_600_btn\").addEventListener(\"click\", function(e) {\n  grid.style.height = \"600px\";\n  grid.api.getCoreGrid().updateLayout(); // Notify grid that some CSS have been changed\n});","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"The Grid vertical scrollbar, by default, is shown on top of the grid. This is to avoid jittering the content when the layout is changed. However, in some cases, the vertical scrollbar may hinder or prevent interaction with the content, especially for the rightmost column. Use the contentRightPadding flag to reserve some space on the right to prevent this from happening.","tagName":"p"},{"text":"autoHideScrollbar could also be used to stop automatic scrollbar hiding.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  autoHideScrollbar: false,\n  contentRightPadding: 14,\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Horizontal Scrollbar","filename":"scrollbars/horizontal-scrollbar.html","contents":[{"text":"By default, Grid behaves like a native div element that has CSS \"display: block;\". So, Grid has a default size of 100% of the parent width. ","tagName":"p"},{"text":"Grid's default column widths have no fixed size. The column size will be divided equally on the available space. And Grid columns will fit within the available space. So, Grid will never show a horizontal scrollbar by default, as the content (column) width does not exceed its container (grid element) width.","tagName":"p"},{"text":"If you want to enable the horizontal scrollbar, two conditions must be met:","tagName":"p"},{"text":"Note: once Grid's horizontal scrollbar is shown, column virtualization will be activated as well.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n

                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1] },\n    { name: \"Last\", field: fields[2] },\n    { name: \"Net. Chng\", field: fields[3] },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"reset_btn\").addEventListener(\"click\", function(e) {\n  grid.api.getCoreGrid().setColumnWidths([1, 1, 1, 1, 1], true); // All columns will have equal width\n});\ndocument.getElementById(\"fixate_all_btn\").addEventListener(\"click\", function(e) {\n  grid.api.getCoreGrid().setColumnWidths([300, 150, 150, 150, 200], false); // Set all column widths to the specified size.\n});\ndocument.getElementById(\"fixate_first_btn\").addEventListener(\"click\", function(e) {\n  var core = grid.api.getCoreGrid();\n  core.setColumnWidth(0, 200); // Set the first column to have fixed width (200px);\n  core.setColumnWidths([null, 1, 1, 1, 3], true); // Set the last four columns to have no size\n});","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"The Grid horizontal scrollbar, by default, is shown on top of the grid. This is to avoid the content jittering when the layout is changed. However, in some cases, the horizontal scrollbar may hinder or prevent interaction with the content, especially for the bottommost row. Use the contentBottomPadding flag to reserve some space on the bottom to stop this from happening.","tagName":"p"},{"text":"autoHideScrollbar can also be used to stop automatic scrollbar hiding.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  autoHideScrollbar: false,\n  contentBottomPadding: 9,\n  columns: [\n    { name: \"Company\", field: fields[0], width: 300 },\n    { name: \"Market\", field: fields[1], width: 150 },\n    { name: \"Last\", field: fields[2], width: 150 },\n    { name: \"Net. Chng\", field: fields[3], width: 150 },\n    { name: \"Industry\", field: fields[4], width: 200 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"}]},{"title":"Scroll Speed","filename":"scrollbars/scroll-speed.html","contents":[{"text":"Generally, Grid will contain a large number of rows. Grid elements could block page scrolling due to slow native wheel scrolling speed and long scroll distance. So, by default, Grid's wheel scroll speed will increase exponentially once the content height exceeds a certain threshold. This behavior may not be wanted, so to return to the native wheel default behavior enable linearWheelScrolling.","tagName":"p"},{"text":"You can also force scrolling to move for the whole row by using the stepScroll property.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"id\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 1000 });\nvar configObj = {\n  linearWheelScrolling: true,\n  stepScroll: true,\n  columns: [\n    { name: \"ID\", field: fields[5], width: 40 },\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 80 },\n    { name: \"Net. Chng\", field: fields[3], width: 80 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 400px;\n}","tagName":"pre"}]},{"title":"Non-Overlap Scrollbars","filename":"scrollbars/non-overlap-scrollbars.html","contents":[{"text":"Normally, Grid's scrollbars are shown on top of its content. This behavior can result in scrollbars blocking the display and interaction of the content. You can work around this issue by adding extra content to allow space for the scrollbars. To do this set contentRightPadding and contentBottomPadding properties in the configuration, as shown in the example below.","tagName":"p"},{"text":"Content padding example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  contentRightPadding: 14,\n  contentBottomPadding: 14,\n  autoHideScrollbar: false,\n  columns: [\n    { name: \"Company\", field: fields[0], width: 250 },\n    { name: \"Market\", field: fields[1], width: 150 },\n    { name: \"Last\", field: fields[2], width: 150 },\n    { name: \"Net. Chng\", field: fields[3], width: 150 },\n    { name: \"Industry\", field: fields[4], width: 300 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"},{"text":"This extra content may not be desirable though, as it can add to the amount of scroll distance and not actually reserve space for the scrollbars. Instead, you can change the parent of the scrollbars and reserve some space using CSS paddings. To change the parent of the scrollbars supply the parent element to the scrollbarParent property in the configuration object, as shown below.","tagName":"p"},{"text":"Note: autoHideScrollbar is turned off by default if scrollbarParent is supplied.","tagName":"p"},{"text":"Changing the scrollbar parent example","tagName":"h2"},{"text":"
                                                                                              \n  \n
                                                                                              ","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\nvar configObj = {\n  scrollbarParent: document.getElementById(\"grid_container\"),\n  columns: [\n    { name: \"Company\", field: fields[0], width: 250 },\n    { name: \"Market\", field: fields[1], width: 150 },\n    { name: \"Last\", field: fields[2], width: 150 },\n    { name: \"Net. Chng\", field: fields[3], width: 150 },\n    { name: \"Industry\", field: fields[4], width: 300 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"#grid_container {\n  height: 200px;\n  padding-right: 14px;\n  padding-bottom: 14px;\n  box-sizing: border-box;\n}\n\natlas-blotter {\n  height: 100%;\n}","tagName":"pre"}]},{"title":"Scrollbar Visibility","filename":"scrollbars/scrollbar-visibility.html","contents":[{"text":"Instead of fading in or out on hover (default behavior), Grid scrollbars can be set to always be visible whenever the content is scrollable.","tagName":"p"},{"text":"This behavior can be enabled upon grid initialization using the autoHideScrollbar option. The values can be false for always-on, and true for fade in/out (default).","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  autoHideScrollbar: false,\n  columns: [\n    { name: \"Company\", field: fields[0], width: 250 },\n    { name: \"Market\", field: fields[1], width: 150 },\n    { name: \"Last\", field: fields[2], width: 150 },\n    { name: \"Net. Chng\", field: fields[3], width: 150 },\n    { name: \"Industry\", field: fields[4], width: 300 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Left Side Column Pinning/Freezing","filename":"scrollbars/left-side-column-pinning.html","contents":[{"text":"Sometimes Grid can contain a large number of columns and when scrolled to the right, without the row header, users might lose track of what kind of data is in the row.To solve this, you can freeze or pin columns on the left side to act like a row indicator. To do this, set the leftPinned property to true on the column configuration object for the column you want to be frozen/pinned.","tagName":"p"},{"text":"Similarly, rightPinned property can be used to pin the columns on the right side.  ","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { name: \" \", width: 24 },\n    { name: \"Company\", field: fields[0], width: 250, leftPinned: true },\n    { name: \"Market\", field: fields[1], width: 150 },\n    { name: \"Last\", field: fields[2], width: 150 },\n    { name: \"Net. Chng\", field: fields[3], width: 150 },\n    { name: \"Industry\", field: fields[4], width: 300 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Pinning column at runtime can be done through pinColumn method from Grid's API. The pinned column will be move to the right most of frozen area. To unpin a column, call unpinColumn. The unpinned column will be moved to the left most of unfrozen area.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"
                                                                                              \n  Pinning\n
                                                                                              \n
                                                                                              \n  Unpinning\n
                                                                                              \n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"Column 6\", \"Column 7\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\n\nvar onClickPinning = function(e) {\n  var btn = e.currentTarget;\n  grid.api.pinColumn(btn.colIndex);\n};\nvar onClickUnpinning = function(e) {\n  var btn = e.currentTarget;\n  grid.api.unpinColumn(btn.colIndex);\n};\n\nvar len = fields.length;\nfor (var i = 0; i < 4; ++i) {\n  var btn = document.createElement(\"button\");\n  btn.colIndex = i;\n  btn.addEventListener(\"click\", onClickPinning);\n  btn.textContent = \"Column \" + (i + 1);\n  pinning_set.appendChild(btn);\n\n  btn = document.createElement(\"button\");\n  btn.colIndex = i;\n  btn.addEventListener(\"click\", onClickUnpinning);\n  btn.textContent = \"Column \" + (i + 1);\n  unpinning_set.appendChild(btn);\n}\n\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 250 },\n    { name: \"Market\", field: fields[1], width: 150 },\n    { name: \"Last\", field: fields[2], width: 150 },\n    { name: \"Net. Chng\", field: fields[3], width: 150 },\n    { name: \"Industry\", field: fields[4], width: 200 },\n    { field: fields[5], width: 150 },\n    { field: fields[6], width: 150 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr,\nbutton {\n  margin: 5px;\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"Right Side Column Pinning/Freezing","filename":"scrollbars/right-side-column-pinning.html","contents":[{"text":"When Grid contains controls or buttons on the right side you should freeze or pin these columns, as they should not be part of the scrollable content. To do this use the rightPinned property on the column configuration object.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var buttonFormatter = function(e) {\n  var cell = e.cell;\n  var btn = cell.getContent();\n  if (!btn) {\n    btn = document.createElement(\"button\");\n  }\n  btn.textContent = e.data;\n  cell.setContent(btn);\n};\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"id\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 250 },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4], width: 300 },\n    { name: \"Op.1\", field: fields[5], width: 60, rightPinned: true, binding: buttonFormatter, alignment: \"center\" },\n    { name: \"Op.2\", field: fields[5], width: 60, rightPinned: true, binding: buttonFormatter, alignment: \"center\" },\n    { name: \"Op.3\", field: fields[5], width: 60, rightPinned: true, binding: buttonFormatter, alignment: \"center\" }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Basic Sorting","filename":"sorting/sorting.html","contents":[{"text":"Grid support sorting out of the box. By default, sorting is turned off for all columns. To turn it on, set sortableCoumns to true. This allow users to click at the Grid header section to sort the clicked column.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    sorting: {\n        sortableColumns: true,\n    }\n}","tagName":"pre"},{"text":"To turn the sorting on or off for a specific column, the sortable option is available in the column option.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    columns: [\n        { name: \"Column 1\", field: \"field1\", sortable: true },\n        { name: \"Column 2\", field: \"field2\" },\n    ],\n}","tagName":"pre"},{"text":"In some use cases, you may want to turn on sorting for a particular column based on another field. If so, you can set sortBy in the column option to any column field.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    sorting: {\n        sortableColumns: true,\n    },\n    columns: [\n        { name: \"Column 1\", field: \"field1\" },\n        { name: \"Column 2\", field: \"field2\", sortBy: \"field1\" },\n    ],\n}","tagName":"pre"},{"text":"Sorting programmatically","tagName":"h2"},{"text":"Use sortColumn from Grid api instance to sort the specified column without user interaction. If the second parameter is not defined, Grid will cycle through column sorting sequence defined in its settings. ","tagName":"p"},{"text":"var grid = document.getElementById(\"grid\");\ngrid.api.sortColumn(0, \"a\"); // Sort column index 0 in ascending order.\ngrid.api.sortColumn(1); // Sort column index 1 and cycle through its sorting sequence.","tagName":"pre"},{"text":"For all available sorting options and APIs, please visit SortableTitlePlugin","tagName":"p"},{"text":"SortableTitlePlugin","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n\n
                                                                                              \n","tagName":"pre"},{"text":"document.getElementById(\"sort_btn1\").addEventListener(\"click\", function(e) {\n  grid.api.sortColumn(0);\n});\ndocument.getElementById(\"sort_btn2\").addEventListener(\"click\", function(e) {\n  grid.api.sortColumn(1);\n});\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true,\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Default Sort","filename":"sorting/default-sorting.html","contents":[{"text":"You can sort data in the grid automatically after initialization by specifying the initialSort option, which receives the following two options: colIndex and sortOrder.","tagName":"p"},{"text":"The possible values of sortOrder are:","tagName":"p"},{"text":"You can see all possible values for the sort order here.","tagName":"p"},{"text":"here","tagName":"a"},{"text":"var config = {\n    // any other grid's options\n    sorting: {\n        sortableColumns: true,\n        initialSort: {\n            colIndex: 0,\n            sortOrder: \"d\"\n        }\n    }\n}","tagName":"pre"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true,\n    initialSort: {\n      colIndex: 0, // Column index\n      sortOrder: \"d\"\n    }\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}","tagName":"pre"}]},{"title":"Server Side Sorting","filename":"sorting/server-side-sorting.html","contents":[{"text":"In manual sorting mode, clicking on the column title will change the sorting status, but no actual sorting is done on the grid data.","tagName":"p"},{"text":"One use case is, if you want to do server-side sorting, you can use manual sorting mode in conjunction with the columnSorted event and the XMLHttpRequest method.","tagName":"p"},{"text":"XMLHttpRequest","tagName":"a"},{"text":"To turn manual sorting on, set indicatorOnly to true.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    sorting: {\n        sortableColumns: true,\n        indicatorOnly: true\n    }\n}","tagName":"pre"},{"text":"You also need to listen to columnSorted event in order to trigger server-side sorting. The event can be listened from the shortcut in sorting config or through the built-in plugin.","tagName":"p"},{"text":"function onColumnSorted (evtArg) {\n    var sortingStates = grid.api.getSortingStates();\n    var sortingState = sortingStates[0];\n    var sortOrder = sortingState.order;\n    // At this point, you may request sorted data from the server.\n}\n\nvar config = {\n    // any other grid's options\n    sorting: {\n        columnSorted: onColumnSorted\n    }\n};\n\n// Alternatively you can listen to the event directly from the built-in plugin\ngrid.addEventListener(\"configured\", function(e) {\n    var core = e.detail.api.getCoreGrid();\n    var plugin = core.getPlugin(\"SortableTitle\");\n    // plugin.listen(\"columnSorted\", onColumnSorted);\n});","tagName":"pre"},{"text":"You can see all possible values for the sort order here.","tagName":"p"},{"text":"here","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n\n
                                                                                              \n\n
                                                                                              \n","tagName":"pre"},{"text":"document.getElementById(\"sort_btn1\").addEventListener(\"click\", function(e) {\n  grid.api.sortColumn(0); // Cycle through sorting sequence\n});\ndocument.getElementById(\"sort_btn2\").addEventListener(\"click\", function(e) {\n  grid.api.sortColumn(1); // Cycle through sorting sequence\n});\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true,\n    indicatorOnly: true,\n    columnSorted: function(evtArg) {\n      var core = grid.api.getCoreGrid();\n      var plugin = core.getPlugin(\"SortableTitle\");\n      var objs = plugin.getSortedColumns();\n      var obj = objs[0];\n      var field = grid.api.getColumnField(obj.colIndex);\n      var sortOrder = (obj.sortOrder === \"a\") ? \"ascending\" : \"decending\";\n\n      var ta = document.getElementById(\"output_ta\");\n      ta.value = \"Field \" + field + \" is sorted in \" + sortOrder + \" order\\n\" + ta.value;\n\n      // At this point, you may request sorted data from the server.\n    }\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\natlas-blotter {\n  height: 200px;\n}\n\ntextarea {\n  width: 100%;\n  height: 50px;\n  margin-bottom: 30px;\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"Custom Sort Logic","filename":"sorting/custom-sort-logic.html","contents":[{"text":"There are several cases where the data stored in each field in the data model is not a primitive type. Sorting this data requires a special approach with custom sorting logic.","tagName":"p"},{"text":"Note: comparison functions receive the same argument as Array.prototype.sort.","tagName":"p"},{"text":"To set custom sort logic for each column, do the following:","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    columns: [\n        { name: \"Column 1\", field: \"field1\", sortLogic: function(a, b, order) {/* Some compare function */} },\n        { name: \"Column 2\", field: \"field2\" },\n    ],\n}","tagName":"pre"},{"text":"The callback will also receive extra information about the column being sorted from the fourth parameter.","tagName":"p"},{"text":"var myCustomSorting = function(valA, valB, order, contextObj) {\n    // contextObj provide more information about the column being sorted such as colIndex and field\n    // ...\n    return valA - valB;\n};\n\nvar config = {\n    // any other grid's options\n    columns: [\n        { name: \"Column 1\", field: \"field1\", sortLogic: myCustomSorting},\n        { name: \"Column 2\", field: \"field2\" },\n    ],\n}","tagName":"pre"},{"text":"You can enable rowSorting to use RowDefinition object for sorting comparison. This is useful when we want to compare data other than the data from the column being sorted.","tagName":"p"},{"text":"var myCustomSorting = function(rowDefA, rowDefB, order, contextObj) {\n    // Now we can access any data within a row from the RowDefinition object\n    var valA = rowDefA.getData(contextObj.field);\n    var valB = rowDefB.getData(contextObj.field);\n    var extraInfoA = rowDefA.getData(\"some other field\");\n    var extraInfoB = rowDefB.getData(\"some other field\");\n    // ...\n    return number;\n};\n\nvar config = {\n    // any other grid's options\n    columns: [\n        { name: \"Column 1\", field: \"field1\", rowSorting: true, sortLogic: myCustomSorting},\n        { name: \"Column 2\", field: \"field2\" },\n    ],\n}","tagName":"pre"},{"text":"For notRealTimeField column, the default comparison method is row sorting. If you still want to sort by data instead of RowDefinition object, set rowSorting to false to override the default behavior.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"function sortTextAsNumber(valA, valB, order, contextObj) {\n  var numA = +valA; // Convert string to number\n  var numB = Number(valB); // Another way to convert string to number\n  if (numA !== numA) { // Fastest way to check for NaN value\n    if (isNaN(numB)) { // Traditional and slower way to check for NaN value\n      return 0;\n    } else {\n      return 1; // Always put NaN value at the bottom\n    }\n  } else if (numB !== numB) {\n    return -1; // Always put NaN value at the bottom\n  }\n  if (numA < numB) {\n    return -order;\n  }\n  if (numB < numA) {\n    return order;\n  }\n\n  return 0;\n}\n\n// Initial data set\nvar records = [\n  { col1: \"A\", num1: 40, text: \"100\" },\n  { col1: \"B\", num1: 22, text: \"200\" },\n  { col1: \"C\", num1: 55, text: \"-10\" },\n  { col1: \"D\", num1: 11, text: \"This is Text\" },\n  { col1: \"E\", num1: 33, text: \"120\" },\n  { col1: \"F\", num1: 66, text: \"-20\" },\n  { col1: \"G\", num1: 44, text: \"N/A\" },\n  { col1: \"H\", num1: 22, text: \"110\" },\n  { col1: \"I\", num1: 11, text: \"240\" },\n  { col1: \"J\", num1: 10, text: \"100\" }\n];\nvar configObj = {\n  sorting: {\n    multiColumn: true,\n    threeStatesSorting: true\n  },\n  columns: [{\n      name: \"Column 1\",\n      field: \"col1\",\n      width: 100\n    },\n    {\n      name: \"Default Sorting\",\n      field: \"num1\",\n      textAlign: \"right\"\n    },\n    {\n      name: \"Custom Sorting\",\n      field: \"text\",\n      sortingLogic: sortTextAsNumber\n    },\n    {\n      name: \"Not Sortable\",\n      field: \"Some Field\",\n      sortable: false,\n      width: 150\n    }\n  ],\n  extensions: [],\n  staticDataRows: records\n};\n\nvar grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 300px;\n}","tagName":"pre"}]},{"title":"Multi-Column / 3-States Sorting","filename":"sorting/multi-column-sorting.html","contents":[{"text":"Sorting can be done on several columns together. You need to add the sorting property with two sub-properties: multiColumn and threeStateSorting.","tagName":"p"},{"text":"The property threeStatesSorting allows the column to be reset to the neutral state at every third click. Turning on threeStatesSorting makes multi-column sorting easier to use.","tagName":"p"},{"text":"var config = {\n    // ... other config\n    sorting: {\n        sortableColumns: true,\n        multiColumn: true, // The value can also be a maximum number of sorted columns \n        threeStatesSorting: true\n    }\n}","tagName":"pre"},{"text":"Sort multiple columns at the initialization","tagName":"h2"},{"text":"It is possible to set the initial sort with multiColumn enabled. We can use initialSort to define an array of SortableTitlePlugin.InitialSort.","tagName":"p"},{"text":"SortableTitlePlugin.InitialSort","tagName":"a"},{"text":"If multiColumn is not enabled, the initialSort will only take the first object of an array into consideration.","tagName":"p"},{"text":"var config = {\n    // any other grid's options\n    sorting: {\n        sortableColumns: true,\n        multiColumn: true,\n        initialSort: [{\n            colIndex: 0,\n            sortOrder: \"d\"\n        }, {\n            colIndex: 1,\n            sortOrder: \"d\"\n        }]\n    }\n}","tagName":"pre"},{"text":"Sort multiple columns at runtime","tagName":"h2"},{"text":"To change sorting states at runtime, use sortColumns from the built-in SortableTitlePlugin","tagName":"p"},{"text":"var grid = document.getElementById(\"grid\");\nvar sort = grid.api.getCoreGrid().getPlugin(\"SortableTitle\");\nsort.sortColumns([\n    {\n        colIndex: 0, // Column index 0 with order descending.\n        sortOrder: \"d\"\n    }, {\n        colIndex: 1, // Column index 1 with order descending\n        sortOrder: \"d\"\n    }\n]);","tagName":"pre"},{"text":"For all available options and APIs, please visit SortableTitlePlugin","tagName":"p"},{"text":"SortableTitlePlugin","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"group3\", \"boolean\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 15 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true,\n    multiColumn: 3, // Maximum of 3 sorted columns at the same time\n    threeStatesSorting: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 80 },\n    { name: \"Group 1\", field: fields[2], width: 80 },\n    { name: \"Group 2\", field: fields[3], width: 80 },\n    { name: \"Last\", field: fields[4], width: 80 },\n    { name: \"Net. Chng\", field: fields[5], width: 80 },\n    { name: \"Industry\", field: fields[6] }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 300px;\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"Get Sort States / Reset All Sorting","filename":"sorting/sorting-get-reset.html","contents":[{"text":"The getSortedColumns() method returns an array of the currently applied sorting states (with the colIndex and sortOrder properties).","tagName":"p"},{"text":"Additionally, the clearSortState() method resets the current sorting states to their default neutral state.","tagName":"p"},{"text":"A list of all sorting-related events can be found in the Events Handling section.","tagName":"p"},{"text":"var sort = grid.api.getCoreGrid().getPlugin(\"SortableTitle\");\nvar states = sort.getSortedColumns(); // Return an array of the current active sorting states\n\nsort.clearSortState(); // Reset all sorting states to neutral","tagName":"pre"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  sorting: {\n    sortableColumns: true,\n    threeStatesSorting: true\n  },\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], width: 120 },\n    { name: \"Last\", field: fields[2], width: 100 },\n    { name: \"Net. Chng\", field: fields[3], width: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"get_btn\").addEventListener(\"click\", function() {\n  // Return an array of the current active sorting states\n  var sort = grid.api.getCoreGrid().getPlugin(\"SortableTitle\");\n  var states = sort.getSortedColumns();\n\n  var ta = document.getElementById('output_ta');\n  ta.value = JSON.stringify(states, 2, null) + \"\\n\" + ta.value;\n});\n\ndocument.getElementById(\"reset_btn\").addEventListener(\"click\", function() {\n  var sort = grid.api.getCoreGrid().getPlugin(\"SortableTitle\");\n  sort.clearSortState();\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\ntextarea {\n  width: 100%;\n  height: 50px;\n  margin: 10px 0;\n}","tagName":"pre"}]},{"title":"Filtering Programmatically","filename":"filtering/filtering-programmatically.html","contents":[{"text":"Rows can be filtered programmatically using the Row Filtering Extension through the extension.setColumnFilter(colIndex, expression, context) API, which accepts a filter expression string or a filter function.","tagName":"p"},{"text":"Row Filtering Extension","tagName":"a"},{"text":"Filter expression","tagName":"p"},{"text":"The expression format is a boolean statement. The supported functions are similar to those found in Excel, so you can refer to Excel functions of the same name. The expression, however, is evaluated only on each row, unlike in Excel where you can refer to any cell in the table. The data in each field can be referenced using [columnName].","tagName":"p"},{"text":"// Col1 - Rank > 10\nrowFilterExt.setColumnFilter(0, '[rank] > 10');","tagName":"pre"},{"text":"Filter function","tagName":"p"},{"text":"The custom filter function helps you to fine-tune the filtering logic. The function takes three parameters: rowData, rowId and context. The function is called against each row in the grid. If the function returns true the row is included, or false otherwise.","tagName":"p"},{"text":"// Col2 - Countries start with 'A'\nrowFilterExt.setColumnFilter(1, function(rowData, rowId, ctx) {\n    var country = rowData.country.toLowerCase();\n    return /^a/.test(country);\n});","tagName":"pre"},{"text":"Example","tagName":"h2"},{"text":"\n\n\n\n

                                                                                              \n","tagName":"pre"},{"text":"var rowFilterExt = new tr.RowFilteringExtension();\nvar textFormatExt = new tr.TextFormattingExtension();\nvar configObj = {\n  columns: [\n    { name: \"Rank\", field: \"rank\", sortBy: \"rank\" },\n    { name: \"Country\", field: \"country\", sortBy: \"country\" },\n    {\n      name: \"GDP (Millions of USD)\",\n      field: \"gdp\",\n      sortBy: \"gdp\",\n      alignment: \"right\",\n      formatType: {\n        type: \"number\",\n        separator: 1,\n        decimalPlaces: 3\n      }\n    }\n  ],\n  rowFiltering: {\n    disabledUI: true\n  },\n  extensions: [\n    rowFilterExt,\n    textFormatExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\n// Fetch data from gdp.json\nfetch('../resources/scripts/data/gdp.json').then(o => o.json()).then(response => {\n  response = response.map(function(data) {\n    return {\n      rank: data[0],\n      country: data[1],\n      gdp: data[2]\n    }\n  });\n  grid.api.addStaticDataRows(response);\n});\n\ndocument.getElementById('rank_rather_10').addEventListener('click', function() {\n  rowFilterExt.addColumnFilter(0, \"[rank] > 10\");\n});\n\ndocument.getElementById('start_with_a').addEventListener('click', function() {\n  rowFilterExt.addColumnFilter(1, function(rowData, rowId, ctx) {\n    let country = rowData.country.toLowerCase();\n    return /^a/.test(country);\n  });\n});\n\ndocument.getElementById('small_countries').addEventListener('click', function() {\n  rowFilterExt.addColumnFilter(2, function(rowData, rowId, ctx) {\n    return rowData.gdp <= 1000;\n  });\n});\n\ndocument.getElementById('clear').addEventListener('click', function() {\n  rowFilterExt.removeAllFilters();\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 448px;\n}\n\ninput[type=button] {\n  margin: 5;\n}","tagName":"pre"}]},{"title":"Filter UI","filename":"filtering/filtering-auto-filter-row.html","contents":[{"text":"Rows can be filtered automatically using the Filter Input Extension and Row Filter Extension.","tagName":"p"},{"text":"Filter Input Extension","tagName":"a"},{"text":"Row Filter Extension","tagName":"a"},{"text":"The Filter Input Extension provides built-in filter UIs, which is a form input element appearing between the title section and content section.","tagName":"p"},{"text":"The Row Filtering Extension provides filtering programmatically due to UIs changing.","tagName":"p"},{"text":"Note that, the Filter Input Extension is using the Row Filter Extension and both extensions will synchronize together. So, in the extensions field the Row Filter Extension and Filter Input Extension instance must be included.","tagName":"p"},{"text":"var configObj = {\n    extensions: [\n        rowFilteringExt,\n        filterInputExt\n    ]\n}","tagName":"pre"},{"text":"Built-in filter UIs","tagName":"h2"},{"text":"The Filter Input Extension provides many types of input UIs. The available UIs are text input, number input, dropdown selector and date-time picker.","tagName":"p"},{"text":"\n","tagName":"pre"},{"text":"var filterInputExt = new tr.FilterInputExtension();\nvar rowFilteringExt = new tr.RowFilteringExtension();\n\nvar dateFormatter = function(e) {\n  var value = e.data;\n  var cell = e.cell;\n  var parts = value.toDateString().split(\" \");\n  cell.setContent(parts[2] + \"-\" + parts[1] + \"-\" + parts[3]);\n}\n\nvar configObj = {\n  columns: [\n    { name: \"Date\", field: \"date\", sortBy: \"date\", filterInput: { type: \"date\" }, binding: dateFormatter, alignment: \"c\" },\n    { name: \"Country\", field: \"country\", sortBy: \"country\", width: 200, alignment: \"c\" },\n    { name: \"Currency\", field: \"currency\", sortBy: \"currency\", filterInput: { type: \"select\", entries: [\"PLN\", \"EUR\", \"SEK\", \"GBP\", \"DKK\"] }, width: 200, alignment: \"c\" },\n    { name: \"Rate\", field: \"rate\", sortBy: \"rate\", alignment: \"right\", filterInput: { type: \"number\" }, width: 200, alignment: \"c\" }\n  ],\n  rowFiltering: {\n    disabledUI: true\n  },\n  extensions: [\n    rowFilteringExt,\n    filterInputExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\nfetch('../resources/scripts/data/euro-currency-rate.json').then(o => o.json()).then(response => {\n  response = response.map(function(data) {\n    return {\n      date: new Date(data.date),\n      country: data.country,\n      currency: data.currency,\n      rate: data.rate\n    }\n  });\n  grid.api.addStaticDataRows(response);\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 448px;\n}","tagName":"pre"},{"text":"Note that, without a defaultLogic property set, the function will perform a string search.","tagName":"p"},{"text":"Custom filter logic","tagName":"h2"},{"text":"In several use cases, we may need more than a default string search which we can achieve by creating a new function that filters data in each row, then attach the function itself to defaultLogic, the property of Filter Input Extension options (Find more available options at Filter Input Extension). Let's see column \"rate\" in the following example.","tagName":"p"},{"text":"Filter Input Extension","tagName":"a"},{"text":"\n","tagName":"pre"},{"text":"var filterInputExt = new tr.FilterInputExtension();\nvar rowFilteringExt = new tr.RowFilteringExtension();\nvar numericFilter = {\n  defaultLogic: function(e, rowData) {\n    if (e.inputText) {\n      var num = +(e.inputText);\n      var cellValue = rowData[e.field];\n      return cellValue < num;\n    }\n    return false;\n  },\n  placeholder: \"less than\",\n  type: \"number\"\n};\n\nvar dateFormatter = function(e) {\n  var value = e.data;\n  var cell = e.cell;\n  var parts = value.toDateString().split(\" \");\n  cell.setContent(parts[2] + \"-\" + parts[1] + \"-\" + parts[3]);\n}\n\nvar configObj = {\n  columns: [\n    { name: \"Date\", field: \"date\", sortBy: \"date\", filterInput: { type: \"date\" }, binding: dateFormatter, alignment: \"c\" },\n    { name: \"Country\", field: \"country\", sortBy: \"country\", width: 200, alignment: \"c\" },\n    { name: \"Currency\", field: \"currency\", sortBy: \"currency\", filterInput: { type: \"select\", entries: [\"PLN\", \"EUR\", \"SEK\", \"GBP\", \"DKK\"] }, width: 200, alignment: \"c\" },\n    { name: \"Rate\", field: \"rate\", sortBy: \"rate\", alignment: \"right\", filterInput: numericFilter, width: 200, alignment: \"c\" }\n  ],\n  dataModel: {\n    fields: [\"date\", \"country\", \"currency\", \"rate\"],\n    format: \"rows\",\n    data: []\n  },\n  rowFiltering: {\n    disabledUI: true\n  },\n  extensions: [\n    rowFilteringExt,\n    filterInputExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\nfetch('../resources/scripts/data/euro-currency-rate.json').then(o => o.json()).then(response => {\n  response = response.map(function(data) {\n    return {\n      date: new Date(data.date),\n      country: data.country,\n      currency: data.currency,\n      rate: data.rate\n    }\n  });\n  grid.api.addStaticDataRows(response);\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 448px;\n}","tagName":"pre"}]},{"title":"Custom Filter UI","filename":"filtering/custom-filter.html","contents":[{"text":"Apart from the built-in filter UIs, Filter Input Extension also supports UI customizations, which allows users to create their UI.","tagName":"p"},{"text":"Filter Input Extension","tagName":"a"},{"text":"The Filter Input Extension provides an inputCreated event callback passed through the extension's configuration and is allowed to modify UI elements in this callback handler. More details about the configuration are available here. The following example shows the first column:","tagName":"p"},{"text":"here","tagName":"a"},{"text":"\n","tagName":"pre"},{"text":"var filterInputExt = new tr.FilterInputExtension();\nvar rowFilteringExt = new tr.RowFilteringExtension();\n\nvar dateFormatter = function(e) {\n  var value = e.data;\n  var cell = e.cell;\n  var parts = value.toDateString().split(\" \");\n  cell.setContent(parts[2] + \"-\" + parts[1] + \"-\" + parts[3]);\n}\n\nvar onInputCreated = function(e) {\n  // Perform ui customization on the fourth column only\n  if (e.colIndex !== 0) { return; }\n\n  // Create