diff --git a/book/en/apis/README.html b/book/en/apis/README.html
index 607074fe..67132730 100644
--- a/book/en/apis/README.html
+++ b/book/en/apis/README.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/readme" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="overview">Overview</h1>
             <p>Grid API documents consist of <code>Core</code> and <code>Real-time Grid</code> libraries.<br>In this documents, you can find type definitions, methods and events for each class object.</p>
             <ul>
diff --git a/book/en/apis/core/Cell.html b/book/en/apis/core/Cell.html
index 00ff1bfd..8922bc21 100644
--- a/book/en/apis/core/Cell.html
+++ b/book/en/apis/core/Cell.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/cell" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="cell">Cell</h1>
diff --git a/book/en/apis/core/CellSpans.html b/book/en/apis/core/CellSpans.html
index b718a272..8cb1c0e6 100644
--- a/book/en/apis/core/CellSpans.html
+++ b/book/en/apis/core/CellSpans.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/cellspans" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="cellspans">CellSpans</h1>
diff --git a/book/en/apis/core/ColumnStats.html b/book/en/apis/core/ColumnStats.html
index 09fbf879..377824c6 100644
--- a/book/en/apis/core/ColumnStats.html
+++ b/book/en/apis/core/ColumnStats.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/columnstats" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="columnstats">ColumnStats</h1>
diff --git a/book/en/apis/core/DataCache.html b/book/en/apis/core/DataCache.html
index 07beea5f..33eb392c 100644
--- a/book/en/apis/core/DataCache.html
+++ b/book/en/apis/core/DataCache.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/datacache" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="datacache">DataCache</h1>
diff --git a/book/en/apis/core/DataTable.html b/book/en/apis/core/DataTable.html
index 46741570..5ed5c2aa 100644
--- a/book/en/apis/core/DataTable.html
+++ b/book/en/apis/core/DataTable.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/datatable" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="datatable">DataTable</h1>
diff --git a/book/en/apis/core/DataView.html b/book/en/apis/core/DataView.html
index 4752a349..67a2d86b 100644
--- a/book/en/apis/core/DataView.html
+++ b/book/en/apis/core/DataView.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/dataview" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="dataview">DataView</h1>
diff --git a/book/en/apis/core/DragAndDropTitlePlugin.html b/book/en/apis/core/DragAndDropTitlePlugin.html
index 3ca9b5aa..9b2cfa18 100644
--- a/book/en/apis/core/DragAndDropTitlePlugin.html
+++ b/book/en/apis/core/DragAndDropTitlePlugin.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/draganddroptitleplugin" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="draganddroptitleplugin">DragAndDropTitlePlugin</h1>
diff --git a/book/en/apis/core/ElementWrapper.html b/book/en/apis/core/ElementWrapper.html
index f4122055..8b67881c 100644
--- a/book/en/apis/core/ElementWrapper.html
+++ b/book/en/apis/core/ElementWrapper.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/elementwrapper" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="elementwrapper">ElementWrapper</h1>
diff --git a/book/en/apis/core/EventDispatcher.html b/book/en/apis/core/EventDispatcher.html
index f5bb01c5..c5cda5d6 100644
--- a/book/en/apis/core/EventDispatcher.html
+++ b/book/en/apis/core/EventDispatcher.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/eventdispatcher" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="eventdispatcher">EventDispatcher</h1>
diff --git a/book/en/apis/core/Grid.html b/book/en/apis/core/Grid.html
index 4b35c47b..20ae6028 100644
--- a/book/en/apis/core/Grid.html
+++ b/book/en/apis/core/Grid.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/grid" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="grid">Grid</h1>
diff --git a/book/en/apis/core/HScrollbar.html b/book/en/apis/core/HScrollbar.html
index 6bde52b2..444be047 100644
--- a/book/en/apis/core/HScrollbar.html
+++ b/book/en/apis/core/HScrollbar.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/hscrollbar" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="hscrollbar">HScrollbar</h1>
diff --git a/book/en/apis/core/ILayoutGrid.html b/book/en/apis/core/ILayoutGrid.html
index 68f1125e..a36840b0 100644
--- a/book/en/apis/core/ILayoutGrid.html
+++ b/book/en/apis/core/ILayoutGrid.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/ilayoutgrid" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="ilayoutgrid">ILayoutGrid</h1>
diff --git a/book/en/apis/core/LayoutGrid.html b/book/en/apis/core/LayoutGrid.html
index fcffcc91..ff7f4a26 100644
--- a/book/en/apis/core/LayoutGrid.html
+++ b/book/en/apis/core/LayoutGrid.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/layoutgrid" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="layoutgrid">LayoutGrid</h1>
diff --git a/book/en/apis/core/Scrollbar.html b/book/en/apis/core/Scrollbar.html
index 012caaf9..81c737ee 100644
--- a/book/en/apis/core/Scrollbar.html
+++ b/book/en/apis/core/Scrollbar.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/scrollbar" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="scrollbar">Scrollbar</h1>
diff --git a/book/en/apis/core/SectionSettings.html b/book/en/apis/core/SectionSettings.html
index cecdf679..cfcbbe1c 100644
--- a/book/en/apis/core/SectionSettings.html
+++ b/book/en/apis/core/SectionSettings.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/sectionsettings" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="sectionsettings">SectionSettings</h1>
diff --git a/book/en/apis/core/Segment.html b/book/en/apis/core/Segment.html
index d47ffb77..8afd328e 100644
--- a/book/en/apis/core/Segment.html
+++ b/book/en/apis/core/Segment.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/segment" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="segment">Segment</h1>
diff --git a/book/en/apis/core/SegmentCollection.html b/book/en/apis/core/SegmentCollection.html
index 10c13e52..69008e96 100644
--- a/book/en/apis/core/SegmentCollection.html
+++ b/book/en/apis/core/SegmentCollection.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/segmentcollection" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="segmentcollection">SegmentCollection</h1>
diff --git a/book/en/apis/core/SortableTitlePlugin.html b/book/en/apis/core/SortableTitlePlugin.html
index e1510238..8d8be44a 100644
--- a/book/en/apis/core/SortableTitlePlugin.html
+++ b/book/en/apis/core/SortableTitlePlugin.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/sortabletitleplugin" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="sortabletitleplugin">SortableTitlePlugin</h1>
diff --git a/book/en/apis/core/VScrollbar.html b/book/en/apis/core/VScrollbar.html
index bb33a302..196a621d 100644
--- a/book/en/apis/core/VScrollbar.html
+++ b/book/en/apis/core/VScrollbar.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/core/vscrollbar" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="vscrollbar">VScrollbar</h1>
diff --git a/book/en/apis/rt_grid/ColumnDefinition.html b/book/en/apis/rt_grid/ColumnDefinition.html
index 6a00adfd..277f4118 100644
--- a/book/en/apis/rt_grid/ColumnDefinition.html
+++ b/book/en/apis/rt_grid/ColumnDefinition.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/rt-grid/columndefinition" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="columndefinition">ColumnDefinition</h1>
@@ -599,7 +599,7 @@ <h5>Properties:</h5>
                             <td class="type"> <span class="param-type">Object</span> </td>
                             <td class="attributes"> &lt;optional&gt;<br> </td>
                             <td class="default"> null </td>
-                            <td class="description last">Store additional information</td>
+                            <td class="description last">For storing any additional information to the column</td>
                           </tr>
                         </tbody>
                       </table>
diff --git a/book/en/apis/rt_grid/ColumnDefinition.md b/book/en/apis/rt_grid/ColumnDefinition.md
index 53e11137..751842f4 100644
--- a/book/en/apis/rt_grid/ColumnDefinition.md
+++ b/book/en/apis/rt_grid/ColumnDefinition.md
@@ -4,7 +4,7 @@
 
 <div id="main-template" class="elf-template">    <section><header>            <h1 class="subsection-title"><span class="attribs"></span>ColumnDefinition<span class="signature">(columnOption<span class="signature-attributes">opt</span>, hostGrid<span class="signature-attributes">opt</span>)</span></h1>            </header><article>    <div class="container-overview">            
 <div class="item">                                <div class="item-type">class</div>                        <h4 class="name" id="ColumnDefinition">new ColumnDefinition<span class="signature">(columnOption<span class="signature-attributes">opt</span>, hostGrid<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">columnOption</div>                        <div class="type">                            <span class="param-type"><a href="ColumnDefinition.html#~Options">ColumnDefinition~Options</a></span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>                <div class="param">                            <div class="name">hostGrid</div>                        <div class="type">                            <span class="param-type">*</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>        </div>                                            <h3 class="subsection-title">Type Definitions</h3>                        
-<div class="item">            <div class="item-type">typedef</div>    <h4 class="name" id="~Options">Options</h4><div class="description">    ColumnDefinition options</div>    <h5>Type:</h5>    <span class="param-type">Object</span>    <h5>Properties:</h5>    <div class="props"><table>    <thead>    <tr>                <th>Name</th>                <th>Type</th>                <th>Attributes</th>                        <th>Default</th>                <th class="last">Description</th>    </tr>    </thead>    <tbody>            <tr>                            <td class="name"><code>field</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Field for real-time, ADC, formula sources</td>        </tr>            <tr>                            <td class="name"><code>dataType</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">data type eg. string, datetime, number</td>        </tr>            <tr>                            <td class="name"><code>formulaReference</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>require</code></td>                        <td class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Extra fields required by this column will be requested for real-time data.</td>        </tr>            <tr>                            <td class="name"><code>name</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Label of the column</td>        </tr>            <tr>                            <td class="name"><code>notRealTimeField</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, the `field` will not be requested for real-time data. By enabling this, `rowSorting` will also be disabled, if not specified.</td>        </tr>            <tr>                            <td class="name"><code>tooltip</code></td>                        <td class="type">                            <span class="param-type">boolean</span> | <span class="param-type">string</span> | <span class="param-type">null</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Show tooltip in header section</td>        </tr>            <tr>                            <td class="name"><code>headerBinding</code></td>                        <td class="type">                            <span class="param-type">function</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Method for custom header rendering.</td>        </tr>            <tr>                            <td class="name"><code>headerRenderer</code></td>                        <td class="type">                            <span class="param-type">function</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Alias to `headerBinding`</td>        </tr>            <tr>                            <td class="name"><code>binding</code></td>                        <td class="type">                            <span class="param-type">function</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Method for custom rendering. It will be executed on each data update and scrolling</td>        </tr>            <tr>                            <td class="name"><code>renderer</code></td>                        <td class="type">                            <span class="param-type">function</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Alias to `binding`</td>        </tr>            <tr>                            <td class="name"><code>sortLogic</code></td>                        <td class="type">                            <span class="param-type"><a href="ColumnDefinition.html#~SortLogic">ColumnDefinition~SortLogic</a></span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>sortingLogic</code></td>                        <td class="type">                            <span class="param-type"><a href="ColumnDefinition.html#~SortLogic">ColumnDefinition~SortLogic</a></span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Alias to `sortLogic`</td>        </tr>            <tr>                            <td class="name"><code>sorter</code></td>                        <td class="type">                            <span class="param-type"><a href="ColumnDefinition.html#~SortLogic">ColumnDefinition~SortLogic</a></span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Alias to `sortLogic`</td>        </tr>            <tr>                            <td class="name"><code>rowSorting</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">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.</td>        </tr>            <tr>                            <td class="name"><code>sortable</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">If disabled, the column cannot be sorted by user click</td>        </tr>            <tr>                            <td class="name"><code>sort</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Deprecated Alias to `sortOrder`</td>        </tr>            <tr>                            <td class="name"><code>sortOrder</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">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.</td>        </tr>            <tr>                            <td class="name"><code>styles</code></td>                        <td class="type">                            <span class="param-type">Object</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Key/value pair Object specifying CSS styles</td>        </tr>            <tr>                            <td class="name"><code>width</code></td>                        <td class="type">                            <span class="param-type">number</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    NaN                                </td>                        <td class="description last">If specified, column will have a fixed width in pixel</td>        </tr>            <tr>                            <td class="name"><code>minWidth</code></td>                        <td class="type">                            <span class="param-type">number</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    NaN                                </td>                        <td class="description last">If specified, column will have a minimum width in pixel</td>        </tr>            <tr>                            <td class="name"><code>scalable</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">Column scalability forces column to be scaled and filled the grid. `width` property will be used as a weight/ratio</td>        </tr>            <tr>                            <td class="name"><code>className</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>class</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Alias to `className`</td>        </tr>            <tr>                            <td class="name"><code>textAlign</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Text alignment for content and column header. Available values are: left|center|right</td>        </tr>            <tr>                            <td class="name"><code>alignment</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Alias to `textAlign`</td>        </tr>            <tr>                            <td class="name"><code>headerAlignment</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Text alignment for column header. This will override `textAlign` option for column header.</td>        </tr>            <tr>                            <td class="name"><code>titleAlignment</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Alias to `headerAlignment`</td>        </tr>            <tr>                            <td class="name"><code>hidden</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>id</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                </td>                        <td class="description last">A unique identifier for the column</td>        </tr>            <tr>                            <td class="name"><code>textSelect</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, user can select text in this column</td>        </tr>            <tr>                            <td class="name"><code>keepModel</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                </td>                        <td class="description last">If enabled, initial column's options will be kept</td>        </tr>            <tr>                            <td class="name"><code>stationary</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, the column order cannot be changed (i.e., this column and any column to its left cannot be moved)</td>        </tr>            <tr>                            <td class="name"><code>leftPinned</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, the column will not be part of the scrollable area and is pinned to the left side</td>        </tr>            <tr>                            <td class="name"><code>rightPinned</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, the column will not be part of the scrollable area and is pinned to the right side</td>        </tr>            <tr>                            <td class="name"><code>info</code></td>                        <td class="type">                            <span class="param-type">Object</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Store additional information</td>        </tr>        </tbody></table></div><div class="details">                                                            </div></div>                            
+<div class="item">            <div class="item-type">typedef</div>    <h4 class="name" id="~Options">Options</h4><div class="description">    ColumnDefinition options</div>    <h5>Type:</h5>    <span class="param-type">Object</span>    <h5>Properties:</h5>    <div class="props"><table>    <thead>    <tr>                <th>Name</th>                <th>Type</th>                <th>Attributes</th>                        <th>Default</th>                <th class="last">Description</th>    </tr>    </thead>    <tbody>            <tr>                            <td class="name"><code>field</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Field for real-time, ADC, formula sources</td>        </tr>            <tr>                            <td class="name"><code>dataType</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">data type eg. string, datetime, number</td>        </tr>            <tr>                            <td class="name"><code>formulaReference</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>require</code></td>                        <td class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Extra fields required by this column will be requested for real-time data.</td>        </tr>            <tr>                            <td class="name"><code>name</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Label of the column</td>        </tr>            <tr>                            <td class="name"><code>notRealTimeField</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, the `field` will not be requested for real-time data. By enabling this, `rowSorting` will also be disabled, if not specified.</td>        </tr>            <tr>                            <td class="name"><code>tooltip</code></td>                        <td class="type">                            <span class="param-type">boolean</span> | <span class="param-type">string</span> | <span class="param-type">null</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Show tooltip in header section</td>        </tr>            <tr>                            <td class="name"><code>headerBinding</code></td>                        <td class="type">                            <span class="param-type">function</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Method for custom header rendering.</td>        </tr>            <tr>                            <td class="name"><code>headerRenderer</code></td>                        <td class="type">                            <span class="param-type">function</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Alias to `headerBinding`</td>        </tr>            <tr>                            <td class="name"><code>binding</code></td>                        <td class="type">                            <span class="param-type">function</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Method for custom rendering. It will be executed on each data update and scrolling</td>        </tr>            <tr>                            <td class="name"><code>renderer</code></td>                        <td class="type">                            <span class="param-type">function</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Alias to `binding`</td>        </tr>            <tr>                            <td class="name"><code>sortLogic</code></td>                        <td class="type">                            <span class="param-type"><a href="ColumnDefinition.html#~SortLogic">ColumnDefinition~SortLogic</a></span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>sortingLogic</code></td>                        <td class="type">                            <span class="param-type"><a href="ColumnDefinition.html#~SortLogic">ColumnDefinition~SortLogic</a></span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Alias to `sortLogic`</td>        </tr>            <tr>                            <td class="name"><code>sorter</code></td>                        <td class="type">                            <span class="param-type"><a href="ColumnDefinition.html#~SortLogic">ColumnDefinition~SortLogic</a></span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Alias to `sortLogic`</td>        </tr>            <tr>                            <td class="name"><code>rowSorting</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">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.</td>        </tr>            <tr>                            <td class="name"><code>sortable</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">If disabled, the column cannot be sorted by user click</td>        </tr>            <tr>                            <td class="name"><code>sort</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Deprecated Alias to `sortOrder`</td>        </tr>            <tr>                            <td class="name"><code>sortOrder</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">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.</td>        </tr>            <tr>                            <td class="name"><code>styles</code></td>                        <td class="type">                            <span class="param-type">Object</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Key/value pair Object specifying CSS styles</td>        </tr>            <tr>                            <td class="name"><code>width</code></td>                        <td class="type">                            <span class="param-type">number</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    NaN                                </td>                        <td class="description last">If specified, column will have a fixed width in pixel</td>        </tr>            <tr>                            <td class="name"><code>minWidth</code></td>                        <td class="type">                            <span class="param-type">number</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    NaN                                </td>                        <td class="description last">If specified, column will have a minimum width in pixel</td>        </tr>            <tr>                            <td class="name"><code>scalable</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">Column scalability forces column to be scaled and filled the grid. `width` property will be used as a weight/ratio</td>        </tr>            <tr>                            <td class="name"><code>className</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>class</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Alias to `className`</td>        </tr>            <tr>                            <td class="name"><code>textAlign</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Text alignment for content and column header. Available values are: left|center|right</td>        </tr>            <tr>                            <td class="name"><code>alignment</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Alias to `textAlign`</td>        </tr>            <tr>                            <td class="name"><code>headerAlignment</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Text alignment for column header. This will override `textAlign` option for column header.</td>        </tr>            <tr>                            <td class="name"><code>titleAlignment</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Alias to `headerAlignment`</td>        </tr>            <tr>                            <td class="name"><code>hidden</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>id</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                </td>                        <td class="description last">A unique identifier for the column</td>        </tr>            <tr>                            <td class="name"><code>textSelect</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, user can select text in this column</td>        </tr>            <tr>                            <td class="name"><code>keepModel</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                </td>                        <td class="description last">If enabled, initial column's options will be kept</td>        </tr>            <tr>                            <td class="name"><code>stationary</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, the column order cannot be changed (i.e., this column and any column to its left cannot be moved)</td>        </tr>            <tr>                            <td class="name"><code>leftPinned</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, the column will not be part of the scrollable area and is pinned to the left side</td>        </tr>            <tr>                            <td class="name"><code>rightPinned</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">If enabled, the column will not be part of the scrollable area and is pinned to the right side</td>        </tr>            <tr>                            <td class="name"><code>info</code></td>                        <td class="type">                            <span class="param-type">Object</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">For storing any additional information to the column</td>        </tr>        </tbody></table></div><div class="details">                                                            </div></div>                            
 <div class="item">                                <div class="item-type">typedef</div>                        <h4 class="name" id="~SortLogic">SortLogic<span class="signature">(valA, valB, order, ctx)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">valA</div>                        <div class="type">                            <span class="param-type">*</span>                        </div>                                                    <div class="description">                    Data or RowDefinition object, depending on rowSorting flag, used for comparison                </div>                    </div>                <div class="param">                            <div class="name">valB</div>                        <div class="type">                            <span class="param-type">*</span>                        </div>                                                    <div class="description">                    Data or RowDefinition object, depending on rowSorting flag, used for comparison                </div>                    </div>                <div class="param">                            <div class="name">order</div>                        <div class="type">                            <span class="param-type">number</span>                        </div>                                                    <div class="description">                    Order code. 1 means ascending order and -1 means descending order                </div>                    </div>                <div class="param">                            <div class="name">ctx</div>                        <div class="type">                            <span class="param-type">Object</span>                        </div>                                                    <div class="description">                    Context Object of the current sorting operation                </div>                    </div>            </div>        <div class="details">                                                            </div>                                    </div>                            <h3 class="subsection-title">Methods</h3>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id=".getDataType">getDataType<span class="signature">(field)</span></h4>                            <div class="description">        get data type    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">field</div>                        <div class="type">                            <span class="param-type">string</span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">string</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id=".getRealTimeFields">getRealTimeFields<span class="signature">(fields, colDef)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">fields</div>                        <div class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </div>                                                    <div class="description">                    To be used by Array.reduce method                </div>                    </div>                <div class="param">                            <div class="name">colDef</div>                        <div class="type">                            <span class="param-type"><a href="ColumnDefinition.html">ColumnDefinition</a></span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">Array.&lt;string&gt;</span>    </div>                </div>                    
diff --git a/book/en/apis/rt_grid/Grid.html b/book/en/apis/rt_grid/Grid.html
index 02cb005c..fb4d6757 100644
--- a/book/en/apis/rt_grid/Grid.html
+++ b/book/en/apis/rt_grid/Grid.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/rt-grid/grid" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="grid">Grid</h1>
@@ -954,7 +954,7 @@ <h5>Parameters:</h5>
                       </dd>
                     </div>
                     <h5>Example:</h5>
-                    <pre><code>var grid = new rt.Grid(grid_div, options);
+                    <pre><code>let grid = new rt.Grid(grid_div, options);
 grid.addStaticDataRows([
  [10, "a", true],
  [20, "b", false],
@@ -1657,7 +1657,7 @@ <h5>Parameters:</h5>
                     <h5>Returns:</h5>
                     <div class="sub-content"> <span class="param-type"><a href="RowDefinition.html">RowDefinition</a></span> </div>
                     <h5>Example:</h5>
-                    <pre><code>var grid = new rt.Grid(grid_div, options);
+                    <pre><code>let grid = new rt.Grid(grid_div, options);
 grid.insertRow({"ric": "RIC"}, 0); // A new row is added at the top</code></pre> </div>
                   <div class="item">
                     <div class="item-type">function</div>
@@ -1685,7 +1685,7 @@ <h5>Parameters:</h5>
                     </div>
                     <div class="details"> </div>
                     <h5>Example:</h5>
-                    <pre><code>var grid = new rt.Grid(grid_div, options);
+                    <pre><code>let grid = new rt.Grid(grid_div, options);
 grid.insertRows([
  {ric: "RIC"},
  {values: {"field1": 0, "field2": 1}},
@@ -1741,14 +1741,14 @@ <h5>Parameters:</h5>
                     <h5>Returns:</h5>
                     <div class="sub-content"> <span class="param-type">Promise</span> </div>
                     <h5>Example:</h5>
-                    <pre><code>var gridConfig = {
+                    <pre><code>let gridConfig = {
   synapse: { // define synapse configuration
     apiKey: "xxx",
     contextApp: "xxx",
     auth: "xxx" (optional)
   }
 };
-var promise = grid.loadFieldInfo("CF_LAST");</code></pre> </div>
+let promise = grid.loadFieldInfo("CF_LAST");</code></pre> </div>
                   <div class="item">
                     <div class="item-type">function</div>
                     <h4 class="name" id="logDT">logDT<span class="signature">(opt_options<span class="signature-attributes">opt</span>)</span>
diff --git a/book/en/apis/rt_grid/Grid.md b/book/en/apis/rt_grid/Grid.md
index cce10493..56c8eac0 100644
--- a/book/en/apis/rt_grid/Grid.md
+++ b/book/en/apis/rt_grid/Grid.md
@@ -14,7 +14,7 @@
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="addDataFields">addDataFields<span class="signature">(fieldRef, referrer<span class="signature-attributes">opt</span>)</span></h4>                            <div class="description">        Add fields for real-time data without adding column nor UIs. No duplication is allowed    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">fieldRef</div>                        <div class="type">                            <span class="param-type">string</span> | <span class="param-type">Array.&lt;string&gt;</span>                        </div>                            <div class="attributes">                                                                </div>                                            </div>                <div class="param">                            <div class="name">referrer</div>                        <div class="type">                            <span class="param-type">string</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">boolean</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="addFooterSection">addFooterSection<span class="signature">(sectionName<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">sectionName</div>                        <div class="type">                            <span class="param-type">string</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">*</span>    </div><div class="sub-content-desc">    Return Section instance</div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="addHeaderSection">addHeaderSection<span class="signature">(sectionName<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">sectionName</div>                        <div class="type">                            <span class="param-type">string</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">*</span>    </div><div class="sub-content-desc">    Return Section instance</div>                </div>                    
-<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="addStaticDataRows">addStaticDataRows<span class="signature">(dataRows, fields<span class="signature-attributes">opt</span>)</span></h4>                            <div class="description">        Add multiple rows without `ric` property in <a href="RowDefinition.html">RowDefinition</a>    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">dataRows</div>                        <div class="type">                            <span class="param-type">Array</span>                        </div>                            <div class="attributes">                                                                </div>                                                    <div class="description">                    2D Array of data or Array of Field/Value pair object                </div>                    </div>                <div class="param">                            <div class="name">fields</div>                        <div class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                                    <div class="description">                    If no field is given, field defined in column definition will be used instead                </div>                    </div>            </div>        <div class="details">                                                            <dt class="tag-see">See:</dt>    <dd class="tag-see">        <ul>            <li><a href="Grid.html#logDV">Grid#logDV</a></li>                    <li><a href="Grid.html#logDT">Grid#logDT</a></li>        </ul>    </dd>        </div>                                            <h5>Example:</h5>            <pre><code>var grid = new rt.Grid(grid_div, options);
+<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="addStaticDataRows">addStaticDataRows<span class="signature">(dataRows, fields<span class="signature-attributes">opt</span>)</span></h4>                            <div class="description">        Add multiple rows without `ric` property in <a href="RowDefinition.html">RowDefinition</a>    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">dataRows</div>                        <div class="type">                            <span class="param-type">Array</span>                        </div>                            <div class="attributes">                                                                </div>                                                    <div class="description">                    2D Array of data or Array of Field/Value pair object                </div>                    </div>                <div class="param">                            <div class="name">fields</div>                        <div class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                                    <div class="description">                    If no field is given, field defined in column definition will be used instead                </div>                    </div>            </div>        <div class="details">                                                            <dt class="tag-see">See:</dt>    <dd class="tag-see">        <ul>            <li><a href="Grid.html#logDV">Grid#logDV</a></li>                    <li><a href="Grid.html#logDT">Grid#logDT</a></li>        </ul>    </dd>        </div>                                            <h5>Example:</h5>            <pre><code>let grid = new rt.Grid(grid_div, options);
 grid.addStaticDataRows([
  [10, "a", true],
  [20, "b", false],
@@ -84,9 +84,9 @@ grid.getMultipleRowData(DataView); // All row data from the specified DataView i
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="initSubscription">initSubscription<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="insertBefore">insertBefore<span class="signature">(elem)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">elem</div>                        <div class="type">                            <span class="param-type">Element</span>                        </div>                                                    <div class="description">                    Sibling element                </div>                    </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="insertColumn">insertColumn<span class="signature">(columnOption, idx<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">columnOption</div>                        <div class="type">                            <span class="param-type"><a href="ColumnDefinition.html#~Options">ColumnDefinition~Options</a></span> | <span class="param-type">string</span>                        </div>                            <div class="attributes">                                                                </div>                                                    <div class="description">                    String will be treated as field, while object is treated as the column options                </div>                    </div>                <div class="param">                            <div class="name">idx</div>                        <div class="type">                            <span class="param-type">number</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
-<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="insertRow">insertRow<span class="signature">(rowOption<span class="signature-attributes">opt</span>, rowRef<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowOption</div>                        <div class="type">                            <span class="param-type"><a href="RowDefinition.html#~Options">RowDefinition~Options</a></span> | <span class="param-type">string</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>                <div class="param">                            <div class="name">rowRef</div>                        <div class="type">                            <span class="param-type"><a href="Grid.html#~RowReference">Grid~RowReference</a></span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                                    <div class="description">                    Reference (i.e. row index, row id, or row definition) of the insert position                </div>                    </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type"><a href="RowDefinition.html">RowDefinition</a></span>    </div>                        <h5>Example:</h5>            <pre><code>var grid = new rt.Grid(grid_div, options);
+<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="insertRow">insertRow<span class="signature">(rowOption<span class="signature-attributes">opt</span>, rowRef<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowOption</div>                        <div class="type">                            <span class="param-type"><a href="RowDefinition.html#~Options">RowDefinition~Options</a></span> | <span class="param-type">string</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>                <div class="param">                            <div class="name">rowRef</div>                        <div class="type">                            <span class="param-type"><a href="Grid.html#~RowReference">Grid~RowReference</a></span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                                    <div class="description">                    Reference (i.e. row index, row id, or row definition) of the insert position                </div>                    </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type"><a href="RowDefinition.html">RowDefinition</a></span>    </div>                        <h5>Example:</h5>            <pre><code>let grid = new rt.Grid(grid_div, options);
 grid.insertRow({"ric": "RIC"}, 0); // A new row is added at the top</code></pre>    </div>                    
-<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="insertRows">insertRows<span class="signature">(rowOptions, rowRef<span class="signature-attributes">opt</span>, opt_fields<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowOptions</div>                        <div class="type">                            <span class="param-type">Array.&lt;(<a href="RowDefinition.html#~Options">RowDefinition~Options</a>|string)&gt;</span>                        </div>                            <div class="attributes">                                                                </div>                                                    <div class="description">                    Array of row option object                </div>                    </div>                <div class="param">                            <div class="name">rowRef</div>                        <div class="type">                            <span class="param-type"><a href="Grid.html#~RowReference">Grid~RowReference</a></span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                                    <div class="description">                    Reference (i.e. row index, row id, or row definition) of the insert position                </div>                    </div>                <div class="param">                            <div class="name">opt_fields</div>                        <div class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>            </div>        <div class="details">                                                            </div>                                            <h5>Example:</h5>            <pre><code>var grid = new rt.Grid(grid_div, options);
+<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="insertRows">insertRows<span class="signature">(rowOptions, rowRef<span class="signature-attributes">opt</span>, opt_fields<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowOptions</div>                        <div class="type">                            <span class="param-type">Array.&lt;(<a href="RowDefinition.html#~Options">RowDefinition~Options</a>|string)&gt;</span>                        </div>                            <div class="attributes">                                                                </div>                                                    <div class="description">                    Array of row option object                </div>                    </div>                <div class="param">                            <div class="name">rowRef</div>                        <div class="type">                            <span class="param-type"><a href="Grid.html#~RowReference">Grid~RowReference</a></span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                                    <div class="description">                    Reference (i.e. row index, row id, or row definition) of the insert position                </div>                    </div>                <div class="param">                            <div class="name">opt_fields</div>                        <div class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>            </div>        <div class="details">                                                            </div>                                            <h5>Example:</h5>            <pre><code>let grid = new rt.Grid(grid_div, options);
 grid.insertRows([
  {ric: "RIC"},
  {values: {"field1": 0, "field2": 1}},
@@ -96,14 +96,14 @@ grid.insertRows([
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="isFocused">isFocused<span class="signature">()</span></h4>                            <div class="description">        Check grid element is focused    </div>                        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">boolean</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="isSorting">isSorting<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">boolean</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="listen">listen<span class="signature">(type, handler)</span></h4>                            <div class="description">        Alias to EventDispatcher#addEventListener    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">type</div>                        <div class="type">                            <span class="param-type">string</span>                        </div>                                                    <div class="description">                    Event name                </div>                    </div>                <div class="param">                            <div class="name">handler</div>                        <div class="type">                            <span class="param-type">function</span>                        </div>                                                    <div class="description">                    Event handler                </div>                    </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
-<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="loadFieldInfo">loadFieldInfo<span class="signature">(field)</span></h4>                            <div class="description">        Request field information from Synapse service. If field information already exists, a resolved promise is returned. Synapse config must be supplied before the request can be made.    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">field</div>                        <div class="type">                            <span class="param-type">string</span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">Promise</span>    </div>                        <h5>Example:</h5>            <pre><code>var gridConfig = {
+<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="loadFieldInfo">loadFieldInfo<span class="signature">(field)</span></h4>                            <div class="description">        Request field information from Synapse service. If field information already exists, a resolved promise is returned. Synapse config must be supplied before the request can be made.    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">field</div>                        <div class="type">                            <span class="param-type">string</span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">Promise</span>    </div>                        <h5>Example:</h5>            <pre><code>let gridConfig = {
   synapse: { // define synapse configuration
     apiKey: "xxx",
     contextApp: "xxx",
     auth: "xxx" (optional)
   }
 };
-var promise = grid.loadFieldInfo("CF_LAST");</code></pre>    </div>                    
+let promise = grid.loadFieldInfo("CF_LAST");</code></pre>    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="logDT">logDT<span class="signature">(opt_options<span class="signature-attributes">opt</span>)</span></h4>                            <div class="description">        Log DataTable to console. By default, this will log only fields specified in the column definition. To see other column data use "colNames" options    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">opt_options</div>                        <div class="type">                            <span class="param-type">Object</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                                    <div class="description">                    { "colNames": Array.&lt;string&gt;, "rowCount": number, "startIndex": number, "getter": function(Object, string):* }                </div>                    </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="logDV">logDV<span class="signature">(opt_options<span class="signature-attributes">opt</span>)</span></h4>                            <div class="description">        Log DataView to console. By default, this will log only fields specified in the column definition. To see other column data use "colNames" options    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">opt_options</div>                        <div class="type">                            <span class="param-type">Object</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                                    <div class="description">                    { "colNames": Array.&lt;string&gt;, "rowCount": number, "startIndex": number, "getter": function(Object, string):* }                </div>                    </div>            </div>        <div class="details">                                                            </div>                                            <h5>Example:</h5>            <pre><code>// Options have the following format:
 // {
diff --git a/book/en/apis/rt_grid/RowDefinition.html b/book/en/apis/rt_grid/RowDefinition.html
index 6ae80343..b1d6ebe5 100644
--- a/book/en/apis/rt_grid/RowDefinition.html
+++ b/book/en/apis/rt_grid/RowDefinition.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/apis/rt-grid/rowdefinition" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../../resources/styles/elf-template.css">
 
             <h1 id="rowdefinition">RowDefinition</h1>
@@ -414,6 +414,13 @@ <h5>Properties:</h5>
                             <td class="default"> true </td>
                             <td class="description last">Realtime row, able to request for JET/RTK</td>
                           </tr>
+                          <tr>
+                            <td class="name"><code>info</code></td>
+                            <td class="type"> <span class="param-type">Object</span> </td>
+                            <td class="attributes"> &lt;optional&gt;<br> </td>
+                            <td class="default"> null </td>
+                            <td class="description last">For storing any additional information to the row</td>
+                          </tr>
                         </tbody>
                       </table>
                     </div>
@@ -495,7 +502,7 @@ <h5>Parameters:</h5>
                     <h5>Returns:</h5>
                     <div class="sub-content"> <span class="param-type">Array.&lt;string&gt;</span> </div>
                     <h5>Example:</h5>
-                    <pre><code>var rowIds = descendants.reduce(RowDefinition.deregisterFromView, []);</code></pre> </div>
+                    <pre><code>let rowIds = descendants.reduce(RowDefinition.deregisterFromView, []);</code></pre> </div>
                   <div class="item">
                     <div class="item-type">function</div>
                     <h4 class="name" id=".dispose">dispose<span class="signature">(rowDef)</span></h4>
@@ -737,6 +744,13 @@ <h5>Returns:</h5>
                     <div class="sub-content"> <span class="param-type">string</span> </div>
                     <div class="sub-content-desc"> Row Id will never be empty string unless the row has been removed</div>
                   </div>
+                  <div class="item">
+                    <div class="item-type">function</div>
+                    <h4 class="name" id="getRowInfo">getRowInfo<span class="signature">()</span></h4>
+                    <div class="details"> </div>
+                    <h5>Returns:</h5>
+                    <div class="sub-content"> <span class="param-type">Object</span> </div>
+                  </div>
                   <div class="item">
                     <div class="item-type">function</div>
                     <h4 class="name" id="getSymbol">getSymbol<span class="signature">()</span></h4>
@@ -766,13 +780,6 @@ <h4 class="name" id="getUserInput">getUserInput<span class="signature">()</span>
                     <h5>Returns:</h5>
                     <div class="sub-content"> <span class="param-type">string</span> </div>
                   </div>
-                  <div class="item">
-                    <div class="item-type">function</div>
-                    <h4 class="name" id="getUserModel">getUserModel<span class="signature">()</span></h4>
-                    <div class="details"> </div>
-                    <h5>Returns:</h5>
-                    <div class="sub-content"> <span class="param-type">Object</span> </div>
-                  </div>
                   <div class="item">
                     <div class="item-type">function</div>
                     <h4 class="name" id="initialize">initialize<span class="signature">(rowOptions<span class="signature-attributes">opt</span>)</span>
@@ -908,6 +915,18 @@ <h5>Parameters:</h5>
                     </div>
                     <div class="details"> </div>
                   </div>
+                  <div class="item">
+                    <div class="item-type">function</div>
+                    <h4 class="name" id="setRowInfo">setRowInfo<span class="signature">(obj)</span></h4>
+                    <h5>Parameters:</h5>
+                    <div class="params">
+                      <div class="param">
+                        <div class="name">obj</div>
+                        <div class="type"> <span class="param-type">Object</span> </div>
+                      </div>
+                    </div>
+                    <div class="details"> </div>
+                  </div>
                   <div class="item">
                     <div class="item-type">function</div>
                     <h4 class="name" id="setStaticData">setStaticData<span class="signature">(field, value)</span></h4>
diff --git a/book/en/apis/rt_grid/RowDefinition.md b/book/en/apis/rt_grid/RowDefinition.md
index 65d8c11e..78a4a22c 100644
--- a/book/en/apis/rt_grid/RowDefinition.md
+++ b/book/en/apis/rt_grid/RowDefinition.md
@@ -4,9 +4,9 @@
 
 <div id="main-template" class="elf-template">    <section><header>            <h1 class="subsection-title"><span class="attribs"></span>RowDefinition<span class="signature">(rowOptions<span class="signature-attributes">opt</span>)</span></h1>            </header><article>    <div class="container-overview">            
 <div class="item">                                <div class="item-type">class</div>                        <h4 class="name" id="RowDefinition">new RowDefinition<span class="signature">(rowOptions<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowOptions</div>                        <div class="type">                            <span class="param-type"><a href="RowDefinition.html#~Options">RowDefinition~Options</a></span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>        </div>                                            <h3 class="subsection-title">Type Definitions</h3>                        
-<div class="item">            <div class="item-type">typedef</div>    <h4 class="name" id="~Options">Options</h4><div class="description">    RowDefinition options</div>    <h5>Type:</h5>    <span class="param-type">Object</span>    <h5>Properties:</h5>    <div class="props"><table>    <thead>    <tr>                <th>Name</th>                <th>Type</th>                <th>Attributes</th>                        <th>Default</th>                <th class="last">Description</th>    </tr>    </thead>    <tbody>            <tr>                            <td class="name"><code>ric</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">RIC for real-time fields. Prefixing 0# to the ric is equivalent to specifying asChain property.</td>        </tr>            <tr>                            <td class="name"><code>permId</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Organization PermId to be used instead of ric for private company.</td>        </tr>            <tr>                            <td class="name"><code>values</code></td>                        <td class="type">                            <span class="param-type">Array</span> | <span class="param-type">Object</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Values for static data</td>        </tr>            <tr>                            <td class="name"><code>fields</code></td>                        <td class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Field that corresponds to the given static values</td>        </tr>            <tr>                            <td class="name"><code>asChain</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">The given ric will be treated as a chain</td>        </tr>            <tr>                            <td class="name"><code>chainRic</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">RIC to be used for chain request (overiding ric property)</td>        </tr>            <tr>                            <td class="name"><code>collapsed</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">Chain is collapsed by default</td>        </tr>            <tr>                            <td class="name"><code>label</code></td>                        <td class="type">                            <span class="param-type">string</span> | <span class="param-type">null</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>hidden</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">When this row is hidden</td>        </tr>            <tr>                            <td class="name"><code>realTime</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">Realtime row, able to request for JET/RTK</td>        </tr>        </tbody></table></div><div class="details">                                                            </div></div>                            
+<div class="item">            <div class="item-type">typedef</div>    <h4 class="name" id="~Options">Options</h4><div class="description">    RowDefinition options</div>    <h5>Type:</h5>    <span class="param-type">Object</span>    <h5>Properties:</h5>    <div class="props"><table>    <thead>    <tr>                <th>Name</th>                <th>Type</th>                <th>Attributes</th>                        <th>Default</th>                <th class="last">Description</th>    </tr>    </thead>    <tbody>            <tr>                            <td class="name"><code>ric</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">RIC for real-time fields. Prefixing 0# to the ric is equivalent to specifying asChain property.</td>        </tr>            <tr>                            <td class="name"><code>permId</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">Organization PermId to be used instead of ric for private company.</td>        </tr>            <tr>                            <td class="name"><code>values</code></td>                        <td class="type">                            <span class="param-type">Array</span> | <span class="param-type">Object</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Values for static data</td>        </tr>            <tr>                            <td class="name"><code>fields</code></td>                        <td class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">Field that corresponds to the given static values</td>        </tr>            <tr>                            <td class="name"><code>asChain</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    false                                </td>                        <td class="description last">The given ric will be treated as a chain</td>        </tr>            <tr>                            <td class="name"><code>chainRic</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    ""                                </td>                        <td class="description last">RIC to be used for chain request (overiding ric property)</td>        </tr>            <tr>                            <td class="name"><code>collapsed</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">Chain is collapsed by default</td>        </tr>            <tr>                            <td class="name"><code>label</code></td>                        <td class="type">                            <span class="param-type">string</span> | <span class="param-type">null</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last"></td>        </tr>            <tr>                            <td class="name"><code>hidden</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">When this row is hidden</td>        </tr>            <tr>                            <td class="name"><code>realTime</code></td>                        <td class="type">                            <span class="param-type">boolean</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    true                                </td>                        <td class="description last">Realtime row, able to request for JET/RTK</td>        </tr>            <tr>                            <td class="name"><code>info</code></td>                        <td class="type">                            <span class="param-type">Object</span>                        </td>                            <td class="attributes">                                    &lt;optional&gt;<br>                                                </td>                                        <td class="default">                                    null                                </td>                        <td class="description last">For storing any additional information to the row</td>        </tr>        </tbody></table></div><div class="details">                                                            </div></div>                            
 <div class="item">            <div class="item-type">typedef</div>    <h4 class="name" id="~RowTypes">RowTypes</h4>    <h5>Type:</h5>    <span class="param-type">Object</span>    <h5>Properties:</h5>    <div class="props"><table>    <thead>    <tr>                <th>Name</th>                <th>Type</th>                        <th>Default</th>                <th class="last">Description</th>    </tr>    </thead>    <tbody>            <tr>                            <td class="name"><code>CONTENT</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                                        <td class="default">                                    "CONTENT"                                </td>                        <td class="description last">Regular row</td>        </tr>            <tr>                            <td class="name"><code>CHAIN</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                                        <td class="default">                                    "CHAIN"                                </td>                        <td class="description last">Chain RIC row</td>        </tr>            <tr>                            <td class="name"><code>CONSTITUENT</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                                        <td class="default">                                    "CONSTITUENT"                                </td>                        <td class="description last">Constituent row</td>        </tr>            <tr>                            <td class="name"><code>GROUP_HEADER</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                                        <td class="default">                                    "GROUP_HEADER"                                </td>                        <td class="description last">Row of segment separator at the very top</td>        </tr>            <tr>                            <td class="name"><code>SUBGROUP_HEADER</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                                        <td class="default">                                    "SUBGROUP_HEADER"                                </td>                        <td class="description last">Row of nested segment separator</td>        </tr>            <tr>                            <td class="name"><code>GROUP_MEMBER</code></td>                        <td class="type">                            <span class="param-type">string</span>                        </td>                                        <td class="default">                                    "GROUP_MEMBER"                                </td>                        <td class="description last">Child row displayed under segment separator</td>        </tr>        </tbody></table></div><div class="details">                                                            </div></div>                            <h3 class="subsection-title">Methods</h3>                    
-<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id=".deregisterFromView">deregisterFromView<span class="signature">(rowIds, rowDef)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowIds</div>                        <div class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </div>                                            </div>                <div class="param">                            <div class="name">rowDef</div>                        <div class="type">                            <span class="param-type"><a href="RowDefinition.html">RowDefinition</a></span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">Array.&lt;string&gt;</span>    </div>                        <h5>Example:</h5>            <pre><code>var rowIds = descendants.reduce(RowDefinition.deregisterFromView, []);</code></pre>    </div>                    
+<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id=".deregisterFromView">deregisterFromView<span class="signature">(rowIds, rowDef)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowIds</div>                        <div class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </div>                                            </div>                <div class="param">                            <div class="name">rowDef</div>                        <div class="type">                            <span class="param-type"><a href="RowDefinition.html">RowDefinition</a></span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">Array.&lt;string&gt;</span>    </div>                        <h5>Example:</h5>            <pre><code>let rowIds = descendants.reduce(RowDefinition.deregisterFromView, []);</code></pre>    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id=".dispose">dispose<span class="signature">(rowDef)</span></h4>                            <div class="description">        For mapping row Id by Array.map()    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowDef</div>                        <div class="type">                            <span class="param-type"><a href="RowDefinition.html">RowDefinition</a></span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id=".hasChain">hasChain<span class="signature">(rowDef)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowDef</div>                        <div class="type">                            <span class="param-type"><a href="RowDefinition.html">RowDefinition</a></span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">boolean</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id=".toRowId">toRowId<span class="signature">(rowDef)</span></h4>                            <div class="description">        For mapping row Id by Array.map()    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowDef</div>                        <div class="type">                            <span class="param-type"><a href="RowDefinition.html">RowDefinition</a></span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">string</span>    </div><div class="sub-content-desc">    Row Id will never be empty string unless the row has been removed</div>                </div>                    
@@ -32,11 +32,11 @@
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="getRic">getRic<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">string</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="getRowData">getRowData<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">Object</span>    </div><div class="sub-content-desc">    rowData</div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="getRowId">getRowId<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">string</span>    </div><div class="sub-content-desc">    Row Id will never be empty string unless the row has been removed</div>                </div>                    
+<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="getRowInfo">getRowInfo<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">Object</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="getSymbol">getSymbol<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">string</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="getType">getType<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">string</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="getUpdates">getUpdates<span class="signature">()</span></h4>                            <div class="description">        If there is no update, this method returns null    </div>                        <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">Object.&lt;string, number&gt;</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="getUserInput">getUserInput<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">string</span>    </div>                </div>                    
-<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="getUserModel">getUserModel<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">Object</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="initialize">initialize<span class="signature">(rowOptions<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">rowOptions</div>                        <div class="type">                            <span class="param-type"><a href="RowDefinition.html#~Options">RowDefinition~Options</a></span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="isAutoGenerated">isAutoGenerated<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">boolean</span>    </div>                </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="isChain">isChain<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">boolean</span>    </div>                </div>                    
@@ -51,6 +51,7 @@
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="setData">setData<span class="signature">(field, value)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">field</div>                        <div class="type">                            <span class="param-type">string</span>                        </div>                                            </div>                <div class="param">                            <div class="name">value</div>                        <div class="type">                            <span class="param-type">*</span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="setDataSource">setDataSource<span class="signature">(dataSource)</span></h4>                            <div class="description">        This method should always be called right after the initialization    </div>                            <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">dataSource</div>                        <div class="type">                            <span class="param-type">DataCache</span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="setRowData">setRowData<span class="signature">(data)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">data</div>                        <div class="type">                            <span class="param-type">Object.&lt;string, *&gt;</span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
+<div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="setRowInfo">setRowInfo<span class="signature">(obj)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">obj</div>                        <div class="type">                            <span class="param-type">Object</span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="setStaticData">setStaticData<span class="signature">(field, value)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">field</div>                        <div class="type">                            <span class="param-type">string</span>                        </div>                                            </div>                <div class="param">                            <div class="name">value</div>                        <div class="type">                            <span class="param-type">*</span>                        </div>                                            </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="setStaticRowData">setStaticRowData<span class="signature">(data, opt_fields<span class="signature-attributes">opt</span>)</span></h4>                                                <h5>Parameters:</h5>        <div class="params">        <div class="param">                            <div class="name">data</div>                        <div class="type">                            <span class="param-type">Object.&lt;string, *&gt;</span> | <span class="param-type">Array</span>                        </div>                            <div class="attributes">                                                                </div>                                            </div>                <div class="param">                            <div class="name">opt_fields</div>                        <div class="type">                            <span class="param-type">Array.&lt;string&gt;</span>                        </div>                            <div class="attributes">                                    &lt;optional&gt;                                                                </div>                                                    <div class="description">                    In case of the given data is an array, this param will be used for mapping index to field                </div>                    </div>            </div>        <div class="details">                                                            </div>                                    </div>                    
 <div class="item">                                <div class="item-type">function</div>                        <h4 class="name" id="subscribeForUpdates">subscribeForUpdates<span class="signature">()</span></h4>                                            <div class="details">                                                            </div>                                <h5>Returns:</h5>                    <div class="sub-content">        <span class="param-type">boolean</span>    </div><div class="sub-content-desc">    If a subscription is made, return true.</div>                </div>                    
diff --git a/book/en/columns/column-alignment.html b/book/en/columns/column-alignment.html
index ad7cbc67..0ce39b63 100644
--- a/book/en/columns/column-alignment.html
+++ b/book/en/columns/column-alignment.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-alignment" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-alignment">Column Alignment</h1>
             <p>Column content can be aligned to the <em>left</em>, <em>center</em>, or <em>right</em> using the property <code>alignment</code> in the column definition. The <code>alignment</code> property will be applied for both column content and header by default. </p>
             <p>Column header alignment can be separately set on <code>headerAlignment</code> property. The <code>headerAlignment</code> property will override the <code>alignment</code> property for the column header. </p>
diff --git a/book/en/columns/column-formatter.html b/book/en/columns/column-formatter.html
index 91e63e27..d126983c 100644
--- a/book/en/columns/column-formatter.html
+++ b/book/en/columns/column-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-formatter">Column Formatter</h1>
             <p>This page has moved to the <a href="../rendering/custom-formatter.html">Custom Formatter</a> page in the Rendering section.</p>
             <p>If you don't want to create a custom formatter yourself, check out the <a href="../rendering/predefined-formatter.html">predefined formatters</a>.</p>
diff --git a/book/en/columns/column-freezing.html b/book/en/columns/column-freezing.html
index ab402708..611b0652 100644
--- a/book/en/columns/column-freezing.html
+++ b/book/en/columns/column-freezing.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-freezing" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-freezing">Column Freezing</h1>
             <p>This page has moved to the <a href="../scrollbars/left-side-column-pinning.html">Scrollbars</a> section.</p>
           </pandora-page>
diff --git a/book/en/columns/column-grouping.html b/book/en/columns/column-grouping.html
index c1fd0529..7c2c4b93 100644
--- a/book/en/columns/column-grouping.html
+++ b/book/en/columns/column-grouping.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-grouping" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-grouping">Column Grouping</h1>
             <p>This page has moved to the <a href="../extensions/tr-grid-column-grouping.html">Column Grouping Extension</a> page.</p>
           </pandora-page>
diff --git a/book/en/columns/column-moving.html b/book/en/columns/column-moving.html
index d80d6fa0..0c098695 100644
--- a/book/en/columns/column-moving.html
+++ b/book/en/columns/column-moving.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-moving" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-moving">Column Moving</h1>
             <h2 id="drag-and-drop">Drag and drop</h2>
             <p>The ability of drag and drop column is enabled by default. But it can be turned off by setting <code>noColumnDragging</code> to <em>true</em>. The default value is <em>false</em>. </p>
diff --git a/book/en/columns/column-pinning.html b/book/en/columns/column-pinning.html
index b54a2213..78de10a8 100644
--- a/book/en/columns/column-pinning.html
+++ b/book/en/columns/column-pinning.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-pinning" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-pinning">Column - Pinning</h1>
             <p>This page has moved to the <a href="../scrollbars/left-side-column-pinning.html">Scrollbars</a> section.</p>
           </pandora-page>
diff --git a/book/en/columns/column-reordering.html b/book/en/columns/column-reordering.html
index 9aa82945..18f9fa89 100644
--- a/book/en/columns/column-reordering.html
+++ b/book/en/columns/column-reordering.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-reordering" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-reordering">Column Reordering</h1>
             <p>This page has moved to the <a href="./column-moving.html">Column Moving</a> page.</p>
           </pandora-page>
diff --git a/book/en/columns/column-resetting.html b/book/en/columns/column-resetting.html
index 0f7f9a5b..8a0e6fd9 100644
--- a/book/en/columns/column-resetting.html
+++ b/book/en/columns/column-resetting.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-resetting" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-resetting">Column Resetting</h1>
             <p>To change or reset an entire set of columns, see <a href="../data/columns-and-data.html">Columns and Data</a> in the Data section.</p>
           </pandora-page>
diff --git a/book/en/columns/column-styling.html b/book/en/columns/column-styling.html
index ba491cfb..c7933a4c 100644
--- a/book/en/columns/column-styling.html
+++ b/book/en/columns/column-styling.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-styling" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-styling">Column Styling</h1>
             <p>Columns can be styled by using CSS in the <code>styles</code> property of the column definition.</p>
             <h2 id="example">Example</h2>
diff --git a/book/en/columns/column-width.html b/book/en/columns/column-width.html
index 7c541f46..5bd93c9c 100644
--- a/book/en/columns/column-width.html
+++ b/book/en/columns/column-width.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/column-width" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="column-width">Column Width</h1>
             <p>Column widths can be defined in the following ways:</p>
             <ul>
diff --git a/book/en/columns/custom-title-formatter.html b/book/en/columns/custom-title-formatter.html
index 5ff6eba7..906192d3 100644
--- a/book/en/columns/custom-title-formatter.html
+++ b/book/en/columns/custom-title-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/custom-title-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="custom-header-title">Custom header/title</h1>
             <p>You can display anything you want on grid's column header/title by using <code>headerBinding</code>. The binding works in similar way to content binding, where the method will be executed each time grid's header gets updated. <code>columnDef</code> is supplied in the event argument to provide additional information about the column header being rendered. </p>
             <pre><code><span class="hljs-keyword">var</span> customFormatter = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
diff --git a/book/en/columns/dynamic-add-insert-column.html b/book/en/columns/dynamic-add-insert-column.html
index c26ff80e..ad17b3cb 100644
--- a/book/en/columns/dynamic-add-insert-column.html
+++ b/book/en/columns/dynamic-add-insert-column.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/dynamic-add-insert-column" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="insert-column">Insert Column</h1>
             <p>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.</p>
             <p>Use the <code>insertColumn()</code> methods to insert a column with its configuration.</p>
diff --git a/book/en/columns/dynamic-remove-column.html b/book/en/columns/dynamic-remove-column.html
index 2a960905..456fb992 100644
--- a/book/en/columns/dynamic-remove-column.html
+++ b/book/en/columns/dynamic-remove-column.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/columns/dynamic-remove-column" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="hide-remove-column">Hide/remove Column</h1>
             <p>You can choose to hide a column in the column definition by toggling the property <code>visible</code> between <em>true</em> and <em>false</em>. Columns can be hidden/removed dynamically at runtime. You can remove multiple columns in one method call to boost performance.</p>
             <p>Use the <code>hideColumn()</code> method to set the visibility of the specified column (that is, hide or show the column).</p>
diff --git a/book/en/data/columns-and-data.html b/book/en/data/columns-and-data.html
index c2dded68..3a31125b 100644
--- a/book/en/data/columns-and-data.html
+++ b/book/en/data/columns-and-data.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/data/columns-and-data" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="columns-and-data-properties">Columns and Data Properties</h1>
             <p>Grid provides <code>columns</code> and <code>data</code> properties that allow clearing and setting new data/column set at runtime.</p>
             <blockquote>
diff --git a/book/en/data/create.html b/book/en/data/create.html
index 1732d6b3..43a2b946 100644
--- a/book/en/data/create.html
+++ b/book/en/data/create.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/data/create" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="creating-and-adding-data">Creating and Adding Data</h1>
             <p>Grid can be created with data by providing <code>staticDataRows</code> in the grid configuration object as described on <a href="../general_concept/initializing-data.html">the Initializing Data page</a>. However, <code>staticDataRows</code> is entirely optional. You can add additional data to Grid at runtime by using Grid's <a href="../apis/README.html">APIs</a>. Adding data after initialization can be useful when you have some data from real-time sources or servers.</p>
             <blockquote>
diff --git a/book/en/data/data-conversion.html b/book/en/data/data-conversion.html
index 689ba9e2..1c100a4e 100644
--- a/book/en/data/data-conversion.html
+++ b/book/en/data/data-conversion.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/data/data-conversion" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="data-conversion">Data conversion</h1>
             <p>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 <code>dataComposed</code> event and <code>autoDateConversion</code> for this kind of task.</p>
             <h2 id="datacomposed-event">dataComposed event</h2>
diff --git a/book/en/data/delete.html b/book/en/data/delete.html
index eb70265c..32203c02 100644
--- a/book/en/data/delete.html
+++ b/book/en/data/delete.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/data/delete" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="deleting-or-removing-data">Deleting or Removing Data</h1>
             <p>Use <code>removeRow(rowRef)</code> to remove the specified row. </p>
             <pre><code>grid.api.insertRows([
diff --git a/book/en/data/read.html b/book/en/data/read.html
index 67899b9a..f27b3824 100644
--- a/book/en/data/read.html
+++ b/book/en/data/read.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/data/read" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="reading-or-getting-data">Reading or Getting Data</h1>
             <p>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 <a href="../apis/README.html">APIs</a>.</p>
             <h2 id="apis">APIs</h2>
diff --git a/book/en/data/update.html b/book/en/data/update.html
index d9b02d92..e14f2e8a 100644
--- a/book/en/data/update.html
+++ b/book/en/data/update.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/data/update" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="updating-data">Updating Data</h1>
             <p>The row order can be shifted by data manipulation, such as sorting and filtering. So, the <strong>row index</strong> is not good for referencing or storing/saving operations. A <strong>RowDefinition</strong> 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 <code>setRowData()</code> method to update the data. </p>
             <h2 id="updating-a-row">Updating a row</h2>
diff --git a/book/en/extensions/README.html b/book/en/extensions/README.html
index 367d75ed..6b9b8e58 100644
--- a/book/en/extensions/README.html
+++ b/book/en/extensions/README.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/readme" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="overview">Overview</h1>
             <p><strong>Grid extensions</strong> provide enhancements for the <code>efx-grid</code> element and the underlying core library. This allows for greater extensibility without increasing the size of the main code base.</p>
             <h2 id="setup-guide">Setup guide</h2>
diff --git a/book/en/extensions/column-dragging.html b/book/en/extensions/column-dragging.html
index 753a5d9f..2c430c9c 100644
--- a/book/en/extensions/column-dragging.html
+++ b/book/en/extensions/column-dragging.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/column-dragging" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="column-dragging">Column Dragging</h2>
diff --git a/book/en/extensions/row-segmenting.html b/book/en/extensions/row-segmenting.html
index 05646848..bb301f1f 100644
--- a/book/en/extensions/row-segmenting.html
+++ b/book/en/extensions/row-segmenting.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/row-segmenting" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="row-segmenting">Row Segmenting</h2>
diff --git a/book/en/extensions/statistics-row.html b/book/en/extensions/statistics-row.html
index da6efe41..7441a750 100644
--- a/book/en/extensions/statistics-row.html
+++ b/book/en/extensions/statistics-row.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/statistics-row" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="statistics-row">Statistics Row</h2>
diff --git a/book/en/extensions/tr-grid-auto-tooltip.html b/book/en/extensions/tr-grid-auto-tooltip.html
index 70dc0d81..225d5def 100644
--- a/book/en/extensions/tr-grid-auto-tooltip.html
+++ b/book/en/extensions/tr-grid-auto-tooltip.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-auto-tooltip" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="auto-tooltip">Auto Tooltip</h2>
diff --git a/book/en/extensions/tr-grid-cell-selection.html b/book/en/extensions/tr-grid-cell-selection.html
index 02551d9c..db19145a 100644
--- a/book/en/extensions/tr-grid-cell-selection.html
+++ b/book/en/extensions/tr-grid-cell-selection.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-cell-selection" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="cell-selection">Cell Selection</h2>
diff --git a/book/en/extensions/tr-grid-checkbox.html b/book/en/extensions/tr-grid-checkbox.html
index 4279ed6a..e6307edf 100644
--- a/book/en/extensions/tr-grid-checkbox.html
+++ b/book/en/extensions/tr-grid-checkbox.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-checkbox" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="checkbox-column">Checkbox Column</h2>
diff --git a/book/en/extensions/tr-grid-column-fitter.html b/book/en/extensions/tr-grid-column-fitter.html
index 8a7138b9..6872ee7c 100644
--- a/book/en/extensions/tr-grid-column-fitter.html
+++ b/book/en/extensions/tr-grid-column-fitter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-column-fitter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="column-fitter">Column Fitter</h2>
diff --git a/book/en/extensions/tr-grid-column-formatting.html b/book/en/extensions/tr-grid-column-formatting.html
index be77dd16..84fe7fc5 100644
--- a/book/en/extensions/tr-grid-column-formatting.html
+++ b/book/en/extensions/tr-grid-column-formatting.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-column-formatting" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="column-formatting">Column Formatting</h2>
diff --git a/book/en/extensions/tr-grid-column-grouping.html b/book/en/extensions/tr-grid-column-grouping.html
index 2e02bd9e..44ee24ab 100644
--- a/book/en/extensions/tr-grid-column-grouping.html
+++ b/book/en/extensions/tr-grid-column-grouping.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-column-grouping" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="column-grouping">Column Grouping</h2>
diff --git a/book/en/extensions/tr-grid-column-resizing.html b/book/en/extensions/tr-grid-column-resizing.html
index f9a702d8..bf5f6448 100644
--- a/book/en/extensions/tr-grid-column-resizing.html
+++ b/book/en/extensions/tr-grid-column-resizing.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-column-resizing" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="column-resizing">Column Resizing</h2>
diff --git a/book/en/extensions/tr-grid-column-selection.html b/book/en/extensions/tr-grid-column-selection.html
index bbe37285..56ff554f 100644
--- a/book/en/extensions/tr-grid-column-selection.html
+++ b/book/en/extensions/tr-grid-column-selection.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-column-selection" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="column-selection">Column Selection</h2>
diff --git a/book/en/extensions/tr-grid-column-stack.html b/book/en/extensions/tr-grid-column-stack.html
index bd2e52a5..7b8960d4 100644
--- a/book/en/extensions/tr-grid-column-stack.html
+++ b/book/en/extensions/tr-grid-column-stack.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-column-stack" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="column-stack">Column Stack</h2>
diff --git a/book/en/extensions/tr-grid-conditional-coloring.html b/book/en/extensions/tr-grid-conditional-coloring.html
index 927e67b6..272d8075 100644
--- a/book/en/extensions/tr-grid-conditional-coloring.html
+++ b/book/en/extensions/tr-grid-conditional-coloring.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-conditional-coloring" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="conditional-coloring">Conditional Coloring</h2>
diff --git a/book/en/extensions/tr-grid-content-wrap.html b/book/en/extensions/tr-grid-content-wrap.html
index eadc0618..a951db20 100644
--- a/book/en/extensions/tr-grid-content-wrap.html
+++ b/book/en/extensions/tr-grid-content-wrap.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-content-wrap" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="content-wrap">Content Wrap</h2>
diff --git a/book/en/extensions/tr-grid-contextmenu.html b/book/en/extensions/tr-grid-contextmenu.html
index ec8fd67f..7edd9853 100644
--- a/book/en/extensions/tr-grid-contextmenu.html
+++ b/book/en/extensions/tr-grid-contextmenu.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-contextmenu" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="context-menu">Context Menu</h2>
diff --git a/book/en/extensions/tr-grid-filter-input.html b/book/en/extensions/tr-grid-filter-input.html
index 2070bfec..42007293 100644
--- a/book/en/extensions/tr-grid-filter-input.html
+++ b/book/en/extensions/tr-grid-filter-input.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-filter-input" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="filter-input">Filter Input</h2>
diff --git a/book/en/extensions/tr-grid-heat-map.html b/book/en/extensions/tr-grid-heat-map.html
index 94a4e034..a2979b82 100644
--- a/book/en/extensions/tr-grid-heat-map.html
+++ b/book/en/extensions/tr-grid-heat-map.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-heat-map" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="heat-map">Heat Map</h2>
diff --git a/book/en/extensions/tr-grid-in-cell-editing.html b/book/en/extensions/tr-grid-in-cell-editing.html
index a68201a2..b818fe00 100644
--- a/book/en/extensions/tr-grid-in-cell-editing.html
+++ b/book/en/extensions/tr-grid-in-cell-editing.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-in-cell-editing" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="in-cell-editing">In-Cell Editing</h2>
diff --git a/book/en/extensions/tr-grid-pagination.html b/book/en/extensions/tr-grid-pagination.html
index 021ca12c..246022de 100644
--- a/book/en/extensions/tr-grid-pagination.html
+++ b/book/en/extensions/tr-grid-pagination.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-pagination" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="pagination">Pagination</h2>
diff --git a/book/en/extensions/tr-grid-percent-bar.html b/book/en/extensions/tr-grid-percent-bar.html
index e57119d8..a021535b 100644
--- a/book/en/extensions/tr-grid-percent-bar.html
+++ b/book/en/extensions/tr-grid-percent-bar.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-percent-bar" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="percent-bar">Percent Bar</h2>
diff --git a/book/en/extensions/tr-grid-range-bar.html b/book/en/extensions/tr-grid-range-bar.html
index bba647b4..fc700281 100644
--- a/book/en/extensions/tr-grid-range-bar.html
+++ b/book/en/extensions/tr-grid-range-bar.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-range-bar" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="range-bar">Range Bar</h2>
diff --git a/book/en/extensions/tr-grid-row-dragging.html b/book/en/extensions/tr-grid-row-dragging.html
index d80a35c3..32d261aa 100644
--- a/book/en/extensions/tr-grid-row-dragging.html
+++ b/book/en/extensions/tr-grid-row-dragging.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-row-dragging" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="row-dragging">Row Dragging</h2>
diff --git a/book/en/extensions/tr-grid-row-filtering.html b/book/en/extensions/tr-grid-row-filtering.html
index ee47a41e..5286e547 100644
--- a/book/en/extensions/tr-grid-row-filtering.html
+++ b/book/en/extensions/tr-grid-row-filtering.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-row-filtering" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="row-filtering">Row Filtering</h2>
diff --git a/book/en/extensions/tr-grid-row-grouping.html b/book/en/extensions/tr-grid-row-grouping.html
index cd2343a2..ca079391 100644
--- a/book/en/extensions/tr-grid-row-grouping.html
+++ b/book/en/extensions/tr-grid-row-grouping.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-row-grouping" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="row-grouping">Row Grouping</h2>
diff --git a/book/en/extensions/tr-grid-row-selection.html b/book/en/extensions/tr-grid-row-selection.html
index f273f2b7..bab14fa6 100644
--- a/book/en/extensions/tr-grid-row-selection.html
+++ b/book/en/extensions/tr-grid-row-selection.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-row-selection" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="row-selection">Row Selection</h2>
diff --git a/book/en/extensions/tr-grid-rowcoloring.html b/book/en/extensions/tr-grid-rowcoloring.html
index 39290b87..9e14a2c0 100644
--- a/book/en/extensions/tr-grid-rowcoloring.html
+++ b/book/en/extensions/tr-grid-rowcoloring.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-rowcoloring" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="row-coloring">Row Coloring</h2>
diff --git a/book/en/extensions/tr-grid-textformatting.html b/book/en/extensions/tr-grid-textformatting.html
index ae6bc05e..291d8a9b 100644
--- a/book/en/extensions/tr-grid-textformatting.html
+++ b/book/en/extensions/tr-grid-textformatting.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-textformatting" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="text-formatting">Text Formatting</h2>
diff --git a/book/en/extensions/tr-grid-titlewrap.html b/book/en/extensions/tr-grid-titlewrap.html
index a3eadcae..a9f03d3c 100644
--- a/book/en/extensions/tr-grid-titlewrap.html
+++ b/book/en/extensions/tr-grid-titlewrap.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/tr-grid-titlewrap" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="title-wrap">Title Wrap</h2>
diff --git a/book/en/extensions/zoom.html b/book/en/extensions/zoom.html
index caf5fc2d..5d4f17c2 100644
--- a/book/en/extensions/zoom.html
+++ b/book/en/extensions/zoom.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/extensions/zoom" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="zoom">Zoom</h2>
diff --git a/book/en/filtering/custom-filter.html b/book/en/filtering/custom-filter.html
index ae2e6144..d7dc9a64 100644
--- a/book/en/filtering/custom-filter.html
+++ b/book/en/filtering/custom-filter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/filtering/custom-filter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="custom-filter-ui">Custom Filter UI</h1>
             <p>Apart from the built-in filter UIs, <a href="../extensions/tr-grid-filter-input.html">Filter Input Extension</a> also supports UI customizations, which allows users to create their UI.</p>
             <p>The Filter Input Extension provides an <code>inputCreated</code> 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 <a href="../extensions/tr-grid-filter-input.html">here</a>. The following example shows the first column:</p>
diff --git a/book/en/filtering/filtering-auto-filter-row.html b/book/en/filtering/filtering-auto-filter-row.html
index 6240f0e6..23d0392a 100644
--- a/book/en/filtering/filtering-auto-filter-row.html
+++ b/book/en/filtering/filtering-auto-filter-row.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/filtering/filtering-auto-filter-row" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="filter-ui">Filter UI</h1>
             <p>Rows can be filtered automatically using the <a href="../extensions/tr-grid-filter-input.html">Filter Input Extension</a> and <a href="../extensions/tr-grid-row-filtering.html">Row Filter Extension</a>.</p>
             <p>The <code>Filter Input Extension</code> provides built-in filter UIs, which is a form input element appearing between the title section and content section.</p>
diff --git a/book/en/filtering/filtering-get-reset.html b/book/en/filtering/filtering-get-reset.html
index 696ce0ad..4973a782 100644
--- a/book/en/filtering/filtering-get-reset.html
+++ b/book/en/filtering/filtering-get-reset.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/filtering/filtering-get-reset" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="get-reset-state">Get/Reset State</h1>
             <p>The <a href="../extensions/tr-grid-row-filtering.html">Row Filtering Extension</a> provides APIs such as:</p>
             <ul>
diff --git a/book/en/filtering/filtering-programmatically.html b/book/en/filtering/filtering-programmatically.html
index 329626b6..2a042b7c 100644
--- a/book/en/filtering/filtering-programmatically.html
+++ b/book/en/filtering/filtering-programmatically.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/filtering/filtering-programmatically" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="filtering-programmatic">Filtering - Programmatic</h1>
             <p>Rows can be filtered programmatically using the <a href="../extensions/tr-grid-row-filtering.html">Row Filtering Extension</a> through the <code>extension.setColumnFilter(colIndex, expression, context)</code> API, which accepts a filter expression string or a filter function.</p>
             <p><strong>Filter expression</strong></p>
diff --git a/book/en/general_concept/accessing-data.html b/book/en/general_concept/accessing-data.html
index 7e85f43a..81eaaaa6 100644
--- a/book/en/general_concept/accessing-data.html
+++ b/book/en/general_concept/accessing-data.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/general-concept/accessing-data" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="accessing-grid-data">Accessing Grid data</h1>
             <p>Grid has its own data store, but you cannot directly change or get the data from the <code>staticDataRows</code> 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 <code>staticDataRows</code>. So, all data manipulation and accessing must be done through <a href="../apis/README.html">APIs</a>. </p>
             <p>The following are some of the commonly used APIs:</p>
diff --git a/book/en/general_concept/basic.html b/book/en/general_concept/basic.html
index 55d40c8e..4ff457d8 100644
--- a/book/en/general_concept/basic.html
+++ b/book/en/general_concept/basic.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/general-concept/basic" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="basic-grid-creation">Basic Grid creation</h1>
             <p>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). </p>
             <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">efx-grid</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">efx-grid</span>&gt;</span></code></pre>
diff --git a/book/en/general_concept/disposing-grid.html b/book/en/general_concept/disposing-grid.html
index e83b2489..9bf27d50 100644
--- a/book/en/general_concept/disposing-grid.html
+++ b/book/en/general_concept/disposing-grid.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/general-concept/disposing-grid" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="disposing-grid">Disposing Grid</h1>
             <p>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.</p>
             <p>To dispose grid, you can set <code>config</code> property to <code>null</code> as shown below:</p>
diff --git a/book/en/general_concept/event-listeners.html b/book/en/general_concept/event-listeners.html
index c08740de..7e5ef674 100644
--- a/book/en/general_concept/event-listeners.html
+++ b/book/en/general_concept/event-listeners.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/general-concept/event-listeners" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="event-listeners">Event Listeners</h1>
             <p>Since Grid is element, you can directly listen for events from it. It's recommended to listen for native events and then use the <code>getRelativePosition()</code> 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 <code>getRelativePosition()</code> method.</p>
             <h2 id="click">Click</h2>
diff --git a/book/en/general_concept/initializing-data.html b/book/en/general_concept/initializing-data.html
index 81a1b8a0..97dc90fe 100644
--- a/book/en/general_concept/initializing-data.html
+++ b/book/en/general_concept/initializing-data.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/general-concept/initializing-data" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="initializing-data">Initializing data</h1>
             <p>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. </p>
             <p>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. </p>
diff --git a/book/en/getting_started/angular_guide.html b/book/en/getting_started/angular_guide.html
index aa461cd6..db9e1665 100644
--- a/book/en/getting_started/angular_guide.html
+++ b/book/en/getting_started/angular_guide.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/getting-started/angular-guide" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="using-efx-grid-with-angular">Using EFX Grid with Angular</h1>
             <p>For using <code>EFX Grid</code> with Angular, first you are required to install <code>@refinitiv-ui/efx-grid</code> in your project.</p>
             <pre><code>npm install @refinitiv-ui/efx-grid</code></pre>
diff --git a/book/en/getting_started/overview.html b/book/en/getting_started/overview.html
index 86e73583..3517926e 100644
--- a/book/en/getting_started/overview.html
+++ b/book/en/getting_started/overview.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/getting-started/overview" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h2 id="efx-grid">EFX Grid</h2>
             <p>EFX Grid is a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">custom element</a>, providing simple ways to display and manipulate data in table layout. All HTML native properties and events are available in EFX Grid. It can be easily created by just writing the tag and setting the configuration as shown below:</p>
             <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
diff --git a/book/en/getting_started/react_guide.html b/book/en/getting_started/react_guide.html
index 4104b743..88272621 100644
--- a/book/en/getting_started/react_guide.html
+++ b/book/en/getting_started/react_guide.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/getting-started/react-guide" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="using-efx-grid-with-react">Using EFX Grid with React</h1>
             <p>For using <code>EFX Grid</code> with React, first you are required to install <code>@refinitiv-ui/efx-grid</code> and <code>@lit-labs/react</code> in your project.</p>
             <pre><code>npm install @refinitiv-ui/efx-grid
diff --git a/book/en/getting_started/typescript.html b/book/en/getting_started/typescript.html
index a596417d..e31f3080 100644
--- a/book/en/getting_started/typescript.html
+++ b/book/en/getting_started/typescript.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/getting-started/typescript" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="using-typescript-with-grid">Using TypeScript with Grid</h1>
             <p><a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> is a typed superset of JavaScript that compiles to plain JavaScript.</p>
             <p>To apply Typescript for <code>EFX Grid</code>, first you are required to install <code>@refinitiv-ui/efx-grid</code> in your project.</p>
diff --git a/book/en/index.html b/book/en/index.html
index 594f1f1a..f0ff0cf2 100644
--- a/book/en/index.html
+++ b/book/en/index.html
@@ -10,7 +10,7 @@
   <script defer src="../../resources/scripts/book.js"></script>
   <script defer src="./search.index.js"></script>
   <link rel="icon" href="resources/images/icon.png">
-<script src="node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="./index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="./index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="grid">Grid</h1>
             <p>Grid has been created to handle a large number of rows. It achieves high performance by utilizing a <strong>row virtualization</strong> technique, and all of the display logics and layouts are calculated programmatically. So, it lacks the flexibility of managing the layout when compared to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table" target="_blank">native table</a>. Grid can be viewed to have 3 layers of controls. The outer layer is EFX Grid, which provides high level configuration through HTML properties and attributes. The middle layer is API instance, which provides most runtime interactions through JavaScript methods. The inner layer is Core Grid, which provides internal interaction with UI elements.</p>
             <h2 id="installation">Installation</h2>
diff --git a/book/en/license.html b/book/en/license.html
index bb4bad49..5960e602 100644
--- a/book/en/license.html
+++ b/book/en/license.html
@@ -10,7 +10,7 @@
   <script defer src="../../resources/scripts/book.js"></script>
   <script defer src="./search.index.js"></script>
   <link rel="icon" href="resources/images/icon.png">
-<script src="node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="./index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="./index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/license" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="grid-s-license">Grid's License</h1>
             <p>Copyright © 2022 LSEG. All rights reserved.</p>
             <p>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:</p>
diff --git a/book/en/migrating/from-emerald-grid.html b/book/en/migrating/from-emerald-grid.html
index 00eac2da..ecd12284 100644
--- a/book/en/migrating/from-emerald-grid.html
+++ b/book/en/migrating/from-emerald-grid.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/migrating/from-emerald-grid" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="migrating-from-emerald-grid">Migrating from Emerald Grid</h1>
             <p>Emerald Grid has a lot of built-in features which make it big. Moving from Emerald Grid to EFX Grid usually involves around using extensions as a replacement for the built-ins. In this guide, we are going to list out all the differences and how you can migrate those features to EFX grid. </p>
             <h2 id="deprecated-properties">Deprecated properties</h2>
diff --git a/book/en/misc/core-apis.html b/book/en/misc/core-apis.html
index bb2a4a5e..4c11dd86 100644
--- a/book/en/misc/core-apis.html
+++ b/book/en/misc/core-apis.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/misc/core-apis" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="using-core-apis">Using Core APIs</h1>
             <p>Core Grid is the internal part of Grid, containing logics for UI and layout manipulation. Grid is just a wrapper that make the JavaScript grid component (Core Grid) become a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">custom element</a> in the <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Components</a> standard. </p>
             <p>Some of the APIs are already propagated and exposed to the <code>api</code> property of the element. However, most of the APIs are still only available in the core part of Grid. </p>
diff --git a/book/en/misc/fifty-thosand-rows.html b/book/en/misc/fifty-thosand-rows.html
index b29e1aac..7b055efd 100644
--- a/book/en/misc/fifty-thosand-rows.html
+++ b/book/en/misc/fifty-thosand-rows.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/misc/fifty-thosand-rows" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="handling-50-000-rows">Handling 50,000 Rows</h1>
             <p>Grid utilizes a virtual rendering technique that renders a range of visible rows and uses/shares the same cells across multiple rows. This allows you to display an extraordinarily large number of rows on the grid, as shown in the example below.</p>
             <blockquote>
diff --git a/book/en/misc/loading-mask.html b/book/en/misc/loading-mask.html
index f835be99..936641ff 100644
--- a/book/en/misc/loading-mask.html
+++ b/book/en/misc/loading-mask.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/misc/loading-mask" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="loading-mask">Loading Mask</h1>
             <p>Loading mask is not part of Grid. To follow the standard theme, the UI and functionalities are provided by <a href="https://ui.refinitiv.com/elements/loader" target="_blank">loader</a> 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.</p>
             <h2 id="basic-example">Basic Example</h2>
diff --git a/book/en/misc/pagination.html b/book/en/misc/pagination.html
index bb2dcc34..27cb91d7 100644
--- a/book/en/misc/pagination.html
+++ b/book/en/misc/pagination.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/misc/pagination" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="server-side-pagination">Server Side Pagination</h1>
             <p>In case you want to retrieve a chunk of data from the server and do not want to load all of the data at once, you need to do server side pagination. The <a href="https://ui.refinitiv.com/elements/pagination" target="_blank">pagination</a> component is enough to do this. <strong>Do not</strong> use the Pagination Extension for server side pagination. </p>
             <p>All related logics (such as data requesting, validation, and transformation) must be implemented on the application side. Once data is received, you can just assign data to Grid's <code>data</code> property. </p>
diff --git a/book/en/misc/row-expansion.html b/book/en/misc/row-expansion.html
index 16c48496..0d99d102 100644
--- a/book/en/misc/row-expansion.html
+++ b/book/en/misc/row-expansion.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/misc/row-expansion" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="general-concepts-and-row-expansion-apis">General Concepts and Row Expansion APIs</h1>
             <p>Row expansion is an extra row that is extended directly from a normal row. It's a great place to show extra information which cannot normally be shown on a single row. </p>
             <p>It looks just like a normal row but, unlike a normal row, it has no data from the main data table associated with it. This means that the states or data of the row expansion have to come from the expanded row. Grid will not perform sorting or filtering on the row expansion, as it has no data. </p>
diff --git a/book/en/misc/row-span.html b/book/en/misc/row-span.html
index 848ba1df..49922948 100644
--- a/book/en/misc/row-span.html
+++ b/book/en/misc/row-span.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/misc/row-span" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="row-span">Row Span</h1>
             <p>Setting row span on a cell can be done through Core Grid API (e.g., <code>setCellRowSpan</code>). A cell with row span will simply be expanded on top of cells below it. Cells are not actually merged by row span, but appeared as if they are merged together.</p>
             <p>Since cells in grid are reused across multiple rows by default, <code>rowVirtualization</code> need to be turned off for row span to work properly.</p>
diff --git a/book/en/misc/text-selection.html b/book/en/misc/text-selection.html
index 8b37e806..1aa85a6c 100644
--- a/book/en/misc/text-selection.html
+++ b/book/en/misc/text-selection.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/misc/text-selection" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="text-selection">Text Selection</h1>
             <p>Text selection has 2 scopes. It's grid scope and column scope. The default value of text selection is disabled, but you can enable it. If you enable it, users can select text in scope.</p>
             <ul>
diff --git a/book/en/node_modules/tr-grid-percent-bar/dist/tr-grid-percent-bar.min.js b/book/en/node_modules/tr-grid-percent-bar/dist/tr-grid-percent-bar.min.js
index 1c78a229..030a1db4 100644
--- a/book/en/node_modules/tr-grid-percent-bar/dist/tr-grid-percent-bar.min.js
+++ b/book/en/node_modules/tr-grid-percent-bar/dist/tr-grid-percent-bar.min.js
@@ -1 +1 @@
-!function(e){var t={};function n(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,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},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=1)}([function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"c",(function(){return prettifyCss})),__webpack_require__.d(__webpack_exports__,"a",(function(){return injectCss})),__webpack_require__.d(__webpack_exports__,"b",(function(){return nestedObjectToArray})),__webpack_require__.d(__webpack_exports__,"d",(function(){return rgb2Hex}));var Util={post:function(e,t){return Util._post(e,t).then(Util.toJSON)},requestText:function(e,t){return Util._post(e,t,"text/plain").then(Util.toText)},requestByUrlEncoded:function(e,t){return Util._post(e,t,"application/x-www-form-urlencoded").then(Util.toJSON)},toJSON:function(e){return Util._logError(e)?Promise.reject(e):e.json()},toText:function(e){return Util._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,n){var r={method:t?"POST":"GET",headers:{"Content-Type":n||"application/json"}};return t&&(r.body="string"==typeof t?t:JSON.stringify(t)),fetch(e,r)}},extendObject=function(e,t,n){if(!e)return null;if(!t||e===t)return e;var r;if(n)for(var i=n.length,o=0;o<i;++o)(r=n[o])&&extendProperty(e,t,r);else for(r in t)extendProperty(e,t,r);return e},cloneObject=function(e,t){return extendObject({},e,t)},arrayToObject=function(e,t){if(!Array.isArray(e))return e;if(!t)return null;var n=e;e={};for(var r=n.length,i=0;i<r;++i){var o=t[i];o&&void 0!==n[i]&&(e[o]=n[i])}return e},extendProperty=function(e,t,n){var r=t[n];if(null!=r){var i=e[n];Array.isArray(i)?e[n]=i.concat(r):Array.isArray(r)&&i?e[n]=r.concat(i):e[n]=r}},extendArrayProperty=function(e,t,n){var r=null;if(n){var i=e[t];r=i?Array.isArray(i)?i:e[t]=[i]:e[t]=[],Array.isArray(n)?n.length&&(n.length>1?Array.prototype.push.apply(r,n):r.push(n[0])):r.push(n)}return r},_bracketExp=new RegExp(/\[[^\[]*\]/g),parseCondition=function(expression){if(!expression)return null;if("string"!=typeof expression)return"function"==typeof expression?expression:null;for(var brackets=expression.match(_bracketExp),map={},fields=[],len=brackets?brackets.length:0,i=len;--i>=0;){var field=brackets[i];map[field]||(map[field]="f["+fields.length+"]",fields.push(field.substring(1,field.length-1)))}expression=expression.replace(_bracketExp,(function(e){return"rowData["+map[e]+"]"}));var finalExp="(function(f, rowData) { return ("+expression+"); })",fn=null;try{fn=eval(finalExp),fn=fn.bind(null,fields)}catch(e){console.log(e.message)}return fn||null},_encloseBracket=function(e){return Array.isArray(e)?"{\n"+e.join("\n")+"\n}":e},_indentBracketContent=function(e){return e.replace(/\n+/g,"\n\t").replace(/\n\t}$/,"\n}")},prettifyCss=function(e){if(e){var t="";if(Array.isArray(e))t=e.map(_encloseBracket).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,_indentBracketContent)}return""},getShadowRoot=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},injectCss=function(e,t){if(!e)return null;var n=document.createElement("style");n.textContent="\n"+e+"\n";var r,i=getShadowRoot(t),o=!0;return i||(o=!1,i=document.head),o&&i.children&&i.children.length&&(r=i.children[0]),r?i.insertBefore(n,r):i.appendChild(n),n},isIE=function(){var e=window.navigator.userAgent;return e.indexOf("MSIE ")>0||e.indexOf("Trident/")>0||e.indexOf("Edge/")>0},isMac=function(){return/Mac/.test(navigator.platform)},isTouchDevice=function(){return!!(navigator.maxTouchPoints&&navigator.maxTouchPoints<256||navigator.msMaxTouchPoints&&navigator.msMaxTouchPoints<256)},nestedObjectToArray=function(e,t){for(var n in t||(t=[]),e){var r=e[n];"object"==typeof r?nestedObjectToArray(r,t):t.push(r)}return t},rgb2Hex=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 n="#",r=0;r<3;r++){var i=+t[r];i>=16||(n+="0"),n+=i?i.toString(16).toUpperCase():"0"}return n},prepareTSVContent=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):""},_unused_webpack_default_export=Util},function(e,t,n){"use strict";n.r(t);var r={inherits:function(e,t){function n(){}n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e,e.base=function(e,n,r){n||(n="constructor");for(var i=arguments.length,o=new Array(i),l=2;l<i;l++)o[l-2]=arguments[l];return t.prototype[n].apply(e,o)}}},i=function(){};i.prototype._events=null,i.prototype._listenerCount=0,i.prototype.addEventListener=function(e,t){if(e&&t){this._events||(this._events={});var n=this._events[e];n?n.indexOf(t)<0&&(n.push(t),++this._listenerCount):(this._events[e]=[t],++this._listenerCount)}},i.prototype.removeEventListener=function(e,t){var n=this._events?this._events[e]:null;if(n){var r=n.indexOf(t);r>=0&&(n.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 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 r=n.length,i=0;i<r;++i)n[i](t)}};i.preventDefault=function(e){e&&e.preventDefault&&(e.preventDefault(),e.stopPropagation())};var o=function(e,t,n){this.resolve=this.resolve.bind(this),this.reject=this.reject.bind(this),"function"==typeof e&&(this._resolveHandler=e),"function"==typeof t&&(this._rejectHandler=t),null!=n&&(this._ctx=n),this.promise=new Promise(function(e,t){this._resolve=e,this._reject=t}.bind(this))};o.prototype.promise=null,o.prototype._resolve=null,o.prototype._reject=null,o.prototype._resolveHandler=null,o.prototype._rejectHandler=null,o.prototype._ctx=null,o.prototype._fulfilled=!1,o.prototype.resolve=function(e){if(this._resolve){if(this._resolveHandler){var t=this._resolveHandler(e,this._ctx||this);null!=t&&(e=t)}this._resolve(e),this._finally()}},o.prototype.reject=function(e){if(this._reject){if(this._rejectHandler){var t=this._rejectHandler(e,this._ctx||this);null!=t&&(e=t)}this._reject(e),this._finally()}},o.prototype.isFulfilled=function(){return this._fulfilled},o.prototype._finally=function(){this._fulfilled=!0,this._ctx=this._resolveHandler=this._rejectHandler=null,this._resolve=this._reject=null};var l=function(){};r.inherits(l,i),l.prototype._hosts=null,l.prototype._compositeGrid=null,l.prototype._realTimeGrid=null,l.prototype._rowGetter=null,l.prototype._initializedGrid=!1,l.prototype.listen=l.prototype.addEventListener,l.prototype.unlisten=l.prototype.removeEventListener,l.prototype.afterInit=function(e,t,n){var r=null;n&&n.getCoreGrid&&(r=n.getCoreGrid()),r&&(this.getGridApi()||this.setGridWrapper("compositegrid",n),this._compositeGrid&&r.loadPlugin(this,t)),this._initializedGrid||(this._initializedGrid=!0,this._rowGetter=this._realTimeGrid?u:s,this._afterInit())},l.prototype._afterInit=function(){},l.prototype._dispose=function(){this._hosts&&(this._hosts.length||(this._compositeGrid=this._realTimeGrid=null,this._initializedGrid=!1))},l.prototype.hasMultiTableSupport=function(){return!1},l.prototype._prepareEventArguments=function(e,t){return t||(t={}),t.api=this.getGridApi(),t},l.prototype.getName=function(){return"GridPlugin"},l.prototype.initialize=function(e,t){},l.prototype.unload=function(e){this._dispose()},l.prototype.getRelativeGrid=function(e){var t=null;if(e.target){var n=(t=e.target).api;if(n&&n.getCoreGrid)return n.getCoreGrid()}else e.getElement?t=e.getElement():1===e.nodeType&&(t=e);if(t)for(var r=this._hosts.length;--r>=0;){var i=this._hosts[r];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),r=this._realTimeGrid.getColumnDefinition(n);if(r)return r.getName()}return""},l.prototype.getColumnIndex=function(e){if("number"==typeof e)return e;if(this._compositeGrid)return this._compositeGrid.getColumnIndex(e);for(var t=this._realTimeGrid,n=t.getColumnCount(),r=0;r<n;++r){var i=t.getColumnDefinition(r);if(i&&i.getId()===e)return r}return-1},l.prototype.getColumnIndices=function(e){if(this._compositeGrid){for(var t,n=this._compositeGrid.getColumnFields(),r=this._compositeGrid.getColumnCount(),i=[],o=0;o<e.length;o++)if("number"==typeof(t=e[o]))t>=0&&t<r&&i.push(t);else{var l=n.indexOf(t);-1!==l&&i.push(l)}return i}return this._realTimeGrid.getColumnIndices(e)},l.prototype.getColumnId=function(e){if("string"==typeof e)return e;if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var t=this._realTimeGrid.getColumnDefinition(e);return t?t.getId():""},l.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},l.prototype._loadPlugin=function(e,t,n){return e||(e=t.getPlugin(n))||(e=t.loadPlugin(n))&&this._initializedGrid&&(e._initializedGrid=!0),e},l.prototype._requestPlugin=function(e,t,n){return this._initializedGrid?l.requestPlugin(e,t,n,this._compositeGrid,this._realTimeGrid):Promise.reject("Plugin should be requested after the initialization")},l.requestPlugin=function(e,t,n,r,i){var a=null;if(e){var s=null;1===e.nodeType?s=e.api:e.getCoreGrid?s=e:e.getPlugin&&(a=e),s&&(a=s.getCoreGrid(),r||i||(s.getModel?r=s:i=s))}if(!a)return Promise.reject("Cannot find grid element");var u=a.getPlugin(t);if(u)return Promise.resolve(u);var d=new o;return setTimeout(l._onPluginRequested.bind(null,{grid:a,pluginRef:t,compositeGrid:r,realTimeGrid:i,config:n,deferred:d}),10),d.promise},l._onPluginRequested=function(e){var t=e.grid;if(!t.getElement())return e.deferred.reject("Grid has been disposed before the plugin is fully loaded: "+e.pluginRef);var n=t.getPlugin(e.pluginRef);if(n)return e.deferred.resolve(n);var r=!1;return e.pluginRef.beforeInit&&(r=!0,e.pluginRef.beforeInit(t.getElement(),e.config,!0)),(n=t.loadPlugin(e.pluginRef,e.config))?(!r&&n.beforeInit&&(r=!0,n.beforeInit(t.getElement(),e.config)),n.setGridWrapper&&(e.compositeGrid?n.setGridWrapper("compositegrid",e.compositeGrid):e.realTimeGrid&&n.setGridWrapper("realtimegrid",e.realTimeGrid)),n.afterInit&&n.afterInit(),e.deferred.resolve(n)):e.deferred.reject("Unable to load required dependency: "+e.pluginRef)},l.prototype._getPlugin=function(e,t){return null==t&&(t=this._hosts[0]),t?t.getPlugin(e):null},l.prototype._getColumnData=function(e,t){return null==t&&(t=this._hosts[0]),t?t.getColumnData(e):null},l.prototype._getColumnOption=function(e,t,n){var r=this._getColumnData(e,n);return r?r[t]:null},l.prototype._newColumnData=function(e,t){if(null==t&&(t=this._hosts[0]),!t)return{};var n=t.getColumnData(e);return n||(n=t.setColumnData(e,{})),n},l.prototype._getField=function(e){var t=this._compositeGrid||this._realTimeGrid;return t?t.getColumnField(e):""},l.prototype._getRowData=function(e){return this._realTimeGrid&&e?e.ROW_DEF.getRowData():e},l.prototype._getRow=function(e,t){return d(e.getRowDataAt(t))},l.prototype._getData=function(e,t,n){var r=this._getRow(e,t);return r?r[n]:void 0},l.prototype._setData=function(e,t,n,r){if(this._realTimeGrid){var i=e.getRowDataAt(t);i&&i.ROW_DEF.setData(n,r)}else e.setDataAt(t,n,r)},l.prototype._setRowData=function(e,t,n){if(this._realTimeGrid){var r=e.getRowDataAt(t);r&&r.ROW_DEF.setRowData(n)}else e.setRowDataAt(t,n)},l.prototype._setColumnData=function(e,t,n,r){if(r=r||e.getAllRowIds()||[],this._realTimeGrid){for(var i=e.getDataSource(),o=i.freeze(),l=n.length<r.length?n.length:r.length,a=0;a<l;++a){var s=e.getRowData(r[a]);s&&s.ROW_DEF.setData(t,n[a])}i.freeze(o)}else e.setColumnData(t,n,r)},l.prototype._activateColumnRenderer=function(e,t,n){if(null!=e){var r=this._realTimeGrid;r?r.activateColumnRenderer(e,t,n):"function"==typeof n?this._hosts[0].setColumnDataBindingHandler(e,n):this._hosts[0].setColumnDataBindingHandler(e,null)}};var a=function(e,t){var n=t.ROW_DEF.getRowData();return n?n[e]:null},s=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},p=function(e,t){for(var n=t.getAllRowData(),r=n.length,i=new Array(r),o=0;o<r;++o)i[o]=a(e,n[o]);return i},c={create:function(e,t){var n=document.createElement(e);return t&&(n.className=t),n},div:function(e){return c.create("div",e)},text:function(e,t){var n=c.create("span",t);return(e||0===e)&&(n.textContent=e),n},appendChild:function(e,t){if(!e)return null;var n,r;Array.isArray(arguments[1])?(r=arguments[1],n=0):(r=arguments,n=1);for(var i=r.length;n<i;)e.appendChild(r[n]),++n;return e},buildTree:function(e,t){if(!e)return null;for(var n=arguments,r=n.length,i=1;i<r;++i){var o,l=n[i];if(l)Array.isArray(l)?o=c.buildTree.apply(null,l):1===l.nodeType&&(o=l),o&&e.appendChild(o)}return e},removeParent:function(e){if(!e)return null;var t=e.parentNode;return t&&t.removeChild(e),t},setParent:function(e,t){return e?t?(t.appendChild(e),t):c.removeParent(e):null},removeChildren:function(e,t){if(e){var n=e.childNodes.length;for((null==t||t>n)&&(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&&(c.removeChildren(e),e.appendChild(t)):Array.isArray(t)?(c.removeChildren(e),c.appendChild(e,t)):e.textContent=t}else c.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,r=n.length,i=0;i<r;++i){var o=n[i];o&&"string"==typeof o&&e.classList.add(o)}},removeClasses:function(e,t){if(e)for(var n=Array.isArray(t)?t:arguments,r=n.length,i=0;i<r;++i){var o=n[i];o&&"string"==typeof o&&e.classList.remove(o)}},preventDefault:function(e){e.preventDefault(),e.stopPropagation()},stopPropagation:function(e){e.stopPropagation()},getClientPosition:function(e,t){var n=t||{x:0,y:0};if(e.getBoundingClientRect){var r=e.getBoundingClientRect();n.x=r.left,n.y=r.top}else n.x=e.clientX,n.y=e.clientY;return n},getRelativePosition:function(e,t,n){n=c.getClientPosition(e,n);var r=c.getClientPosition(t);return n.x-=r.x,n.y-=r.y,n},closestElement:function(e,t){for(var n=e;n;){if(n.classList&&n.classList.contains(t))return n;n=n.parentNode||n.host}return null},closestTagName:function(e,t){for(var n=e;n;){if(n.tagName&&n.tagName==t)return n;n=n.parentNode||n.host}return null}},h=n(0),_={},f=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},m=function(e,t,n){"attributes"===n.type&&(null!=t?n.attributeName===t&&e(n.target.getAttribute(t)):e(n.target))};_._getNewId=function(){return"observer_"+ ++_._id},_._addObserver=function(e,t,n){var r=n;r||(r={}),r.attributes=!0,_._observer.observe(e,r),_._addListener(e,t)},_._onMutationCallback=function(e){for(var t=0;t<e.length;t++)for(var n=e[t],r=_._listeners[n.target._observeId],i=0;i<r.length;i++)r[i](n)},_._addListener=function(e,t){var n=_._listeners;if(n||(n=_._listeners={}),!e._observeId){var r=_._getNewId();e._observeId=r}n[e._observeId]||(n[e._observeId]=[]);var i=n[e._observeId];i.indexOf(t)<0&&i.push(t)},_.addLanguageListener=function(e){e&&(e.lang=document.documentElement.lang||"en",_._addObserver(document.documentElement,f.bind(null,e)))},_.addAttributeListener=function(e,t,n){e&&t&&_._addObserver(e,m.bind(null,t,n))},_._observer=new MutationObserver(_._onMutationCallback),_._listeners={},_._id=0;var g={en:!0,de:!0,ja:!0,zh:!0,"zh-Hant":!0},v={_deferred:null,themeReady:null,_defaultColors:{up:"#39C46E",down:"#F5475B",level:"#C2C2C2",tickUp:"#39C46E",tickDown:"#F5475B",baseGrid:"#1A1A1C",baseText:"#C2C2C2",trackColor:"#FF9933"}};v.themeColors=v._defaultColors,v._components={},v._themeName="",v._elfVersion=0,v._dummyIcon=null,v._iconLoaded=!1,v._profileName=null,v._callbacks=[],v._observed=!1,v._pendingResolve=!1,v._themeLoaded=!1,v._icons={"elf-theme-halo":{rowGrouping:{expander:"down"},sorting:{ascending:"hollow-arrow-up",descending:"hollow-arrow-down",sortable:"sort-up-down"},columnStack:{stack:"map-layers",expand:"right",collapse:"left"}},"elf-theme-solar":{columnStack:{stack:"list",expand:"right",collapse:"left"}}},v._icons["halo-theme"]=v._icons["elf-theme-halo"],v._icons["solar-theme"]=v._icons["elf-theme-solar"],v.getElfVersion=function(){if(!v._elfVersion){var e=0;if(window.EFX_GRID){var t=window.EFX_GRID.version;e=+(t=t.split("."))[0]}else if(window.elf)if(window.elf.version){var n=window.elf.version.match(/\d/);n&&n[0]&&(e=parseInt(n[0],10))}else window.elf.customElements?e=3:window.customElements&&(e=4);else window.Polymer&&(e=1);v._elfVersion=e}return v._elfVersion},v.hasComponent=function(e){var t=v._components[e];if(null==t){t=0;var n=v.getElfVersion();if(e)1===n?document.createElement(e).is===e&&(t=n):n>1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=n),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 g[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 n=v.getThemeName();e.themeName=n;var r=v.getElfVersion();e.elfVersion=r;var i=v._icons[n];i&&(e.icons=i)}},v.getIconList=function(){var e=v._icons[v.getThemeName()];return e?Object(h.b)(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 n="",r=t||document.body;return window&&"string"==typeof e&&1===r.nodeType&&e.match(/^--/)&&(n=(n=window.getComputedStyle(r).getPropertyValue(e)).replace(/[\"\']/g,"")),n},v.getCssVariables=function(e,t){var n=t||document.body;if(window&&1===n.nodeType){var r=window.getComputedStyle(n);for(var i in e){var o=e[i];o&&o.match(/^--/)&&(e[i]=r.getPropertyValue(o).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 o;v.themeReady=t.promise;var n=v.getMovementColorProfile();if(n)n!==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,n=0;n<t.length;n++)t[n]()}};v._loadingProfileSuccess=function(e){e&&document.documentElement.setAttribute("movement-color-profile",e.toLowerCase()),v._observed?v._pendingResolve=!0:v._profileNameRetrieved(e)},v._loadingProfileFailure=function(){v._retrieveThemeColors(),v._observed||(v._observed=!0,_.addAttributeListener(document.documentElement,y,"movement-color-profile")),v._deferred.reject("Failed to get movement color profile from settings.")},v._profileNameRetrieved=function(){var e=v.getMovementColorProfile();v._retrieveThemeColors(e),v._observed||(v._observed=!0,_.addAttributeListener(document.documentElement,y,"movement-color-profile")),v._deferred.resolve(v.themeColors)},v._retrieveThemeColors=function(e){v._themeLoaded=!0,v._profileName=e;var t=v.themeColors=v.getCssVariables({primary:"--color-scheme-primary",secondary:"--color-scheme-secondary",tertiary:"--color-scheme-tertiary",complementary:"--color-scheme-complementary",up:"--color-scheme-positive",down:"--color-scheme-negative",level:"--color-scheme-neutral",tickUp:"--color-scheme-tickup",tickDown:"--color-scheme-tickdown"});t.up||(t.up=v._defaultColors.up,t.down=v._defaultColors.down,t.level=v._defaultColors.level,t.tickUp=v._defaultColors.tickUp,t.tickDown=v._defaultColors.tickDown),t.positive=t.up,t.negative=t.down,t.neutral=t.level;var n=document.createElement("table");n.style.visibility="hidden",n.style.position="fixed",n.style.left="0",n.style.top="0",n.style.width="0";var r=n.insertRow(-1),i=r.insertCell(-1);document.body.appendChild(n);var o=window.getComputedStyle(r);t.tableBg=o.backgroundColor;var l=window.getComputedStyle(i);t.tableText=l.color,t.tableBorder=l.borderColor,t.tableText===t.tableBorder&&(i.className="tr-lg",l=window.getComputedStyle(i),t.tableBg=l.backgroundColor,t.tableText=l.color,t.tableBorder=l.borderColor,t.tableText===t.tableBorder&&(t.tableBg=v._defaultColors.baseGrid,t.tableText=v._defaultColors.baseText,t.tableBorder="")),t.tableBg=Object(h.d)(t.tableBg),t.tableText=Object(h.d)(t.tableText),t.tableBorder=Object(h.d)(t.tableBorder),document.body.removeChild(n),t.baseGrid=t.tableBg,t.baseText=t.tableText,t.trackColor=t.primary||v._defaultColors.trackColor};var C={l:"l",c:"c",r:"r",L:"l",C:"c",R:"r"},b=function(e){return e&&C[e.charAt(0)]||""},x=function(e,t){this._topNode=e||c.div(),this._topNode._percentBar=this,this._topNode.classList.add("tr-percent-bar"),this._bar=c.div(),this._track=c.div(),this._track.appendChild(this._bar),this._txt=c.create("span");var n="l";if(t){t.alignment&&(n=t.alignment),null!=t.movementColor&&this.useMovementColor(!!t.movementColor),null!=t.barColor&&this.setBarColor(t.barColor);var r=0;null!=t.textWidth&&(r=1,this.setTextWidth(t.textWidth)),null!=t.textHidden&&(r|=this.hideText(t.textHidden)),null!=t.zeroValueHidden&&(r|=this.hideZeroValue(t.zeroValueHidden)),r&&this.isTextHidden()&&(this._textInDoc=!1,this._topNode.appendChild(this._track))}this.setAlignment(n)};x.prototype._topNode=null,x.prototype._track=null,x.prototype._bar=null,x.prototype._txt=null,x.prototype._textWidth="56px",x.prototype._textHidden=!1,x.prototype._zeroValueHidden=!1,x.prototype._textInDoc=!0,x.prototype._alignment,x.prototype._absValue,x.prototype._maxValue=100,x.prototype._sign=1,x.prototype._dirtySign=!0,x.prototype._invalid=!1,x.prototype._movementColor=!0,x.prototype._barColor="",x.prototype._tooltipEnabled=!0,x._styles=Object(h.c)([".tr-percent-bar",["position: relative;","text-align: left;","overflow: hidden;","white-space: nowrap;"],".tr-percent-bar>div",["position: relative;","display: inline-block;","height: 8px;","vertical-align: middle;"],".tr-percent-bar>div>div ",["position: absolute;","height: 100%;"],".tr-percent-bar>span",["display: inline-block;","vertical-align: middle;","box-sizing: border-box;","padding-left: 4px;","padding-right: 4px;","overflow: hidden;","max-width: 100%;"]]),x.injectCss=function(e){Object(h.a)(this._styles,e)},x.toAlignment=b,x.prototype.getElement=function(){return this._topNode},x.prototype.getValue=function(){return this._absValue*this._sign},x.prototype.getPercent=function(){return this._absValue/this._maxValue*this._sign},x.prototype.isInvalid=function(){return this._invalid},x.prototype._checkInvalidity=function(){var e=this._absValue!=this._absValue||!this._maxValue;return e!==this._invalid&&(this._invalid=e,this._topNode.style.display=e?"none":""),e},x.prototype.setValue=function(e,t,n){var r=this;e&&"number"!=typeof e&&(e=+e),e||0===e?e>=0?(r._absValue=e,r._dirtySign|=1!==r._sign,r._sign=1):(r._absValue=-e,r._dirtySign|=-1!==r._sign,r._sign=-1):r._absValue=NaN,null!=t&&t==t&&(r._maxValue=t>=0?t:-t),r._checkInvalidity()||(r._absValue>r._maxValue&&(r._absValue=r._maxValue),r._updateValue(!0,n))},x.prototype.setMax=function(e){e==e&&(this._maxValue=e>=0?e:-e,this._checkInvalidity()||(this._absValue>this._maxValue&&(this._absValue=this._maxValue),this._updateValue(!0)))},x.prototype.hideZeroValue=function(e){var t=!1!==e;return this._zeroValueHidden!==t&&(this._zeroValueHidden=t,this._alignment&&this._updateTextVisibility()&&this._updateTextWidth(),!0)},x.prototype.setText=function(e){this._invalid||(e||0===e?"string"!=typeof e&&(e+=""):e="",this._txt._prevText!==e&&(this._txt._prevText=e,this._txt.textContent=e,this._tooltipEnabled&&(e?this._topNode.setAttribute("title",e):this._topNode.removeAttribute("title"))))},x.prototype.hideText=function(e){var t=!1!==e;return this._textHidden!==t&&(this._textHidden=t,this._alignment&&this._updateTextVisibility()&&this._updateTextWidth(),!0)},x.prototype.isTextHidden=function(){return!(!this._textHidden&&"0px"!==this._textWidth)||!(!this._zeroValueHidden||this._absValue)},x.prototype._updateTextVisibility=function(){var e=!this.isTextHidden();return this._textInDoc!==e&&(this._textInDoc=e,e?this._reorderElements():c.removeParent(this._txt),!0)},x.prototype._updateTextWidth=function(){return"c"!==this._alignment&&(this._textInDoc?this._track.style.width="calc(100% - "+this._textWidth+")":this._track.style.width="100%",this._txt.style.width=this._textWidth,!0)},x.prototype.setTextWidth=function(e){var t="56px";"number"==typeof e?t=e>8?e+"px":"0px":"string"==typeof e&&e&&(t="0"!==e?e:"0px"),this._textWidth!==t&&(this._textWidth=t,this._alignment&&(this._updateTextVisibility(),this._updateTextWidth()))},x.prototype.setMaxTextLength=x.prototype.setTextWidth,x.prototype.getTextScrollWidth=function(){return this._txt.scrollWidth>this._txt.offsetWidth?this._txt.scrollWidth:NaN},x.prototype.getAlignment=function(){return this._alignment},x.prototype.setAlignment=function(e){e=b(e)||"l",this._alignment!==e&&(this._alignment=e,"c"===e?(this._track.style.width="50%",this._txt.style.width="50%"):(this._updateTextWidth(),this._txt.style.textAlign="right",this._track.style.left="",this._txt.style.transform="",this._bar.style.right="r"===e?"0":""),this._textInDoc&&this._reorderElements(),this._dirtySign=!0,this._updateValue(!1))},x.prototype._reorderElements=function(){"l"!==this._alignment?(this._topNode.appendChild(this._track),this._topNode.appendChild(this._txt)):(this._topNode.appendChild(this._txt),this._topNode.appendChild(this._track))},x.prototype.useMovementColor=function(e){var t=!1!==e;this._movementColor!==t&&(this._movementColor=t,this.updateBarColor())},x.prototype.setTrackColor=function(e){this._track.style.backgroundColor=e||""},x.prototype.setBarColor=function(e){var t=e||"";this._barColor!==t&&(this._barColor=t,this.updateBarColor())},x.prototype.enableTooltip=function(e){this._tooltipEnabled=!1!==e,this._tooltipEnabled||this._topNode.removeAttribute("title")},x.prototype._updateValue=function(e,t){var n=this;if(n._dirtySign&&(n._dirtySign=!1,"c"===n._alignment&&(n._sign>=0?(n._track.style.left="50%",n._bar.style.right="",n._txt.style.transform="translateX(-100%)",n._txt.style.textAlign="right"):(n._track.style.left="",n._bar.style.right="0",n._txt.style.transform="",n._txt.style.textAlign="left")),n._movementColor&&!n._barColor&&n.updateBarColor()),!1!==e){this._zeroValueHidden&&this._updateTextVisibility()&&this._updateTextWidth();var r=100!==n._maxValue?n._absValue/n._maxValue*100:n._absValue;n._bar.style.width=r+"%",null!=t?!1!==t&&n.setText(t):n.setText((r*n._sign*100|0)/100+"%")}},x.prototype.updateBarColor=function(){var e;if(e=this._barColor?this._barColor:this._movementColor?this._sign>=0?v.themeColors.up:v.themeColors.down:v.themeColors.trackColor){var t=this._bar.style;t.backgroundColor!==e&&(t.backgroundColor=e)}};var T=function(){this._onPostSectionBinding=this._onPostSectionBinding.bind(this),this._onColumnAdded=this._onColumnAdded.bind(this),this._onColumnRemoved=this._onColumnRemoved.bind(this),this._requestRowRefresh=this._requestRowRefresh.bind(this),this._renderer=this._renderer.bind(this),this._onThemeLoaded=this._onThemeLoaded.bind(this),this._hosts=[]};r.inherits(T,l),T._runningId=0,T._themeRevision=0,T.prototype._themeLoading=!1,T.prototype._padding=8,T.prototype._percentageLabel=!0,T.prototype._autoFitting=!1,T.prototype._zeroValueHidden=!1,T.prototype._autoTextSizing=!0,T._helper=null,T.prototype.getName=function(){return"PercentBarPlugin"},T.prototype.initialize=function(e,t){this._hosts.indexOf(e)>=0||(this._hosts.push(e),this.config(t,e),e.listen("postSectionDataBinding",this._onPostSectionBinding),1===this._hosts.length&&(e.listen("columnAdded",this._onColumnAdded),e.listen("columnRemoved",this._onColumnRemoved),e.listen("columnAlignmentChanged",this._requestRowRefresh)),this._themeLoading||(this._themeLoading=!0,v.getThemeColors(this._onThemeLoaded).then(this._onThemeLoaded).catch(this._onThemeLoaded)))},T.prototype._afterInit=function(){for(var e=this.getColumnCount(),t=0;t<e;++t)this._setColumnRenderer(t)},T.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(this._hosts.splice(t,1),e.unlisten("postSectionDataBinding",this._onPostSectionBinding),e.unlisten("columnAdded",this._onColumnAdded),e.unlisten("columnRemoved",this._onColumnRemoved),e.unlisten("columnAlignmentChanged",this._requestRowRefresh),this._hosts.length||c.removeParent(T._helper),this._dispose())},T.prototype.config=function(e){if(e){var t=e.percentBar;if("object"==typeof t){this._autoFitting=!0===t.autoFitting,null!=t.zeroValueHidden&&(this._zeroValueHidden=!!t.zeroValueHidden),this._autoTextSizing=!1!==t.autoTextSizing,this._percentageLabel=!1!==t.percentageLabel;var n=t.padding;"number"==typeof n&&(this._padding=n)}for(var r=e.columns,i=r?r.length:0,o=0;o<i;++o){var l=r[o];this.setColumnPercentBar(o,l)}}},T.prototype.getColumnConfigObject=function(e,t){t||(t={});var n=this._getColumnData(e),r=n?n.percentBar:null;if(!r)return t;var i=t.percentBar={};return r.alignment&&(i.alignment=r.alignment),"string"==typeof r.field&&(i.field=r.field),null!=r.textHidden&&(i.textHidden=r.textHidden),null!=r.textWidth&&(i.textWidth=r.textWidth),null!=r.useMovementColor&&(i.useMovementColor=r.useMovementColor),r.barColor&&(i.barColor=r.barColor),null!=r.padding&&(i.padding=r.padding),null!=r.autoTextSizing&&(i.autoTextSizing=r.autoTextSizing),null!=r.percentageLabel&&(i.percentageLabel=r.percentageLabel),null!=r.autoFitting&&(i.autoFitting=r.autoFitting),t},T.prototype.getConfigObject=function(e){var t=e||{},n=t.columns;n||(n=t.columns=[]);for(var r=this.getColumnCount(),i=0;i<r;++i)n[i]||(n[i]={}),this.getColumnConfigObject(i,n[i]);var o=t.percentBar;return o||(o=t.percentBar={}),o.padding=this._padding,o.autoFitting=this._autoFitting,o.zeroValueHidden=this._zeroValueHidden,o.autoTextSizing=this._autoTextSizing,o.percentageLabel=this._percentageLabel,t},T.prototype.setPercentBarAlignment=function(e,t){var n=this._getColumnPercentBarOptions(e);n&&(t=x.toAlignment(t),n.alignment!==t&&(n.alignment=t,this._requestRowRefresh()))},T.prototype.setColumnPercentBar=function(e,t){var n=t?t.percentBar:null,r=this._newColumnData(e),i=r.percentBar,o=!1;if(n){o=!0;var l=i;if(i=r.percentBar={},l&&l.refId&&(i.refId=l.refId,i.colStats=l.colStats),"object"==typeof n)for(var a in n)i[a]=n[a];null==i.field&&(i.field=t.field?t.field:this._getField(e)),null!=i.alignment&&(i.alignment=x.toAlignment(i.alignment)),null!=i.autoTextSizing&&(i.autoTextSizing=!!i.autoTextSizing),null!=i.autoFitting?i.autoFitting=!!i.autoFitting:i.autoFitting=this._autoFitting,null!=i.zeroValueHidden?i.zeroValueHidden=!!i.zeroValueHidden:i.zeroValueHidden=this._zeroValueHidden,null!=i.percentageLabel?i.percentageLabel=!!i.percentageLabel:i.percentageLabel=this._percentageLabel,i._maxTextWidth=0;var s=i.padding;"number"!=typeof s&&(i.padding=s||null==s?this._padding:0)}else if(i){if(o=!0,i.refId){var u=this._hosts[0],d=u?u.getDataSource():null;d&&d.enableColumnStats(i.field,!1,i.refId),i.refId=null,i.colStats=null}r.percentBar=null}o&&this._initializedGrid&&(this._setColumnRenderer(e),this._requestRowRefresh())},T.prototype._setColumnRenderer=function(e){var t=this._getColumnPercentBarOptions(e);if(t){if(!t.refId){var n=this._hosts[0],r=n?n.getDataSource():null;if(r){t.refId="_pb"+T._runningId++;var i=r.enableColumnStats(t.field,!0,t.refId);this._realTimeGrid&&i.setColumnDataGetter(p),t.colStats=i}}this._activateColumnRenderer(e,"_percentBar",this._renderer)}else this._activateColumnRenderer(e)},T.prototype._getColumnPercentBarOptions=function(e){return this._getColumnOption(e,"percentBar")},T.prototype._getPercentBarAlignment=function(e,t){var n=t.alignment;return n||(x.toAlignment(this._hosts[0].getColumnAlignment(e))||"l")},T.prototype._getAutoTextSizing=function(e,t){return!t.textWidth&&!t.textHidden&&("c"!==this._getPercentBarAlignment(e,t)&&(null!=t.autoTextSizing?t.autoTextSizing:this._autoTextSizing))},T.prototype._onThemeLoaded=function(){T._themeRevision++,this._requestRowRefresh()},T.prototype._onPostSectionBinding=function(e){if(v.isThemeLoaded())for(var t=e.section,n=e.dataRows,r=t.getColumnCount(),i=e.fromRowIndex,o=e.toRowIndex,l=this._hosts[0].getPlugin("TextFormattingPlugin"),a=e.dataSource,s=0;s<r;++s){var u=this._getColumnPercentBarOptions(s);if(u){var d=u.field,p=u.colStats,c=u.barColor,h=u.useMovementColor,_=null!=u.textHidden&&u.textHidden,f=null!=u.zeroValueHidden&&u.zeroValueHidden,m=p.getMax(),g=l?l.getFormatter(s):null,y=this._getPercentBarAlignment(s,u),C=this._getAutoTextSizing(s,u);u._curAlignment!==y&&(u._curAlignment=y,u._maxTextWidth=0);for(var b=i;b<o;++b){var w=t.getCell(s,b,!1);if(w){var R=w.getContent(),A=R?R._percentBar:null;A||(R=(A=new x).getElement(),null!=h&&(A._themeRevision=T._themeRevision)),C?u._maxTextWidth&&A.setTextWidth(u._maxTextWidth+u.padding):A.setTextWidth(u.textWidth),A.setAlignment(y),A._themeRevision!==T._themeRevision&&(A._themeRevision=T._themeRevision,A.updateBarColor(h)),A.useMovementColor(h),A.setBarColor(c),A.hideText(_),A.hideZeroValue(f);var P=this._getRowData(n[b]),V=P?P[d]:NaN;if(g)if(u.percentageLabel){A.setValue(V,m,!1);var S=A.getPercent();A.setText(g.formatValue(S))}else A.setValue(V,m,g.formatValue(V));else{var E=u.percentageLabel?null:V;A.setValue(V,m,E)}w.setContent(R)}}C&&this._updateTextSize(t,a,s,u.field,m,g)}}},T.prototype._getHelper=function(){var e=T._helper;return e||((e=T._helper=c.div("percent-bar-helper")).style="visibility: hidden; position: fixed; bottom: -50px; left: -50px; white-space: pre;"),e.parentNode||document.body.appendChild(e),e},T.prototype._getTextWidth=function(e){var t=this._getHelper();t.textContent=e;var n=t.clientWidth;return t.removeChild(t.lastChild),n},T.prototype._updateTextSize=function(e,t,n,r,i,o){var l,a=this._getColumnPercentBarOptions(n),s=e.getFirstIndexInView(),u=e.getLastIndexInView(),d=[];for(l=s;l<=u;++l){var p=this._getData(t,l,r);o?p=o.formatValue(p):(p=(p/i*1e4|0)/100,p+="%"),d.push(p)}var c=this._getTextWidth(d.join("\n"));if(a.autoFitting||(c=c>a._maxTextWidth?c:a._maxTextWidth),c!==a._maxTextWidth)for(a._maxTextWidth=c,c+=a.padding,l=s;l<=u;++l){var h=e.getCell(n,l,!1);if(h){var _=h.getContent();_&&_._percentBar&&_._percentBar.setTextWidth(c)}}},T.prototype._renderer=function(e){},T.prototype._onColumnAdded=function(e){e.context&&this.setColumnPercentBar(e.colIndex,e.context)},T.prototype._onColumnRemoved=function(e){var t=e.columnData;if(t&&t.percentBar){var n=t.percentBar;e.sender.getDataSource().enableColumnStats(n.field,!1,n.refId),t.percentBar=null}},T.prototype._requestRowRefresh=function(){for(var e=this._hosts.length;--e>=0;)this._hosts[e].requestRowRefresh()},T.prototype.reloadThemeColors=function(){return v.reloadThemeColors().then(this._onThemeLoaded).catch(this._onThemeLoaded)};!function(e,t){if(e&&t&&t.prototype.getName){var n=t.prototype.getName().replace(/Plugin$/,"");if(n){var r=e.tr;r||(r=e.tr={});var i=r.grid;i||(i=r.grid={}),i[n+"Plugin"]=t,r[n+"Extension"]=t}}}(window,T)}]);
\ No newline at end of file
+!function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},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 i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},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 i={inherits:function(e,t){function n(){}n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e,e.base=function(e,n,i){n||(n="constructor");for(var o=arguments.length,r=new Array(o),l=2;l<o;l++)r[l-2]=arguments[l];return t.prototype[n].apply(e,r)}}},o=function(){};o.prototype._events=null,o.prototype._listenerCount=0,o.prototype.addEventListener=function(e,t){if(e&&t){this._events||(this._events={});var n=this._events[e];n?n.indexOf(t)<0&&(n.push(t),++this._listenerCount):(this._events[e]=[t],++this._listenerCount)}},o.prototype.removeEventListener=function(e,t){var n=this._events?this._events[e]:null;if(n){var i=n.indexOf(t);i>=0&&(n.splice(i,1),--this._listenerCount)}},o.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},o.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},o.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},o.prototype.addListener=function(e,t){var n=e?e[t]:null;"function"==typeof n&&this.addEventListener(t,n)},o.prototype._prepareEventArguments=function(e,t){return t},o.prototype._dispatch=function(e,t){var n=this._events?this._events[e]:null;if(n){t=this._prepareEventArguments(e,t);for(var i=n.length,o=0;o<i;++o)n[o](t)}};o.preventDefault=function(e){e&&e.preventDefault&&(e.preventDefault(),e.stopPropagation())};var r=function(e,t,n){this.resolve=this.resolve.bind(this),this.reject=this.reject.bind(this),"function"==typeof e&&(this._resolveHandler=e),"function"==typeof t&&(this._rejectHandler=t),null!=n&&(this._ctx=n),this.promise=new Promise(function(e,t){this._resolve=e,this._reject=t}.bind(this))};r.prototype.promise=null,r.prototype._resolve=null,r.prototype._reject=null,r.prototype._resolveHandler=null,r.prototype._rejectHandler=null,r.prototype._ctx=null,r.prototype._fulfilled=!1,r.prototype.resolve=function(e){if(this._resolve){if(this._resolveHandler){var t=this._resolveHandler(e,this._ctx||this);null!=t&&(e=t)}this._resolve(e),this._finally()}},r.prototype.reject=function(e){if(this._reject){if(this._rejectHandler){var t=this._rejectHandler(e,this._ctx||this);null!=t&&(e=t)}this._reject(e),this._finally()}},r.prototype.isFulfilled=function(){return this._fulfilled},r.prototype._finally=function(){this._fulfilled=!0,this._ctx=this._resolveHandler=this._rejectHandler=null,this._resolve=this._reject=null};var l=function(e){return Array.isArray(e)?"{\n"+e.join("\n")+"\n}":e},a=function(e){return e.replace(/\n+/g,"\n\t").replace(/\n\t}$/,"\n}")},s=function(e,t){if(!e)return null;var n=document.createElement("style");n.textContent="\n"+e+"\n";var i,o=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 o||(r=!1,o=document.head),r&&o.children&&o.children.length&&(i=o.children[0]),i?o.insertBefore(n,i):o.appendChild(n),n},u=function(e,t){for(var n in t||(t=[]),e){var i=e[n];"object"==typeof i?u(i,t):t.push(i)}return t},d=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 n="#",i=0;i<3;i++){var o=+t[i];o>=16||(n+="0"),n+=o?o.toString(16).toUpperCase():"0"}return n},p={},h=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},c=function(e,t,n){"attributes"===n.type&&(null!=t?n.attributeName===t&&e(n.target.getAttribute(t)):e(n.target))};p._getNewId=function(){return"observer_"+ ++p._id},p._addObserver=function(e,t,n){var i=n;i||(i={}),i.attributes=!0,p._observer.observe(e,i),p._addListener(e,t)},p._onMutationCallback=function(e){for(var t=0;t<e.length;t++)for(var n=e[t],i=p._listeners[n.target._observeId],o=0;o<i.length;o++)i[o](n)},p._addListener=function(e,t){var n=p._listeners;if(n||(n=p._listeners={}),!e._observeId){var i=p._getNewId();e._observeId=i}n[e._observeId]||(n[e._observeId]=[]);var o=n[e._observeId];o.indexOf(t)<0&&o.push(t)},p.addLanguageListener=function(e){e&&(e.lang=document.documentElement.lang||"en",p._addObserver(document.documentElement,h.bind(null,e)))},p.addAttributeListener=function(e,t,n){e&&t&&p._addObserver(e,c.bind(null,t,n))},p._observer=new MutationObserver(p._onMutationCallback),p._listeners={},p._id=0;var _={en:!0,de:!0,ja:!0,zh:!0,"zh-Hant":!0},f={_deferred:null,themeReady:null,_defaultColors:{up:"#39C46E",down:"#F5475B",level:"#C2C2C2",tickUp:"#39C46E",tickDown:"#F5475B",baseGrid:"#1A1A1C",baseText:"#C2C2C2",trackColor:"#FF9933"}};f.themeColors=f._defaultColors,f._components={},f._themeName="",f._elfVersion=0,f._dummyIcon=null,f._iconLoaded=!1,f._profileName=null,f._callbacks=[],f._observed=!1,f._pendingResolve=!1,f._themeLoaded=!1,f._icons={"elf-theme-halo":{rowGrouping:{expander:"down"},sorting:{ascending:"hollow-arrow-up",descending:"hollow-arrow-down",sortable:"sort-up-down"},columnStack:{stack:"map-layers",expand:"right",collapse:"left"}},"elf-theme-solar":{columnStack:{stack:"list",expand:"right",collapse:"left"}}},f._icons["halo-theme"]=f._icons["elf-theme-halo"],f._icons["solar-theme"]=f._icons["elf-theme-solar"],f.getElfVersion=function(){if(!f._elfVersion){var e=0;if(window.EFX_GRID){var t=window.EFX_GRID.version;e=+(t=t.split("."))[0]}else if(window.elf)if(window.elf.version){var n=window.elf.version.match(/\d/);n&&n[0]&&(e=parseInt(n[0],10))}else window.elf.customElements?e=3:window.customElements&&(e=4);else window.Polymer&&(e=1);f._elfVersion=e}return f._elfVersion},f.hasComponent=function(e){var t=f._components[e];if(null==t){t=0;var n=f.getElfVersion();if(e)1===n?document.createElement(e).is===e&&(t=n):n>1&&(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 i=f.getElfVersion();e.elfVersion=i;var o=f._icons[n];o&&(e.icons=o)}},f.getIconList=function(){var e=f._icons[f.getThemeName()];return e?u(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="",i=t||document.body;return window&&"string"==typeof e&&1===i.nodeType&&e.match(/^--/)&&(n=(n=window.getComputedStyle(i).getPropertyValue(e)).replace(/[\"\']/g,"")),n},f.getCssVariables=function(e,t){var n=t||document.body;if(window&&1===n.nodeType){var i=window.getComputedStyle(n);for(var o in e){var r=e[o];r&&r.match(/^--/)&&(e[o]=i.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 i={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},o=window?window.JET:null;if(f._themeLoaded=!1,f._rtk&&f._rtk.Settings)f._rtk.Settings.getAsync(i).then(f._loadingProfileSuccess).catch(f._loadingProfileFailure);else if(o&&o.Settings)try{o.Settings.read(f._loadingProfileSuccess,i)}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<t.length;n++)t[n]()}};f._loadingProfileSuccess=function(e){e&&document.documentElement.setAttribute("movement-color-profile",e.toLowerCase()),f._observed?f._pendingResolve=!0:f._profileNameRetrieved(e)},f._loadingProfileFailure=function(){f._retrieveThemeColors(),f._observed||(f._observed=!0,p.addAttributeListener(document.documentElement,m,"movement-color-profile")),f._deferred.reject("Failed to get movement color profile from settings.")},f._profileNameRetrieved=function(){var e=f.getMovementColorProfile();f._retrieveThemeColors(e),f._observed||(f._observed=!0,p.addAttributeListener(document.documentElement,m,"movement-color-profile")),f._deferred.resolve(f.themeColors)},f._retrieveThemeColors=function(e){f._themeLoaded=!0,f._profileName=e;var t=f.themeColors=f.getCssVariables({primary:"--color-scheme-primary",secondary:"--color-scheme-secondary",tertiary:"--color-scheme-tertiary",complementary:"--color-scheme-complementary",up:"--color-scheme-positive",down:"--color-scheme-negative",level:"--color-scheme-neutral",tickUp:"--color-scheme-tickup",tickDown:"--color-scheme-tickdown"});t.up||(t.up=f._defaultColors.up,t.down=f._defaultColors.down,t.level=f._defaultColors.level,t.tickUp=f._defaultColors.tickUp,t.tickDown=f._defaultColors.tickDown),t.positive=t.up,t.negative=t.down,t.neutral=t.level;var n=document.createElement("table");n.style.visibility="hidden",n.style.position="fixed",n.style.left="0",n.style.top="0",n.style.width="0";var i=n.insertRow(-1),o=i.insertCell(-1);document.body.appendChild(n);var r=window.getComputedStyle(i);t.tableBg=r.backgroundColor;var l=window.getComputedStyle(o);t.tableText=l.color,t.tableBorder=l.borderColor,t.tableText===t.tableBorder&&(o.className="tr-lg",l=window.getComputedStyle(o),t.tableBg=l.backgroundColor,t.tableText=l.color,t.tableBorder=l.borderColor,t.tableText===t.tableBorder&&(t.tableBg=f._defaultColors.baseGrid,t.tableText=f._defaultColors.baseText,t.tableBorder="")),t.tableBg=d(t.tableBg),t.tableText=d(t.tableText),t.tableBorder=d(t.tableBorder),document.body.removeChild(n),t.baseGrid=t.tableBg,t.baseText=t.tableText,t.trackColor=t.primary||f._defaultColors.trackColor};var g=function(){};i.inherits(g,o),g.prototype._hosts=null,g.prototype._compositeGrid=null,g.prototype._realTimeGrid=null,g.prototype._rowGetter=null,g.prototype._initializedGrid=!1,g.prototype.listen=g.prototype.addEventListener,g.prototype.unlisten=g.prototype.removeEventListener,g.prototype.afterInit=function(e,t,n){var i=null;n&&n.getCoreGrid&&(i=n.getCoreGrid()),i&&(this.getGridApi()||this.setGridWrapper("compositegrid",n),this._compositeGrid&&i.loadPlugin(this,t)),this._initializedGrid||(this._initializedGrid=!0,this._rowGetter=this._realTimeGrid?T:x,this._afterInit())},g.prototype._afterInit=function(){},g.prototype._dispose=function(){this._hosts&&(this._hosts.length||(this._compositeGrid=this._realTimeGrid=null,this._initializedGrid=!1))},g.prototype.hasMultiTableSupport=function(){return!1},g.prototype._prepareEventArguments=function(e,t){return t||(t={}),t.api=this.getGridApi(),t},g.prototype.getName=function(){return"GridPlugin"},g.prototype.initialize=function(e,t){},g.prototype.unload=function(e){this._dispose()},g.prototype.getRelativeGrid=function(e){var t=null;if(e.target){var n=(t=e.target).api;if(n&&n.getCoreGrid)return n.getCoreGrid()}else e.getElement?t=e.getElement():1===e.nodeType&&(t=e);if(t)for(var i=this._hosts.length;--i>=0;){var o=this._hosts[i];if(o.getElement().contains(t))return o}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),i=this._realTimeGrid.getColumnDefinition(n);if(i)return i.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,i=this._compositeGrid.getColumnFields(),o=this._compositeGrid.getColumnCount(),r=[],l=0;l<e.length;l++)if("number"==typeof(n=e[l]))n>=0&&n<o&&r.push(n);else{var a=i.indexOf(n);-1!==a&&r.push(a)}return r}return this._realTimeGrid.getColumnIndices(e)},g.prototype.getColumnId=function(e){if("string"==typeof e)return e;var t=this.getColumnCount();if(e<0||e>=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,i=n?n.length:0;if(i){for(var o=0,r=0;r<i;++r)o|=n[r].moveColumnById(e,t);return!!o}return!1},g.prototype._reorderColumns=function(e,t){var n=this._hosts,i=n?n.length:0;if(i){for(var o=0,r=0;r<i;++r)o|=n[r].reorderColumns(e,t);return!!o}return!1},g.prototype._loadPlugin=function(e,t,n){return e||(e=t.getPlugin(n))||(e=t.loadPlugin(n))&&this._initializedGrid&&(e._initializedGrid=!0),e},g.prototype._requestPlugin=function(e,t,n){return this._initializedGrid?g.requestPlugin(e,t,n,this._compositeGrid,this._realTimeGrid):Promise.reject("Plugin should be requested after the initialization")},g.requestPlugin=function(e,t,n,i,o){var l=null;if(e){var a=null;1===e.nodeType?a=e.api:e.getCoreGrid?a=e:e.getPlugin&&(l=e),a&&(l=a.getCoreGrid(),i||o||(a.getModel?i=a:o=a))}if(!l)return Promise.reject("Cannot find grid element");var s=l.getPlugin(t);if(s)return Promise.resolve(s);var u=new r;return setTimeout(g._onPluginRequested.bind(null,{grid:l,pluginRef:t,compositeGrid:i,realTimeGrid:o,config:n,deferred:u}),10),u.promise},g._onPluginRequested=function(e){var t=e.grid;if(!t.getElement())return e.deferred.reject("Grid has been disposed before the plugin is fully loaded: "+e.pluginRef);var n=t.getPlugin(e.pluginRef);if(n)return e.deferred.resolve(n);var i=!1;return e.pluginRef.beforeInit&&(i=!0,e.pluginRef.beforeInit(t.getElement(),e.config,!0)),(n=t.loadPlugin(e.pluginRef,e.config))?(!i&&n.beforeInit&&(i=!0,n.beforeInit(t.getElement(),e.config)),n.setGridWrapper&&(e.compositeGrid?n.setGridWrapper("compositegrid",e.compositeGrid):e.realTimeGrid&&n.setGridWrapper("realtimegrid",e.realTimeGrid)),n.afterInit&&n.afterInit(),e.deferred.resolve(n)):e.deferred.reject("Unable to load required dependency: "+e.pluginRef)},g.prototype._getPlugin=function(e,t){return null==t&&(t=this._hosts[0]),t?t.getPlugin(e):null},g.prototype._getColumnData=function(e,t){return null==t&&(t=this._hosts[0]),t?t.getColumnData(e):null},g.prototype._getColumnOption=function(e,t,n){var i=this._getColumnData(e,n);return i?i[t]:null},g.prototype._newColumnData=function(e,t){if(null==t&&(t=this._hosts[0]),!t)return{};var n=t.getColumnData(e);return n||(n=t.setColumnData(e,{})),n},g.prototype._getField=function(e){var t=this._compositeGrid||this._realTimeGrid;return t?t.getColumnField(e):""},g.prototype._getRowData=function(e){return this._realTimeGrid&&e?e.ROW_DEF.getRowData():e},g.prototype._getRow=function(e,t){return w(e.getRowDataAt(t))},g.prototype._getData=function(e,t,n){var i=this._getRow(e,t);return i?i[n]:void 0},g.prototype._setData=function(e,t,n,i){if(this._realTimeGrid){var o=C(e,t);o&&o.setData(n,i)}else"number"==typeof t?e.setDataAt(t,n,i):e.setData(t,n,i)},g.prototype._setRowData=function(e,t,n){if(this._realTimeGrid){var i=C(e,t);i&&i.setRowData(n)}else"number"==typeof t?e.setRowDataAt(t,n):e.setRowData(t,n)},g.prototype._setStaticData=function(e,t,n,i){if(this._realTimeGrid){var o=C(e,t);o&&o.setStaticData(n,i)}else this._setData(e,t,n,i)},g.prototype._setColumnData=function(e,t,n,i){if(t){var o=Array.isArray(i)?i:e.getAllRowIds(!0),r=o?o.length:0;if(r)if(1!==r){var l=Array.isArray(n)?n:o.map((function(){return n}));if(this._realTimeGrid){for(var a=0;a<r;++a){var s=e.getRowData(o[a]);if(s){var u=s.ROW_DEF;u&&(u.getRowData()[t]=l[a])}}e.dispatchGlobalChange||(e=e.getDataSource()),e&&e.dispatchGlobalChange&&e.dispatchGlobalChange()}else e.setColumnData(t,l,o)}else this._setData(e,o[0],t,Array.isArray(n)?n[0]:n)}},g.prototype._activateColumnRenderer=function(e,t,n){if(null!=e){var i=this._realTimeGrid;i?i.activateColumnRenderer(e,t,n):"function"==typeof n?this._hosts[0].setColumnDataBindingHandler(e,n):this._hosts[0].setColumnDataBindingHandler(e,null)}};var v=function(){},y={left:37,right:39,up:38,down:40,backspace:8,tab:9,enter:13,esc:27,escape:27,space:32,pageup:33,pagedown:34,del:46,delete:46};g.prototype._mockMouseEvent=function(e,t,n){null==e&&(e=0),null==t&&(t=0);var i=n||{};if(i.preventDefault=v,i.stopPropagation=v,e>=0&&t>=0){var o=this._activeGrid||this._hosts[0],r=o?o.getCell(i.sectionType||"content",e,t):null;i.target=r?r.getElement():null}return i},g.prototype._mockKeyboardEvent=function(e,t){var n=t||{};if(n.preventDefault=v,n.stopPropagation=v,"string"==typeof e){var i=y[e.toLowerCase()]||0;e=i||e.charCodeAt(0)}return n.keyCode=e,n},g._staticStyles={},g._themeLoaders={},g._themeLoadSuccess=function(e,t){var n=this.getName(),i=g._staticStyles[n]=e(t);this.applyStyles(i,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 i,o,r="_style"+t,l=this._hosts,a=l.length;if(a)if(n)for(i=0;i<a;i++)o=l[i],this.revokeStyles(o,t),o[r]=s(e,o.getElement());else for(i=0;i<a;i++)(o=l[i])[r]||(s(e,o.getElement()),o[r]=!0)},g.prototype.revokeStyles=function(e,t){if(e&&t){var n=e[t="_style"+t];n&&1===n.nodeType&&(n.parentNode.removeChild(n),e[t]=null)}};var C=function(e,t){var n="number"==typeof t?e.getRowDataAt(t):e.getRowData(t);return n&&n.ROW_DEF||null},b=function(e,t){var n=t.ROW_DEF.getRowData();return n?n[e]:null},x=function(e){return e},T=function(e){return e?e.ROW_DEF.getRowData():null},w=function(e){if(e){var t=e.ROW_DEF;return t?t.getRowData():e}return null},R=function(e,t){for(var n=t.getAllRowData(),i=n.length,o=new Array(i),r=0;r<i;++r)o[r]=b(e,n[r]);return o},A={create:function(e,t){var n=document.createElement(e);return t&&(n.className=t),n},div:function(e){return A.create("div",e)},text:function(e,t){var n=A.create("span",t);return(e||0===e)&&(n.textContent=e),n},appendChild:function(e,t){if(!e)return null;var n,i;Array.isArray(arguments[1])?(i=arguments[1],n=0):(i=arguments,n=1);for(var o=i.length;n<o;)e.appendChild(i[n]),++n;return e},buildTree:function(e,t){if(!e)return null;for(var n=arguments,i=n.length,o=1;o<i;++o){var r,l=n[o];if(l)Array.isArray(l)?r=A.buildTree.apply(null,l):1===l.nodeType&&(r=l),r&&e.appendChild(r)}return e},removeParent:function(e){if(!e)return null;var t=e.parentNode;return t&&t.removeChild(e),t},setParent:function(e,t){return e?t?(t.appendChild(e),t):A.removeParent(e):null},removeChildren:function(e,t){if(e){var n=e.childNodes.length;for((null==t||t>n)&&(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&&(A.removeChildren(e),e.appendChild(t)):Array.isArray(t)?(A.removeChildren(e),A.appendChild(e,t)):e.textContent=t}else A.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,i=n.length,o=0;o<i;++o){var r=n[o];r&&"string"==typeof r&&e.classList.add(r)}},removeClasses:function(e,t){if(e)for(var n=Array.isArray(t)?t:arguments,i=n.length,o=0;o<i;++o){var r=n[o];r&&"string"==typeof r&&e.classList.remove(r)}},preventDefault:function(e){e.preventDefault(),e.stopPropagation()},stopPropagation:function(e){e.stopPropagation()},getClientPosition:function(e,t){var n=t||{x:0,y:0};if(e.getBoundingClientRect){var i=e.getBoundingClientRect();n.x=i.left,n.y=i.top}else n.x=e.clientX,n.y=e.clientY;return n},getRelativePosition:function(e,t,n){n=A.getClientPosition(e,n);var i=A.getClientPosition(t);return n.x-=i.x,n.y-=i.y,n},closestElement:function(e,t){for(var n=e;n;){if(n.classList&&n.classList.contains(t))return n;n=n.parentNode||n.host}return null},closestTagName:function(e,t){for(var n=e;n;){if(n.tagName&&n.tagName==t)return n;n=n.parentNode||n.host}return null}},V={l:"l",c:"c",r:"r",L:"l",C:"c",R:"r"},S=function(e){return e&&V[e.charAt(0)]||""},P=function(e,t){this._topNode=e||A.div(),this._topNode._percentBar=this,this._topNode.classList.add("tr-percent-bar"),this._bar=A.div(),this._track=A.div(),this._track.appendChild(this._bar),this._txt=A.create("span");var n="l";if(t){t.alignment&&(n=t.alignment),null!=t.movementColor&&this.useMovementColor(!!t.movementColor),null!=t.barColor&&this.setBarColor(t.barColor);var i=0;null!=t.textWidth&&(i=1,this.setTextWidth(t.textWidth)),null!=t.textHidden&&(i|=this.hideText(t.textHidden)),null!=t.zeroValueHidden&&(i|=this.hideZeroValue(t.zeroValueHidden)),i&&this.isTextHidden()&&(this._textInDoc=!1,this._topNode.appendChild(this._track))}this.setAlignment(n)};P.prototype._topNode=null,P.prototype._track=null,P.prototype._bar=null,P.prototype._txt=null,P.prototype._textWidth="56px",P.prototype._textHidden=!1,P.prototype._zeroValueHidden=!1,P.prototype._textInDoc=!0,P.prototype._alignment,P.prototype._absValue,P.prototype._maxValue=100,P.prototype._sign=1,P.prototype._dirtySign=!0,P.prototype._invalid=!1,P.prototype._movementColor=!0,P.prototype._barColor="",P.prototype._tooltipEnabled=!0,P._styles=function(e){if(e){var t="";if(Array.isArray(e))t=e.map(l).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,a)}return""}([".tr-percent-bar",["position: relative;","text-align: left;","overflow: hidden;","white-space: nowrap;"],".tr-percent-bar>div",["position: relative;","display: inline-block;","height: 8px;","vertical-align: middle;"],".tr-percent-bar>div>div ",["position: absolute;","height: 100%;"],".tr-percent-bar>span",["display: inline-block;","vertical-align: middle;","box-sizing: border-box;","padding-left: 4px;","padding-right: 4px;","overflow: hidden;","max-width: 100%;"]]),P.injectCss=function(e){s(this._styles,e)},P.toAlignment=S,P.prototype.getElement=function(){return this._topNode},P.prototype.getValue=function(){return this._absValue*this._sign},P.prototype.getPercent=function(){return this._absValue/this._maxValue*this._sign},P.prototype.isInvalid=function(){return this._invalid},P.prototype._checkInvalidity=function(){var e=this._absValue!=this._absValue||!this._maxValue;return e!==this._invalid&&(this._invalid=e,this._topNode.style.display=e?"none":""),e},P.prototype.setValue=function(e,t,n){var i=this;e&&"number"!=typeof e&&(e=+e),e||0===e?e>=0?(i._absValue=e,i._dirtySign|=1!==i._sign,i._sign=1):(i._absValue=-e,i._dirtySign|=-1!==i._sign,i._sign=-1):i._absValue=NaN,null!=t&&t==t&&(i._maxValue=t>=0?t:-t),i._checkInvalidity()||(i._absValue>i._maxValue&&(i._absValue=i._maxValue),i._updateValue(!0,n))},P.prototype.setMax=function(e){e==e&&(this._maxValue=e>=0?e:-e,this._checkInvalidity()||(this._absValue>this._maxValue&&(this._absValue=this._maxValue),this._updateValue(!0)))},P.prototype.hideZeroValue=function(e){var t=!1!==e;return this._zeroValueHidden!==t&&(this._zeroValueHidden=t,this._alignment&&this._updateTextVisibility()&&this._updateTextWidth(),!0)},P.prototype.setText=function(e){this._invalid||(e||0===e?"string"!=typeof e&&(e+=""):e="",this._txt._prevText!==e&&(this._txt._prevText=e,this._txt.textContent=e,this._tooltipEnabled&&(e?this._topNode.setAttribute("title",e):this._topNode.removeAttribute("title"))))},P.prototype.hideText=function(e){var t=!1!==e;return this._textHidden!==t&&(this._textHidden=t,this._alignment&&this._updateTextVisibility()&&this._updateTextWidth(),!0)},P.prototype.isTextHidden=function(){return!(!this._textHidden&&"0px"!==this._textWidth)||!(!this._zeroValueHidden||this._absValue)},P.prototype._updateTextVisibility=function(){var e=!this.isTextHidden();return this._textInDoc!==e&&(this._textInDoc=e,e?this._reorderElements():A.removeParent(this._txt),!0)},P.prototype._updateTextWidth=function(){return"c"!==this._alignment&&(this._textInDoc?this._track.style.width="calc(100% - "+this._textWidth+")":this._track.style.width="100%",this._txt.style.width=this._textWidth,!0)},P.prototype.setTextWidth=function(e){var t="56px";"number"==typeof e?t=e>8?e+"px":"0px":"string"==typeof e&&e&&(t="0"!==e?e:"0px"),this._textWidth!==t&&(this._textWidth=t,this._alignment&&(this._updateTextVisibility(),this._updateTextWidth()))},P.prototype.setMaxTextLength=P.prototype.setTextWidth,P.prototype.getTextScrollWidth=function(){return this._txt.scrollWidth>this._txt.offsetWidth?this._txt.scrollWidth:NaN},P.prototype.getAlignment=function(){return this._alignment},P.prototype.setAlignment=function(e){e=S(e)||"l",this._alignment!==e&&(this._alignment=e,"c"===e?(this._track.style.width="50%",this._txt.style.width="50%"):(this._updateTextWidth(),this._txt.style.textAlign="right",this._track.style.left="",this._txt.style.transform="",this._bar.style.right="r"===e?"0":""),this._textInDoc&&this._reorderElements(),this._dirtySign=!0,this._updateValue(!1))},P.prototype._reorderElements=function(){"l"!==this._alignment?(this._topNode.appendChild(this._track),this._topNode.appendChild(this._txt)):(this._topNode.appendChild(this._txt),this._topNode.appendChild(this._track))},P.prototype.useMovementColor=function(e){var t=!1!==e;this._movementColor!==t&&(this._movementColor=t,this.updateBarColor())},P.prototype.setTrackColor=function(e){this._track.style.backgroundColor=e||""},P.prototype.setBarColor=function(e){var t=e||"";this._barColor!==t&&(this._barColor=t,this.updateBarColor())},P.prototype.enableTooltip=function(e){this._tooltipEnabled=!1!==e,this._tooltipEnabled||this._topNode.removeAttribute("title")},P.prototype._updateValue=function(e,t){var n=this;if(n._dirtySign&&(n._dirtySign=!1,"c"===n._alignment&&(n._sign>=0?(n._track.style.left="50%",n._bar.style.right="",n._txt.style.transform="translateX(-100%)",n._txt.style.textAlign="right"):(n._track.style.left="",n._bar.style.right="0",n._txt.style.transform="",n._txt.style.textAlign="left")),n._movementColor&&!n._barColor&&n.updateBarColor()),!1!==e){this._zeroValueHidden&&this._updateTextVisibility()&&this._updateTextWidth();var i=100!==n._maxValue?n._absValue/n._maxValue*100:n._absValue;n._bar.style.width=i+"%",null!=t?!1!==t&&n.setText(t):n.setText((i*n._sign*100|0)/100+"%")}},P.prototype.updateBarColor=function(){var e;if(e=this._barColor?this._barColor:this._movementColor?this._sign>=0?f.themeColors.up:f.themeColors.down:f.themeColors.trackColor){var t=this._bar.style;t.backgroundColor!==e&&(t.backgroundColor=e)}};var G=function(){this._onPostSectionBinding=this._onPostSectionBinding.bind(this),this._onColumnAdded=this._onColumnAdded.bind(this),this._onColumnRemoved=this._onColumnRemoved.bind(this),this._requestRowRefresh=this._requestRowRefresh.bind(this),this._renderer=this._renderer.bind(this),this._onThemeLoaded=this._onThemeLoaded.bind(this),this._hosts=[]};i.inherits(G,g),G._runningId=0,G._themeRevision=0,G.prototype._themeLoading=!1,G.prototype._padding=8,G.prototype._percentageLabel=!0,G.prototype._autoFitting=!1,G.prototype._zeroValueHidden=!1,G.prototype._autoTextSizing=!0,G._helper=null,G.prototype.getName=function(){return"PercentBarPlugin"},G.prototype.initialize=function(e,t){this._hosts.indexOf(e)>=0||(this._hosts.push(e),this.config(t,e),e.listen("postSectionDataBinding",this._onPostSectionBinding),1===this._hosts.length&&(e.listen("columnAdded",this._onColumnAdded),e.listen("columnRemoved",this._onColumnRemoved),e.listen("columnAlignmentChanged",this._requestRowRefresh)),this._themeLoading||(this._themeLoading=!0,f.getThemeColors(this._onThemeLoaded).then(this._onThemeLoaded).catch(this._onThemeLoaded)))},G.prototype._afterInit=function(){for(var e=this.getColumnCount(),t=0;t<e;++t)this._setColumnRenderer(t)},G.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(this._hosts.splice(t,1),e.unlisten("postSectionDataBinding",this._onPostSectionBinding),e.unlisten("columnAdded",this._onColumnAdded),e.unlisten("columnRemoved",this._onColumnRemoved),e.unlisten("columnAlignmentChanged",this._requestRowRefresh),this._hosts.length||A.removeParent(G._helper),this._dispose())},G.prototype.config=function(e){if(e){var t=e.percentBar;if("object"==typeof t){this._autoFitting=!0===t.autoFitting,null!=t.zeroValueHidden&&(this._zeroValueHidden=!!t.zeroValueHidden),this._autoTextSizing=!1!==t.autoTextSizing,this._percentageLabel=!1!==t.percentageLabel;var n=t.padding;"number"==typeof n&&(this._padding=n)}for(var i=e.columns,o=i?i.length:0,r=0;r<o;++r){var l=i[r];this.setColumnPercentBar(r,l)}}},G.prototype.getColumnConfigObject=function(e,t){t||(t={});var n=this._getColumnData(e),i=n?n.percentBar:null;if(!i)return t;var o=t.percentBar={};return i.alignment&&(o.alignment=i.alignment),"string"==typeof i.field&&(o.field=i.field),null!=i.textHidden&&(o.textHidden=i.textHidden),null!=i.textWidth&&(o.textWidth=i.textWidth),null!=i.useMovementColor&&(o.useMovementColor=i.useMovementColor),i.barColor&&(o.barColor=i.barColor),null!=i.padding&&(o.padding=i.padding),null!=i.autoTextSizing&&(o.autoTextSizing=i.autoTextSizing),null!=i.percentageLabel&&(o.percentageLabel=i.percentageLabel),null!=i.autoFitting&&(o.autoFitting=i.autoFitting),null!=i.zeroValueHidden&&(o.zeroValueHidden=i.zeroValueHidden),t},G.prototype.getConfigObject=function(e){var t=e||{},n=t.columns;n||(n=t.columns=[]);for(var i=this.getColumnCount(),o=0;o<i;++o)n[o]||(n[o]={}),this.getColumnConfigObject(o,n[o]);var r=t.percentBar;return r||(r=t.percentBar={}),r.padding=this._padding,r.autoFitting=this._autoFitting,r.zeroValueHidden=this._zeroValueHidden,r.autoTextSizing=this._autoTextSizing,r.percentageLabel=this._percentageLabel,t},G.prototype.setPercentBarAlignment=function(e,t){var n=this._getColumnPercentBarOptions(e);n&&(t=P.toAlignment(t),n.alignment!==t&&(n.alignment=t,this._requestRowRefresh()))},G.prototype.setColumnPercentBar=function(e,t){var n=t?t.percentBar:null,i=this._newColumnData(e),o=i.percentBar,r=!1;if(n){r=!0;var l=o;if(o=i.percentBar={},l&&l.refId&&(o.refId=l.refId,o.colStats=l.colStats),"object"==typeof n)for(var a in n)o[a]=n[a];null==o.field&&(o.field=t.field?t.field:this._getField(e)),null!=o.alignment&&(o.alignment=P.toAlignment(o.alignment)),null!=o.autoTextSizing&&(o.autoTextSizing=!!o.autoTextSizing),null!=o.autoFitting?o.autoFitting=!!o.autoFitting:o.autoFitting=this._autoFitting,null!=o.zeroValueHidden?o.zeroValueHidden=!!o.zeroValueHidden:o.zeroValueHidden=this._zeroValueHidden,null!=o.percentageLabel?o.percentageLabel=!!o.percentageLabel:o.percentageLabel=this._percentageLabel,o._maxTextWidth=0;var s=o.padding;"number"!=typeof s&&(o.padding=s||null==s?this._padding:0)}else if(o){if(r=!0,o.refId){var u=this._hosts[0],d=u?u.getDataSource():null;d&&d.enableColumnStats(o.field,!1,o.refId),o.refId=null,o.colStats=null}i.percentBar=null}r&&this._initializedGrid&&(this._setColumnRenderer(e),this._requestRowRefresh())},G.prototype._setColumnRenderer=function(e){var t=this._getColumnPercentBarOptions(e);if(t){if(!t.refId){var n=this._hosts[0],i=n?n.getDataSource():null;if(i){t.refId="_pb"+G._runningId++;var o=i.enableColumnStats(t.field,!0,t.refId);this._realTimeGrid&&o.setColumnDataGetter(R),t.colStats=o}}this._activateColumnRenderer(e,"_percentBar",this._renderer)}else this._activateColumnRenderer(e)},G.prototype._getColumnPercentBarOptions=function(e){return this._getColumnOption(e,"percentBar")},G.prototype._getPercentBarAlignment=function(e,t){var n=t.alignment;return n||(P.toAlignment(this._hosts[0].getColumnAlignment(e))||"l")},G.prototype._getAutoTextSizing=function(e,t){return!t.textWidth&&!t.textHidden&&("c"!==this._getPercentBarAlignment(e,t)&&(null!=t.autoTextSizing?t.autoTextSizing:this._autoTextSizing))},G.prototype._onThemeLoaded=function(){G._themeRevision++,this._requestRowRefresh()},G.prototype._onPostSectionBinding=function(e){if(f.isThemeLoaded())for(var t=e.section,n=e.dataRows,i=t.getColumnCount(),o=e.fromRowIndex,r=e.toRowIndex,l=this._hosts[0].getPlugin("TextFormattingPlugin"),a=e.dataSource,s=0;s<i;++s){var u=this._getColumnPercentBarOptions(s);if(u){var d=u.field,p=u.colStats,h=u.barColor,c=u.useMovementColor,_=null!=u.textHidden&&u.textHidden,m=null!=u.zeroValueHidden&&u.zeroValueHidden,g=p.getMax(),v=l?l.getFormatter(s):null,y=this._getPercentBarAlignment(s,u),C=this._getAutoTextSizing(s,u);u._curAlignment!==y&&(u._curAlignment=y,u._maxTextWidth=0);for(var b=o;b<r;++b){var x=t.getCell(s,b,!1);if(x){var T=x.getContent(),w=T?T._percentBar:null;w||(T=(w=new P).getElement(),null!=c&&(w._themeRevision=G._themeRevision)),C?u._maxTextWidth&&w.setTextWidth(u._maxTextWidth+u.padding):w.setTextWidth(u.textWidth),w.setAlignment(y),w._themeRevision!==G._themeRevision&&(w._themeRevision=G._themeRevision,w.updateBarColor(c)),w.useMovementColor(c),w.setBarColor(h),w.hideText(_),w.hideZeroValue(m);var R=this._getRowData(n[b]),A=R?R[d]:NaN;if(v)if(u.percentageLabel){w.setValue(A,g,!1);var V=w.getPercent();w.setText(v.formatValue(V))}else w.setValue(A,g,v.formatValue(A));else{var S=u.percentageLabel?null:A;w.setValue(A,g,S)}x.setContent(T)}}C&&this._updateTextSize(t,a,s,u.field,g,v)}}},G.prototype._getHelper=function(){var e=G._helper;return e||((e=G._helper=A.div("percent-bar-helper")).style="visibility: hidden; position: fixed; bottom: -50px; left: -50px; white-space: pre;"),e.parentNode||document.body.appendChild(e),e},G.prototype._getTextWidth=function(e){var t=this._getHelper();t.textContent=e;var n=t.clientWidth;return t.removeChild(t.lastChild),n},G.prototype._updateTextSize=function(e,t,n,i,o,r){var l,a=this._getColumnPercentBarOptions(n),s=e.getFirstIndexInView(),u=e.getLastIndexInView(),d=[];for(l=s;l<=u;++l){var p=this._getData(t,l,i);r?p=r.formatValue(p):(p=(p/o*1e4|0)/100,p+="%"),d.push(p)}var h=this._getTextWidth(d.join("\n"));if(a.autoFitting||(h=h>a._maxTextWidth?h:a._maxTextWidth),h!==a._maxTextWidth)for(a._maxTextWidth=h,h+=a.padding,l=s;l<=u;++l){var c=e.getCell(n,l,!1);if(c){var _=c.getContent();_&&_._percentBar&&_._percentBar.setTextWidth(h)}}},G.prototype._renderer=function(e){},G.prototype._onColumnAdded=function(e){e.context&&this.setColumnPercentBar(e.colIndex,e.context)},G.prototype._onColumnRemoved=function(e){var t=e.columnData;if(t&&t.percentBar){var n=t.percentBar;e.sender.getDataSource().enableColumnStats(n.field,!1,n.refId),t.percentBar=null}},G.prototype._requestRowRefresh=function(){for(var e=this._hosts.length;--e>=0;)this._hosts[e].requestRowRefresh()},G.prototype.reloadThemeColors=function(){return f.reloadThemeColors().then(this._onThemeLoaded).catch(this._onThemeLoaded)};!function(e,t){if(e&&t&&t.prototype.getName){var n=t.prototype.getName().replace(/Plugin$/,"");if(n){var i=e.tr;i||(i=e.tr={});var o=i.grid;o||(o=i.grid={}),o[n+"Plugin"]=t,i[n+"Extension"]=t}}}(window,G)}]);
\ No newline at end of file
diff --git a/book/en/node_modules/tr-grid-row-filtering/dist/tr-grid-row-filtering.min.js b/book/en/node_modules/tr-grid-row-filtering/dist/tr-grid-row-filtering.min.js
index 3d93232d..b3dd6a12 100644
--- a/book/en/node_modules/tr-grid-row-filtering/dist/tr-grid-row-filtering.min.js
+++ b/book/en/node_modules/tr-grid-row-filtering/dist/tr-grid-row-filtering.min.js
@@ -1 +1 @@
-!function(e){var t={};function i(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,i),n.l=!0,n.exports}i.m=e,i.c=t,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},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 r={inherits:function(e,t){function i(){}i.prototype=t.prototype,e.prototype=new i,e.prototype.constructor=e,e.base=function(e,i,r){i||(i="constructor");for(var n=arguments.length,o=new Array(n),l=2;l<n;l++)o[l-2]=arguments[l];return t.prototype[i].apply(e,o)}}},n=function(){};n.prototype._events=null,n.prototype._listenerCount=0,n.prototype.addEventListener=function(e,t){if(e&&t){this._events||(this._events={});var i=this._events[e];i?i.indexOf(t)<0&&(i.push(t),++this._listenerCount):(this._events[e]=[t],++this._listenerCount)}},n.prototype.removeEventListener=function(e,t){var i=this._events?this._events[e]:null;if(i){var r=i.indexOf(t);r>=0&&(i.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 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 r=i.length,n=0;n<r;++n)i[n](t)}};n.preventDefault=function(e){e&&e.preventDefault&&(e.preventDefault(),e.stopPropagation())};var o=function(e,t,i){this.resolve=this.resolve.bind(this),this.reject=this.reject.bind(this),"function"==typeof e&&(this._resolveHandler=e),"function"==typeof t&&(this._rejectHandler=t),null!=i&&(this._ctx=i),this.promise=new Promise(function(e,t){this._resolve=e,this._reject=t}.bind(this))};o.prototype.promise=null,o.prototype._resolve=null,o.prototype._reject=null,o.prototype._resolveHandler=null,o.prototype._rejectHandler=null,o.prototype._ctx=null,o.prototype._fulfilled=!1,o.prototype.resolve=function(e){if(this._resolve){if(this._resolveHandler){var t=this._resolveHandler(e,this._ctx||this);null!=t&&(e=t)}this._resolve(e),this._finally()}},o.prototype.reject=function(e){if(this._reject){if(this._rejectHandler){var t=this._rejectHandler(e,this._ctx||this);null!=t&&(e=t)}this._reject(e),this._finally()}},o.prototype.isFulfilled=function(){return this._fulfilled},o.prototype._finally=function(){this._fulfilled=!0,this._ctx=this._resolveHandler=this._rejectHandler=null,this._resolve=this._reject=null};var l=function(e,t){return function(e,t,i){if(!e)return null;if(!t||e===t)return e;var r;if(i)for(var n=i.length,o=0;o<n;++o)(r=i[o])&&a(e,t,r);else for(r in t)a(e,t,r);return e}({},e,t)},a=function(e,t,i){var r=t[i];if(null!=r){var n=e[i];Array.isArray(n)?e[i]=n.concat(r):Array.isArray(r)&&n?e[i]=r.concat(n):e[i]=r}},s=function(e){return Array.isArray(e)?"{\n"+e.join("\n")+"\n}":e},u=function(e){return e.replace(/\n+/g,"\n\t").replace(/\n\t}$/,"\n}")},f=function(e,t){if(!e)return null;var i=document.createElement("style");i.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),o=!0;return n||(o=!1,n=document.head),o&&n.children&&n.children.length&&(r=n.children[0]),r?n.insertBefore(i,r):n.appendChild(i),i},d=function(e,t){for(var i in t||(t=[]),e){var r=e[i];"object"==typeof r?d(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 i="#",r=0;r<3;r++){var n=+t[r];n>=16||(i+="0"),i+=n?n.toString(16).toUpperCase():"0"}return i},p={},h=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},_=function(e,t,i){"attributes"===i.type&&(null!=t?i.attributeName===t&&e(i.target.getAttribute(t)):e(i.target))};p._getNewId=function(){return"observer_"+ ++p._id},p._addObserver=function(e,t,i){var r=i;r||(r={}),r.attributes=!0,p._observer.observe(e,r),p._addListener(e,t)},p._onMutationCallback=function(e){for(var t=0;t<e.length;t++)for(var i=e[t],r=p._listeners[i.target._observeId],n=0;n<r.length;n++)r[n](i)},p._addListener=function(e,t){var i=p._listeners;if(i||(i=p._listeners={}),!e._observeId){var r=p._getNewId();e._observeId=r}i[e._observeId]||(i[e._observeId]=[]);var n=i[e._observeId];n.indexOf(t)<0&&n.push(t)},p.addLanguageListener=function(e){e&&(e.lang=document.documentElement.lang||"en",p._addObserver(document.documentElement,h.bind(null,e)))},p.addAttributeListener=function(e,t,i){e&&t&&p._addObserver(e,_.bind(null,t,i))},p._observer=new MutationObserver(p._onMutationCallback),p._listeners={},p._id=0;var g={en:!0,de:!0,ja:!0,zh:!0,"zh-Hant":!0},m={_deferred:null,themeReady:null,_defaultColors:{up:"#39C46E",down:"#F5475B",level:"#C2C2C2",tickUp:"#39C46E",tickDown:"#F5475B",baseGrid:"#1A1A1C",baseText:"#C2C2C2",trackColor:"#FF9933"}};m.themeColors=m._defaultColors,m._components={},m._themeName="",m._elfVersion=0,m._dummyIcon=null,m._iconLoaded=!1,m._profileName=null,m._callbacks=[],m._observed=!1,m._pendingResolve=!1,m._themeLoaded=!1,m._icons={"elf-theme-halo":{rowGrouping:{expander:"down"},sorting:{ascending:"hollow-arrow-up",descending:"hollow-arrow-down",sortable:"sort-up-down"},columnStack:{stack:"map-layers",expand:"right",collapse:"left"}},"elf-theme-solar":{columnStack:{stack:"list",expand:"right",collapse:"left"}}},m._icons["halo-theme"]=m._icons["elf-theme-halo"],m._icons["solar-theme"]=m._icons["elf-theme-solar"],m.getElfVersion=function(){if(!m._elfVersion){var e=0;if(window.EFX_GRID){var t=window.EFX_GRID.version;e=+(t=t.split("."))[0]}else if(window.elf)if(window.elf.version){var i=window.elf.version.match(/\d/);i&&i[0]&&(e=parseInt(i[0],10))}else window.elf.customElements?e=3:window.customElements&&(e=4);else window.Polymer&&(e=1);m._elfVersion=e}return m._elfVersion},m.hasComponent=function(e){var t=m._components[e];if(null==t){t=0;var i=m.getElfVersion();if(e)1===i?document.createElement(e).is===e&&(t=i):i>1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=i),m._components[e]=t}return t},m.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return g[t]?t:""},m.hasTheme=function(e){return e===m.getThemeName()},m.getThemeName=function(e){return m._themeName||(m._themeName=m.getCssVariable("--theme-name",document.documentElement)),m._themeName},m.setThemeName=function(e){m._themeName=e},m.isThemeLoaded=function(){return m._themeLoaded},m.getColors=function(){return m.themeColors},m.isHaloTheme=function(e){return null==e&&(e=m.getThemeName()),!!e&&e.indexOf("halo")>=0},m.injectIcons=function(e,t){if("object"==typeof e){var i=m.getThemeName();e.themeName=i;var r=m.getElfVersion();e.elfVersion=r;var n=m._icons[i];n&&(e.icons=n)}},m.getIconList=function(){var e=m._icons[m.getThemeName()];return e?d(e):[]},m._onIconPreloaded=function(){if(m._dummyIcon){var e=m._dummyIcon.parentNode;e&&e.removeChild(m._dummyIcon),m._dummyIcon=null}},m.prepareIconPreloading=function(){if(!m._iconLoaded){m._iconLoaded=!0;var e=m.getIconList();if(e.length){setTimeout(m._onIconPreloaded,10);var t=m._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},m.getCssVariable=function(e,t){var i="",r=t||document.body;return window&&"string"==typeof e&&1===r.nodeType&&e.match(/^--/)&&(i=(i=window.getComputedStyle(r).getPropertyValue(e)).replace(/[\"\']/g,"")),i},m.getCssVariables=function(e,t){var i=t||document.body;if(window&&1===i.nodeType){var r=window.getComputedStyle(i);for(var n in e){var o=e[n];o&&o.match(/^--/)&&(e[n]=r.getPropertyValue(o).replace(/\"/g,""))}}return e||null},m.setRTK=function(e){null!=e&&(m._rtk=e)},m.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},m._addThemeChangedCallback=function(e){var t=m._callbacks;t.indexOf(e)<0&&t.push(e)},m.reloadThemeColors=function(){return m._deferred&&m._deferred.isFulfilled()?(m._profileName="",m._themeLoaded=!1,m.themeReady=null,m.getThemeColors()):m.themeReady},m.getThemeColors=function(e){if("function"==typeof e&&m._addThemeChangedCallback(e),m.themeReady)return m.themeReady;var t=m._deferred=new o;m.themeReady=t.promise;var i=m.getMovementColorProfile();if(i)i!==m._profileName?setTimeout(m._profileNameRetrieved,100):m._deferred.resolve(m.themeColors);else{var r={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},n=window?window.JET:null;if(m._themeLoaded=!1,m._rtk&&m._rtk.Settings)m._rtk.Settings.getAsync(r).then(m._loadingProfileSuccess).catch(m._loadingProfileFailure);else if(n&&n.Settings)try{n.Settings.read(m._loadingProfileSuccess,r)}catch(e){m._loadingProfileFailure()}else setTimeout(m._profileNameRetrieved,100)}return t.promise};var v=function(e){if(e!==m._profileName){m._retrieveThemeColors(e),m._pendingResolve&&(m._pendingResolve=!1,m._deferred.resolve(m.themeColors));for(var t=m._callbacks,i=0;i<t.length;i++)t[i]()}};m._loadingProfileSuccess=function(e){e&&document.documentElement.setAttribute("movement-color-profile",e.toLowerCase()),m._observed?m._pendingResolve=!0:m._profileNameRetrieved(e)},m._loadingProfileFailure=function(){m._retrieveThemeColors(),m._observed||(m._observed=!0,p.addAttributeListener(document.documentElement,v,"movement-color-profile")),m._deferred.reject("Failed to get movement color profile from settings.")},m._profileNameRetrieved=function(){var e=m.getMovementColorProfile();m._retrieveThemeColors(e),m._observed||(m._observed=!0,p.addAttributeListener(document.documentElement,v,"movement-color-profile")),m._deferred.resolve(m.themeColors)},m._retrieveThemeColors=function(e){m._themeLoaded=!0,m._profileName=e;var t=m.themeColors=m.getCssVariables({primary:"--color-scheme-primary",secondary:"--color-scheme-secondary",tertiary:"--color-scheme-tertiary",complementary:"--color-scheme-complementary",up:"--color-scheme-positive",down:"--color-scheme-negative",level:"--color-scheme-neutral",tickUp:"--color-scheme-tickup",tickDown:"--color-scheme-tickdown"});t.up||(t.up=m._defaultColors.up,t.down=m._defaultColors.down,t.level=m._defaultColors.level,t.tickUp=m._defaultColors.tickUp,t.tickDown=m._defaultColors.tickDown),t.positive=t.up,t.negative=t.down,t.neutral=t.level;var i=document.createElement("table");i.style.visibility="hidden",i.style.position="fixed",i.style.left="0",i.style.top="0",i.style.width="0";var r=i.insertRow(-1),n=r.insertCell(-1);document.body.appendChild(i);var o=window.getComputedStyle(r);t.tableBg=o.backgroundColor;var l=window.getComputedStyle(n);t.tableText=l.color,t.tableBorder=l.borderColor,t.tableText===t.tableBorder&&(n.className="tr-lg",l=window.getComputedStyle(n),t.tableBg=l.backgroundColor,t.tableText=l.color,t.tableBorder=l.borderColor,t.tableText===t.tableBorder&&(t.tableBg=m._defaultColors.baseGrid,t.tableText=m._defaultColors.baseText,t.tableBorder="")),t.tableBg=c(t.tableBg),t.tableText=c(t.tableText),t.tableBorder=c(t.tableBorder),document.body.removeChild(i),t.baseGrid=t.tableBg,t.baseText=t.tableText,t.trackColor=t.primary||m._defaultColors.trackColor};var y=function(){};r.inherits(y,n),y.prototype._hosts=null,y.prototype._compositeGrid=null,y.prototype._realTimeGrid=null,y.prototype._rowGetter=null,y.prototype._initializedGrid=!1,y.prototype.listen=y.prototype.addEventListener,y.prototype.unlisten=y.prototype.removeEventListener,y.prototype.afterInit=function(e,t,i){var r=null;i&&i.getCoreGrid&&(r=i.getCoreGrid()),r&&(this.getGridApi()||this.setGridWrapper("compositegrid",i),this._compositeGrid&&r.loadPlugin(this,t)),this._initializedGrid||(this._initializedGrid=!0,this._rowGetter=this._realTimeGrid?D:F,this._afterInit())},y.prototype._afterInit=function(){},y.prototype._dispose=function(){this._hosts&&(this._hosts.length||(this._compositeGrid=this._realTimeGrid=null,this._initializedGrid=!1))},y.prototype.hasMultiTableSupport=function(){return!1},y.prototype._prepareEventArguments=function(e,t){return t||(t={}),t.api=this.getGridApi(),t},y.prototype.getName=function(){return"GridPlugin"},y.prototype.initialize=function(e,t){},y.prototype.unload=function(e){this._dispose()},y.prototype.getRelativeGrid=function(e){var t=null;if(e.target){var i=(t=e.target).api;if(i&&i.getCoreGrid)return i.getCoreGrid()}else e.getElement?t=e.getElement():1===e.nodeType&&(t=e);if(t)for(var r=this._hosts.length;--r>=0;){var n=this._hosts[r];if(n.getElement().contains(t))return n}return null},y.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},y.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},y.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),r=this._realTimeGrid.getColumnDefinition(i);if(r)return r.getName()}return""},y.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)},y.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var i,r=this._compositeGrid.getColumnFields(),n=this._compositeGrid.getColumnCount(),o=[],l=0;l<e.length;l++)if("number"==typeof(i=e[l]))i>=0&&i<n&&o.push(i);else{var a=r.indexOf(i);-1!==a&&o.push(a)}return o}return this._realTimeGrid.getColumnIndices(e)},y.prototype.getColumnId=function(e){if("string"==typeof e)return e;var t=this.getColumnCount();if(e<0||e>=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var i=this._realTimeGrid.getColumnDefinition(e);return i?i.getId():""},y.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},y.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},y.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},y.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},y.prototype._moveColumnById=function(e,t){var i=this._hosts,r=i?i.length:0;if(r){for(var n=0,o=0;o<r;++o)n|=i[o].moveColumnById(e,t);return!!n}return!1},y.prototype._reorderColumns=function(e,t){var i=this._hosts,r=i?i.length:0;if(r){for(var n=0,o=0;o<r;++o)n|=i[o].reorderColumns(e,t);return!!n}return!1},y.prototype._loadPlugin=function(e,t,i){return e||(e=t.getPlugin(i))||(e=t.loadPlugin(i))&&this._initializedGrid&&(e._initializedGrid=!0),e},y.prototype._requestPlugin=function(e,t,i){return this._initializedGrid?y.requestPlugin(e,t,i,this._compositeGrid,this._realTimeGrid):Promise.reject("Plugin should be requested after the initialization")},y.requestPlugin=function(e,t,i,r,n){var l=null;if(e){var a=null;1===e.nodeType?a=e.api:e.getCoreGrid?a=e:e.getPlugin&&(l=e),a&&(l=a.getCoreGrid(),r||n||(a.getModel?r=a:n=a))}if(!l)return Promise.reject("Cannot find grid element");var s=l.getPlugin(t);if(s)return Promise.resolve(s);var u=new o;return setTimeout(y._onPluginRequested.bind(null,{grid:l,pluginRef:t,compositeGrid:r,realTimeGrid:n,config:i,deferred:u}),10),u.promise},y._onPluginRequested=function(e){var t=e.grid;if(!t.getElement())return e.deferred.reject("Grid has been disposed before the plugin is fully loaded: "+e.pluginRef);var i=t.getPlugin(e.pluginRef);if(i)return e.deferred.resolve(i);var r=!1;return e.pluginRef.beforeInit&&(r=!0,e.pluginRef.beforeInit(t.getElement(),e.config,!0)),(i=t.loadPlugin(e.pluginRef,e.config))?(!r&&i.beforeInit&&(r=!0,i.beforeInit(t.getElement(),e.config)),i.setGridWrapper&&(e.compositeGrid?i.setGridWrapper("compositegrid",e.compositeGrid):e.realTimeGrid&&i.setGridWrapper("realtimegrid",e.realTimeGrid)),i.afterInit&&i.afterInit(),e.deferred.resolve(i)):e.deferred.reject("Unable to load required dependency: "+e.pluginRef)},y.prototype._getPlugin=function(e,t){return null==t&&(t=this._hosts[0]),t?t.getPlugin(e):null},y.prototype._getColumnData=function(e,t){return null==t&&(t=this._hosts[0]),t?t.getColumnData(e):null},y.prototype._getColumnOption=function(e,t,i){var r=this._getColumnData(e,i);return r?r[t]:null},y.prototype._newColumnData=function(e,t){if(null==t&&(t=this._hosts[0]),!t)return{};var i=t.getColumnData(e);return i||(i=t.setColumnData(e,{})),i},y.prototype._getField=function(e){var t=this._compositeGrid||this._realTimeGrid;return t?t.getColumnField(e):""},y.prototype._getRowData=function(e){return this._realTimeGrid&&e?e.ROW_DEF.getRowData():e},y.prototype._getRow=function(e,t){return w(e.getRowDataAt(t))},y.prototype._getData=function(e,t,i){var r=this._getRow(e,t);return r?r[i]:void 0},y.prototype._setData=function(e,t,i,r){if(this._realTimeGrid){var n=T(e,t);n&&n.setData(i,r)}else"number"==typeof t?e.setDataAt(t,i,r):e.setData(t,i,r)},y.prototype._setRowData=function(e,t,i){if(this._realTimeGrid){var r=T(e,t);r&&r.setRowData(i)}else"number"==typeof t?e.setRowDataAt(t,i):e.setRowData(t,i)},y.prototype._setStaticData=function(e,t,i,r){if(this._realTimeGrid){var n=T(e,t);n&&n.setStaticData(i,r)}else this._setData(e,t,i,r)},y.prototype._setColumnData=function(e,t,i,r){if(t){var n=Array.isArray(r)?r:e.getAllRowIds(!0),o=n?n.length:0;if(o)if(1!==o){var l=Array.isArray(i)?i:n.map((function(){return i}));if(this._realTimeGrid){for(var a=0;a<o;++a){var s=e.getRowData(n[a]);if(s){var u=s.ROW_DEF;u&&(u.getRowData()[t]=l[a])}}e.dispatchGlobalChange||(e=e.getDataSource()),e&&e.dispatchGlobalChange&&e.dispatchGlobalChange()}else e.setColumnData(t,l,n)}else this._setData(e,n[0],t,Array.isArray(i)?i[0]:i)}},y.prototype._activateColumnRenderer=function(e,t,i){if(null!=e){var r=this._realTimeGrid;r?r.activateColumnRenderer(e,t,i):"function"==typeof i?this._hosts[0].setColumnDataBindingHandler(e,i):this._hosts[0].setColumnDataBindingHandler(e,null)}};var C=function(){},b={left:37,right:39,up:38,down:40,backspace:8,tab:9,enter:13,esc:27,escape:27,space:32,pageup:33,pagedown:34,del:46,delete:46};y.prototype._mockMouseEvent=function(e,t,i){null==e&&(e=0),null==t&&(t=0);var r=i||{};if(r.preventDefault=C,r.stopPropagation=C,e>=0&&t>=0){var n=this._activeGrid||this._hosts[0],o=n?n.getCell(r.sectionType||"content",e,t):null;r.target=o?o.getElement():null}return r},y.prototype._mockKeyboardEvent=function(e,t){var i=t||{};if(i.preventDefault=C,i.stopPropagation=C,"string"==typeof e){var r=b[e.toLowerCase()]||0;e=r||e.charCodeAt(0)}return i.keyCode=e,i},y._staticStyles={},y._themeLoaders={},y._themeLoadSuccess=function(e,t){var i=this.getName(),r=y._staticStyles[i]=e(t);this.applyStyles(r,i)},y.prototype.applyStaticStyles=function(e){var t=this.getName(),i=y._staticStyles[t];i?this.applyStyles(i,t):e&&(y._themeLoaders[t]||(y._themeLoaders[t]=m.getThemeColors()),y._themeLoaders[t].then(y._themeLoadSuccess.bind(this,e)))},y.prototype.applyStyles=function(e,t,i){t||(t=this.getName());var r,n,o="_style"+t,l=this._hosts,a=l.length;if(a)if(i)for(r=0;r<a;r++)n=l[r],this.revokeStyles(n,t),n[o]=f(e,n.getElement());else for(r=0;r<a;r++)(n=l[r])[o]||(f(e,n.getElement()),n[o]=!0)},y.prototype.revokeStyles=function(e,t){if(e&&t){var i=e[t="_style"+t];i&&1===i.nodeType&&(i.parentNode.removeChild(i),e[t]=null)}};var T=function(e,t){var i="number"==typeof t?e.getRowDataAt(t):e.getRowData(t);return i&&i.ROW_DEF||null},F=function(e){return e},D=function(e){return e?e.ROW_DEF.getRowData():null},w=function(e){if(e){var t=e.ROW_DEF;return t?t.getRowData():e}return null},A={EQ:{id:"EQ",name:"Equal to",type:"string",positive:1,caseSensitive:1,formula:"str == input"},NEQ:{id:"NEQ",name:"Not equal to",type:"string",positive:0,caseSensitive:1,formula:"str != input"},NUMEQ:{id:"NUMEQ",name:"Number equal to",type:"number",positive:1,caseSensitive:1,formula:"val == input"},NUMNEQ:{id:"NUMNEQ",name:"Number not equal to",type:"number",positive:0,caseSensitive:1,formula:"val != input"},GT:{id:"GT",name:"Greater than",type:"number",positive:1,caseSensitive:1,formula:"val > input"},GTE:{id:"GTE",name:"Greater than or equal to",type:"number",positive:1,caseSensitive:1,formula:"val >= input"},LT:{id:"LT",name:"Less than",type:"number",positive:1,caseSensitive:1,formula:"val < input"},LTE:{id:"LTE",name:"Less than or equal to",type:"number",positive:1,caseSensitive:1,formula:"val <= input"},BEGIN:{id:"BEGIN",name:"Begin with",type:"string",positive:1,caseSensitive:0,formula:"str.indexOf(input) === 0"},NBEGIN:{id:"NBEGIN",name:"Not begin with",type:"string",positive:0,caseSensitive:0,formula:"str.indexOf(input) !== 0"},END:{id:"END",name:"End with",type:"string",positive:1,caseSensitive:0,formula:"(str.length >= input.length) && str.lastIndexOf(input) === (str.length - input.length)"},NEND:{id:"NEND",name:"Not end with",type:"string",positive:0,caseSensitive:0,formula:"(str.length < input.length) || str.lastIndexOf(input) !== (str.length - input.length)"},CONT:{id:"CONT",name:"Contain",type:"string",positive:1,caseSensitive:0,formula:"str.indexOf(input) >= 0"},NCONT:{id:"NCONT",name:"Not contain",type:"string",positive:0,caseSensitive:0,formula:"str.indexOf(input) < 0"},EQ_BLANK:{id:"EQ_BLANK",name:"Equal to blank value",type:"blank",positive:1,caseSensitive:1,formula:"!val && val !== 0"},EQ_NBLANK:{id:"EQ_NBLANK",name:"Equal to non blank value",type:"blank",positive:1,caseSensitive:1,formula:"(val || val === 0) ? true : false"},DT:{id:"DT",name:"Date is",type:"date",positive:1,caseSensitive:1,formula:"ts === input"},DTA:{id:"DTA",name:"Date is After",type:"date",positive:1,caseSensitive:1,formula:"ts > input"},DTB:{id:"DTB",name:"Date is Before",type:"date",positive:1,caseSensitive:1,formula:"ts < input"}};A.TXTEQ=A.EQ,A.BLANK=A.EQ_BLANK,A.NBLANK=A.EQ_NBLANK,A.NEQ_BLANK=A.EQ_NBLANK,A.GREATER_THAN=A.GT,A.GREATER_THAN_OR_EQUAL_TO=A.GTE,A.EQUAL_TO=A.EQ,A.LESS_THAN=A.LT,A.LESS_THAN_OR_EQUAL_TO=A.LTE,A.TEXT_THAT_CONTAINS=A.CONT,A.TEXT_THAT_NOT_CONTAINS=A.NCONT,A.TEXT_IS=A.EQ,A.NOT_BLANK=A.EQ_NBLANK;var I={EQ:function(e,t){return e==t},NEQ:function(e,t){return e!=t},NUMEQ:function(e,t){return e==t},NUMNEQ:function(e,t){return e!=t},GT:function(e,t){return e>t},GTE:function(e,t){return e>=t},LT:function(e,t){return e<t},LTE:function(e,t){return e<=t},BEGIN:function(e,t){return 0===e.indexOf(t)},NBEGIN:function(e,t){return 0!==e.indexOf(t)},END:function(e,t){return e.length>=t.length&&e.lastIndexOf(t)===e.length-t.length},NEND:function(e,t){return e.length<t.length||e.lastIndexOf(t)!==e.length-t.length},CONT:function(e,t){return e.indexOf(t)>=0},NCONT:function(e,t){return e.indexOf(t)<0},EQ_BLANK:function(e,t){return!e&&0!==e},EQ_NBLANK:function(e,t){return!(!e&&0!==e)},DT:function(e,t){return e===t},DTA:function(e,t){return e>t},DTB:function(e,t){return e<t}},N={"||":1,"&&":2,"<":3,">":3,"<=":3,">=":3,"!=":3,"=":3,"==":3,"===":3,"+":4,"-":4,"*":5,"%":6,"/":6,"!":7,"!!":7},S={"+":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<=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}},E={"+":2,"-":2,"*":2,"/":2,"%":2,"<":2,">":2,"<=":2,">=":2,"==":2,"!=":2,"&&":2,"||":2,"!":1,"!!":1},x=function(e,t,i,r){var n={value:t,type:i};return r&&(n.dataType=r),"operator"===i?n.precedence=N[t]:"parenthesis"===i&&(n.precedence=0),e.push(n),e.length-1},O={_tokens:[],_withString:function(e){return" #"+x(O._tokens,e.substring(1,e.length-1),"literal","string")+"#"},_withField:function(e){return" #"+x(O._tokens,e,"literal","variable")+"#"},_withFieldInBrackets:function(e){return O._withField(e.substring(1,e.length-1))},_withNegativeNumber:function(e){var t=+e;return t==t?" #"+x(O._tokens,t,"literal","number")+"#":""},_withPositiveNumber:function(e){return 35===e.charCodeAt(0)?e:O._withNegativeNumber(e)},_withOperator:function(e){return N[e]?("="!=e&&"==="!=e||(e="=="),"#"+x(O._tokens,e,"operator")+"#"):""},_withParenthesis:function(e){return"#"+x(O._tokens,e,"parenthesis")+"#"},_tester:function(e){for(var t=e._rpn,i=t.length,r=0,n=0,o=0;o<i;++o){var l=t[o];if("literal"!==l.type){var a=E[l.value];if(!(r>=a))return console.warn("Cannot parse an expression with insufficient number of operands"),!0;r-=a}++r>n&&(n=r)}return 1!==r||(e._stackSize=n,!1)},_filter:function(e,t){for(var i,r=e._rpn,n=new Array(e._stackSize),o=r.length,l=0,a=0;a<o;++a){var s=r[a],u=s.value;"literal"===s.type?i="variable"!==s.dataType?u:t?t[u]:null:1===E[u]?(i=S[u](n[l-1]),l-=1):(i=S[u](n[l-2],n[l-1]),l-=2),n[l++]=i}return!!n[0]},parse:function(e){if("function"==typeof e)return e;if(!e||"string"!=typeof e)return null;var t=e.trim();if(!t)return null;O._tokens.length=0,t=(t=(t=(t=(t=(t=(t=(t=t.replace(/".+?"/g,O._withString)).replace(/'.+?'/g,O._withString)).replace(/\[.+?\]/g,O._withFieldInBrackets)).replace(/-[0-9.]+/g,O._withNegativeNumber)).replace(/[0-9.#]+/g,O._withPositiveNumber)).replace(/[a-zA-Z_]\w*/g,O._withField)).replace(/[\-\/+*%!=<>&|]+/g,O._withOperator)).replace(/[()]/g,O._withParenthesis);var i=O._tokens,r=i.length;if(!r)return null;var n,o,l,a=[],s=t.match(/#[0-9]+#/g);for(n=0;n<r;++n){var u=s[n];if("literal"===(l=(o=i[+u.substring(1,u.length-1)]).type)){var f=a[a.length-1];if(f&&"literal"===f.type){if(!(o.value<0&&"number"===o.dataType))return console.warn("Cannot parse an expression with insufficient number of operators"),null;x(a,"-","operator"),o.value*=-1}}a.push(o)}O._tokens.length=0,r=a.length;var d=[],c=[],p=null,h=!1;for(n=0;n<r;++n)if("literal"===(l=(o=a[n]).type))d.push(o);else if("parenthesis"===l)if("("===o.value)c.push(o);else{for(h=!1;c.length;){if("("===(p=c.pop()).value&&"parenthesis"===p.type){h=!0;break}d.push(p)}h||console.warn("No left parenthesis paired with the right one")}else{for(;c.length&&!(o.precedence>c[c.length-1].precedence);)d.push(c.pop());c.push(o)}for(h=!1;c.length;)"("===(p=c.pop()).value&&"parenthesis"===p.type?h=!0:d.push(p);if(h&&console.warn("No right parenthesis paired with the left one"),!d.length)return null;var _={_rpn:d};return O._tester(_)?null:O._filter.bind(null,_)}},G={or:1,OR:1,Or:1,oR:1,"||":1},R=function(e){return"number"==typeof e?e:e?Number(e):!1===e?0:NaN},L=/^\w{3} \w{3}/,P=function(e){if("string"==typeof e){var t=new Date(e),i=t.getTime();if(i==i&&L.test(e))return t}return e},k=function(e){return"string"==typeof e?e:e?e+"":0===e?"0":!1===e?"false":""},U=function(e,t){return e&&e.getTime?t?1e4*e.getUTCFullYear()+100*e.getUTCMonth()+e.getUTCDate():1e4*e.getFullYear()+100*e.getMonth()+e.getDate():NaN},B=function(e,t){var i=e._conds,r=i?i.length:0;if(!r)return!0;var n,o,l,a,s=e._fieldName,u=e._formattedFieldName,f=t[s];e._rawDataAccessor&&(f=e._rawDataAccessor(f));for(var d=!1,c=!1,p=0;p<r;++p){var h=0;if(p>0)if(h=G[i[p-1].connector]){if(d)return!0}else if(!d)continue;var _=i[p],g=A[_.operatorId];c=!1;var m=g.type,v=g.id,y=I[v];"blank"===m?c=y(f):"number"===m?(null==l&&(l=R(f)),c=y(l,_.value)):"date"===m?(null==a&&(a=U(f,!1)),c=y(a,_.value)):(null==n&&(e._formattedDataAccessor?n=e._formattedDataAccessor(t[s]):e._formatter?n=e._formatter(t):u!==s?null==(n=t[u])&&(n=f):n=f,n=k(n)),g.caseSensitive?c=y(n,_.value):(null==o&&(o=n.toLowerCase()),c=y(o,_.value))),d=p>0?h?d||c:d&&c:c}return d},V=function(e,t){var i=t[e._fieldName];return e._rawDataAccessor&&(i=e._rawDataAccessor(i)),!!e._itemMap[i]},M=function(e){return[e.operatorId,e.origValue,e.connector]},j=function(e){this._initStaticVariables(),this._conditions=[],this.init(e)};j.prototype._initStaticVariables=function(){if(!j._initStatic){j._initStatic=!0,j._updateTimezoneOffset();var e=864e5-new Date%864e5;setTimeout(j._setUpdateInterval,e)}},j._initStatic=!1,j.prototype._fieldName="",j.prototype._formattedFieldName="",j.prototype._formatter=null,j.prototype._useUTCTime=!1,j.prototype._rawDataAccessor=null,j.prototype._formattedDataAccessor=null,j.prototype._conditions,j._timezoneOffset=0,j._updateTimezoneOffset=function(){j._timezoneOffset=60*(new Date).getTimezoneOffset()},j._setUpdateInterval=function(){j._updateTimezoneOffset(),setInterval(j._updateTimezoneOffset,864e5)},j.prototype.reset=function(){this.setFieldDefinition(""),this._rawDataAccessor=this._formattedDataAccessor=null},j.prototype.init=function(e){if(e){var t=e.field;t?this.setFieldDefinition(t,e.formatter,e.formattedField):null!=t&&this.setFieldDefinition("");var i=e.useUTCTime;null!=i&&(this._useUTCTime=!!i);var r=e.rawDataAccessor,n=e.formattedDataAccessor;null==r&&null==n||this.setDataAccessors(r,n)}},j.prototype.setFieldDefinition=function(e,t,i){this._fieldName=e,this._formattedFieldName=i||this._fieldName+"_FORMATTED",this._formatter=t||null,this._conditions.length=0},j.prototype.setDefaultUTCUsage=function(e){this._useUTCTime=!!e},j.prototype.setDataAccessors=function(e,t){this._rawDataAccessor="function"==typeof e?e:null,this._formattedDataAccessor="function"==typeof t?t:null},j.prototype.addCondition=function(e,t,i,r){var n=e?e.toUpperCase():"",o=A[n];if(!o)return!1;if("{}"===t||"{*}"===t)n=o.positive^"{}"===t?"EQ_NBLANK":"EQ_BLANK",o=A[n];else if(!t&&"blank"!==o.type&&0!==t&&!1!==t)return!1;var l={operatorId:n,origValue:t,connector:i||""};return null!=r&&(l.useUTCTime=r),this._conditions.push(l),!0},j.prototype.addConditions=function(e){var t=0;if(Array.isArray(e)){for(var i=e.length,r=0;r<i;++r){var n=e[r];Array.isArray(n)&&this.addCondition(n[0],n[1],n[2],n[3])&&++t}i>1&&!t&&!Array.isArray(e[0])&&this.addCondition(e[0],e[1],e[2])&&++t}return t},j.prototype.getConditions=function(){return this._conditions.length?this._conditions.map(M):null},j.prototype.buildFilter=function(){if(!this._fieldName)return null;var e=this._conditions.length;if(!e)return null;for(var t=this._formatter,i=this._conditions.slice(),r=0;r<e;++r){var n=i[r],o=A[n.operatorId],l=o.type,a=n.origValue;if("number"===l)a=P(a),a=R(a);else if("date"===l){var s=null;a instanceof Date?s=a:"number"!=typeof a&&"string"!=typeof a||(s=new Date(a)),a=U(s,null!=n.useUTCTime?n.useUTCTime:this._useUTCTime)}else"string"===l&&(a=k(a),o.caseSensitive||(a=a.toLowerCase()));n.value=a}var u={_conds:i,_fieldName:this._fieldName||"",_formatter:t||null,_formattedFieldName:this._formattedFieldName||"",_rawDataAccessor:this._rawDataAccessor||null,_formattedDataAccessor:this._formattedDataAccessor||null};return this._conditions.length=0,B.bind(null,u)},j.prototype.buildMonitorFilter=function(e,t,i,r){this.setFieldDefinition(t,i,r);for(var n=t.lastIndexOf("_LOCAL")===t.length-6,o=e.split("♣"),l=0;l<o.length;l++){var a=o[l].split("♦");n&&(a[1]=(a[1]-j._timezoneOffset)%86400+""),this.addCondition(a[0],a[1],a[2])}return this.buildFilter()};j.prototype.parse=function(e,t,i,r,n,o){var l=typeof e;return"string"===l?e.indexOf("♦")>=0?this.buildMonitorFilter(e,t,i,r):O.parse(e):"function"===l?e:Array.isArray(e)?(t&&(this.setFieldDefinition(t,i,r),this.setDataAccessors(n,o)),this.addConditions(e),this.buildFilter()):"object"===l?function(e,t,i){if(!e||!t)return null;var r={_fieldName:t,_itemMap:e};return i&&(r._rawDataAccessor=i),V.bind(null,r)}(e,t,n):null};var q=function(e){var t=e._context[0];return{field:e._field||"",expression:e._expressions[0],context:null==t||t._autoGenerated?null:t}},z="(Blanks)",Q=function(){var e=this;e._onPreSectionRender=e._onPreSectionRender.bind(e),e._onColumnAdded=e._onColumnAdded.bind(e),e._onColumnRemoved=e._onColumnRemoved.bind(e),e._onPreLoadedDialog=e._onPreLoadedDialog.bind(e),e._onIconClicked=e._onIconClicked.bind(e),e._filterLogic=e._filterLogic.bind(e),e._updateAllColumnIcons=e._updateAllColumnIcons.bind(e),e.refresh=e.refresh.bind(e),e._requestFilterRefresh=e._requestFilterRefresh.bind(e),e._globalFilters=[],e._globalContexts=[],e._columnFilters=[],e._hosts=[],e._dvs=[],e._funcMap={},e._nameMap={}};r.inherits(Q,y),Q.prototype._funcMap=null,Q.prototype._nameMap,Q.prototype._disabled=!1,Q.prototype._disablingIds=null,Q.prototype._globalFilters,Q.prototype._globalContexts,Q.prototype._columnFilters,Q.prototype._activeColFilters=null,Q.prototype._iconActivation="onActiveFilter",Q.prototype._filterId=0,Q.prototype._uiTimerId=0,Q.prototype._filterTimerId=0,Q.prototype._overridingFilter=null,Q.prototype._preTransform=null,Q.prototype._rowTransform=null,Q.prototype._filterDialog=null,Q.prototype._dialogInitialized=!1,Q.prototype._dialogOptions=null,Q._filterBuilder=null,Q.prototype._dvs,Q.prototype.getName=function(){return"RowFilteringPlugin"},Q.prototype.initialize=function(e,t){this._hosts.indexOf(e)>=0||(this._hosts.push(e),Q._styles||(Q._styles=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,u)}return""}([".hovering-filter-icon .cell:not(.active-filter):hover .floating-panel .title-filter-icon",["display: flex;"],".hovering-filter-icon .cell:not(.active-filter) .floating-panel .title-filter-icon",["display: none;"],".floating-panel",["position:relative;"],".floating-panel .title-filter-icon",["color: var(--grid-title-filter-icon-color,inherit);"],".title .floating-panel .title-filter-icon:hover",["color: var(--grid-title-filter-icon-hover-color,inherit);"],".always-on-filter .floating-panel .title-filter-icon",["color: var(--grid-header-txtcolor,inherit);"],".always-on-filter .active-filter .floating-panel .title-filter-icon",["color: var(--grid-title-filter-icon-hover-color,inherit);"],".hovering-filter-icon .tiny-col .cell:hover, .tr-grid .tiny-col .cell.active-filter",["padding-left:0px;"],".tiny-col.movable .cell .floating-panel .title-filter-icon:before",["content: '.';","position: absolute;","margin-left: auto;","margin-right: auto;","left: 0;","right: 0;","top: -10px;","font-size: 10px;","font-family: monospace;","color: var(--grid-title-dot-icon,inherit);","text-align:center;"]])),e._rowFilteringStyles||(e._rowFilteringStyles=!0,f(Q._styles,e.getElement())),e.unloadPlugin("ColumnFilterPlugin"),e.listen("preSectionRender",this._onPreSectionRender),e.listen("postDataSourceChanged",this._requestFilterRefresh),e.listen("columnAdded",this._onColumnAdded),e.listen("columnRemoved",this._onColumnRemoved),this.config(t))},Q.prototype.unload=function(e){var t=this._hosts.indexOf(e);t<0||(this._hosts.splice(t,1),e.unlisten("preSectionRender",this._onPreSectionRender),e.unlisten("postDataSourceChanged",this._requestFilterRefresh),e.unlisten("columnAdded",this._onColumnAdded),e.unlisten("columnRemoved",this._onColumnRemoved),this._hosts.length||(this._uiTimerId&&(clearTimeout(this._uiTimerId),this._uiTimerId=0),this._filterTimerId&&(clearTimeout(this._filterTimerId),this._filterTimerId=0),this._hasPendingFilter=!1,this._filterDialog&&(this._filterDialog.hide(),this._filterDialog=null,this._dialogInitialized=!1)),this._dispose())},Q.prototype._afterInit=function(){this._filterDialog||(this._filterDialog=Q._createDialog(),this._dialogInitialized=!1,this._filterDialog&&(this._filterDialog.style.display="none",document.body.appendChild(this._filterDialog),setTimeout(this._onPreLoadedDialog,10))),this._applyPendingFilter()},Q.prototype._applyPendingFilter=function(){if(this._initializedGrid&&this._hasPendingFilter){this._hasPendingFilter=!1;for(var e=this.getColumnCount(),t=0;t<e;++t){var i=this._getUserColumnSettings(t);i.expression?this.addColumnFilter(t,i.expression,i.filterState):this._removeColumnFilters(t)}}},Q.prototype._onPreLoadedDialog=function(){if(this._filterDialog){this._filterDialog.style.display="";var e=this._filterDialog.parentNode;e&&e.removeChild(this._filterDialog)}},Q.prototype.config=function(e){if(e){var t=e.rowFiltering;if(t){if((t.disabledUI||t.uiDisabled)&&(this._iconActivation="none"),null!=t.emptySegmentFiltering&&this.enableEmptySegmentFiltering(!!t.emptySegmentFiltering),null!=t.separatorFiltering&&this.enableSeparatorFiltering(!!t.separatorFiltering),t.iconActivation){this._iconActivation=t.iconActivation;for(var i=0;i<this._hosts.length;i++)"onHover"===this._iconActivation?this._hosts[i].enableClass("hovering-filter-icon",!0):this._hosts[i].enableClass("hovering-filter-icon",!1),"always"===this._iconActivation?this._hosts[i].enableClass("always-on-filter",!0):this._hosts[i].enableClass("always-on-filter",!1)}t.dialogOptions&&(this._dialogOptions=t.dialogOptions),t.clicked&&(t.click=t.clicked),this.addListener(t,"click"),this.addListener(t,"beforeDialogOpened"),this.addListener(t,"dialogCommitted"),this.addListener(t,"iconCreated"),this.addListener(t,"filterChanged"),this.addListener(t,"refreshed")}var r=e.columns;if(r){for(var n=r.length,o=0;o<n;++o){var l=r[o];this._setColumnOptions(o,l)}this._applyPendingFilter()}}},Q.prototype.getConfigObject=function(e){var t=e||{},i=t.columns;i||(i=t.columns=[]);for(var r=this.getColumnCount(),n=0;n<r;++n){var o=i[n];o||(o=i[n]={});var a=this._getUserColumnSettings(n),s=a.expression;if(s&&"function"!=typeof s)if("object"!=typeof s||Array.isArray(s))o.filter=s;else{var u=l(s);u[""]||u.null||u[void 0]||u.NaN?(delete u[""],delete u.null,delete u[void 0],delete u.NaN,u[z]=!0,o.filter=u):o.filter=s}var f=a.filterState;null!=f&&("object"==typeof f&&f._autoGenerated||(o.filterState=f))}var d=t.rowFiltering,c=!1;return d||(d={}),"onActiveFilter"!==this._iconActivation&&(d.iconActivation=this._iconActivation,c=!0),this._dialogOptions&&(d.dialogOptions=this._dialogOptions,c=!0),c&&(t.rowFiltering=d),t},Q.prototype.disable=function(e,t){var i=!1!==e;for(var r in this._disablingIds||(this._disablingIds={}),t||(t="_"),this._disablingIds[t]=i,i=!1,this._disablingIds)if(this._disablingIds[r]){i=!0;break}this._disabled!==i&&(this._disabled=i,i?(this.refresh(),this._updateAllColumnIcons()):(this._requestFilterRefresh(),this._setTimerForUpdatingIcons()))},Q.prototype.addFilter=function(e,t,i){var r=this._parseFilter(e,-1);return r?(t||(t="_"+this._filterId++),this._nameMap[t]||this._globalFilters.indexOf(r)>=0?"":(i=null!=i?i:null,this._nameMap[t]=r,this._globalFilters.push(r),this._globalContexts.push(i),this._dispatch("filterChanged",{filterType:"global",changeType:"add",colIndex:-1,field:null}),this._requestFilterRefresh(),t)):""},Q.prototype.addGridFilter=function(e,t){return this.addFilter(e,null,t)},Q.prototype._parseFilter=function(e,t,i){if(!e)return null;if("function"==typeof e)return e;var r=Q._getFilterBuilder(),n=t||0===t,o=n?this._getField(t):"",l=n?this._getFormatter(t):null,a=null;if("string"==typeof e)null==(a=this._funcMap[e])&&(a=this._funcMap[e]=r.parse(e,o,l,o));else{var s=null,u=null;i&&(s=i.rawDataAccessor||null,u=i.formattedDataAccessor||null),Array.isArray(e)||(e[z]||i&&i.blankValues)&&(e[""]=e.null=e[void 0]=e.NaN=!0,delete e[z]),a=r.parse(e,o,l,o,s,u)}return a},Q.prototype.addColumnFilter=function(e,t,i){if(e<0||e>=this.getColumnCount())return!1;var r=this._getColumnFilterOption(e);if(r&&r._expressions[0]===t)return!1;var n=null;if("function"==typeof t?(n=t,i&&"string"==typeof i&&(t=i)):n=this._parseFilter(t,e,i),!n)return!1;var o=this._getUserColumnSettings(e);o.expression=t,o.filterState=i,null==i&&(i={_autoGenerated:!0});var l=this._getField(e);return i&&"object"==typeof i&&(i.field=l),(r=this._initColumnFilterOption(e))._field=l,r._filters.push(n),r._expressions.push(t),r._context.push(i),r._rawDataAccessor=i.rawDataAccessor||null,r._formattedDataAccessor=i.formattedDataAccessor||null,this._columnFilters.push(r),this._dispatch("filterChanged",{filterType:"column",changeType:"add",colIndex:e,field:l}),this._requestFilterRefresh(),this._updateColumnIcon(e),!0},Q.prototype.setColumnFilter=function(e,t,i){if(this.getColumnFilterExpression(e)===t)return!1;var r=this._removeColumnFilters(e),n=this.addColumnFilter(e,t,i);return!n&&r&&this._updateColumnIcon(e),r||n},Q.prototype.getColumnFilterExpression=function(e){return this._getUserColumnSettings(e).expression||null},Q.prototype._setColumnOptions=function(e,t){var i=this._getUserColumnSettings(e),r=t.filterIcon,n=t.fieldDataType||t.dataType;n&&(i.fieldDataType=n),null!=r&&(i.filterIcon=r);var o=t.filter;null!=o&&(i.expression=o,i.filterState=null,this._hasPendingFilter=!0);var l=t.filterState;null!=l&&(i.filterState=l);var a=0==r?"none":this._iconActivation;return"always"!=a&&"onHover"!=a||this._updateColumnIcon(e),null!=o},Q.prototype._getUserColumnSettings=function(e){var t=this._newColumnData(e),i=t.rowFiltering;return i||(i=t.rowFiltering={}),i},Q.prototype._getColumnFilterOption=function(e){var t=this._getUserColumnSettings(e);return t&&t.filterOption||null},Q.prototype._removeActiveFilterStates=function(e){var t=this._getUserColumnSettings(e);t.expression=null,t.filterState=null;var i=t.filterOption;i&&(t.filterOption=null,i._filters.length&&this._dispatch("filterChanged",{filterType:"column",changeType:"remove",colIndex:e,field:this._getField(e)}))},Q.prototype._initColumnFilterOption=function(e){var t=this._getColumnFilterOption(e);t||((t={})._filters=[],t._expressions=[],t._context=[],this._getUserColumnSettings(e).filterOption=t);return t},Q.prototype.removeFilter=function(e){var t=null,i="",r=-1;if("string"==typeof e)i=e,t=this._nameMap[e],r=this._globalFilters.indexOf(t);else if(t=e,(r=this._globalFilters.indexOf(t))>=0)for(var n in this._nameMap)this._nameMap[n]===t&&(i=n);return!(r<0)&&(delete this._nameMap[i],this._globalFilters.splice(r,1),this._globalContexts.splice(r,1),this._requestFilterRefresh(),!0)},Q.prototype.removeColumnFilters=function(e){if(null==e)return this.removeAllColumnFilters();var t=this._removeColumnFilters(e);return t&&this._updateColumnIcon(e),t},Q.prototype._removeColumnFilters=function(e){var t=this._getColumnFilterOption(e);if(t){var i=this._columnFilters.indexOf(t);i>=0&&this._columnFilters.splice(i,1),this._removeActiveFilterStates(e);var r=this._getPlugin("FilterInputPlugin");r&&r.updateUI(e,""),this._requestFilterRefresh()}return!!t},Q.prototype.removeColumnFilter=Q.prototype.removeColumnFilters,Q.prototype.removeAllColumnFilters=function(){if(this._columnFilters.length){this._columnFilters.length=0;for(var e=this._getPlugin("FilterInputPlugin"),t=this._getColumnCount(),i=0;i<t;++i)this._removeActiveFilterStates(i),e&&e.updateUI(i,"");return this._updateAllColumnIcons(),this._requestFilterRefresh(),!0}return!1},Q.prototype.removeAllFilters=function(){this._globalFilters.length+this._columnFilters.length<=0||(this._globalFilters.length&&(this._globalFilters.length=0,this._nameMap={},this._dispatch("filterChanged",{filterType:"global",changeType:"remove",colIndex:-1,field:""})),this.removeAllColumnFilters(),this._requestFilterRefresh())},Q.prototype.setOverridingFilter=function(e){this._overridingFilter=e},Q.prototype.setPreTransform=function(e){this._preTransform=e},Q.prototype.setRowTransform=function(e){this._rowTransform=e},Q.prototype.getFilters=function(){return this._globalFilters},Q.prototype.getAllColumnFilters=function(){for(var e=[],t=this._columnFilters.length,i=0;i<t;++i)for(var r=this._columnFilters[i],n=r._filters.length,o=0;o<n;++o)e.push(r._filters[o]);return e},Q.prototype.getFilterExpressions=function(){return this._columnFilters.length?this._columnFilters.map(q):null},Q.prototype.setFilterExpressions=function(e){if(this.removeAllColumnFilters(),Array.isArray(e))for(var t=this.getGridApi().getColumnFields(),i=e.length,r=0;r<i;++r){var n=e[r],o=n.field,l=t.indexOf(o);l>=0&&this.setColumnFilter(l,n.expression,n.context)}},Q.prototype.hasColumnFilter=function(){return this._columnFilters.length>0},Q.prototype.getColumnFilterIcons=function(e){for(var t=[],i=this._hosts.length;--i>=0;){var r=this._hosts[i].getSection("title");if(r){var n=r.getRowCount(),o=r.getCell(e,n-1,!0);o&&o._filterIcon&&t.push(o._filterIcon)}}return t},Q.prototype.updateAllColumnIcons=function(){this._uiTimerId&&(clearTimeout(this._uiTimerId),this._uiTimerId=0),this._updateAllColumnIcons()},Q.prototype.addDataView=function(e){this._dvs.indexOf(e)<0&&(this._dvs.push(e),this._requestFilterRefresh())},Q.prototype.removeDataView=function(e){var t=this._dvs.indexOf(e);t>=0&&(this._dvs.splice(t,1),this._requestFilterRefresh())},Q.prototype._onPreSectionRender=function(e){"title"===e.sectionType&&this._setTimerForUpdatingIcons()},Q.prototype._onIconClicked=function(e){var t=this._hosts[0];if(t){var i=t.getRelativePosition(e);this.openDialog(i.colIndex),e.stopPropagation(),e.preventDefault(),this._dispatch("click",e)}},Q.prototype._filterLogic=function(e,t){if(t){var i;this._rowGetter&&(t=this._rowGetter(t)),this._preTransform&&(t=this._preTransform(t));var r=this._globalFilters.length;for(i=0;i<r;++i)if(!this._globalFilters[i](t,e,this._globalContexts[i]))return!1;if(r=this._activeColFilters.length){if(this._overridingFilter){var n=this._overridingFilter(t,e);if(n)return n>0}for(this._rowTransform&&(t=this._rowTransform(t)),i=0;i<r;++i)for(var o=this._activeColFilters[i],l=o._filters.length,a=0;a<l;++a)if(!o._filters[a](t,e,o._context[a]))return!1}}return!0},Q.prototype._requestFilterRefresh=function(){this._filterTimerId||(this._filterTimerId=setTimeout(this.refresh,10))},Q.prototype._setTimerForUpdatingIcons=function(){"none"!==this._iconActivation&&(this._uiTimerId||(this._uiTimerId=setTimeout(this._updateAllColumnIcons,10)))},Q.prototype.refresh=function(){if(this._filterTimerId=0,this._activeColFilters=this._columnFilters,this._getPlugin("ColumnStackPlugin")){var e,t,i=this._hosts[0],r=this._getColumnCount();for(this._activeColFilters=[],e=0;e<r;++e)(t=this._getColumnFilterOption(e))&&i.getColumnVisibility(e,2)&&this._activeColFilters.push(t)}for(var n=this._globalFilters.length+this._activeColFilters.length,o=!this._disabled&&n?this._filterLogic:null,l=0,a=this._getAvailableDataViews(),s=a.length;--s>=0;)l|=a[s].filterIn(o);l&&this._dispatch("refreshed",{})},Q.prototype._updateColumnIcon=function(e){for(var t=this._getColumnFilterOption(e),i=0==this._getUserColumnSettings(e).filterIcon?"none":this._iconActivation,r=t?t._filters.length:0,n=this._hosts.length;--n>=0;){var o=this._hosts[n],l=o.getSection("title");if(l){var a=l.getRowCount(),s=l.getCell(e,a-1,!0),u=l.getColumn(e);if(s){s.updatePadding&&s.updatePadding(),o.isColumnMovable(e)?u.enableClass("movable",!0):u.enableClass("movable",!1);var f="always"!==i&&"onHover"!==i;if(this._disabled||"none"===i||f&&!r)s._filterIcon&&(s.removeFloatingIcon(s._filterIcon),s._filterIcon=null,s.enableClass("active-filter",!1));else{var d;if(!s._filterIcon)m.hasComponent("coral-icon")>=3?(d=document.createElement("coral-icon")).setAttribute("icon","filter"):(d=document.createElement("div")).className="filter-symbol icon-filter coral-icon",d.classList.add("title-filter-icon"),d.addEventListener("click",this._onIconClicked,!1),this._dispatch("iconCreated",{icon:d,colIndex:e,grid:o}),s.insertFloatingIcon(d,10),s._filterIcon=d;r?s.enableClass("active-filter",!0):s.enableClass("active-filter",!1)}}}}},Q.prototype._updateAllColumnIcons=function(){this._uiTimerId=0;for(var e=this._getColumnCount(),t=0;t<e;++t)this._updateColumnIcon(t)},Q.prototype._getColumnCount=function(){var e=this._hosts[0];return e?e.getColumnCount():0},Q.prototype.setColumnFilterState=function(e,t){var i=this._getColumnFilterOption(e);return!!i&&(i._context[0]=t,this._requestFilterRefresh(),!0)},Q.prototype.getColumnFilterState=function(e){var t=this._getColumnFilterOption(e);return t?t._context[0]:null},Q.prototype.getColumnFilterStates=function(){for(var e=this._hosts[0]?this._hosts[0].getColumnCount():0,t=new Array(e),i=0;i<e;++i)t[i]=this.getColumnFilterState(i);return t},Q.prototype._getAvailableDataViews=function(){if(this._dvs.length)return this._dvs;for(var e=this._hosts.length,t=[],i=0;i<e;++i){var r=this._hosts[i].getDataSource();r&&t.push(r)}return t},Q.prototype._getDataTable=function(e){for(var t=e?e.getDataSource():null;t&&t.getDataSource();)t=t.getDataSource();return t},Q.prototype.getUniqueValues=function(e,t,i,r,n,o,l){var a={rawDataAccessor:r,formattedDataAccessor:n};return this._getUniqueValues(e,a,t,o,l)};var H=function(e,t){return"string"==typeof e?e:e?"object"!=typeof e?t+"":e instanceof Date?e.toLocaleString("en-GB"):"":0===e?"0":!1===e?"false":""},K=function(e,t,i,r){if(r&&!e[t]){for(var n=r.length;--n>=0;)if(!r[n](i))return!1;return e[t]=!0,!0}return!1},W=function(e,t,i){var r=e[t];r?r.indexOf(i)<0&&r.push(i):e[t]=[i]};Q.prototype._getUniqueValues=function(e,t,i,r,n){if(!e)return null;var o=t.rawDataAccessor||null,l=t.formattedDataAccessor||null,a=t.itemList,s={},u=null,f=null;if(!Array.isArray(a)){a=null;for(var d=this._getAvailableDataViews().map(this._getDataTable),c=d.length,p=0;p<c;++p)for(var h=d[p].getAllRowData(),_=h.length,g=0;g<_;++g){var m=h[g];this._rowGetter&&(m=this._rowGetter(m)),this._rowTransform&&(m=this._rowTransform(m));var v=m[e];f=v,o&&(f=o(f)),(f||0===f||!1===f)&&(u=f,l?u=l(v):i&&(u=i(m)),(u=H(u,f))&&(K(n,u,m,r),W(s,u,f)))}}var y=t.additionalItems;Array.isArray(y)&&(a=a?a.concat(y):y);for(var C={},b=a?a.length:0,T=0;T<b;++T)u=f=C[e]=a[T],l?u=l(f):i&&(u=i(C)),(u=H(u,f))&&(K(n,u,C,r),W(s,u,f));return s},Q._createDialog=function(){var e=Q._dialogTagName;if(null==e){var t=m.hasComponent("filter-dialog");e=Q._dialogTagName=t?t>=3?"filter-dialog":"tr-grid-filter-dialog":""}return e?document.createElement(e):null},Q._formatArrayExpression=function(e,t,i){if(Array.isArray(e)){var r=e.slice(),n=r[1],o=P(n);if(o!==n&&(r.rawValue=o,r.formattedValue=n),t&&i&&"string"!=typeof o&&null!=o){var l={};l[t]=o,(n=i(l))&&(r.rawValue=o,r.formattedValue=n,o=n)}return r[1]=o,r}return null},Q.prototype.openDialog=function(e,t){var i=this._getPlugin("SortableTitlePlugin");if(this._filterDialog&&this._dialogInitialized||(this._filterDialog||(this._filterDialog=Q._createDialog()),this._filterDialog&&(this._dialogInitialized=!0,i?this._filterDialog.addEventListener("sortChanged",this._onDialogSortChanged.bind(this)):this._filterDialog.hideSortUI(),this._filterDialog.addEventListener("filterChanged",this._onDialogFilterChanged.bind(this)))),this._filterDialog){if(!this._filterDialog.isShown||(this._filterDialog.hide(),this._filterDialog._colIndex!==e)){var r=this._hosts[0];if(r){var n=r.getSection("title");if(n){var o=n.getRowCount(),l=n.getCell(e,o-1,!0);if(l&&l.getElement()){var a=this._getField(e);if(a){if(this.hasListener("beforeDialogOpened")){var s={colIndex:e,field:a,grid:r};if(t&&(s.dialogOptions=t),this._dispatch("beforeDialogOpened",s),s.cancel)return;s.dialogOptions&&(t=s.dialogOptions)}"object"!=typeof t&&(t=null),i&&this._filterDialog.setSortState(i.getSortOrder(e));var u=r.getColumnData(e).formatOptions,f=!1;u&&u.formatType&&(f=!0,null!=u.useUTCTime&&(f=u.useUTCTime));var d={sortUI:!0,filterUI:!0,fieldDataType:"",lang:"",rawDataAccessor:null,formattedDataAccessor:null,sortLogic:null,blankValues:!1,blankValuesChecked:!1},c=null,p=this._getUserColumnSettings(e);p.fieldDataType&&(c={fieldDataType:p.fieldDataType}),Q._overrideConfig(d,this._dialogOptions),Q._overrideConfig(d,c),Q._overrideConfig(d,t);var h=this._initColumnFilterOption(e);h._rawDataAccessor=d.rawDataAccessor||null,h._formattedDataAccessor=d.formattedDataAccessor||null;var _=d.sortLogic||null,g=this._getFormatter(e),m=null,v="",y=null,C=p.expression;C&&(Array.isArray(C)?C.length&&((m=Array.isArray(C[0])?C.slice():[C])[0]=Q._formatArrayExpression(m[0],a,g),m[1]=Q._formatArrayExpression(m[1],a,g),v="advanced"):"function"!=typeof C&&"string"!=typeof C&&"object"!=typeof C||h._filters&&h._filters.length&&(y=h._filters));var b={},T=h.uniqueValues=this._getUniqueValues(a,d,g,y,b);if(d.blankValues){delete T[z];for(var F={},D=["",null,void 0,NaN],w={},A=0;A<D.length;A++){var I=D[A];if(w[a]=I,K(F,z,w,y)){d.blankValuesChecked=!0;break}}}var N=Object.keys(T);_&&N.sort((function(e,t){var i=T[e][0],r=T[t][0];return _(i,r)}));var S=N.map((function(e,t){return{id:t,title:e,nodes:[],checked:!!b[e]}}));if(m){var E=m[0];E&&E.formattedValue&&(T[E.formattedValue]||(T[E.formattedValue]=[E.rawValue])),(E=m[1])&&E.formattedValue&&(T[E.formattedValue]||(T[E.formattedValue]=[E.rawValue]))}this._filterDialog.init&&this._filterDialog.init(d),this._filterDialog.useUTCTime=f,this._filterDialog.target=l.getElement(),this._filterDialog._colIndex=e,this._filterDialog.data=S,this._filterDialog.filterMode=v,this._filterDialog.conditions=m,this._filterDialog.show()}}}}}}else console.log("Filter dialog does not exist")},Q._overrideConfig=function(e,t){if(t){var i=t.sortUI;null!=i&&(e.sortUI=i);var r=t.filterUI;null!=r&&(e.filterUI=r);var n=t.fieldDataType;null!=n&&(e.fieldDataType=n);var o=t.lang;null!=o&&(e.lang=o);var l=t.rawDataAccessor;"function"!=typeof l&&null!==l||(e.rawDataAccessor=l);var a=t.formattedDataAccessor;"function"!=typeof a&&null!==a||(e.formattedDataAccessor=a);var s=t.sortLogic;"function"!=typeof s&&null!==s||(e.sortLogic=s);var u=t.itemList;null!=u&&(e.itemList=u);var f=t.additionalItems;null!=f&&(e.additionalItems=f);var d=t.blankValues;d&&(e.blankValues="string"==typeof d?d:z)}},Q.prototype._getFormatter=function(e){var t=this._getPlugin("TextFormattingPlugin");if(t){var i=t.getFormatter(e);if(i)return i.format||null}return null},Q._getFilterBuilder=function(){return Q._filterBuilder||(Q._filterBuilder=new j),Q._filterBuilder},Q.prototype._onDialogFilterChanged=function(e){var t=this._filterDialog._colIndex,i=this._getColumnFilterOption(t),r=i.uniqueValues,n=i._rawDataAccessor,o=i._formattedDataAccessor,l=null;(n||o)&&(l={rawDataAccessor:n||null,formattedDataAccessor:o||null}),this.removeColumnFilters(t);var a=e.detail.conditions;if(Array.isArray(a)){for(var s=a.length,u=0;u<s;++u){var f=a[u],d=A[f[0]];if(d&&"string"!==d.type){var c=r[f[1]];null!=c&&(f[1]=c[0])}}return l&&(l._autoGenerated=!0),void this.addColumnFilter(t,a,l)}var p=e.detail.value,h=null;if(p){if("string"==typeof p)return void this.addColumnFilter(t,p);h=p}var _=h?h.length:0;if(_){for(var g={},m={},v=!1,y=0;y<_;++y){var C=h[y].title;if(h[y].value!==z){var b=r[C];if(b){v=!0,m[C]=!0;for(var T=b.length,F=0;F<T;++F)g[b[F]]=!0}}else l||(l={}),l.blankValues=!0,v=!0}v&&this.addColumnFilter(t,g,l),this._dispatch("dialogCommitted",{value:e.detail.value,fieldDataType:e.detail.fieldDataType,colIndex:t})}},Q.prototype._onDialogSortChanged=function(e){var t=this._getPlugin("SortableTitlePlugin");if(t){var i=this._filterDialog._colIndex,r=e.detail.value?e.detail.value:e.detail;t.getSortOrder(i)===r?t.sortColumn(i,"n"):t.sortColumn(i,r),this._dispatch("dialogCommitted",{sortOrder:e.detail.value,colIndex:i})}},Q.prototype._onColumnAdded=function(e){e.context&&(this._setColumnOptions(e.colIndex,e.context)&&this._applyPendingFilter())},Q.prototype._onColumnRemoved=function(e){var t=e.columnData;if(t){var i=t.rowFiltering.filterOption;if(i){var r=this._columnFilters.indexOf(i);r>=0&&this._columnFilters.splice(r,1),this._dispatch("filterChanged",{filterType:"column",changeType:"remove",colIndex:e.colIndex,field:i._field||""}),this._requestFilterRefresh()}}},Q.prototype.enableEmptySegmentFiltering=function(e){var t=this._hosts[0],i=t?t.getDataSource():null;i&&i.enableEmptySegmentFiltering&&i.enableEmptySegmentFiltering(e)},Q.prototype.enableSeparatorFiltering=function(e){var t=this._hosts[0],i=t?t.getDataSource():null;i&&i.enableSeparatorFiltering&&i.enableSeparatorFiltering(e)};!function(e,t){if(e&&t&&t.prototype.getName){var i=t.prototype.getName().replace(/Plugin$/,"");if(i){var r=e.tr;r||(r=e.tr={});var n=r.grid;n||(n=r.grid={}),n[i+"Plugin"]=t,r[i+"Extension"]=t}}}(window,Q)}]);
\ No newline at end of file
+!function(e){var t={};function i(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,i),r.l=!0,r.exports}i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},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 n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},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 n={inherits:function(e,t){function i(){}i.prototype=t.prototype,e.prototype=new i,e.prototype.constructor=e,e.base=function(e,i,n){i||(i="constructor");for(var r=arguments.length,o=new Array(r),l=2;l<r;l++)o[l-2]=arguments[l];return t.prototype[i].apply(e,o)}}},r=function(){};r.prototype._events=null,r.prototype._listenerCount=0,r.prototype.addEventListener=function(e,t){if(e&&t){this._events||(this._events={});var i=this._events[e];i?i.indexOf(t)<0&&(i.push(t),++this._listenerCount):(this._events[e]=[t],++this._listenerCount)}},r.prototype.removeEventListener=function(e,t){var i=this._events?this._events[e]:null;if(i){var n=i.indexOf(t);n>=0&&(i.splice(n,1),--this._listenerCount)}},r.prototype.removeAllEventListeners=function(){this._events=null,this._listenerCount=0},r.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},r.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},r.prototype.addListener=function(e,t){var i=e?e[t]:null;"function"==typeof i&&this.addEventListener(t,i)},r.prototype._prepareEventArguments=function(e,t){return t},r.prototype._dispatch=function(e,t){var i=this._events?this._events[e]:null;if(i){t=this._prepareEventArguments(e,t);for(var n=i.length,r=0;r<n;++r)i[r](t)}};r.preventDefault=function(e){e&&e.preventDefault&&(e.preventDefault(),e.stopPropagation())};var o=function(e,t,i){this.resolve=this.resolve.bind(this),this.reject=this.reject.bind(this),"function"==typeof e&&(this._resolveHandler=e),"function"==typeof t&&(this._rejectHandler=t),null!=i&&(this._ctx=i),this.promise=new Promise(function(e,t){this._resolve=e,this._reject=t}.bind(this))};o.prototype.promise=null,o.prototype._resolve=null,o.prototype._reject=null,o.prototype._resolveHandler=null,o.prototype._rejectHandler=null,o.prototype._ctx=null,o.prototype._fulfilled=!1,o.prototype.resolve=function(e){if(this._resolve){if(this._resolveHandler){var t=this._resolveHandler(e,this._ctx||this);null!=t&&(e=t)}this._resolve(e),this._finally()}},o.prototype.reject=function(e){if(this._reject){if(this._rejectHandler){var t=this._rejectHandler(e,this._ctx||this);null!=t&&(e=t)}this._reject(e),this._finally()}},o.prototype.isFulfilled=function(){return this._fulfilled},o.prototype._finally=function(){this._fulfilled=!0,this._ctx=this._resolveHandler=this._rejectHandler=null,this._resolve=this._reject=null};var l=function(e,t){return function(e,t,i){if(!e)return null;if(!t||e===t)return e;var n;if(i)for(var r=i.length,o=0;o<r;++o)(n=i[o])&&s(e,t,n);else for(n in t)s(e,t,n);return e}({},e,t)},s=function(e,t,i){var n=t[i];if(null!=n){var r=e[i];Array.isArray(r)?e[i]=r.concat(n):Array.isArray(n)&&r?e[i]=n.concat(r):e[i]=n}},a=function(e){return Array.isArray(e)?"{\n"+e.join("\n")+"\n}":e},u=function(e){return e.replace(/\n+/g,"\n\t").replace(/\n\t}$/,"\n}")},f=function(e,t){if(!e)return null;var i=document.createElement("style");i.textContent="\n"+e+"\n";var n,r=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),o=!0;return r||(o=!1,r=document.head),o&&r.children&&r.children.length&&(n=r.children[0]),n?r.insertBefore(i,n):r.appendChild(i),i},d=function(e,t){for(var i in t||(t=[]),e){var n=e[i];"object"==typeof n?d(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 i="#",n=0;n<3;n++){var r=+t[n];r>=16||(i+="0"),i+=r?r.toString(16).toUpperCase():"0"}return i},p={},h=function(e,t){"attributes"==t.type&&"lang"==t.attributeName&&(e.lang=t.target.lang||"en")},_=function(e,t,i){"attributes"===i.type&&(null!=t?i.attributeName===t&&e(i.target.getAttribute(t)):e(i.target))};p._getNewId=function(){return"observer_"+ ++p._id},p._addObserver=function(e,t,i){var n=i;n||(n={}),n.attributes=!0,p._observer.observe(e,n),p._addListener(e,t)},p._onMutationCallback=function(e){for(var t=0;t<e.length;t++)for(var i=e[t],n=p._listeners[i.target._observeId],r=0;r<n.length;r++)n[r](i)},p._addListener=function(e,t){var i=p._listeners;if(i||(i=p._listeners={}),!e._observeId){var n=p._getNewId();e._observeId=n}i[e._observeId]||(i[e._observeId]=[]);var r=i[e._observeId];r.indexOf(t)<0&&r.push(t)},p.addLanguageListener=function(e){e&&(e.lang=document.documentElement.lang||"en",p._addObserver(document.documentElement,h.bind(null,e)))},p.addAttributeListener=function(e,t,i){e&&t&&p._addObserver(e,_.bind(null,t,i))},p._observer=new MutationObserver(p._onMutationCallback),p._listeners={},p._id=0;var g={en:!0,de:!0,ja:!0,zh:!0,"zh-Hant":!0},m={_deferred:null,themeReady:null,_defaultColors:{up:"#39C46E",down:"#F5475B",level:"#C2C2C2",tickUp:"#39C46E",tickDown:"#F5475B",baseGrid:"#1A1A1C",baseText:"#C2C2C2",trackColor:"#FF9933"}};m.themeColors=m._defaultColors,m._components={},m._themeName="",m._elfVersion=0,m._dummyIcon=null,m._iconLoaded=!1,m._profileName=null,m._callbacks=[],m._observed=!1,m._pendingResolve=!1,m._themeLoaded=!1,m._icons={"elf-theme-halo":{rowGrouping:{expander:"down"},sorting:{ascending:"hollow-arrow-up",descending:"hollow-arrow-down",sortable:"sort-up-down"},columnStack:{stack:"map-layers",expand:"right",collapse:"left"}},"elf-theme-solar":{columnStack:{stack:"list",expand:"right",collapse:"left"}}},m._icons["halo-theme"]=m._icons["elf-theme-halo"],m._icons["solar-theme"]=m._icons["elf-theme-solar"],m.getElfVersion=function(){if(!m._elfVersion){var e=0;if(window.EFX_GRID){var t=window.EFX_GRID.version;e=+(t=t.split("."))[0]}else if(window.elf)if(window.elf.version){var i=window.elf.version.match(/\d/);i&&i[0]&&(e=parseInt(i[0],10))}else window.elf.customElements?e=3:window.customElements&&(e=4);else window.Polymer&&(e=1);m._elfVersion=e}return m._elfVersion},m.hasComponent=function(e){var t=m._components[e];if(null==t){t=0;var i=m.getElfVersion();if(e)1===i?document.createElement(e).is===e&&(t=i):i>1&&(window.customElements&&window.customElements.get(e)||document.createElement(e).constructor!==HTMLElement)&&(t=i),m._components[e]=t}return t},m.toLangString=function(e){if(!e)return"";if("zh-hant"===(e=e.toLowerCase()))return"zh-Hant";var t=e.replace(/-.*/,"");return g[t]?t:""},m.hasTheme=function(e){return e===m.getThemeName()},m.getThemeName=function(e){return m._themeName||(m._themeName=m.getCssVariable("--theme-name",document.documentElement)),m._themeName},m.setThemeName=function(e){m._themeName=e},m.isThemeLoaded=function(){return m._themeLoaded},m.getColors=function(){return m.themeColors},m.isHaloTheme=function(e){return null==e&&(e=m.getThemeName()),!!e&&e.indexOf("halo")>=0},m.injectIcons=function(e,t){if("object"==typeof e){var i=m.getThemeName();e.themeName=i;var n=m.getElfVersion();e.elfVersion=n;var r=m._icons[i];r&&(e.icons=r)}},m.getIconList=function(){var e=m._icons[m.getThemeName()];return e?d(e):[]},m._onIconPreloaded=function(){if(m._dummyIcon){var e=m._dummyIcon.parentNode;e&&e.removeChild(m._dummyIcon),m._dummyIcon=null}},m.prepareIconPreloading=function(){if(!m._iconLoaded){m._iconLoaded=!0;var e=m.getIconList();if(e.length){setTimeout(m._onIconPreloaded,10);var t=m._dummyIcon=document.createElement("coral-icon");return t.style.transform="scale(0)",document.body.appendChild(t),e}}return null},m.getCssVariable=function(e,t){var i="",n=t||document.body;return window&&"string"==typeof e&&1===n.nodeType&&e.match(/^--/)&&(i=(i=window.getComputedStyle(n).getPropertyValue(e)).replace(/[\"\']/g,"")),i},m.getCssVariables=function(e,t){var i=t||document.body;if(window&&1===i.nodeType){var n=window.getComputedStyle(i);for(var r in e){var o=e[r];o&&o.match(/^--/)&&(e[r]=n.getPropertyValue(o).replace(/\"/g,""))}}return e||null},m.setRTK=function(e){null!=e&&(m._rtk=e)},m.getMovementColorProfile=function(){return document.documentElement.getAttribute("movement-color-profile")},m._addThemeChangedCallback=function(e){var t=m._callbacks;t.indexOf(e)<0&&t.push(e)},m.reloadThemeColors=function(){return m._deferred&&m._deferred.isFulfilled()?(m._profileName="",m._themeLoaded=!1,m.themeReady=null,m.getThemeColors()):m.themeReady},m.getThemeColors=function(e){if("function"==typeof e&&m._addThemeChangedCallback(e),m.themeReady)return m.themeReady;var t=m._deferred=new o;m.themeReady=t.promise;var i=m.getMovementColorProfile();if(i)i!==m._profileName?setTimeout(m._profileNameRetrieved,100):m._deferred.resolve(m.themeColors);else{var n={providerName:"Configuration",settingName:"RDE_USER_CURRENT_TICK_COLOR"},r=window?window.JET:null;if(m._themeLoaded=!1,m._rtk&&m._rtk.Settings)m._rtk.Settings.getAsync(n).then(m._loadingProfileSuccess).catch(m._loadingProfileFailure);else if(r&&r.Settings)try{r.Settings.read(m._loadingProfileSuccess,n)}catch(e){m._loadingProfileFailure()}else setTimeout(m._profileNameRetrieved,100)}return t.promise};var v=function(e){if(e!==m._profileName){m._retrieveThemeColors(e),m._pendingResolve&&(m._pendingResolve=!1,m._deferred.resolve(m.themeColors));for(var t=m._callbacks,i=0;i<t.length;i++)t[i]()}};m._loadingProfileSuccess=function(e){e&&document.documentElement.setAttribute("movement-color-profile",e.toLowerCase()),m._observed?m._pendingResolve=!0:m._profileNameRetrieved(e)},m._loadingProfileFailure=function(){m._retrieveThemeColors(),m._observed||(m._observed=!0,p.addAttributeListener(document.documentElement,v,"movement-color-profile")),m._deferred.reject("Failed to get movement color profile from settings.")},m._profileNameRetrieved=function(){var e=m.getMovementColorProfile();m._retrieveThemeColors(e),m._observed||(m._observed=!0,p.addAttributeListener(document.documentElement,v,"movement-color-profile")),m._deferred.resolve(m.themeColors)},m._retrieveThemeColors=function(e){m._themeLoaded=!0,m._profileName=e;var t=m.themeColors=m.getCssVariables({primary:"--color-scheme-primary",secondary:"--color-scheme-secondary",tertiary:"--color-scheme-tertiary",complementary:"--color-scheme-complementary",up:"--color-scheme-positive",down:"--color-scheme-negative",level:"--color-scheme-neutral",tickUp:"--color-scheme-tickup",tickDown:"--color-scheme-tickdown"});t.up||(t.up=m._defaultColors.up,t.down=m._defaultColors.down,t.level=m._defaultColors.level,t.tickUp=m._defaultColors.tickUp,t.tickDown=m._defaultColors.tickDown),t.positive=t.up,t.negative=t.down,t.neutral=t.level;var i=document.createElement("table");i.style.visibility="hidden",i.style.position="fixed",i.style.left="0",i.style.top="0",i.style.width="0";var n=i.insertRow(-1),r=n.insertCell(-1);document.body.appendChild(i);var o=window.getComputedStyle(n);t.tableBg=o.backgroundColor;var l=window.getComputedStyle(r);t.tableText=l.color,t.tableBorder=l.borderColor,t.tableText===t.tableBorder&&(r.className="tr-lg",l=window.getComputedStyle(r),t.tableBg=l.backgroundColor,t.tableText=l.color,t.tableBorder=l.borderColor,t.tableText===t.tableBorder&&(t.tableBg=m._defaultColors.baseGrid,t.tableText=m._defaultColors.baseText,t.tableBorder="")),t.tableBg=c(t.tableBg),t.tableText=c(t.tableText),t.tableBorder=c(t.tableBorder),document.body.removeChild(i),t.baseGrid=t.tableBg,t.baseText=t.tableText,t.trackColor=t.primary||m._defaultColors.trackColor};var y=function(){};n.inherits(y,r),y.prototype._hosts=null,y.prototype._compositeGrid=null,y.prototype._realTimeGrid=null,y.prototype._rowGetter=null,y.prototype._initializedGrid=!1,y.prototype.listen=y.prototype.addEventListener,y.prototype.unlisten=y.prototype.removeEventListener,y.prototype.afterInit=function(e,t,i){var n=null;i&&i.getCoreGrid&&(n=i.getCoreGrid()),n&&(this.getGridApi()||this.setGridWrapper("compositegrid",i),this._compositeGrid&&n.loadPlugin(this,t)),this._initializedGrid||(this._initializedGrid=!0,this._rowGetter=this._realTimeGrid?D:F,this._afterInit())},y.prototype._afterInit=function(){},y.prototype._dispose=function(){this._hosts&&(this._hosts.length||(this._compositeGrid=this._realTimeGrid=null,this._initializedGrid=!1))},y.prototype.hasMultiTableSupport=function(){return!1},y.prototype._prepareEventArguments=function(e,t){return t||(t={}),t.api=this.getGridApi(),t},y.prototype.getName=function(){return"GridPlugin"},y.prototype.initialize=function(e,t){},y.prototype.unload=function(e){this._dispose()},y.prototype.getRelativeGrid=function(e){var t=null;if(e.target){var i=(t=e.target).api;if(i&&i.getCoreGrid)return i.getCoreGrid()}else e.getElement?t=e.getElement():1===e.nodeType&&(t=e);if(t)for(var n=this._hosts.length;--n>=0;){var r=this._hosts[n];if(r.getElement().contains(t))return r}return null},y.prototype.setGridWrapper=function(e,t){e&&("compositegrid"===(e=e.toLowerCase())?this._compositeGrid=t:"realtimegrid"===e&&(this._realTimeGrid=t))},y.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},y.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),n=this._realTimeGrid.getColumnDefinition(i);if(n)return n.getName()}return""},y.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)},y.prototype.getColumnIndices=function(e){var t=this.getGridApi();if(t.getColumnIndices)return t.getColumnIndices(e);if(this._compositeGrid){for(var i,n=this._compositeGrid.getColumnFields(),r=this._compositeGrid.getColumnCount(),o=[],l=0;l<e.length;l++)if("number"==typeof(i=e[l]))i>=0&&i<r&&o.push(i);else{var s=n.indexOf(i);-1!==s&&o.push(s)}return o}return this._realTimeGrid.getColumnIndices(e)},y.prototype.getColumnId=function(e){if("string"==typeof e)return e;var t=this.getColumnCount();if(e<0||e>=t)return"";if(this._compositeGrid)return this._compositeGrid.getColumnId(e);var i=this._realTimeGrid.getColumnDefinition(e);return i?i.getId():""},y.prototype.getColumnIds=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnIds():[]},y.prototype.getColumnField=function(e){return this._hosts&&this._hosts.length?this._hosts[0].getColumnField(e):""},y.prototype.getColumnFields=function(){return this._hosts&&this._hosts.length?this._hosts[0].getColumnFields():[]},y.prototype.getColumnCount=function(){if(this._hosts){var e=this._hosts[0];return e?e.getColumnCount():0}return 0},y.prototype._moveColumnById=function(e,t){var i=this._hosts,n=i?i.length:0;if(n){for(var r=0,o=0;o<n;++o)r|=i[o].moveColumnById(e,t);return!!r}return!1},y.prototype._reorderColumns=function(e,t){var i=this._hosts,n=i?i.length:0;if(n){for(var r=0,o=0;o<n;++o)r|=i[o].reorderColumns(e,t);return!!r}return!1},y.prototype._loadPlugin=function(e,t,i){return e||(e=t.getPlugin(i))||(e=t.loadPlugin(i))&&this._initializedGrid&&(e._initializedGrid=!0),e},y.prototype._requestPlugin=function(e,t,i){return this._initializedGrid?y.requestPlugin(e,t,i,this._compositeGrid,this._realTimeGrid):Promise.reject("Plugin should be requested after the initialization")},y.requestPlugin=function(e,t,i,n,r){var l=null;if(e){var s=null;1===e.nodeType?s=e.api:e.getCoreGrid?s=e:e.getPlugin&&(l=e),s&&(l=s.getCoreGrid(),n||r||(s.getModel?n=s:r=s))}if(!l)return Promise.reject("Cannot find grid element");var a=l.getPlugin(t);if(a)return Promise.resolve(a);var u=new o;return setTimeout(y._onPluginRequested.bind(null,{grid:l,pluginRef:t,compositeGrid:n,realTimeGrid:r,config:i,deferred:u}),10),u.promise},y._onPluginRequested=function(e){var t=e.grid;if(!t.getElement())return e.deferred.reject("Grid has been disposed before the plugin is fully loaded: "+e.pluginRef);var i=t.getPlugin(e.pluginRef);if(i)return e.deferred.resolve(i);var n=!1;return e.pluginRef.beforeInit&&(n=!0,e.pluginRef.beforeInit(t.getElement(),e.config,!0)),(i=t.loadPlugin(e.pluginRef,e.config))?(!n&&i.beforeInit&&(n=!0,i.beforeInit(t.getElement(),e.config)),i.setGridWrapper&&(e.compositeGrid?i.setGridWrapper("compositegrid",e.compositeGrid):e.realTimeGrid&&i.setGridWrapper("realtimegrid",e.realTimeGrid)),i.afterInit&&i.afterInit(),e.deferred.resolve(i)):e.deferred.reject("Unable to load required dependency: "+e.pluginRef)},y.prototype._getPlugin=function(e,t){return null==t&&(t=this._hosts[0]),t?t.getPlugin(e):null},y.prototype._getColumnData=function(e,t){return null==t&&(t=this._hosts[0]),t?t.getColumnData(e):null},y.prototype._getColumnOption=function(e,t,i){var n=this._getColumnData(e,i);return n?n[t]:null},y.prototype._newColumnData=function(e,t){if(null==t&&(t=this._hosts[0]),!t)return{};var i=t.getColumnData(e);return i||(i=t.setColumnData(e,{})),i},y.prototype._getField=function(e){var t=this._compositeGrid||this._realTimeGrid;return t?t.getColumnField(e):""},y.prototype._getRowData=function(e){return this._realTimeGrid&&e?e.ROW_DEF.getRowData():e},y.prototype._getRow=function(e,t){return w(e.getRowDataAt(t))},y.prototype._getData=function(e,t,i){var n=this._getRow(e,t);return n?n[i]:void 0},y.prototype._setData=function(e,t,i,n){if(this._realTimeGrid){var r=T(e,t);r&&r.setData(i,n)}else"number"==typeof t?e.setDataAt(t,i,n):e.setData(t,i,n)},y.prototype._setRowData=function(e,t,i){if(this._realTimeGrid){var n=T(e,t);n&&n.setRowData(i)}else"number"==typeof t?e.setRowDataAt(t,i):e.setRowData(t,i)},y.prototype._setStaticData=function(e,t,i,n){if(this._realTimeGrid){var r=T(e,t);r&&r.setStaticData(i,n)}else this._setData(e,t,i,n)},y.prototype._setColumnData=function(e,t,i,n){if(t){var r=Array.isArray(n)?n:e.getAllRowIds(!0),o=r?r.length:0;if(o)if(1!==o){var l=Array.isArray(i)?i:r.map((function(){return i}));if(this._realTimeGrid){for(var s=0;s<o;++s){var a=e.getRowData(r[s]);if(a){var u=a.ROW_DEF;u&&(u.getRowData()[t]=l[s])}}e.dispatchGlobalChange||(e=e.getDataSource()),e&&e.dispatchGlobalChange&&e.dispatchGlobalChange()}else e.setColumnData(t,l,r)}else this._setData(e,r[0],t,Array.isArray(i)?i[0]:i)}},y.prototype._activateColumnRenderer=function(e,t,i){if(null!=e){var n=this._realTimeGrid;n?n.activateColumnRenderer(e,t,i):"function"==typeof i?this._hosts[0].setColumnDataBindingHandler(e,i):this._hosts[0].setColumnDataBindingHandler(e,null)}};var C=function(){},b={left:37,right:39,up:38,down:40,backspace:8,tab:9,enter:13,esc:27,escape:27,space:32,pageup:33,pagedown:34,del:46,delete:46};y.prototype._mockMouseEvent=function(e,t,i){null==e&&(e=0),null==t&&(t=0);var n=i||{};if(n.preventDefault=C,n.stopPropagation=C,e>=0&&t>=0){var r=this._activeGrid||this._hosts[0],o=r?r.getCell(n.sectionType||"content",e,t):null;n.target=o?o.getElement():null}return n},y.prototype._mockKeyboardEvent=function(e,t){var i=t||{};if(i.preventDefault=C,i.stopPropagation=C,"string"==typeof e){var n=b[e.toLowerCase()]||0;e=n||e.charCodeAt(0)}return i.keyCode=e,i},y._staticStyles={},y._themeLoaders={},y._themeLoadSuccess=function(e,t){var i=this.getName(),n=y._staticStyles[i]=e(t);this.applyStyles(n,i)},y.prototype.applyStaticStyles=function(e){var t=this.getName(),i=y._staticStyles[t];i?this.applyStyles(i,t):e&&(y._themeLoaders[t]||(y._themeLoaders[t]=m.getThemeColors()),y._themeLoaders[t].then(y._themeLoadSuccess.bind(this,e)))},y.prototype.applyStyles=function(e,t,i){t||(t=this.getName());var n,r,o="_style"+t,l=this._hosts,s=l.length;if(s)if(i)for(n=0;n<s;n++)r=l[n],this.revokeStyles(r,t),r[o]=f(e,r.getElement());else for(n=0;n<s;n++)(r=l[n])[o]||(f(e,r.getElement()),r[o]=!0)},y.prototype.revokeStyles=function(e,t){if(e&&t){var i=e[t="_style"+t];i&&1===i.nodeType&&(i.parentNode.removeChild(i),e[t]=null)}};var T=function(e,t){var i="number"==typeof t?e.getRowDataAt(t):e.getRowData(t);return i&&i.ROW_DEF||null},F=function(e){return e},D=function(e){return e?e.ROW_DEF.getRowData():null},w=function(e){if(e){var t=e.ROW_DEF;return t?t.getRowData():e}return null},A={EQ:{id:"EQ",name:"Equal to",type:"string",positive:1,caseSensitive:1,formula:"str == input"},NEQ:{id:"NEQ",name:"Not equal to",type:"string",positive:0,caseSensitive:1,formula:"str != input"},NUMEQ:{id:"NUMEQ",name:"Number equal to",type:"number",positive:1,caseSensitive:1,formula:"val == input"},NUMNEQ:{id:"NUMNEQ",name:"Number not equal to",type:"number",positive:0,caseSensitive:1,formula:"val != input"},GT:{id:"GT",name:"Greater than",type:"number",positive:1,caseSensitive:1,formula:"val > input"},GTE:{id:"GTE",name:"Greater than or equal to",type:"number",positive:1,caseSensitive:1,formula:"val >= input"},LT:{id:"LT",name:"Less than",type:"number",positive:1,caseSensitive:1,formula:"val < input"},LTE:{id:"LTE",name:"Less than or equal to",type:"number",positive:1,caseSensitive:1,formula:"val <= input"},BEGIN:{id:"BEGIN",name:"Begin with",type:"string",positive:1,caseSensitive:0,formula:"str.indexOf(input) === 0"},NBEGIN:{id:"NBEGIN",name:"Not begin with",type:"string",positive:0,caseSensitive:0,formula:"str.indexOf(input) !== 0"},END:{id:"END",name:"End with",type:"string",positive:1,caseSensitive:0,formula:"(str.length >= input.length) && str.lastIndexOf(input) === (str.length - input.length)"},NEND:{id:"NEND",name:"Not end with",type:"string",positive:0,caseSensitive:0,formula:"(str.length < input.length) || str.lastIndexOf(input) !== (str.length - input.length)"},CONT:{id:"CONT",name:"Contain",type:"string",positive:1,caseSensitive:0,formula:"str.indexOf(input) >= 0"},NCONT:{id:"NCONT",name:"Not contain",type:"string",positive:0,caseSensitive:0,formula:"str.indexOf(input) < 0"},EQ_BLANK:{id:"EQ_BLANK",name:"Equal to blank value",type:"blank",positive:1,caseSensitive:1,formula:"!val && val !== 0"},EQ_NBLANK:{id:"EQ_NBLANK",name:"Equal to non blank value",type:"blank",positive:1,caseSensitive:1,formula:"(val || val === 0) ? true : false"},DT:{id:"DT",name:"Date is",type:"date",positive:1,caseSensitive:1,formula:"ts === input"},DTA:{id:"DTA",name:"Date is After",type:"date",positive:1,caseSensitive:1,formula:"ts > input"},DTB:{id:"DTB",name:"Date is Before",type:"date",positive:1,caseSensitive:1,formula:"ts < input"}};A.TXTEQ=A.EQ,A.BLANK=A.EQ_BLANK,A.NBLANK=A.EQ_NBLANK,A.NEQ_BLANK=A.EQ_NBLANK,A.GREATER_THAN=A.GT,A.GREATER_THAN_OR_EQUAL_TO=A.GTE,A.EQUAL_TO=A.EQ,A.LESS_THAN=A.LT,A.LESS_THAN_OR_EQUAL_TO=A.LTE,A.TEXT_THAT_CONTAINS=A.CONT,A.TEXT_THAT_NOT_CONTAINS=A.NCONT,A.TEXT_IS=A.EQ,A.NOT_BLANK=A.EQ_NBLANK;var I={EQ:function(e,t){return e==t},NEQ:function(e,t){return e!=t},NUMEQ:function(e,t){return e==t},NUMNEQ:function(e,t){return e!=t},GT:function(e,t){return e>t},GTE:function(e,t){return e>=t},LT:function(e,t){return e<t},LTE:function(e,t){return e<=t},BEGIN:function(e,t){return 0===e.indexOf(t)},NBEGIN:function(e,t){return 0!==e.indexOf(t)},END:function(e,t){return e.length>=t.length&&e.lastIndexOf(t)===e.length-t.length},NEND:function(e,t){return e.length<t.length||e.lastIndexOf(t)!==e.length-t.length},CONT:function(e,t){return e.indexOf(t)>=0},NCONT:function(e,t){return e.indexOf(t)<0},EQ_BLANK:function(e,t){return!e&&0!==e},EQ_NBLANK:function(e,t){return!(!e&&0!==e)},DT:function(e,t){return e===t},DTA:function(e,t){return e>t},DTB:function(e,t){return e<t}},N={"||":1,"&&":2,"<":3,">":3,"<=":3,">=":3,"!=":3,"=":3,"==":3,"===":3,"+":4,"-":4,"*":5,"%":6,"/":6,"!":7,"!!":7},S={"+":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<=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}},E={"+":2,"-":2,"*":2,"/":2,"%":2,"<":2,">":2,"<=":2,">=":2,"==":2,"!=":2,"&&":2,"||":2,"!":1,"!!":1},x=function(e,t,i,n){var r={value:t,type:i};return n&&(r.dataType=n),"operator"===i?r.precedence=N[t]:"parenthesis"===i&&(r.precedence=0),e.push(r),e.length-1},O={_tokens:[],_withString:function(e){return" #"+x(O._tokens,e.substring(1,e.length-1),"literal","string")+"#"},_withField:function(e){return" #"+x(O._tokens,e,"literal","variable")+"#"},_withFieldInBrackets:function(e){return O._withField(e.substring(1,e.length-1))},_withNegativeNumber:function(e){var t=+e;return t==t?" #"+x(O._tokens,t,"literal","number")+"#":""},_withPositiveNumber:function(e){return 35===e.charCodeAt(0)?e:O._withNegativeNumber(e)},_withOperator:function(e){return N[e]?("="!=e&&"==="!=e||(e="=="),"#"+x(O._tokens,e,"operator")+"#"):""},_withParenthesis:function(e){return"#"+x(O._tokens,e,"parenthesis")+"#"},_tester:function(e){for(var t=e._rpn,i=t.length,n=0,r=0,o=0;o<i;++o){var l=t[o];if("literal"!==l.type){var s=E[l.value];if(!(n>=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 i,n=e._rpn,r=new Array(e._stackSize),o=n.length,l=0,s=0;s<o;++s){var a=n[s],u=a.value;"literal"===a.type?i="variable"!==a.dataType?u:t?t[u]:null:1===E[u]?(i=S[u](r[l-1]),l-=1):(i=S[u](r[l-2],r[l-1]),l-=2),r[l++]=i}return!!r[0]},parse:function(e){if("function"==typeof e)return e;if(!e||"string"!=typeof e)return null;var t=e.trim();if(!t)return null;O._tokens.length=0,t=(t=(t=(t=(t=(t=(t=(t=t.replace(/".+?"/g,O._withString)).replace(/'.+?'/g,O._withString)).replace(/\[.+?\]/g,O._withFieldInBrackets)).replace(/-[0-9.]+/g,O._withNegativeNumber)).replace(/[0-9.#]+/g,O._withPositiveNumber)).replace(/[a-zA-Z_]\w*/g,O._withField)).replace(/[\-\/+*%!=<>&|]+/g,O._withOperator)).replace(/[()]/g,O._withParenthesis);var i=O._tokens,n=i.length;if(!n)return null;var r,o,l,s=[],a=t.match(/#[0-9]+#/g);for(r=0;r<n;++r){var u=a[r];if("literal"===(l=(o=i[+u.substring(1,u.length-1)]).type)){var f=s[s.length-1];if(f&&"literal"===f.type){if(!(o.value<0&&"number"===o.dataType))return console.warn("Cannot parse an expression with insufficient number of operators"),null;x(s,"-","operator"),o.value*=-1}}s.push(o)}O._tokens.length=0,n=s.length;var d=[],c=[],p=null,h=!1;for(r=0;r<n;++r)if("literal"===(l=(o=s[r]).type))d.push(o);else if("parenthesis"===l)if("("===o.value)c.push(o);else{for(h=!1;c.length;){if("("===(p=c.pop()).value&&"parenthesis"===p.type){h=!0;break}d.push(p)}h||console.warn("No left parenthesis paired with the right one")}else{for(;c.length&&!(o.precedence>c[c.length-1].precedence);)d.push(c.pop());c.push(o)}for(h=!1;c.length;)"("===(p=c.pop()).value&&"parenthesis"===p.type?h=!0:d.push(p);if(h&&console.warn("No right parenthesis paired with the left one"),!d.length)return null;var _={_rpn:d};return O._tester(_)?null:O._filter.bind(null,_)}},G={or:1,OR:1,Or:1,oR:1,"||":1},R=function(e){return"number"==typeof e?e:e?Number(e):!1===e?0:NaN},L=/^\w{3} \w{3}/,P=function(e){if("string"==typeof e){var t=new Date(e),i=t.getTime();if(i==i&&L.test(e))return t}return e},k=function(e){return"string"==typeof e?e:e?e+"":0===e?"0":!1===e?"false":""},U=function(e,t){return e&&e.getTime?t?1e4*e.getUTCFullYear()+100*e.getUTCMonth()+e.getUTCDate():1e4*e.getFullYear()+100*e.getMonth()+e.getDate():NaN},B=function(e,t){var i=e._conds,n=i?i.length:0;if(!n)return!0;var r,o,l,s,a=e._fieldName,u=e._formattedFieldName,f=t[a];e._rawDataAccessor&&(f=e._rawDataAccessor(f));for(var d=!1,c=!1,p=0;p<n;++p){var h=0;if(p>0)if(h=G[i[p-1].connector]){if(d)return!0}else if(!d)continue;var _=i[p],g=A[_.operatorId];c=!1;var m=g.type,v=g.id,y=I[v];"blank"===m?c=y(f):"number"===m?(null==l&&(l=R(f)),c=y(l,_.value)):"date"===m?(null==s&&(s=U(f,!1)),c=y(s,_.value)):(null==r&&(e._formattedDataAccessor?r=e._formattedDataAccessor(t[a]):e._formatter?r=e._formatter(t):u!==a?null==(r=t[u])&&(r=f):r=f,r=k(r)),g.caseSensitive?c=y(r,_.value):(null==o&&(o=r.toLowerCase()),c=y(o,_.value))),d=p>0?h?d||c:d&&c:c}return d},V=function(e,t){var i=t[e._fieldName];return e._rawDataAccessor&&(i=e._rawDataAccessor(i)),!!e._itemMap[i]},M=function(e){return[e.operatorId,e.origValue,e.connector]},j=function(e){this._initStaticVariables(),this._conditions=[],this.init(e)};j.prototype._initStaticVariables=function(){if(!j._initStatic){j._initStatic=!0,j._updateTimezoneOffset();var e=864e5-new Date%864e5;setTimeout(j._setUpdateInterval,e)}},j._initStatic=!1,j.prototype._fieldName="",j.prototype._formattedFieldName="",j.prototype._formatter=null,j.prototype._useUTCTime=!1,j.prototype._rawDataAccessor=null,j.prototype._formattedDataAccessor=null,j.prototype._conditions,j._timezoneOffset=0,j._updateTimezoneOffset=function(){j._timezoneOffset=60*(new Date).getTimezoneOffset()},j._setUpdateInterval=function(){j._updateTimezoneOffset(),setInterval(j._updateTimezoneOffset,864e5)},j.prototype.reset=function(){this.setFieldDefinition(""),this._rawDataAccessor=this._formattedDataAccessor=null},j.prototype.init=function(e){if(e){var t=e.field;t?this.setFieldDefinition(t,e.formatter,e.formattedField):null!=t&&this.setFieldDefinition("");var i=e.useUTCTime;null!=i&&(this._useUTCTime=!!i);var n=e.rawDataAccessor,r=e.formattedDataAccessor;null==n&&null==r||this.setDataAccessors(n,r)}},j.prototype.setFieldDefinition=function(e,t,i){this._fieldName=e,this._formattedFieldName=i||this._fieldName+"_FORMATTED",this._formatter=t||null,this._conditions.length=0},j.prototype.setDefaultUTCUsage=function(e){this._useUTCTime=!!e},j.prototype.setDataAccessors=function(e,t){this._rawDataAccessor="function"==typeof e?e:null,this._formattedDataAccessor="function"==typeof t?t:null},j.prototype.addCondition=function(e,t,i,n){var r=e?e.toUpperCase():"",o=A[r];if(!o)return!1;if("{}"===t||"{*}"===t)r=o.positive^"{}"===t?"EQ_NBLANK":"EQ_BLANK",o=A[r];else if(!t&&"blank"!==o.type&&0!==t&&!1!==t)return!1;var l={operatorId:r,origValue:t,connector:i||""};return null!=n&&(l.useUTCTime=n),this._conditions.push(l),!0},j.prototype.addConditions=function(e){var t=0;if(Array.isArray(e)){for(var i=e.length,n=0;n<i;++n){var r=e[n];Array.isArray(r)&&this.addCondition(r[0],r[1],r[2],r[3])&&++t}i>1&&!t&&!Array.isArray(e[0])&&this.addCondition(e[0],e[1],e[2])&&++t}return t},j.prototype.getConditions=function(){return this._conditions.length?this._conditions.map(M):null},j.prototype.buildFilter=function(){if(!this._fieldName)return null;var e=this._conditions.length;if(!e)return null;for(var t=this._formatter,i=this._conditions.slice(),n=0;n<e;++n){var r=i[n],o=A[r.operatorId],l=o.type,s=r.origValue;if("number"===l)s=P(s),s=R(s);else if("date"===l){var a=null;s instanceof Date?a=s:"number"!=typeof s&&"string"!=typeof s||(a=new Date(s)),s=U(a,null!=r.useUTCTime?r.useUTCTime:this._useUTCTime)}else"string"===l&&(s=k(s),o.caseSensitive||(s=s.toLowerCase()));r.value=s}var u={_conds:i,_fieldName:this._fieldName||"",_formatter:t||null,_formattedFieldName:this._formattedFieldName||"",_rawDataAccessor:this._rawDataAccessor||null,_formattedDataAccessor:this._formattedDataAccessor||null};return this._conditions.length=0,B.bind(null,u)},j.prototype.buildMonitorFilter=function(e,t,i,n){this.setFieldDefinition(t,i,n);for(var r=t.lastIndexOf("_LOCAL")===t.length-6,o=e.split("♣"),l=0;l<o.length;l++){var s=o[l].split("♦");r&&(s[1]=(s[1]-j._timezoneOffset)%86400+""),this.addCondition(s[0],s[1],s[2])}return this.buildFilter()};j.prototype.parse=function(e,t,i,n,r,o){var l=typeof e;return"string"===l?e.indexOf("♦")>=0?this.buildMonitorFilter(e,t,i,n):O.parse(e):"function"===l?e:Array.isArray(e)?(t&&(this.setFieldDefinition(t,i,n),this.setDataAccessors(r,o)),this.addConditions(e),this.buildFilter()):"object"===l?function(e,t,i){if(!e||!t)return null;var n={_fieldName:t,_itemMap:e};return i&&(n._rawDataAccessor=i),V.bind(null,n)}(e,t,r):null};let q=function(e){let t=e._context[0];return{field:e._field||"",expression:e._expressions[0],context:null==t||t._autoGenerated?null:t}},z=function(e,t){return Array.isArray(t)&&t.length?e?e.concat(t):t:e};const Q="(Blanks)";let H=function(){let e=this;e._onPreSectionRender=e._onPreSectionRender.bind(e),e._onColumnAdded=e._onColumnAdded.bind(e),e._onColumnRemoved=e._onColumnRemoved.bind(e),e._onPreLoadedDialog=e._onPreLoadedDialog.bind(e),e._onIconClicked=e._onIconClicked.bind(e),e._filterLogic=e._filterLogic.bind(e),e._updateAllColumnIcons=e._updateAllColumnIcons.bind(e),e.refresh=e.refresh.bind(e),e._requestFilterRefresh=e._requestFilterRefresh.bind(e),e._globalFilters=[],e._globalContexts=[],e._columnFilters=[],e._hosts=[],e._dvs=[],e._funcMap={},e._nameMap={}};n.inherits(H,y),H.prototype._funcMap=null,H.prototype._nameMap,H.prototype._disabled=!1,H.prototype._disablingIds=null,H.prototype._globalFilters,H.prototype._globalContexts,H.prototype._columnFilters,H.prototype._activeColFilters=null,H.prototype._iconActivation="onActiveFilter",H.prototype._filterId=0,H.prototype._uiTimerId=0,H.prototype._filterTimerId=0,H.prototype._overridingFilter=null,H.prototype._preTransform=null,H.prototype._rowTransform=null,H.prototype._filterDialog=null,H.prototype._dialogInitialized=!1,H.prototype._dialogOptions=null,H._filterBuilder=null,H.prototype._dvs,H.prototype.getName=function(){return"RowFilteringPlugin"},H.prototype.initialize=function(e,t){this._hosts.indexOf(e)>=0||(this._hosts.push(e),H._styles||(H._styles=function(e){if(e){var t="";if(Array.isArray(e))t=e.map(a).join("\n").replace(/{\s*{/g,"{").replace(/\s+{/g," {");else t="string"==typeof e?e:e+"";if(t)return t.replace(/{[\w\W]*?}/g,u)}return""}([".hovering-filter-icon .cell:not(.active-filter):hover .floating-panel .title-filter-icon",["display: flex;"],".hovering-filter-icon .cell:not(.active-filter) .floating-panel .title-filter-icon",["display: none;"],".floating-panel",["position:relative;"],".floating-panel .title-filter-icon",["color: var(--grid-title-filter-icon-color,inherit);"],".title .floating-panel .title-filter-icon:hover",["color: var(--grid-title-filter-icon-hover-color,inherit);"],".always-on-filter .floating-panel .title-filter-icon",["color: var(--grid-header-txtcolor,inherit);"],".always-on-filter .active-filter .floating-panel .title-filter-icon",["color: var(--grid-title-filter-icon-hover-color,inherit);"],".hovering-filter-icon .tiny-col .cell:hover, .tr-grid .tiny-col .cell.active-filter",["padding-left:0px;"],".tiny-col.movable .cell .floating-panel .title-filter-icon:before",["content: '.';","position: absolute;","margin-left: auto;","margin-right: auto;","left: 0;","right: 0;","top: -10px;","font-size: 10px;","font-family: monospace;","color: var(--grid-title-dot-icon,inherit);","text-align:center;"]])),e._rowFilteringStyles||(e._rowFilteringStyles=!0,f(H._styles,e.getElement())),e.unloadPlugin("ColumnFilterPlugin"),e.listen("preSectionRender",this._onPreSectionRender),e.listen("postDataSourceChanged",this._requestFilterRefresh),e.listen("columnAdded",this._onColumnAdded),e.listen("columnRemoved",this._onColumnRemoved),this.config(t))},H.prototype.unload=function(e){let t=this._hosts.indexOf(e);t<0||(this._hosts.splice(t,1),e.unlisten("preSectionRender",this._onPreSectionRender),e.unlisten("postDataSourceChanged",this._requestFilterRefresh),e.unlisten("columnAdded",this._onColumnAdded),e.unlisten("columnRemoved",this._onColumnRemoved),this._hosts.length||(this._uiTimerId&&(clearTimeout(this._uiTimerId),this._uiTimerId=0),this._filterTimerId&&(clearTimeout(this._filterTimerId),this._filterTimerId=0),this._hasPendingFilter=!1,this._filterDialog&&(this._filterDialog.hide(),this._filterDialog=null,this._dialogInitialized=!1)),this._dispose())},H.prototype._afterInit=function(){this._filterDialog||(this._filterDialog=H._createDialog(),this._dialogInitialized=!1,this._filterDialog&&(this._filterDialog.style.display="none",document.body.appendChild(this._filterDialog),setTimeout(this._onPreLoadedDialog,10))),this._applyPendingFilter()},H.prototype._applyPendingFilter=function(){if(!this._initializedGrid)return;if(!this._hasPendingFilter)return;this._hasPendingFilter=!1;let e=this.getColumnCount();for(let t=0;t<e;++t){let e=this._getUserColumnSettings(t);e.expression?this.addColumnFilter(t,e.expression,e.filterState):this._removeColumnFilters(t)}},H.prototype._onPreLoadedDialog=function(){if(this._filterDialog){this._filterDialog.style.display="";let e=this._filterDialog.parentNode;e&&e.removeChild(this._filterDialog)}},H.prototype.config=function(e){if(!e)return;let t=e.rowFiltering;if(t){if((t.disabledUI||t.uiDisabled)&&(this._iconActivation="none"),null!=t.emptySegmentFiltering&&this.enableEmptySegmentFiltering(!!t.emptySegmentFiltering),null!=t.separatorFiltering&&this.enableSeparatorFiltering(!!t.separatorFiltering),t.iconActivation){this._iconActivation=t.iconActivation;for(let e=0;e<this._hosts.length;e++)"onHover"===this._iconActivation?this._hosts[e].enableClass("hovering-filter-icon",!0):this._hosts[e].enableClass("hovering-filter-icon",!1),"always"===this._iconActivation?this._hosts[e].enableClass("always-on-filter",!0):this._hosts[e].enableClass("always-on-filter",!1)}t.dialogOptions&&(this._dialogOptions=t.dialogOptions),t.clicked&&(t.click=t.clicked),this.addListener(t,"click"),this.addListener(t,"beforeDialogOpened"),this.addListener(t,"dialogCommitted"),this.addListener(t,"iconCreated"),this.addListener(t,"filterChanged"),this.addListener(t,"refreshed")}let i=e.columns;if(!i)return;let n=i.length;for(let e=0;e<n;++e){let t=i[e];this._setColumnOptions(e,t)}this._applyPendingFilter()},H.prototype.getConfigObject=function(e){let t=e||{},i=t.columns;i||(i=t.columns=[]);let n=this.getColumnCount();for(let e=0;e<n;++e){let t=i[e];t||(t=i[e]={});let n=this._getUserColumnSettings(e),r=n.expression;if(r&&"function"!=typeof r)if("object"!=typeof r||Array.isArray(r))t.filter=r;else{let e=l(r);e[""]||e.null||e[void 0]||e.NaN?(delete e[""],delete e.null,delete e[void 0],delete e.NaN,e[Q]=!0,t.filter=e):t.filter=r}let o=n.filterState;null!=o&&("object"==typeof o&&o._autoGenerated||(t.filterState=o))}let r=t.rowFiltering,o=!1;return r||(r={}),"onActiveFilter"!==this._iconActivation&&(r.iconActivation=this._iconActivation,o=!0),this._dialogOptions&&(r.dialogOptions=this._dialogOptions,o=!0),o&&(t.rowFiltering=r),t},H.prototype.disable=function(e,t){let i=!1!==e;this._disablingIds||(this._disablingIds={}),t||(t="_"),this._disablingIds[t]=i,i=!1;for(let e in this._disablingIds)if(this._disablingIds[e]){i=!0;break}this._disabled!==i&&(this._disabled=i,i?(this.refresh(),this._updateAllColumnIcons()):(this._requestFilterRefresh(),this._setTimerForUpdatingIcons()))},H.prototype.addFilter=function(e,t,i){let n=this._parseFilter(e,-1);return n?(t||(t="_"+this._filterId++),this._nameMap[t]||this._globalFilters.indexOf(n)>=0?"":(i=null!=i?i:null,this._nameMap[t]=n,this._globalFilters.push(n),this._globalContexts.push(i),this._dispatch("filterChanged",{filterType:"global",changeType:"add",colIndex:-1,field:null}),this._requestFilterRefresh(),t)):""},H.prototype.addGridFilter=function(e,t){return this.addFilter(e,null,t)},H.prototype._parseFilter=function(e,t,i){if(!e)return null;if("function"==typeof e)return e;let n=H._getFilterBuilder(),r=t||0===t,o=r?this._getField(t):"",l=r?this._getFormatter(t):null,s=null;if("string"==typeof e)s=this._funcMap[e],null==s&&(s=this._funcMap[e]=n.parse(e,o,l,o));else{let t=null,r=null;i&&(t=i.rawDataAccessor||null,r=i.formattedDataAccessor||null),Array.isArray(e)||(e[Q]||i&&i.blankValues)&&(e[""]=e.null=e[void 0]=e.NaN=!0,delete e[Q]),s=n.parse(e,o,l,o,t,r)}return s},H.prototype.addColumnFilter=function(e,t,i){if(e<0||e>=this.getColumnCount())return!1;let n=this._getColumnFilterOption(e);if(n&&n._expressions[0]===t)return!1;let r=null;if("function"==typeof t?(r=t,i&&"string"==typeof i&&(t=i)):r=this._parseFilter(t,e,i),!r)return!1;let o=this._getUserColumnSettings(e);o.expression=t,o.filterState=i,null==i&&(i={_autoGenerated:!0});let l=this._getField(e);return i&&"object"==typeof i&&(i.field=l),n=this._initColumnFilterOption(e),n._field=l,n._filters.push(r),n._expressions.push(t),n._context.push(i),n._rawDataAccessor=i.rawDataAccessor||null,n._formattedDataAccessor=i.formattedDataAccessor||null,this._columnFilters.push(n),this._dispatch("filterChanged",{filterType:"column",changeType:"add",colIndex:e,field:l}),this._requestFilterRefresh(),this._updateColumnIcon(e),!0},H.prototype.setColumnFilter=function(e,t,i){if(this.getColumnFilterExpression(e)===t)return!1;let n=this._removeColumnFilters(e),r=this.addColumnFilter(e,t,i);return!r&&n&&this._updateColumnIcon(e),n||r},H.prototype.getColumnFilterExpression=function(e){return this._getUserColumnSettings(e).expression||null},H.prototype._setColumnOptions=function(e,t){let i=this._getUserColumnSettings(e),n=t.filterIcon,r=t.fieldDataType||t.dataType;r&&(i.fieldDataType=r),null!=n&&(i.filterIcon=n);let o=t.filter;null!=o&&(i.expression=o,i.filterState=null,this._hasPendingFilter=!0);let l=t.filterState;null!=l&&(i.filterState=l);let s=0==n?"none":this._iconActivation;return"always"!=s&&"onHover"!=s||this._updateColumnIcon(e),null!=o},H.prototype._getUserColumnSettings=function(e){let t=this._newColumnData(e),i=t.rowFiltering;return i||(i=t.rowFiltering={}),i},H.prototype._getColumnFilterOption=function(e){let t=this._getUserColumnSettings(e);return t&&t.filterOption||null},H.prototype._removeActiveFilterStates=function(e){let t=this._getUserColumnSettings(e);t.expression=null,t.filterState=null;let i=t.filterOption;i&&(t.filterOption=null,i._filters.length&&this._dispatch("filterChanged",{filterType:"column",changeType:"remove",colIndex:e,field:this._getField(e)}))},H.prototype._initColumnFilterOption=function(e){let t=this._getColumnFilterOption(e);if(!t){t={},t._filters=[],t._expressions=[],t._context=[],this._getUserColumnSettings(e).filterOption=t}return t},H.prototype.removeFilter=function(e){let t=null,i="",n=-1;if("string"==typeof e)i=e,t=this._nameMap[e],n=this._globalFilters.indexOf(t);else if(t=e,n=this._globalFilters.indexOf(t),n>=0)for(let e in this._nameMap)this._nameMap[e]===t&&(i=e);return!(n<0)&&(delete this._nameMap[i],this._globalFilters.splice(n,1),this._globalContexts.splice(n,1),this._requestFilterRefresh(),!0)},H.prototype.removeColumnFilters=function(e){if(null==e)return this.removeAllColumnFilters();let t=this._removeColumnFilters(e);return t&&this._updateColumnIcon(e),t},H.prototype._removeColumnFilters=function(e){let t=this._getColumnFilterOption(e);if(t){let i=this._columnFilters.indexOf(t);i>=0&&this._columnFilters.splice(i,1),this._removeActiveFilterStates(e);let n=this._getPlugin("FilterInputPlugin");n&&n.updateUI(e,""),this._requestFilterRefresh()}return!!t},H.prototype.removeColumnFilter=H.prototype.removeColumnFilters,H.prototype.removeAllColumnFilters=function(){if(this._columnFilters.length){this._columnFilters.length=0;let e=this._getPlugin("FilterInputPlugin"),t=this._getColumnCount();for(let i=0;i<t;++i)this._removeActiveFilterStates(i),e&&e.updateUI(i,"");return this._updateAllColumnIcons(),this._requestFilterRefresh(),!0}return!1},H.prototype.removeAllFilters=function(){this._globalFilters.length+this._columnFilters.length<=0||(this._globalFilters.length&&(this._globalFilters.length=0,this._nameMap={},this._dispatch("filterChanged",{filterType:"global",changeType:"remove",colIndex:-1,field:""})),this.removeAllColumnFilters(),this._requestFilterRefresh())},H.prototype.setOverridingFilter=function(e){this._overridingFilter=e},H.prototype.setPreTransform=function(e){this._preTransform=e},H.prototype.setRowTransform=function(e){this._rowTransform=e},H.prototype.getFilters=function(){return this._globalFilters},H.prototype.getAllColumnFilters=function(){let e=[],t=this._columnFilters.length;for(let i=0;i<t;++i){let t=this._columnFilters[i],n=t._filters.length;for(let i=0;i<n;++i)e.push(t._filters[i])}return e},H.prototype.getFilterExpressions=function(){return this._columnFilters.length?this._columnFilters.map(q):null},H.prototype.setFilterExpressions=function(e){if(this.removeAllColumnFilters(),Array.isArray(e)){let t=this.getGridApi().getColumnFields(),i=e.length;for(let n=0;n<i;++n){let i=e[n],r=i.field,o=t.indexOf(r);o>=0&&this.setColumnFilter(o,i.expression,i.context)}}},H.prototype.hasColumnFilter=function(){return this._columnFilters.length>0},H.prototype.getColumnFilterIcons=function(e){let t=[];for(let i=this._hosts.length;--i>=0;){let n=this._hosts[i].getSection("title");if(!n)continue;let r=n.getRowCount(),o=n.getCell(e,r-1,!0);o&&o._filterIcon&&t.push(o._filterIcon)}return t},H.prototype.updateAllColumnIcons=function(){this._uiTimerId&&(clearTimeout(this._uiTimerId),this._uiTimerId=0),this._updateAllColumnIcons()},H.prototype.addDataView=function(e){this._dvs.indexOf(e)<0&&(this._dvs.push(e),this._requestFilterRefresh())},H.prototype.removeDataView=function(e){let t=this._dvs.indexOf(e);t>=0&&(this._dvs.splice(t,1),this._requestFilterRefresh())},H.prototype._onPreSectionRender=function(e){"title"===e.sectionType&&this._setTimerForUpdatingIcons()},H.prototype._onIconClicked=function(e){let t=this._hosts[0];if(!t)return;let i=t.getRelativePosition(e);this.openDialog(i.colIndex),e.stopPropagation(),e.preventDefault(),this._dispatch("click",e)},H.prototype._filterLogic=function(e,t){if(t){let i;this._rowGetter&&(t=this._rowGetter(t)),this._preTransform&&(t=this._preTransform(t));let n=this._globalFilters.length;for(i=0;i<n;++i)if(!this._globalFilters[i](t,e,this._globalContexts[i]))return!1;if(n=this._activeColFilters.length,n){if(this._overridingFilter){let i=this._overridingFilter(t,e);if(i)return i>0}for(this._rowTransform&&(t=this._rowTransform(t)),i=0;i<n;++i){let n=this._activeColFilters[i],r=n._filters.length;for(let i=0;i<r;++i)if(!n._filters[i](t,e,n._context[i]))return!1}}}return!0},H.prototype._requestFilterRefresh=function(){this._filterTimerId||(this._filterTimerId=setTimeout(this.refresh,10))},H.prototype._setTimerForUpdatingIcons=function(){"none"!==this._iconActivation&&(this._uiTimerId||(this._uiTimerId=setTimeout(this._updateAllColumnIcons,10)))},H.prototype.refresh=function(){if(this._filterTimerId=0,this._activeColFilters=this._columnFilters,this._getPlugin("ColumnStackPlugin")){let e,t,i=this._hosts[0],n=this._getColumnCount();for(this._activeColFilters=[],e=0;e<n;++e)t=this._getColumnFilterOption(e),t&&i.getColumnVisibility(e,2)&&this._activeColFilters.push(t)}let e=this._globalFilters.length+this._activeColFilters.length,t=!this._disabled&&e?this._filterLogic:null,i=0,n=this._getAvailableDataViews();for(let e=n.length;--e>=0;)i|=n[e].filterIn(t);i&&this._dispatch("refreshed",{})},H.prototype._updateColumnIcon=function(e){let t=this._getColumnFilterOption(e),i=0==this._getUserColumnSettings(e).filterIcon?"none":this._iconActivation,n=t?t._filters.length:0;for(let t=this._hosts.length;--t>=0;){let r=this._hosts[t],o=r.getSection("title");if(!o)continue;let l=o.getRowCount(),s=o.getCell(e,l-1,!0),a=o.getColumn(e);if(!s)continue;s.updatePadding&&s.updatePadding(),r.isColumnMovable(e)?a.enableClass("movable",!0):a.enableClass("movable",!1);let u="always"!==i&&"onHover"!==i;if(this._disabled||"none"===i||u&&!n)s._filterIcon&&(s.removeFloatingIcon(s._filterIcon),s._filterIcon=null,s.enableClass("active-filter",!1));else{if(!s._filterIcon){let t;m.hasComponent("coral-icon")>=3?(t=document.createElement("coral-icon"),t.setAttribute("icon","filter")):(t=document.createElement("div"),t.className="filter-symbol icon-filter coral-icon"),t.classList.add("title-filter-icon"),t.addEventListener("click",this._onIconClicked,!1),this._dispatch("iconCreated",{icon:t,colIndex:e,grid:r}),s.insertFloatingIcon(t,10),s._filterIcon=t}n?s.enableClass("active-filter",!0):s.enableClass("active-filter",!1)}}},H.prototype._updateAllColumnIcons=function(){this._uiTimerId=0;let e=this._getColumnCount();for(let t=0;t<e;++t)this._updateColumnIcon(t)},H.prototype._getColumnCount=function(){let e=this._hosts[0];return e?e.getColumnCount():0},H.prototype.setColumnFilterState=function(e,t){let i=this._getColumnFilterOption(e);return!!i&&(i._context[0]=t,this._requestFilterRefresh(),!0)},H.prototype.getColumnFilterState=function(e){let t=this._getColumnFilterOption(e);return t?t._context[0]:null},H.prototype.getColumnFilterStates=function(){let e=this._hosts[0]?this._hosts[0].getColumnCount():0,t=new Array(e);for(let i=0;i<e;++i)t[i]=this.getColumnFilterState(i);return t},H.prototype._getAvailableDataViews=function(){if(this._dvs.length)return this._dvs;{let e=this._hosts.length,t=[];for(let i=0;i<e;++i){let e=this._hosts[i].getDataSource();e&&t.push(e)}return t}},H.prototype._getDataTable=function(e){let t=e?e.getDataSource():null;for(;t&&t.getDataSource();)t=t.getDataSource();return t},H.prototype.getUniqueValues=function(e,t,i,n,r,o,l){let s={rawDataAccessor:n,formattedDataAccessor:r};return this._getUniqueValues(e,s,t,o,l)};let K=function(e,t){return"string"==typeof e?e:e?"object"!=typeof e?t+"":e instanceof Date?e.toLocaleString("en-GB"):"":0===e?"0":!1===e?"false":""},W=function(e,t,i,n){if(n&&!e[t]){for(let e=n.length;--e>=0;)if(!n[e](i))return!1;return e[t]=!0,!0}return!1},X=function(e,t,i){let n=e[t];n?n.indexOf(i)<0&&n.push(i):e[t]=[i]};H.prototype._getUniqueValues=function(e,t,i,n,r){if(!e)return null;let o=t.rawDataAccessor||null,l=t.formattedDataAccessor||null,s=t.itemList,a={},u=null,f=null;if(!Array.isArray(s)){s=null;let t=this._getAvailableDataViews().map(this._getDataTable),d=t.length;for(let s=0;s<d;++s){let d=t[s].getAllRowData(),c=d.length;for(let t=0;t<c;++t){let s=d[t];this._rowGetter&&(s=this._rowGetter(s)),this._rowTransform&&(s=this._rowTransform(s));let c=s[e];f=c,o&&(f=o(f)),(f||0===f||!1===f)&&(u=f,l?u=l(c):i&&(u=i(s)),u=K(u,f),u&&(W(r,u,s,n),X(a,u,f)))}}}s=z(s,t.additionalItems);let d={},c=s?s.length:0;for(let t=0;t<c;++t)f=d[e]=s[t],u=f,l?u=l(f):i&&(u=i(d)),u=K(u,f),u&&(W(r,u,d,n),X(a,u,f));return a},H._createDialog=function(){let e=H._dialogTagName;if(null==e){let t=m.hasComponent("filter-dialog");e=H._dialogTagName=t?t>=3?"filter-dialog":"tr-grid-filter-dialog":""}return e?document.createElement(e):null},H._formatArrayExpression=function(e,t,i){if(Array.isArray(e)){let n=e.slice(),r=n[1],o=P(r);if(o!==r&&(n.rawValue=o,n.formattedValue=r),t&&i&&"string"!=typeof o&&null!=o){let e={};e[t]=o,r=i(e),r&&(n.rawValue=o,n.formattedValue=r,o=r)}return n[1]=o,n}return null},H.prototype.openDialog=function(e,t){let i=this._getPlugin("SortableTitlePlugin");if(this._filterDialog&&this._dialogInitialized||(this._filterDialog||(this._filterDialog=H._createDialog()),this._filterDialog&&(this._dialogInitialized=!0,i?this._filterDialog.addEventListener("sortChanged",this._onDialogSortChanged.bind(this)):this._filterDialog.hideSortUI(),this._filterDialog.addEventListener("filterChanged",this._onDialogFilterChanged.bind(this)))),!this._filterDialog)return void console.log("Filter dialog does not exist");if(this._filterDialog.isShown&&(this._filterDialog.hide(),this._filterDialog._colIndex===e))return;let n=this._hosts[0];if(!n)return;let r=n.getSection("title");if(!r)return;let o=r.getRowCount(),l=r.getCell(e,o-1,!0);if(!l||!l.getElement())return;let s=this._getField(e);if(!s)return;if(this.hasListener("beforeDialogOpened")){let i={colIndex:e,field:s,grid:n};if(t&&(i.dialogOptions=t),this._dispatch("beforeDialogOpened",i),i.cancel)return;i.dialogOptions&&(t=i.dialogOptions)}"object"!=typeof t&&(t=null),i&&this._filterDialog.setSortState(i.getSortOrder(e));let a=n.getColumnData(e).formatOptions,u=!1;a&&a.formatType&&(u=!0,null!=a.useUTCTime&&(u=a.useUTCTime));let f={sortUI:!0,filterUI:!0,fieldDataType:"",lang:"",rawDataAccessor:null,formattedDataAccessor:null,sortLogic:null,blankValues:!1,blankValuesChecked:!1},d=null,c=this._getUserColumnSettings(e);c.fieldDataType&&(d={fieldDataType:c.fieldDataType}),H._overrideConfig(f,this._dialogOptions),H._overrideConfig(f,d),H._overrideConfig(f,t);let p=this._initColumnFilterOption(e);p._rawDataAccessor=f.rawDataAccessor||null,p._formattedDataAccessor=f.formattedDataAccessor||null;let h=f.sortLogic||null,_=this._getFormatter(e),g=null,m="",v=null,y=c.expression;y&&(Array.isArray(y)?y.length&&(g=Array.isArray(y[0])?y.slice():[y],g[0]=H._formatArrayExpression(g[0],s,_),g[1]=H._formatArrayExpression(g[1],s,_),m="advanced"):"function"!=typeof y&&"string"!=typeof y&&"object"!=typeof y||(p._filters&&p._filters.length&&(v=p._filters),"object"==typeof y&&(f.additionalItems=z(f.additionalItems,Object.keys(y)))));let C={},b=p.uniqueValues=this._getUniqueValues(s,f,_,v,C);if(f.blankValues){delete b[Q];let e={},t=["",null,void 0,NaN],i={};for(let n=0;n<t.length;n++){let r=t[n];if(i[s]=r,W(e,Q,i,v)){f.blankValuesChecked=!0;break}}}let T=Object.keys(b);h&&T.sort((function(e,t){let i=b[e][0],n=b[t][0];return h(i,n)}));let F=T.map((function(e,t){return{id:t,title:e,nodes:[],checked:!!C[e]}}));if(g){let e=g[0];e&&e.formattedValue&&(b[e.formattedValue]||(b[e.formattedValue]=[e.rawValue])),e=g[1],e&&e.formattedValue&&(b[e.formattedValue]||(b[e.formattedValue]=[e.rawValue]))}this._filterDialog.init&&this._filterDialog.init(f),this._filterDialog.useUTCTime=u,this._filterDialog.target=l.getElement(),this._filterDialog._colIndex=e,this._filterDialog.data=F,this._filterDialog.filterMode=m,this._filterDialog.conditions=g,this._filterDialog.show()},H._overrideConfig=function(e,t){if(!t)return;let i=t.sortUI;null!=i&&(e.sortUI=i);let n=t.filterUI;null!=n&&(e.filterUI=n);let r=t.fieldDataType;null!=r&&(e.fieldDataType=r);let o=t.lang;null!=o&&(e.lang=o);let l=t.rawDataAccessor;"function"!=typeof l&&null!==l||(e.rawDataAccessor=l);let s=t.formattedDataAccessor;"function"!=typeof s&&null!==s||(e.formattedDataAccessor=s);let a=t.sortLogic;"function"!=typeof a&&null!==a||(e.sortLogic=a);let u=t.itemList;null!=u&&(e.itemList=u);let f=t.additionalItems;null!=f&&(e.additionalItems=f);let d=t.blankValues;d&&(e.blankValues="string"==typeof d?d:Q)},H.prototype._getFormatter=function(e){let t=this._getPlugin("TextFormattingPlugin");if(t){let i=t.getFormatter(e);if(i)return i.format||null}return null},H._getFilterBuilder=function(){return H._filterBuilder||(H._filterBuilder=new j),H._filterBuilder},H.prototype._onDialogFilterChanged=function(e){let t=this._filterDialog._colIndex,i=this._getColumnFilterOption(t),n=i.uniqueValues,r=i._rawDataAccessor,o=i._formattedDataAccessor,l=null;(r||o)&&(l={rawDataAccessor:r||null,formattedDataAccessor:o||null}),this.removeColumnFilters(t);let s=e.detail.conditions;if(Array.isArray(s)){let e=s.length;for(let t=0;t<e;++t){let e=s[t],i=A[e[0]];if(i&&"string"!==i.type){let t=n[e[1]];null!=t&&(e[1]=t[0])}}return l&&(l._autoGenerated=!0),void this.addColumnFilter(t,s,l)}let a=e.detail.value,u=null;if(a){if("string"==typeof a)return void this.addColumnFilter(t,a);u=a}let f=u?u.length:0;if(!f)return;let d={},c={},p=!1;for(let e=0;e<f;++e){let t=u[e].title;if(u[e].value===Q){l||(l={}),l.blankValues=!0,p=!0;continue}let i=n[t];if(!i)continue;p=!0,c[t]=!0;let r=i.length;for(let e=0;e<r;++e)d[i[e]]=!0}p&&this.addColumnFilter(t,d,l),this._dispatch("dialogCommitted",{value:e.detail.value,fieldDataType:e.detail.fieldDataType,colIndex:t})},H.prototype._onDialogSortChanged=function(e){let t=this._getPlugin("SortableTitlePlugin");if(t){let i=this._filterDialog._colIndex,n=e.detail.value?e.detail.value:e.detail;t.getSortOrder(i)===n?t.sortColumn(i,"n"):t.sortColumn(i,n),this._dispatch("dialogCommitted",{sortOrder:e.detail.value,colIndex:i})}},H.prototype._onColumnAdded=function(e){if(e.context){this._setColumnOptions(e.colIndex,e.context)&&this._applyPendingFilter()}},H.prototype._onColumnRemoved=function(e){let t=e.columnData;if(!t)return;let i=t.rowFiltering.filterOption;if(i){let t=this._columnFilters.indexOf(i);t>=0&&this._columnFilters.splice(t,1),this._dispatch("filterChanged",{filterType:"column",changeType:"remove",colIndex:e.colIndex,field:i._field||""}),this._requestFilterRefresh()}},H.prototype.enableEmptySegmentFiltering=function(e){let t=this._hosts[0],i=t?t.getDataSource():null;i&&i.enableEmptySegmentFiltering&&i.enableEmptySegmentFiltering(e)},H.prototype.enableSeparatorFiltering=function(e){let t=this._hosts[0],i=t?t.getDataSource():null;i&&i.enableSeparatorFiltering&&i.enableSeparatorFiltering(e)};!function(e,t){if(e&&t&&t.prototype.getName){var i=t.prototype.getName().replace(/Plugin$/,"");if(i){var n=e.tr;n||(n=e.tr={});var r=n.grid;r||(r=n.grid={}),r[i+"Plugin"]=t,n[i+"Extension"]=t}}}(window,H)}]);
\ No newline at end of file
diff --git a/book/en/rendering/change-formatter.html b/book/en/rendering/change-formatter.html
index 053a4e6e..98d780a9 100644
--- a/book/en/rendering/change-formatter.html
+++ b/book/en/rendering/change-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/change-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="changing-formatter-at-runtime">Changing Formatter at Runtime</h1>
             <p>Sometimes you might want to change a custom rendering at runtime. This can be achieved by using <code>setColumnFormatter</code> method.</p>
             <blockquote>
diff --git a/book/en/rendering/column-formatter.html b/book/en/rendering/column-formatter.html
index 21ab52c3..c9c3327b 100644
--- a/book/en/rendering/column-formatter.html
+++ b/book/en/rendering/column-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/column-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="formatter-default-">Formatter (default)</h1>
             <p>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.</p>
             <blockquote>
diff --git a/book/en/rendering/custom-formatter.html b/book/en/rendering/custom-formatter.html
index 9ea65605..00bfb2f8 100644
--- a/book/en/rendering/custom-formatter.html
+++ b/book/en/rendering/custom-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/custom-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="custom-formatter">Custom Formatter</h1>
             <p>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.</p>
             <p>The process for writing the formatter is usually something like the following code:</p>
diff --git a/book/en/rendering/formatter-event-handling.html b/book/en/rendering/formatter-event-handling.html
index fbfbd668..d9705e18 100644
--- a/book/en/rendering/formatter-event-handling.html
+++ b/book/en/rendering/formatter-event-handling.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/formatter-event-handling" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="event-handling-and-event-listeners-in-formatter">Event handling and event listeners in formatter</h1>
             <p>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. </p>
             <p>In short, data should be updated after users interact with the UI input. <code>getRelativePosition()</code> method should be used to resolve current positions relative to the grid element.</p>
diff --git a/book/en/rendering/predefined-formatter.html b/book/en/rendering/predefined-formatter.html
index 3ab2cf6d..830cb50c 100644
--- a/book/en/rendering/predefined-formatter.html
+++ b/book/en/rendering/predefined-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="predefined-formatter">Predefined Formatter</h1>
             <h2 id="setup-guide">Setup guide</h2>
             <p>Use <code>import</code> syntax to import the formatter into your app.</p>
diff --git a/book/en/rendering/predefined_formatters/ef-button-formatter.html b/book/en/rendering/predefined_formatters/ef-button-formatter.html
index 04e06ad7..68afd37a 100644
--- a/book/en/rendering/predefined_formatters/ef-button-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-button-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-button-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-button-formatter">EF Button Formatter</h1>
             <p>This formatter creates a <a href="https://ui.refinitiv.com/elements/button" target="_blank">ef-button</a> without a margin. By default the text inside the button will be data from the column's field.</p>
             <h2 id="specific-options">Specific options</h2>
diff --git a/book/en/rendering/predefined_formatters/ef-checkbox-formatter.html b/book/en/rendering/predefined_formatters/ef-checkbox-formatter.html
index 6e65339a..c988a858 100644
--- a/book/en/rendering/predefined_formatters/ef-checkbox-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-checkbox-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-checkbox-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-checkbox-formatter">EF Checkbox Formatter</h1>
             <p>This formatter creates a <a href="https://ui.refinitiv.com/elements/checkbox" target="_blank">ef-checkbox</a> which will be unchecked by default.</p>
             <h2 id="example">Example</h2>
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 8038ab89..7ca546f3 100644
--- a/book/en/rendering/predefined_formatters/ef-combo-box-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-combo-box-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-combo-box-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-combo-box-formatter">EF Combo Box Formatter</h1>
             <p>This formatter creates a <a href="https://ui.refinitiv.com/elements/combo-box" target="_blank">ef-combo-box</a> without margin. Its options come from passed <code>options.data</code>.</p>
             <h2 id="specific-options">Specific options</h2>
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 498c5134..a227ca8d 100644
--- a/book/en/rendering/predefined_formatters/ef-datetime-picker-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-datetime-picker-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-datetime-picker-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-datetime-picker-formatter">EF DateTime Picker Formatter</h1>
             <p>This formatter creates <a href="https://ui.refinitiv.com/elements/datetime-picker" target="_blank">ef-datetime-picker</a> without margin. </p>
             <h2 id="example">Example</h2>
diff --git a/book/en/rendering/predefined_formatters/ef-icon-formatter.html b/book/en/rendering/predefined_formatters/ef-icon-formatter.html
index edee45cf..58745cdc 100644
--- a/book/en/rendering/predefined_formatters/ef-icon-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-icon-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-icon-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-icon-formatter">EF Icon Formatter</h1>
             <p>This formatter creates a <a href="https://ui.refinitiv.com/elements/icon" target="_blank">ef-icon</a> from the column's field by default.</p>
             <blockquote>
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 ec78b1d9..63a7e2a8 100644
--- a/book/en/rendering/predefined_formatters/ef-number-field-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-number-field-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-number-field-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-number-field-formatter">EF Number Field Formatter</h1>
             <p>This formatter creates a <a href="https://ui.refinitiv.com/elements/number-field" target="_blank">ef-number-field</a> without a margin and 100% width. By default the input's value will be the column's field.</p>
             <h2 id="example">Example</h2>
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 63945638..4bf09dc2 100644
--- a/book/en/rendering/predefined_formatters/ef-radio-button-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-radio-button-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-radio-button-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-radio-button-formatter">EF Radio Button Formatter</h1>
             <p>This formatter creates a <a href="https://ui.refinitiv.com/elements/radio-button" target="_blank">ef-radio-button</a> which will be unchecked by default.</p>
             <h2 id="specific-options">Specific options</h2>
diff --git a/book/en/rendering/predefined_formatters/ef-select-formatter.html b/book/en/rendering/predefined_formatters/ef-select-formatter.html
index c93b3f0f..53e6d557 100644
--- a/book/en/rendering/predefined_formatters/ef-select-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-select-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-select-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-select-formatter">EF Select Formatter</h1>
             <p>This formatter creates <a href="https://ui.refinitiv.com/elements/select" target="_blank">ef-select</a> without margin. Its options come from passed <code>options.data</code>.</p>
             <h2 id="specific-options">Specific options</h2>
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 f3fcbdca..c49be045 100644
--- a/book/en/rendering/predefined_formatters/ef-text-field-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-text-field-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-text-field-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-text-field-formatter">EF Text Field Formatter</h1>
             <p>This formatter creates a <a href="https://ui.refinitiv.com/elements/text-field" target="_blank">ef-text-field</a> without a margin and 100% width. By default the input's value will be the column's field.</p>
             <h2 id="example">Example</h2>
diff --git a/book/en/rendering/predefined_formatters/ef-toggle-formatter.html b/book/en/rendering/predefined_formatters/ef-toggle-formatter.html
index 5999f7b3..0082f8df 100644
--- a/book/en/rendering/predefined_formatters/ef-toggle-formatter.html
+++ b/book/en/rendering/predefined_formatters/ef-toggle-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/ef-toggle-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="ef-toggle-formatter">EF Toggle Formatter</h1>
             <p>This formatter creates a <a href="https://ui.refinitiv.com/elements/toggle" target="_blank">ef-toggle</a>. The toggle will be off by default.</p>
             <h2 id="example">Example</h2>
diff --git a/book/en/rendering/predefined_formatters/percent-bar-formatter.html b/book/en/rendering/predefined_formatters/percent-bar-formatter.html
index 68fb63e9..9c84cb0b 100644
--- a/book/en/rendering/predefined_formatters/percent-bar-formatter.html
+++ b/book/en/rendering/predefined_formatters/percent-bar-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/percent-bar-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="percent-bar-formatter">Percent Bar Formatter</h1>
             <p>This formatter creates a percent bar.</p>
             <h2 id="specific-options">Specific options</h2>
diff --git a/book/en/rendering/predefined_formatters/simple-image-formatter.html b/book/en/rendering/predefined_formatters/simple-image-formatter.html
index 5ea7255b..83e43001 100644
--- a/book/en/rendering/predefined_formatters/simple-image-formatter.html
+++ b/book/en/rendering/predefined_formatters/simple-image-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/simple-image-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="simple-image-formatter">Simple Image Formatter</h1>
             <p>This formatter creates an image from the column's field by default.</p>
             <h2 id="example">Example</h2>
diff --git a/book/en/rendering/predefined_formatters/simple-input-formatter.html b/book/en/rendering/predefined_formatters/simple-input-formatter.html
index 7dcfda6f..fff1c03e 100644
--- a/book/en/rendering/predefined_formatters/simple-input-formatter.html
+++ b/book/en/rendering/predefined_formatters/simple-input-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/simple-input-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="simple-input-formatter">Simple Input Formatter</h1>
             <p>This formatter creates an input without a margin and 100% width. By default the input's value will be the column's field.</p>
             <h2 id="example">Example</h2>
diff --git a/book/en/rendering/predefined_formatters/simple-link-formatter.html b/book/en/rendering/predefined_formatters/simple-link-formatter.html
index 6c2ffeea..5d618938 100644
--- a/book/en/rendering/predefined_formatters/simple-link-formatter.html
+++ b/book/en/rendering/predefined_formatters/simple-link-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/simple-link-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="simple-link-formatter">Simple Link Formatter</h1>
             <p>This formatter creates a link with text from the column's field by default.</p>
             <h2 id="specific-options">Specific options</h2>
diff --git a/book/en/rendering/predefined_formatters/simple-ticker-formatter.html b/book/en/rendering/predefined_formatters/simple-ticker-formatter.html
index be69000e..b599d326 100644
--- a/book/en/rendering/predefined_formatters/simple-ticker-formatter.html
+++ b/book/en/rendering/predefined_formatters/simple-ticker-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/simple-ticker-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="simple-ticker-formatter">Simple Ticker Formatter</h1>
             <p>This formatter creates a ticker column.</p>
             <h2 id="specific-options">Specific options</h2>
diff --git a/book/en/rendering/predefined_formatters/simple-toggle-formatter.html b/book/en/rendering/predefined_formatters/simple-toggle-formatter.html
index f654e765..4432a810 100644
--- a/book/en/rendering/predefined_formatters/simple-toggle-formatter.html
+++ b/book/en/rendering/predefined_formatters/simple-toggle-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/simple-toggle-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="simple-toggle-formatter">Simple Toggle Formatter</h1>
             <p>This formatter creates a toggle column with a default "eye" icon.</p>
             <h2 id="example">Example</h2>
diff --git a/book/en/rendering/predefined_formatters/text-formatter.html b/book/en/rendering/predefined_formatters/text-formatter.html
index 857e9a69..a55e73fd 100644
--- a/book/en/rendering/predefined_formatters/text-formatter.html
+++ b/book/en/rendering/predefined_formatters/text-formatter.html
@@ -10,7 +10,7 @@
   <script defer src="../../../../resources/scripts/book.js"></script>
   <script defer src="../../search.index.js"></script>
   <link rel="icon" href="../../resources/images/icon.png">
-<script src="../../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rendering/predefined-formatters/text-formatter" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="text-formatter">Text Formatter</h1>
             <p>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, <code>onElementRendered</code>) and passed through configuration object for multiple use cases. </p>
             <h2 id="specific-options">Specific options</h2>
diff --git a/book/en/rows/add-header-footer.html b/book/en/rows/add-header-footer.html
index ae400747..f92968c9 100644
--- a/book/en/rows/add-header-footer.html
+++ b/book/en/rows/add-header-footer.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rows/add-header-footer" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="adding-header-and-footer-sections">Adding Header and Footer Sections</h1>
             <p>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.</p>
             <h2 id="example">Example</h2>
diff --git a/book/en/rows/row-grouping.html b/book/en/rows/row-grouping.html
index 58281fa9..2465e2ca 100644
--- a/book/en/rows/row-grouping.html
+++ b/book/en/rows/row-grouping.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rows/row-grouping" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="row-grouping">Row Grouping</h1>
             <blockquote>
               <p><strong>Note:</strong> Built-in row grouping is deprecated in favor of the <a href="../extensions/README.html">Row Grouping Extension</a>. In terms of both functionalities and UIs, the extension provides more control and flexibility over the current APIs.</p>
diff --git a/book/en/rows/row-height.html b/book/en/rows/row-height.html
index b6964f13..628e907a 100644
--- a/book/en/rows/row-height.html
+++ b/book/en/rows/row-height.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rows/row-height" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="row-row-height">Row - Row Height</h1>
             <p>The height of content rows can be adjusted using the <code>rowHeight</code> property. Since Grid uses a row virtualization rendering technique, all of the rows must have the same height by default.</p>
 
diff --git a/book/en/rows/row-highlight-selection.html b/book/en/rows/row-highlight-selection.html
index 00d8d3c3..29ecf3cd 100644
--- a/book/en/rows/row-highlight-selection.html
+++ b/book/en/rows/row-highlight-selection.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rows/row-highlight-selection" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="row-highlight-and-selection">Row - Highlight and Selection</h1>
             <p>Row highlighting can be turned on/off by setting the options for <code>rowHighlighting</code> to <em>true</em> and <em>false</em> respectively. Row highlighting will be turn on by default.</p>
             <p>All related row selection functionalities can be added through the <a href="../extensions/tr-grid-row-selection.html">Row Selection Extension</a>.</p>
diff --git a/book/en/rows/row-reordering.html b/book/en/rows/row-reordering.html
index d030aefd..3813c565 100644
--- a/book/en/rows/row-reordering.html
+++ b/book/en/rows/row-reordering.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rows/row-reordering" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="row-reordering">Row - Reordering</h1>
             <p>To allow the user to drag and reorder selected rows, add Row Dragging Extension instance to <code>extensions</code> property. The visual content of the dragged row can be rendered using the renderer function provided in the property <code>dragBoxRenderer</code> of the <code>rowDragging</code> option object. For more details, see <a href="../extensions/tr-grid-row-dragging.html">Row Dragging Extension</a>.</p>
             <h2 id="example">Example</h2>
diff --git a/book/en/rows/row-show-hide.html b/book/en/rows/row-show-hide.html
index a9c9a75e..ff7ecaca 100644
--- a/book/en/rows/row-show-hide.html
+++ b/book/en/rows/row-show-hide.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/rows/row-show-hide" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="row-show-hide">Row - Show/Hide</h1>
             <p>Content rows can be hidden and shown based on their row ID, and an additional API unhides all currently hidden rows.</p>
             <blockquote>
diff --git a/book/en/scrollbars/horizontal-scrollbar.html b/book/en/scrollbars/horizontal-scrollbar.html
index 9f5f7040..8e798ba2 100644
--- a/book/en/scrollbars/horizontal-scrollbar.html
+++ b/book/en/scrollbars/horizontal-scrollbar.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/scrollbars/horizontal-scrollbar" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="horizontal-scrollbar">Horizontal Scrollbar</h1>
             <p>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. </p>
             <p>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.</p>
diff --git a/book/en/scrollbars/left-side-column-pinning.html b/book/en/scrollbars/left-side-column-pinning.html
index 28379014..ae2322a6 100644
--- a/book/en/scrollbars/left-side-column-pinning.html
+++ b/book/en/scrollbars/left-side-column-pinning.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/scrollbars/left-side-column-pinning" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="left-side-column-pinning-freezing">Left Side Column Pinning/Freezing</h1>
             <p>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.<br>To solve this, you can freeze or pin columns on the left side to act like a row indicator. To do this, set the <code>leftPinned</code> property to true on the column configuration object for the column you want to be frozen/pinned.</p>
             <p>Similarly, <code>rightPinned</code> property can be used to pin the columns on the right side. </p>
diff --git a/book/en/scrollbars/non-overlap-scrollbars.html b/book/en/scrollbars/non-overlap-scrollbars.html
index 0cdd55b8..a5a02536 100644
--- a/book/en/scrollbars/non-overlap-scrollbars.html
+++ b/book/en/scrollbars/non-overlap-scrollbars.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/scrollbars/non-overlap-scrollbars" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="non-overlap-scrollbars">Non-overlap Scrollbars</h1>
             <p>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 <code>contentRightPadding</code> and <code>contentBottomPadding</code> properties in the configuration, as shown in the example below.</p>
             <h2 id="content-padding-example">Content padding example</h2>
diff --git a/book/en/scrollbars/right-side-column-pinning.html b/book/en/scrollbars/right-side-column-pinning.html
index 6ec29b42..888dd8ee 100644
--- a/book/en/scrollbars/right-side-column-pinning.html
+++ b/book/en/scrollbars/right-side-column-pinning.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/scrollbars/right-side-column-pinning" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="right-side-column-pinning-freezing">Right Side Column Pinning/Freezing</h1>
             <p>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 <code>rightPinned</code> property on the column configuration object.</p>
             <h2 id="example">Example</h2>
diff --git a/book/en/scrollbars/scroll-speed.html b/book/en/scrollbars/scroll-speed.html
index 6eab1ca3..79f456b4 100644
--- a/book/en/scrollbars/scroll-speed.html
+++ b/book/en/scrollbars/scroll-speed.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/scrollbars/scroll-speed" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="scroll-speed">Scroll Speed</h1>
             <p>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 <code>linearWheelScrolling</code>.</p>
             <p>You can also force scrolling to move for the whole row by using the <code>stepScroll</code> property.</p>
diff --git a/book/en/scrollbars/scrollbar-visibility.html b/book/en/scrollbars/scrollbar-visibility.html
index 479a2eb7..9f229dfd 100644
--- a/book/en/scrollbars/scrollbar-visibility.html
+++ b/book/en/scrollbars/scrollbar-visibility.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/scrollbars/scrollbar-visibility" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="scrollbar-visibility">Scrollbar Visibility</h1>
             <p>Instead of fading in or out on hover (default behavior), Grid scrollbars can be set to always be visible whenever the content is scrollable.</p>
             <p>This behavior can be enabled upon grid initialization using the <code>autoHideScrollbar</code> option. The values can be <em>false</em> for always-on, and <em>true</em> for fade in/out (default).</p>
diff --git a/book/en/scrollbars/vertical-scrollbar.html b/book/en/scrollbars/vertical-scrollbar.html
index 131cbca4..25c25c64 100644
--- a/book/en/scrollbars/vertical-scrollbar.html
+++ b/book/en/scrollbars/vertical-scrollbar.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/scrollbars/vertical-scrollbar" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="vertical-scrollbar">Vertical Scrollbar</h1>
             <p>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.</p>
             <p>If you want to enable the vertical scrollbar, two conditions must be met:</p>
diff --git a/book/en/search.index.js b/book/en/search.index.js
index 5b643a45..08dd5d0c 100644
--- a/book/en/search.index.js
+++ b/book/en/search.index.js
@@ -1 +1 @@
-Pandora.book._.searchIndex = [{"title":"Grid Usage Guide","filename":"index.html","contents":[{"text":"Grid has been created to handle a large number of rows. It achieves high performance by utilizing a row virtualization technique, and all of the display logics and layouts are calculated programmatically. So, it lacks the flexibility of managing the layout when compared to the native table. Grid can be viewed to have 3 layers of controls. The outer layer is EFX Grid, which provides high level configuration through HTML properties and attributes. The middle layer is API instance, which provides most runtime interactions through JavaScript methods. The inner layer is Core Grid, which provides internal interaction with UI elements.","tagName":"p"},{"text":"native table","tagName":"a"},{"text":"Installation","tagName":"h2"},{"text":"EFX Grid element and extensions are published under single package.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid","tagName":"pre"},{"text":"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.","tagName":"p"},{"text":"npm install @refinitiv-ui/halo-theme","tagName":"pre"},{"text":"Setup guide","tagName":"h2"},{"text":"Use import syntax to import the Grid and theme into your app.","tagName":"p"},{"text":"// Import element and its Halo dark theme\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/dark\";\n\n// Import native styles for typography, css variables, etc.\nimport \"@refinitiv-ui/halo-theme/dark/imports/native-elements\";","tagName":"pre"},{"text":"Now, you can use Grid in your HTML page.","tagName":"p"},{"text":"<efx-grid></efx-grid>","tagName":"pre"},{"text":"By default, Grid without any configuration will be shown as empty element, since it doesn't have any column or row. You will need to set configuration object to define how Grid shows its content. The code snippet below shows how you would set a configuration object in JavaScript file:","tagName":"p"},{"text":"var grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.config = {\n    columns: [\n        {name: \"Company Name\", field: \"companyName\"},\n        {name: \"Last Price\", field: \"lastPrice\"}\n    ],\n    staticDataRows: [\n        {companyName: \"Company A\", lastPrice: 10},\n        {companyName: \"Company B\", lastPrice: 20}\n    ]\n};","tagName":"pre"},{"text":"License for the Grid","tagName":"h2"},{"text":"Please see the license here.","tagName":"p"},{"text":"here","tagName":"a"},{"text":"License for the Halo Theme","tagName":"h2"},{"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.","tagName":"p"},{"text":"here","tagName":"a"}]},{"title":"TypeScript","filename":"getting_started/typescript.html","contents":[{"text":"TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.","tagName":"p"},{"text":"TypeScript","tagName":"a"},{"text":"To apply Typescript for EFX Grid, first you are required to install @refinitiv-ui/efx-grid in your project.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid","tagName":"pre"},{"text":"Use import syntax to import the Grid and theme into your app.","tagName":"p"},{"text":"// Import element and its Halo dark theme\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/dark\";\n\n// Import native styles for typography, css variables, etc.\nimport \"@refinitiv-ui/halo-theme/dark/imports/native-elements\";","tagName":"pre"},{"text":"Then import types from efx-grid package to your file. These types are typically for properties on a configuration object or APIs defined by Grid components. You don't need to import every type, if you don't use them. All of the types are optional.","tagName":"p"},{"text":"import {\n    RealtimeGrid, // Provide types for api object\n    ColumnDefinition, // Provide types for column config and ColumnDefinition object\n    CoreGrid // Provide types for core object\n} from \"@refinitiv-ui/efx-grid\";","tagName":"pre"},{"text":"Optionally, you can also import Grid's extensions from efx-grid/extensions package to extend its functionalities. ","tagName":"p"},{"text":"extensions","tagName":"a"},{"text":"import { ColumnResizing } from \"@refinitiv-ui/efx-grid/extensions\";","tagName":"pre"},{"text":"To define how the grid renders its content, use ColumnDefinition.Options as shown below:","tagName":"p"},{"text":"let columns: ColumnDefinition.Options[] = [\n    { name: \"Integer\", field: \"intCol\" },\n    { name: \"String\", field: \"strCol\" },\n    { name: \"Float\", field: \"floatCol\" }\n];\nlet records: Array<Object> = [\n    { intCol: 1, strCol: \"Sample data\", floatCol: 1.1 },\n    { intCol: 2, strCol: \"Sample data\", floatCol: 2.2 },\n    { intCol: 3, strCol: \"Sample data\", floatCol: 3.3 }\n];","tagName":"pre"},{"text":"To define a configuration object, use RealtimeGrid.GridOptions as shown below:","tagName":"p"},{"text":"let configObj: RealtimeGrid.GridOptions = {\n    columns: columns,\n    staticDataRows: records,\n    extensions: [\n        new ColumnResizing()\n    ]\n};","tagName":"pre"},{"text":"Finally assign configuration to efx-grid element. Note that efx-grid element already has type defined. There is no need to cast it to some other types.","tagName":"p"},{"text":"let grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.addEventListener(\"configured\", function (e: any) {\n    let api: RealtimeGrid = e.detail.api;\n    let core: CoreGrid = api.getCoreGrid();\n\n    console.log(\"Grid has been configured.\");\n});\n\ngrid.config = configObj;","tagName":"pre"},{"text":"Grid element is not immediately initialized when it is put on to the document. Only after it has been configured, then you can use its api to perform any runtime change or custom task.","tagName":"p"},{"text":"For a complete list of APIs, please see the API document.","tagName":"p"},{"text":"API document","tagName":"a"}]},{"title":"Using with React","filename":"getting_started/react_guide.html","contents":[{"text":"For using EFX Grid with React, first you are required to install @refinitiv-ui/efx-grid and @lit-labs/react in your project.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid\nnpm install @lit-labs/react","tagName":"pre"},{"text":"Use import syntax to import the Grid and theme into your app.","tagName":"p"},{"text":"// Import element and its Halo dark theme\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/dark\";\n\n// Import native styles for typography, css variables, etc.\nimport \"@refinitiv-ui/halo-theme/dark/imports/native-elements\";","tagName":"pre"},{"text":"Import createComponent from @lit-labs/react, which will be used to transform custom element into React component.","tagName":"p"},{"text":"import { createComponent } from '@lit-labs/react';","tagName":"pre"},{"text":"Then import types from efx-grid package to your file. Type Grid is mandatory for making grid as React component and all other types are typically for properties on a configuration object or APIs defined by Grid components. You don't need to import every type, if you don't use them.","tagName":"p"},{"text":"import {\n    Grid, // Provide type for making EFX Grid as React component\n    RealtimeGrid, // Provide types for api object\n    ColumnDefinition, // Provide types for column config and ColumnDefinition object\n    CoreGrid // Provide types for core object\n} from \"@refinitiv-ui/efx-grid\";","tagName":"pre"},{"text":"Optionally, you can also import Grid's extensions from efx-grid/extensions package to extend its functionalities. ","tagName":"p"},{"text":"extensions","tagName":"a"},{"text":"import { ColumnResizing } from \"@refinitiv-ui/efx-grid/extensions\";","tagName":"pre"},{"text":"Define grid as React component using createComponent, then EfxGrid will be used instead of efx-grid in React project","tagName":"p"},{"text":"const EfxGrid = createComponent({\n  tagName: 'efx-grid',\n  elementClass: Grid,\n  react: React,\n  events: {\n    onConfigured: 'configured' //Grid custom event handler\n  }\n});","tagName":"pre"},{"text":"To define how the grid renders its content. First, create a function App which will be the main entry point. Then use ColumnDefinition.Options as shown below:","tagName":"p"},{"text":"let columns: ColumnDefinition.Options[] = [\n    { name: \"Integer\", field: \"intCol\" },\n    { name: \"String\", field: \"strCol\" },\n    { name: \"Float\", field: \"floatCol\" }\n];\nlet records: Array<Object> = [\n    { intCol: 1, strCol: \"Sample data\", floatCol: 1.1 },\n    { intCol: 2, strCol: \"Sample data\", floatCol: 2.2 },\n    { intCol: 3, strCol: \"Sample data\", floatCol: 3.3 }\n];","tagName":"pre"},{"text":"To define a configuration object, use type RealtimeGrid.GridOptions as shown below.Then, finally assign configuration to EfxGrid component by passing through config attribute of grid component.","tagName":"p"},{"text":"function gridConfigured(e: any) {\n    let api: RealtimeGrid = e.detail.api;\n    let core: CoreGrid = api.getCoreGrid();\n\n    console.log(\"Grid has been configured.\");\n}\n\nfunction App() {\n    //Extensions are recommended to use with useState to prevent multiple re-initializatioin\n    const [colResizingExt, setColResizingExt] = React.useState<ColumnResizing>(new ColumnResizing())\n    const [configObj, setConfigObj] = React.useState<RealtimeGrid.GridOptions>(\n        {\n            columns: columns,\n            staticDataRows: records,\n            extensions: [\n                colResizingExt\n            ]\n        }\n    )\n    return (\n        <EfxGrid config={configObj} onConfigured={gridConfigured}></EfxGrid>\n    )\n} ","tagName":"pre"},{"text":"Grid element is not immediately initialized when it is put on to the document. Only after it has been configured, then you can use its api to perform any runtime change or custom task.","tagName":"p"},{"text":"For a complete list of APIs, please see the API document.","tagName":"p"},{"text":"API document","tagName":"a"}]},{"title":"Using with Angular","filename":"getting_started/angular_guide.html","contents":[{"text":"For using EFX Grid with Angular, first you are required to install @refinitiv-ui/efx-grid in your project.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid","tagName":"pre"},{"text":"In component logic file, for example src/app/app.component.ts, use import syntax to import the Grid and theme into your app.","tagName":"p"},{"text":"// Import element and its Halo dark theme\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/dark\";\n\n// Import native styles for typography, css variables, etc.\nimport \"@refinitiv-ui/halo-theme/dark/imports/native-elements\";","tagName":"pre"},{"text":"Then import types from efx-grid package to your file. These types are typically for properties on a configuration object or APIs defined by Grid components. You don't need to import every type, if you don't use them. All of the types are optional.","tagName":"p"},{"text":"import {\n    RealtimeGrid, // Provide types for api object\n    ColumnDefinition, // Provide types for column config and ColumnDefinition object\n    CoreGrid // Provide types for core object\n} from \"@refinitiv-ui/efx-grid\";","tagName":"pre"},{"text":"Optionally, you can also import Grid's extensions from efx-grid/extensions package to extend its functionalities. ","tagName":"p"},{"text":"extensions","tagName":"a"},{"text":"import { ColumnResizing } from \"@refinitiv-ui/efx-grid/extensions\";","tagName":"pre"},{"text":"Prepare grid data and configuration object by follow following steps.1) Define how the grid renders its content in each column by using type ColumnDefinition.Options2) Define rows of data for displaying in the grid3) Define a configuration object by using type RealtimeGrid.GridOptions4) Define a function for assigning run time tasks to grid after grid is initialized. (Optional)","tagName":"p"},{"text":"@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.less'],\n})\nclass AppComponent {\n    // Step 1)\n    columns: ColumnDefinition.Options[] = [\n        { name: \"Integer\", field: \"intCol\" },\n        { name: \"String\", field: \"strCol\" },\n        { name: \"Float\", field: \"floatCol\" }\n    ];\n    // Step 2)\n    records: Array<Object> = [\n        { intCol: 1, strCol: \"Sample data\", floatCol: 1.1 },\n        { intCol: 2, strCol: \"Sample data\", floatCol: 2.2 },\n        { intCol: 3, strCol: \"Sample data\", floatCol: 3.3 }\n    ];\n    // Step 3)\n    configObj: RealtimeGrid.GridOptions = {\n        columns: this.columns,\n        staticDataRows: this.records,\n        extensions: [\n            new ColumnResizing()\n        ]\n    };\n    // Step 4)\n    gridConfigured(e: any) {\n        let api: RealtimeGrid = e.detail.api;\n        let core: CoreGrid = api.getCoreGrid();\n\n        console.log(\"Grid has been configured.\");\n    }\n}","tagName":"pre"},{"text":"In HTML template file, src/app/app.component.html, finally assign configuration to efx-grid element. Note that efx-grid element already has type defined. There is no need to cast it to some other types.","tagName":"p"},{"text":"src/app/app.component.html","tagName":"p"},{"text":"    <efx-grid [config]=\"configObj\" (configured)=\"gridConfigured($event)\" #grid ></efx-grid>","tagName":"pre"},{"text":"Grid element is not immediately initialized when it is put on to the document. Only after it has been configured, then you can use its api to perform any runtime change or custom task.","tagName":"p"},{"text":"For a complete list of APIs, please see the API document.","tagName":"p"},{"text":"API document","tagName":"a"}]},{"title":"Overview","filename":"getting_started/overview.html","contents":[{"text":"EFX Grid","tagName":"h2"},{"text":"EFX Grid is a custom element, providing simple ways to display and manipulate data in table layout. All HTML native properties and events are available in EFX Grid. It can be easily created by just writing the tag and setting the configuration as shown below:","tagName":"p"},{"text":"custom element","tagName":"a"},{"text":"<body>\n    <efx-grid></efx-grid>\n\n    <script>\n        var grid = document.getElementsByTagName(\"efx-grid\")[0];\n        grid.config = {\n            /* See the API Doc for all available options */\n        };\n    </script>\n</body>","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":"<efx-grid id=\"grid\">\n\n</efx-grid>","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":"<efx-grid></efx-grid>","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":"<efx-grid id=\"grid\"></efx-grid>","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":"<efx-grid></efx-grid>","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":"<efx-grid></efx-grid>","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":"<button id=\"insert_btn\">Insert Top Row</button>\n<button id=\"update_btn\">Update Top Row</button>\n<button id=\"print_btn\">Get Top Row</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>\n<hr>\n<div id=\"msg_div\"></div>","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":"<textarea id=\"msg_ta\"></textarea>\n<hr>\n<atlas-blotter></atlas-blotter>","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":"<div>\n  <button id=\"get_btn\">Get cell content</button>\n  <label for=\"col_in\">Column index:</label>\n  <input id=\"col_in\" value=\"2\" type=\"number\">\n  <i></i>\n  <label for=\"row_in\">Row index:</label>\n  <input id=\"row_in\" value=\"2\" type=\"number\">\n</div>\n<hr>\n<textarea id=\"msg_ta\"></textarea>\n<hr>\n<atlas-blotter></atlas-blotter>","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":"<fieldset>\n  <legend>Operation</legend>\n  <span>\n        <coral-button id=\"select_column_btn\">Select Columns</coral-button>\n        Data Size:\n        <coral-select id=\"dataSize\">\n            <coral-item value=\"10\">10 Rows</coral-item>\n            <coral-item value=\"100\" selected>100 Rows</coral-item>\n            <coral-item value=\"1000\">1,000 Rows</coral-item>\n            <coral-item value=\"10000\">10,000 Rows</coral-item>\n            <coral-item value=\"100000\">100,000 Rows</coral-item>\n        </coral-select>\n    </span>\n  <hr>\n  <span>\n        <label for=\"search_input\">Filter: </label>\n        <input id=\"search_input\" type=\"search\" placeholder=\"Filter any column\">\n    </span>\n  <hr>\n  <div id=\"grouping\">\n    <coral-select id=\"column_grouping_selector\" placeholder=\"Group By\"></coral-select>\n  </div>\n</fieldset>\n<hr>\n\n<atlas-blotter id=\"preview\"></atlas-blotter>\n<emerald-popup-menu id=\"popup_menu\"></emerald-popup-menu>","tagName":"pre"},{"text":"var 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();\nvar columnStackExt = new tr.ColumnStackExtension();\nvar rangeBarExt = new tr.RangeBarExtension();\nvar generator = tr.DataGenerator;\nvar dateTimePicker = tr.EmeraldDateTimePickerFormatter ? tr.EmeraldDateTimePickerFormatter : EFDateTimePickerFormatter; // WORKAROUND: for datetime picker in v6\n\nvar grid = window.grid = document.getElementsByTagName(\"atlas-blotter\")[0];\nvar dataSizeSelect = document.getElementById(\"dataSize\");\nvar selectColumnBtn = document.getElementById(\"select_column_btn\");\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];\nconst userListEntries = userList.map(function(item) {\n  return {\n    label: item,\n    value: item\n  };\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 languageList = [\"French\", \"English\", \"German\", \"Italian\", \"Portuguese\", \"Chinese\"];\n\nconst languageEntries = languageList.map(function(item) {\n  return {\n    label: item,\n    value: item\n  };\n});\n\ngenerator.addFieldInfo(\"userList\", {\n  type: \"set\",\n  members: userList\n})\n\ngenerator.addFieldInfo(\"languageList\", {\n  type: \"set\",\n  members: languageList\n});\n\ngenerator.addFieldInfo(\"countryList\", {\n  type: \"set\",\n  members: [\"FRA\", \"GBR\", \"ISL\", \"ITA\", \"PRT\", \"SWE\", \"GRC\", \"DEU\", \"NOR\", \"GBR\", \"IND\", \"FRA\", \"DEU\", \"CHN\"]\n})\n\n\ngenerator.addFieldInfo(\"CF_CLOSE\", {\n  type: \"number\",\n  min: 0,\n  max: 1000,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"TR.TSVWAP\", {\n  type: \"number\",\n  min: 0,\n  max: 1000,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"Jan\", {\n  type: \"number\",\n  min: -100,\n  max: 100,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"Feb\", {\n  type: \"number\",\n  min: -100,\n  max: 100,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"Mar\", {\n  type: \"number\",\n  min: -100,\n  max: 100,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"changed\", {\n  type: \"number\",\n  min: -100,\n  max: 100,\n  prec: 2\n});\n\nvar dateConditions = [{\n    expression: [\"GT\", 60],\n    backgroundColor: \"#b9f6ca66\"\n  },\n  {\n    expression: [\"LT\", 20],\n    backgroundColor: \"#ff80ab66\"\n  },\n];\n\nvar dataTypeFields = [\n  \"id\",\n  \"userList\",\n  \"languageList\",\n  \"countryList\",\n  \"boolean\", // Bought\n  \"TR.Volume\", // Bank Balance\n  \"changed\", // Rating\n  \"CFLOW\",\n  \"CF_LAST\",\n  \"CFHIGH\",\n  \"CF_TICK\",\n  \"CF_CLOSE\",\n  \"TR.TSVWAP\",\n  \"ISODate\",\n  \"Jan\",\n  \"Feb\",\n  \"Mar\"\n];\nvar dataRows = generator.generateRecords(dataTypeFields, { seed: 0, numRows: 100 });\n\nvar allAvailableColumns = [{\n    checkboxColumn: true,\n    leftPinned: true\n  },\n  {\n    field: \"userList\",\n    name: \"Name\",\n    id: \"userList\",\n    filterInput: {\n      type: \"multiselect\",\n      entries: userListEntries\n    },\n    minWidth: 150,\n    width: 165,\n    editableContent: true\n  },\n  {\n    field: \"TR.Volume\",\n    name: \"Bank Balance\",\n    id: \"TR.Volume\",\n    width: 90,\n    noFitting: true,\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    field: \"CF_CLOSE\",\n    id: \"CF_CLOSE\",\n    sortable: false,\n    name: \"Price Graph\",\n    filterInput: false,\n    minWidth: 120,\n    rangeBar: {\n      low: \"CFLOW\",\n      high: \"CFHIGH\",\n      last: \"CF_LAST\",\n      close: \"CF_CLOSE\",\n      vwap: \"TR.TSVWAP\",\n      tick: \"CF_TICK\",\n    },\n  },\n  {\n    field: \"CF_LAST\",\n    id: \"CF_LAST\",\n    sortable: false,\n    name: \"Year High Low Range\",\n    minWidth: 150,\n    filterInput: false,\n    rangeBar: {\n      low: \"CFLOW\",\n      high: \"CFHIGH\",\n      last: \"CF_LAST\"\n    }\n  },\n  {\n    field: \"changed\",\n    id: \"changed\",\n    name: \"Pct. Chng\",\n    fieldDataType: \"number\",\n    filterInput: false,\n    percentBar: {\n      alignment: \"c\"\n    },\n    editableContent: true,\n    noFitting: true,\n    minWidth: 150\n  },\n  {\n    field: \"id\",\n    name: \"Order\",\n    noFitting: true,\n    id: \"id\",\n    filterInput: {\n      type: \"number\"\n    },\n    width: 40,\n    filterInput: false,\n  },\n  {\n    field: \"CF_TICK\",\n    name: \"Tick\",\n    id: \"CF_TICK\",\n    noFitting: true,\n    width: 40,\n    filterInput: false,\n    binding: onTickBinding\n  },\n  {\n    field: \"boolean\",\n    name: \"Bought\",\n    id: \"boolean\",\n    filterInput: false,\n    noFitting: true,\n    width: 40,\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    field: \"ISODate\",\n    id: \"ISODate\",\n    name: \"Date\",\n    fieldDataType: \"datetime\",\n    filterInput: {\n      type: \"date\"\n    },\n    noFitting: true,\n    binding: dateTimePicker.create({\n      styles: {\n        width: 180\n      }\n    }),\n    width: 180,\n    alignment: \"c\"\n  },\n  {\n    field: \"languageList\",\n    id: \"languageList\",\n    name: \"Language\",\n    editableContent: true,\n    inCellEditing: {\n      type: \"select\",\n      entries: languageEntries\n    },\n    filterInput: {\n      type: \"select\",\n      entries: languageEntries\n    },\n    minWidth: 120\n  },\n  {\n    field: \"countryList\",\n    id: \"countryList\",\n    name: \"Country\",\n    filterInput: false,\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    minWidth: 80\n  },\n  {\n    field: \"Jan\",\n    id: \"Jan\",\n    name: \"Jan\",\n    filterInput: {\n      type: \"number\"\n    },\n    conditions: dateConditions,\n    alignment: \"c\",\n    formatType: \"percent\",\n    minWidth: 80, // Equal to fit content\n    stackId: \"stack1\"\n  },\n  {\n    field: \"Feb\",\n    name: \"Feb\",\n    id: \"Feb\",\n    filterInput: {\n      type: \"number\"\n    },\n    conditions: dateConditions,\n    alignment: \"c\",\n    formatType: \"percent\",\n    minWidth: 80,\n    stackId: \"stack1\"\n  }, {\n    field: \"Mar\",\n    name: \"Mar\",\n    id: \"Mar\",\n    filterInput: {\n      type: \"number\"\n    },\n    conditions: dateConditions,\n    alignment: \"c\",\n    formatType: \"percent\",\n    minWidth: 80,\n    stackId: \"stack1\"\n  }\n\n];\n\nfunction onTickBinding(e) {\n  var cell = e.cell;\n  var data = e.data;\n  var content = cell.getContent();\n  if (!content) {\n    content = document.createElement(\"coral-icon\");\n  }\n  content.icon = data === 1 ? \"arrow-down-fill\" : \"arrow-up-fill\";\n  content.style.color = data === 1 ? \"rgb(245, 71, 91)\" : \"rgb(57, 196, 110)\";\n  cell.setContent(content);\n};\n\n// generate dynamic data and assign to \"atlas-blotter\"\ndataSizeSelect.addEventListener(\"value-changed\", function(e) {\n  var dataRows = generator.generateRecords(dataTypeFields, { seed: 0, numRows: e.detail.value });\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 selectionDialogConfirmed = function(e) {\n  var columnCommited = e.detail.data;\n  columnCommited = columnCommited.map(function(column) {\n    return {\n      ...column, // Clone object to retain format\n      field: nameToField[column.name]\n    }\n  })\n  grid.api.restoreColumns(columnCommited);\n};\n\nvar nameToField = {\n  \"Name\": \"userList\",\n  \"Order\": \"id\",\n  \"Bought\": \"boolean\",\n  \"Tick\": \"CF_TICK\",\n  \"Bank Balance\": \"TR.Volume\",\n  \"Price Graph\": \"CF_CLOSE\",\n  \"Year High Low Range\": \"CF_LAST\",\n  \"Pct. Chng\": \"changed\",\n  \"Date\": \"ISODate\",\n  \"Country\": \"countryList\",\n  \"Language\": \"languageList\",\n  \"Jan\": \"Jan\",\n  \"Feb\": \"Feb\",\n  \"Mar\": \"Mar\"\n};\n\nselectColumnBtn.addEventListener(\"click\", function() {\n  if (!dialog) {\n    dialog = document.createElement(\"column-selection-dialog\");\n    dialog.addEventListener(\"confirm\", selectionDialogConfirmed);\n  }\n\n  var columns = grid.api.getConfigObject().columns;\n  var visibleColumns = 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  var columnObj = allColumns.map(function(column) {\n    return {\n      ...column, // Clone object to retain format\n      field: column.name,\n      id: nameToField[column.name]\n    }\n  });\n  visibleColumns = visibleColumns.map(function(column) {\n    return {\n      ...column, // Clone object to retain format\n      field: column.name,\n      id: column.id\n    }\n  });\n  dialog.init({\n    data: columnObj.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: \"Account Profile\",\n      alignment: \"center\",\n      children: [\"userList\", \"TR.Volume\"]\n    },\n    {\n      id: \"g2\",\n      name: \"Transaction Details\",\n      alignment: \"center\",\n      children: [\"id\", \"CF_TICK\", \"boolean\"]\n    },\n    {\n      id: \"g3\",\n      name: \"Financial Overview\",\n      alignment: \"center\",\n      children: [\"CF_CLOSE\", \"CF_LAST\", \"changed\"]\n    },\n    {\n      id: \"g4\",\n      name: \"Localization Information\",\n      children: [\"ISODate\", \"languageList\", \"countryList\"]\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    columnStackExt,\n    rangeBarExt,\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  columnStack: {\n    menuElement: document.getElementById(\"popup_menu\")\n  },\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 = [{\n      field: \"userList\",\n      name: \"Name\"\n    }, {\n      field: \"languageList\",\n      name: \"Language\",\n    }, {\n      field: \"countryList\",\n      name: \"Country\",\n    }];\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":"body {\n  padding: 24px;\n}\n\natlas-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}\n\nhr {\n  margin: 8px;\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":"Realtime Data","filename":"showcases/realtime-data.html","contents":[{"text":"<fieldset>\n  <legend>Operations</legend>\n  <input value=\"DOWN.N\" id=\"ric_txt\">\n  <button id=\"insert_ric_btn\">Insert RIC</button>\n  <button id=\"bkr_btn\">BKR.OQ</button>\n  <button id=\"usd_btn\">USD=</button>\n  <button id=\"jyp_btn\">JYP=</button>\n  <button id=\"ndx_btn\">.NDX</button>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var heatMapExt = new tr.HeatMapExtension();\nvar textFormattingExt = new tr.TextFormattingExtension();\n\nvar Toolkit = tr.MockRTK ? tr.MockRTK : MockRTK; // WORKAROUND for v6\nToolkit.init({ ID: 'rtk-atlas-blotter', minInterval: 100, maxInterval: 800 }, ['Quotes', 'Data']).then(onInit);\n\nfunction onInit(rtk) {\n  var configObj = {\n    rowSelection: true,\n    fieldCaching: true,\n    columns: [{\n        field: \"X_RIC_NAME\",\n        name: \"RIC\",\n        tickColor: \"CF_NETCHNG\",\n        minWidth: 100,\n      },\n      {\n        field: \"CF_TICK\",\n        name: \"Tick\",\n        binding: onTickBinding,\n      },\n      {\n        field: \"CF_LAST\",\n        tickColor: \"CF_TICK\",\n        blinking: true,\n      },\n      {\n        field: \"CF_NETCHNG\",\n        blinking: true,\n        tickColor: \"CF_TICK\"\n      },\n      {\n        field: \"PCTCHNG\",\n        heatmap: true,\n        formatType: \"percent\",\n      }\n    ],\n    rows: [\n      { ric: \"BA.N\" },\n      { ric: \"AAPL.O\" },\n      { ric: \"MSFT.O\" },\n      { ric: \"TSLA.O\" },\n      { ric: \"PTT.BK\" },\n      { ric: \"AOT.BK\" },\n      { ric: \".DJI\", asChain: true, collapsed: false },\n\n    ],\n    extensions: [heatMapExt, textFormattingExt],\n    RTK: rtk\n  };\n\n  grid.config = configObj;\n}\n\nfunction onTickBinding(e) {\n  var cell = e.cell;\n  var data = e.data;\n  var content = cell.getContent();\n  if (!content) {\n    content = document.createElement(\"coral-icon\");\n  }\n  if (data != null) {\n    content.icon = data === 2 ? \"arrow-down-fill\" : \"arrow-up-fill\";\n    content.style.color = data === 2 ? \"rgb(245, 71, 91)\" : \"rgb(57, 196, 110)\";\n  }\n  cell.setContent(content);\n};\n\nbkr_btn.addEventListener(\"click\", addRic.bind(null, bkr_btn.textContent));\nusd_btn.addEventListener(\"click\", addRic.bind(null, usd_btn.textContent));\njyp_btn.addEventListener(\"click\", addRic.bind(null, jyp_btn.textContent));\nndx_btn.addEventListener(\"click\", function(e) {\n  grid.api.insertRow(\"0#.NDX\", 0);\n\n});\ninsert_ric_btn.addEventListener(\"click\", addRic.bind(null, ric_txt.value));\n\nfunction addRic(ric) {\n  grid.api.insertRow(ric, 0);\n}","tagName":"pre"},{"text":"body {\n  padding: 24px;\n}\n\natlas-blotter {\n  height: 300px;\n}\n\nhr {\n  margin: 8px;\n}","tagName":"pre"},{"text":"As demonstrated in the example above, we utilize mock data to simulate real-time data streaming, with each RIC receiving periodic data updates. We use the heat map extension to visually represent this data to users.","tagName":"p"}]},{"title":"Grid Builder","filename":"showcases/grid-builder.html","contents":[{"text":"Grid Builder","tagName":"h2"},{"text":"The grid configuration builder provide a quick start way of using grid in your application. This will help new users to getting started with grid easier. You can try with different grid customization and grid extensions with a realtime result, then this configuration can be copy and paste into any application to get the same result as seen from this section.","tagName":"p"},{"text":"<coral-sidebar-layout sidebar-width=\"0px\" class=\"main-layout\">\n  <coral-panel slot=\"main-content\" class=\"main-content\" spacing>\n    <coral-tab-bar id=\"tabs\"></coral-tab-bar>\n    <coral-panel spacing>\n      <div id=\"section-detail\"></div>\n    </coral-panel>\n    <atlas-blotter id=\"grid\"></atlas-blotter>\n    <emerald-popup-menu id=\"menu\"></emerald-popup-menu>\n    <textarea id=\"configArea\"></textarea>\n  </coral-panel>\n</coral-sidebar-layout>","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"html,\nbody {\n  margin: 0;\n}\n\nbody {\n  padding: 20px;\n  box-sizing: border-box;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\na {\n  font: 1.2em Arial;\n  display: inline-block;\n  padding: 10px;\n  margin: 4px;\n  box-sizing: border-box;\n  border-radius: 8px;\n  border: 1px solid #eeeeee;\n  width: 32%;\n  text-align: center;\n  vertical-align: middle;\n  box-shadow: 0 5px 5px lightgrey;\n}\n\n.main-layout {\n  height: 95vh;\n  display: flex;\n}\n\n.content-title {\n  padding-top: 5px;\n  padding-bottom: 5px;\n  font-size: 14px;\n}\n\n.main-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n#grid {\n  height: 350px;\n}\n\ndiv {\n  min-height: 24px;\n}\n\nhr {\n  margin-top: 15px;\n  margin-bottom: 15px;\n  width: 100%;\n}\n\n#configArea {\n  flex: 1;\n  width: 100%;\n  margin-top: 10px;\n  font-family: monospace;\n}\n\n#section-detail {\n  height: 160px;\n  overflow-y: scroll;\n  padding-bottom: 10px;\n  border: grey solid 1px;\n}\n\n.two-columns {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n}\n\n.two-columns>*:not(hr) {\n  padding: 2px;\n  display: flex;\n  align-items: center;\n}\n\nlabel {\n  padding-right: 10px;\n}","tagName":"pre"},{"text":"Grid Loader","tagName":"h2"},{"text":"In this section, you can try to paste your configuration object here to see an live result. This allow user to make advance customization to grid configuration object before using with their real application.","tagName":"p"},{"text":"<coral-sidebar-layout sidebar-width=\"0px\" style=\"height: 95vh;\">\n  <coral-header slot=\"main-header\" level=\"1\">\n    <coral-button id=\"run\" icon=\"play\">RUN</coral-button>\n  </coral-header>\n  <coral-panel slot=\"main-content\" class=\"main-content\" spacing>\n    <textarea id=\"configArea\"></textarea>\n    <div id=\"container\">\n      <atlas-blotter id=\"grid\"></atlas-blotter>\n    </div>\n    <emerald-popup-menu id=\"menu\"></emerald-popup-menu>\n  </coral-panel>\n</coral-sidebar-layout>","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"html,\nbody {\n  margin: 0;\n}\n\nbody {\n  padding: 20px;\n  box-sizing: border-box;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\na {\n  font: 1.2em Arial;\n  display: inline-block;\n  padding: 10px;\n  margin: 4px;\n  box-sizing: border-box;\n  border-radius: 8px;\n  border: 1px solid #eeeeee;\n  width: 32%;\n  text-align: center;\n  vertical-align: middle;\n  box-shadow: 0 5px 5px lightgrey;\n}\n\n.content-title {\n  padding-top: 5px;\n  padding-bottom: 5px;\n  font-size: 14px;\n}\n\n.main-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n#container {\n  height: 400px;\n}\n\n#grid {\n  height: 100%;\n}\n\ndiv {\n  min-height: 24px;\n}\n\nhr {\n  margin-top: 15px;\n  margin-bottom: 15px;\n}\n\n#configArea {\n  width: 100%;\n  padding-top: 15px;\n  height: 300px;\n  margin-bottom: 8px;\n  font-family: monospace;\n}\n\n#sidebar-content {\n  display: flex;\n  flex-direction: column;\n}","tagName":"pre"}]},{"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.<string>,\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.<string>,\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.<string, *>                                                            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                                                                                        <optional>                                                                                    1 indicates ascending order, and -1 indicates descending order        ","tagName":"tr"},{"text":"                            contextObject                                                    *                                                                                        <optional>                                                                                    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.<string>,\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.<string>,\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.<string, *>                                                            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.<string>,\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.<string, *>                                                            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                                                                                        <optional>                                                                                    Column width        ","tagName":"tr"},{"text":"                            minWidth                                                    number                                                                                        <optional>                                                                                    Minimum column width        ","tagName":"tr"},{"text":"                            minSize                                                    number                                                                                        <optional>                                                                                    Alias to `minWidth`        ","tagName":"tr"},{"text":"                            size                                                    number                                                                                        <optional>                                                                                    Alias to `width`        ","tagName":"tr"},{"text":"                            visible                                                    boolean                                                                                        <optional>                                                                                    Column visibility        ","tagName":"tr"},{"text":"                            scalable                                                    boolean                                                                                        <optional>                                                                                    Column scalability        ","tagName":"tr"},{"text":"                            styles                                                    Object.<string, string>                                                                                        <optional>                                                                                    Key/value pair object specifying CSS styles        ","tagName":"tr"},{"text":"                            classes                                                    Object.<string, string>                                                                                        <optional>                                                                                    Key/value pair object specifying CSS classes        ","tagName":"tr"},{"text":"                            dataColumnName                                                    string                                                                                        <optional>                                                                                    Data column for sorting        ","tagName":"tr"},{"text":"                            renderingHandler                                                    function                                                                                        <optional>                                                                                    Deprecated        ","tagName":"tr"},{"text":"                            dataBindingHandler                                                    function                                                                                        <optional>                                                                                    Column binding function        ","tagName":"tr"},{"text":"                            columnData                                                    string                                                                                        <optional>                                                                                    For attaching context (user data)        ","tagName":"tr"},{"text":"                            layout                                                    TrackLayout                                                                                        <optional>                                                                                    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.<string, *>                                                                    ","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                                                                                        <optional>                                                                                                                            false                                                        If enable, the column can be sorted by user click        ","tagName":"tr"},{"text":"                            sortBy                                                    string                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            null                                                        Custom compare function for sorting        ","tagName":"tr"},{"text":"                            sortingLogic                                                    DataTable.SortLogic                                                                                        <optional>                                                                                                                                                Alias to `sortLogic`        ","tagName":"tr"},{"text":"                            sorter                                                    DataTable.SortLogic                                                                                        <optional>                                                                                                                                                Alias to `sortLogic`        ","tagName":"tr"},{"text":"                            defaultSort                                                    string                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Set to \"d\" for descending order and \"a\" for ascending order        ","tagName":"tr"},{"text":"SortableTitlePlugin~SortOrder","tagName":"a"},{"text":"                            order                                                    SortableTitlePlugin~SortOrder                                                                                        <optional>                                                                                                                                                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.<SortableTitlePlugin.InitialSort>                                                                                        <optional>                                                                                                                            null                                                        Set this config to initiate sorting after grid is created.        ","tagName":"tr"},{"text":"SortableTitlePlugin~InitialSort","tagName":"a"},{"text":"                            multicolumn                                                    boolean | number                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        Alias to `multicolumn`        ","tagName":"tr"},{"text":"                            threeStatesSorting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, sorting will cycle through ascending, descending and original order states.        ","tagName":"tr"},{"text":"                            sortLogic                                                    Object.<string, DataTable.SortLogic>                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If enabled, double click on column title to sort        ","tagName":"tr"},{"text":"                            sortableColumns                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all columns will be sortable by field automatically        ","tagName":"tr"},{"text":"                            sortableIndicator                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                                                Set to \"manual\" to disable data sorting. Deprecated in favor of `indicatorOnly`        ","tagName":"tr"},{"text":"                            disabled                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                                                A shortcut to define the columnSorted event handler        ","tagName":"tr"},{"text":"                            preClicked                                                    function                                                                                        <optional>                                                                                                                                                A shortcut to define the preClicked event handler        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                                                A shortcut to define the clicked event handler        ","tagName":"tr"},{"text":"                            preDataSorting                                                    function                                                                                        <optional>                                                                                                                                                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.<number>                                                            An array of colIndex        ","tagName":"tr"},{"text":"                            sortOrders                                                    Array.<string>                                                            An array of sortOrder        ","tagName":"tr"},{"text":"                            sortedFields                                                    Array.<string>                                                            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                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                                                            \"\"                                                        Field for real-time, ADC, formula sources        ","tagName":"tr"},{"text":"                            dataType                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        data type eg. string, datetime, number        ","tagName":"tr"},{"text":"                            formulaReference                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                                ","tagName":"tr"},{"text":"                            require                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        Extra fields required by this column will be requested for real-time data.        ","tagName":"tr"},{"text":"                            name                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Label of the column        ","tagName":"tr"},{"text":"                            notRealTimeField                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Show tooltip in header section        ","tagName":"tr"},{"text":"                            headerBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Method for custom header rendering.        ","tagName":"tr"},{"text":"                            headerRenderer                                                    function                                                                                        <optional>                                                                                                                            null                                                        Alias to `headerBinding`        ","tagName":"tr"},{"text":"                            binding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Method for custom rendering. It will be executed on each data update and scrolling        ","tagName":"tr"},{"text":"                            renderer                                                    function                                                                                        <optional>                                                                                                                            null                                                        Alias to `binding`        ","tagName":"tr"},{"text":"                            sortLogic                                                    ColumnDefinition~SortLogic                                                                                        <optional>                                                                                                                            null                                                                ","tagName":"tr"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"                            sortingLogic                                                    ColumnDefinition~SortLogic                                                                                        <optional>                                                                                                                            null                                                        Alias to `sortLogic`        ","tagName":"tr"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"                            sorter                                                    ColumnDefinition~SortLogic                                                                                        <optional>                                                                                                                            null                                                        Alias to `sortLogic`        ","tagName":"tr"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"                            rowSorting                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            true                                                        If disabled, the column cannot be sorted by user click        ","tagName":"tr"},{"text":"                            sort                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Deprecated Alias to `sortOrder`        ","tagName":"tr"},{"text":"                            sortOrder                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                                                            null                                                        Key/value pair Object specifying CSS styles        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                        <optional>                                                                                                                            NaN                                                        If specified, column will have a fixed width in pixel        ","tagName":"tr"},{"text":"                            minWidth                                                    number                                                                                        <optional>                                                                                                                            NaN                                                        If specified, column will have a minimum width in pixel        ","tagName":"tr"},{"text":"                            scalable                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            \"\"                                                                ","tagName":"tr"},{"text":"                            class                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Alias to `className`        ","tagName":"tr"},{"text":"                            textAlign                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Text alignment for content and column header. Available values are: left|center|right        ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Alias to `textAlign`        ","tagName":"tr"},{"text":"                            headerAlignment                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Text alignment for column header. This will override `textAlign` option for column header.        ","tagName":"tr"},{"text":"                            titleAlignment                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Alias to `headerAlignment`        ","tagName":"tr"},{"text":"                            hidden                                                    boolean                                                                                        <optional>                                                                                                                            false                                                                ","tagName":"tr"},{"text":"                            id                                                    string                                                                                        <optional>                                                                                                                                                A unique identifier for the column        ","tagName":"tr"},{"text":"                            textSelect                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, user can select text in this column        ","tagName":"tr"},{"text":"                            keepModel                                                    boolean                                                                                        <optional>                                                                                                                                                If enabled, initial column's options will be kept        ","tagName":"tr"},{"text":"                            stationary                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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)>                                                                                        <optional>                                                                                                                                                Collection of the column definitions        ","tagName":"tr"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"                            defaultColumnOptions                                                    ColumnDefinition~Options                                                                                        <optional>                                                                                                                                                All Columns will inherit from this default object        ","tagName":"tr"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"                            rows                                                    Array.<RowDefinition~Options>                                                                                        <optional>                                                                                                                                                Collection of the row definitions        ","tagName":"tr"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"                            fields                                                    Array.<string>                                                                                        <optional>                                                                                                                                                Shorthand for setting fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                                                        <optional>                                                                                                                                                Shorthand for creating row definition        ","tagName":"tr"},{"text":"                            plugins                                                    Array                                                                                        <optional>                                                                                                                                                Additional plugins for core grid (from getBlotter()/getCoreGrid())        ","tagName":"tr"},{"text":"                            extensions                                                    Array                                                                                        <optional>                                                                                                                                                Alias to `plugins`        ","tagName":"tr"},{"text":"                            scrollbar                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Enable both vertical and horizontal scrollbar in grid        ","tagName":"tr"},{"text":"                            linearWheelScrolling                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If enabled, a full row will be scrolled at a time instead of actual scroll value.        ","tagName":"tr"},{"text":"                            autoHideScrollbar                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Fading in/out Scrollbar on hover.        ","tagName":"tr"},{"text":"                            pageSize                                                    string                                                                                        <optional>                                                                                                                            0                                                        Make grid show specified number of row        ","tagName":"tr"},{"text":"                            rowHeight                                                    number                                                                                        <optional>                                                                                                                            32                                                        Set default row height for body (content) section        ","tagName":"tr"},{"text":"                            headerRowHeight                                                    number                                                                                        <optional>                                                                                                                            32                                                        Set default row height for header section        ","tagName":"tr"},{"text":"                            noColumnDragging                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        All columns can be moved by dragging. If this option is true, the feature is disabled        ","tagName":"tr"},{"text":"                            columnReorder                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Alias with noColumnDragging but in opposite value. This property deprecated in favor of noColumnDragging.        ","tagName":"tr"},{"text":"                            rowHighlighting                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Highlight a row when hovering mouse over grid        ","tagName":"tr"},{"text":"                            autoLayoutUpdate                                                    boolean | number                                                                                        <optional>                                                                                                                            false                                                        Grid will check for layout change periodically.        ","tagName":"tr"},{"text":"                            columnFreezing                                                    number                                                                                        <optional>                                                                                                                                                Deprecated in favor of column's leftPinned property. Enable horizontal scrollbar after `columnFreezing` index        ","tagName":"tr"},{"text":"                            freezeColumn                                                    number                                                                                        <optional>                                                                                                                                                Deprecated in favor of column's leftPinned property. An alias to columnFreezing        ","tagName":"tr"},{"text":"                            pinnedRightColumns                                                    number                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                                                Shorthand for calling Grid#addStaticDataRows        ","tagName":"tr"},{"text":"Grid#addStaticDataRows","tagName":"a"},{"text":"                            dataFields                                                    Array.<string>                                                                                        <optional>                                                                                                                                                Shorthand for calling Grid#addDataFields        ","tagName":"tr"},{"text":"Grid#addDataFields","tagName":"a"},{"text":"                            rowVirtualization                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        Lines around grid element        ","tagName":"tr"},{"text":"                            gridlines                                                    boolean                                                                                        <optional>                                                                                                                                                Horizontal and Vertical lines for ONLY content sections        ","tagName":"tr"},{"text":"                            verticalLines                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Vertical lines for all sections        ","tagName":"tr"},{"text":"                            contentVerticalLines                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Vertical lines for all content section        ","tagName":"tr"},{"text":"                            horizontalLines                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Horizontal lines for all sections        ","tagName":"tr"},{"text":"                            RTK                                                    *                                                                                        <optional>                                                                                                                            null                                                        rtk toolkit instance        ","tagName":"tr"},{"text":"                            ADC                                                    Grid~ADCOptions                                                                                        <optional>                                                                                                                            null                                                        ADC requesting level config object from adc team        ","tagName":"tr"},{"text":"Grid~ADCOptions","tagName":"a"},{"text":"                            synapse                                                    Grid~SynapseConfig                                                                                        <optional>                                                                                                                            null                                                        synapse config object        ","tagName":"tr"},{"text":"Grid~SynapseConfig","tagName":"a"},{"text":"                            contentRightPadding                                                    number                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            0                                                        Padding that is added below the last section. The padding is still a part of scrollable content.        ","tagName":"tr"},{"text":"                            dataConflationRate                                                    number                                                                                        <optional>                                                                                                                            0                                                        set delay for data to avoid to much sorting operation when data changed        ","tagName":"tr"},{"text":"                            autoDateConversion                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, date-time field with numeric value will be automatically converted to native date object.        ","tagName":"tr"},{"text":"                            textSelect                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, user can select content text by using mouse drag.        ","tagName":"tr"},{"text":"                            lang                                                    string                                                                                        <optional>                                                                                                                                                laguage for config localization date time, if null the default language is \"en\"        ","tagName":"tr"},{"text":"                            scrollbarParent                                                    Element                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            0                                                        Length of polling interval for refreshing ADC data in milliseconds. The default value (0) means no polling.        ","tagName":"tr"},{"text":"                            fieldCaching                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, field definition will be caching internal mechanism        ","tagName":"tr"},{"text":"                            timeSeriesExpansion                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the time series field will be treated as a normal field and not expanded.        ","tagName":"tr"},{"text":"                            childDataField                                                    string                                                                                        <optional>                                                                                                                            CHILD_VALUES                                                        The given field will be used to store children's static data, such as row color assignment.        ","tagName":"tr"},{"text":"                            topSection                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, title section will not be rendered        ","tagName":"tr"},{"text":"                            sorting                                                    SortableTitlePlugin~Options                                                                                        <optional>                                                                                                                                                Options for sorting        ","tagName":"tr"},{"text":"                            dataComposed                                                    function                                                                                        <optional>                                                                                                                                                Handler for dataComposed event        ","tagName":"tr"},{"text":"                            beforeContentBinding                                                    function                                                                                        <optional>                                                                                                                                                Handler for beforeContentBinding event        ","tagName":"tr"},{"text":"                            firstRendered                                                    function                                                                                        <optional>                                                                                                                                                Handler for firstRendered event        ","tagName":"tr"},{"text":"                            afterContentBinding                                                    function                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                                                Synapse authen token        ","tagName":"tr"},{"text":"                            debug                                                    boolean                                                                                        <optional>                                                                                                                            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.<string>,\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.<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.<string>                                                            An array of newly added fields        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.<RowDefinition>                                                            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.<string>                                                            An array of recently removed fields        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.<RowDefinition>                                                            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.<string>                                                            An array of newly added rics        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.<RowDefinition>                                                            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.<string>                                                            An array of recently removed rics        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.<RowDefinition>                                                            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                                                                                        <optional>                                                                                                                            \"\"                                                        RIC for real-time fields. Prefixing 0# to the ric is equivalent to specifying asChain property.        ","tagName":"tr"},{"text":"                            permId                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Organization PermId to be used instead of ric for private company.        ","tagName":"tr"},{"text":"                            values                                                    Array | Object                                                                                        <optional>                                                                                                                            null                                                        Values for static data        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        Field that corresponds to the given static values        ","tagName":"tr"},{"text":"                            asChain                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        The given ric will be treated as a chain        ","tagName":"tr"},{"text":"                            chainRic                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        RIC to be used for chain request (overiding ric property)        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Chain is collapsed by default        ","tagName":"tr"},{"text":"                            label                                                    string | null                                                                                        <optional>                                                                                                                            null                                                                ","tagName":"tr"},{"text":"                            hidden                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        When this row is hidden        ","tagName":"tr"},{"text":"                            realTime                                                    boolean                                                                                        <optional>                                                                                                                            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 ELF team. The documentation for the element can be found on LSEG UI's Pagination page.","tagName":"p"},{"text":"ELF 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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<div class=\"container\">\n  <h5>Double tooltip will occur at clipped text</h5>\n  <div class=\"clipped\" title=\"This is a long long text example to show double tooltip behaviour.\">This is a long long text example to show double tooltip behaviour.</div>\n  <h5>Short text is fine</h5>\n  <div class=\"clipped\" title=\"Short text is fine.\">Short text</div>\n</div>","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":"<h3>\n\n  Round up case</h3>\n<div class=\"detail\">\n  Actual scrollWidth: 112.84px, javascript will round up to 113 <br> Actual clientWidth: 112px <br> 113 &gt; 112 = true <br> tooltip will be setted\n</div>\n<div class=\"example\" style=\"width: 112px;\">sample text ~~~</div>\n<h3>Round down case</h3>\n<div class=\"detail\">\n  Actual scrollWidth: 118.42px, javascript will round down to 118 <br> Actual clientWidth: 118px <br> 118 &gt; 118 = false <br> no tooltip apply\n</div>\n<div class=\"example\" style=\"width: 118px;\">sample text ~ ~</div>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If true, text in the header sections (top section) will be qualified for showing tooltip.        ","tagName":"tr"},{"text":"                            title                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Alias to `header`        ","tagName":"tr"},{"text":"                            footer                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If true, text in the footer sections will be qualified for showing tooltip.        ","tagName":"tr"},{"text":"                            content                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<textarea rows=\"5\" placeholder=\"Copy (Ctrl+C) the selected cells to retrieve text and store it in clipboard. Paste it to Excel or here and see if it is in tab separated format.\"></textarea>","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                                                                                        <optional>                                                                                                                            \"cell\"                                                        Available options are cell, row, and column        ","tagName":"tr"},{"text":"                            multipleSelection                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, only single cell can be selected at time        ","tagName":"tr"},{"text":"                            autoDeselecting                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the selection will remain after grid losing focus        ","tagName":"tr"},{"text":"                            tabToSelect                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            copy                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            beforeMouseDown                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            selectableSections                                                    Array                                                                                        <optional>                                                                                                                            ['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.<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                                                                                        <optional>                                                                                    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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<emerald-pagination id=\"paging_ui\"></emerald-pagination>\n<hr>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If enabled, grid row will be selected as checkbox is checked.        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                            \"CHECK_BOX\"                                                        Field that will be used for storing check state        ","tagName":"tr"},{"text":"                            disablingField                                                    string                                                                                        <optional>                                                                                                                            \"CHECK_BOX_DISABLED\"                                                        Field that will be used for storing disabling state        ","tagName":"tr"},{"text":"                            checkboxCreated                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for checkboxCreated event        ","tagName":"tr"},{"text":"                            checkboxBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for checkboxBinding event        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for checkbox clicked event        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                        <optional>                                                                                                                            34                                                        Width for checkbox column        ","tagName":"tr"},{"text":"                            topCheckboxHandler                                                    boolean                                                                                        <optional>                                                                                                                            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.<number>}","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":"<big>Try drag the top column header and check out the order of the available events in the console</big>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                    Function handler for dragStart event        ","tagName":"tr"},{"text":"                            drag                                                    function                                                                                        <optional>                                                                                    Function handler for drag event        ","tagName":"tr"},{"text":"                            dragEnd                                                    function                                                                                        <optional>                                                                                    Function handler for dragEnd event        ","tagName":"tr"},{"text":"                            preColumnMoved                                                    function                                                                                        <optional>                                                                                    Function handler for preColumnMoved event        ","tagName":"tr"},{"text":"                            columnMoved                                                    function                                                                                        <optional>                                                                                    Function handler for columnMoved event        ","tagName":"tr"},{"text":"                            dragInterval                                                    function                                                                                        <optional>                                                                                    Function handler for dragInterval event        ","tagName":"tr"},{"text":"                            dragBoxRenderer                                                    function                                                                                        <optional>                                                                                    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":"<button id=\"toggle_btn\">Toggle Column Fitting</button>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<button id=\"toggle_btn\">Toggle Column Fitting</button>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, the given column will not be included in the calculation        ","tagName":"tr"},{"text":"                            contentFitting                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                                                Minimum width of the column        ","tagName":"tr"},{"text":"                            maxWidth                                                    number                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            false                                                        Proportionally expand columns, if there is enough space        ","tagName":"tr"},{"text":"                            constraint                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Prevents column width to go lower than its content size        ","tagName":"tr"},{"text":"                            autoAdjust                                                    boolean | number                                                                                        <optional>                                                                                                                            false                                                        Automatic column width adjusting on each data update        ","tagName":"tr"},{"text":"                            autoAdjusting                                                    boolean | number                                                                                        <optional>                                                                                                                            false                                                        Alias to `autoAdjust`        ","tagName":"tr"},{"text":"                            title                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Include title section in the fitting calculation        ","tagName":"tr"},{"text":"                            paddingSize                                                    number                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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":"<span style=\"line-height: 24px;\">IPO Date column </span>\n\n<button id=\"btn_1\">MMM-DD-YYYY</button>\n<button id=\"btn_2\">MMM-DD-YY</button>\n<button id=\"btn_3\">Get format</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            showValues                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Fixate percent bar alignment. By default, percent bar alignment will be changed according to grid column alignment.        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                            THIS_COLUMN                                                        Data field        ","tagName":"tr"},{"text":"                            textHidden                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, displays percent bar only        ","tagName":"tr"},{"text":"                            textWidth                                                    number | string                                                                                        <optional>                                                                                                                                                If specified, percent bar text will have fixed width        ","tagName":"tr"},{"text":"                            barColor                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Custom color for bar element. This will override the useMovementColor        ","tagName":"tr"},{"text":"                            padding                                                    number                                                                                        <optional>                                                                                                                            8                                                        Extra space added to max width from autoTextSizing calculation        ","tagName":"tr"},{"text":"                            percentageLabel                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the value will not convert into percent format        ","tagName":"tr"},{"text":"                            autoTextSizing                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text space will be fixed        ","tagName":"tr"},{"text":"                            autoFitting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, text space will be auto adjusted. Otherwise, text space will stay extended to the longest length        ","tagName":"tr"},{"text":"                            zeroValueHidden                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            displayStyleTab                                                    ColumnFormattingPlugin~DisplayStyleOption                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"ColumnFormattingPlugin~DisplayStyleOption","tagName":"a"},{"text":"                            colorTextTab                                                    Object                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                        <optional>                                                                                            ","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                                                                                        <optional>                                                                                                                            \"\"                                                        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.<Object>                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"DisplayStyleOption","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                        <optional>                                                                                    \"default\" \"left\" \"right\" or \"center\"        ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                        <optional>                                                                                    Available options are \"general\", \"bar\", \"heatmap\", or \"conditionalColor\"        ","tagName":"tr"},{"text":"                            bar                                                    ColumnFormattingPlugin~BarOption                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"ColumnFormattingPlugin~BarOption","tagName":"a"},{"text":"                            conditionalColor                                                    ColumnFormattingPlugin~ConditionalColorOption                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"ColumnFormattingPlugin~ConditionalColorOption","tagName":"a"},{"text":"                            heatmap                                                    ColumnFormattingPlugin~HeatmapOption                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"ColumnFormattingPlugin~HeatmapOption","tagName":"a"},{"text":"                            general                                                    Object                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"HeatmapOption","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            midPoint                                                    string                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                        <optional>                                                                                    \"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.<string>}","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"move_to_group\">Move Column</button>\n&#xA0;&#xA0;\n<label>From Index: </label>\n<select id=\"input_column\">\n    <option value=\"0\">0</option>\n    <option value=\"1\">1</option>\n    <option value=\"2\">2</option>\n    <option value=\"3\">3</option>\n    <option value=\"4\">4</option>\n    <option value=\"5\">5</option>\n</select>&#xA0;&#xA0;\n<label>To Index: </label>\n<select id=\"input_dest\">\n    <option value>null</option>\n    <option value=\"0\">0</option>\n    <option value=\"1\">1</option>\n    <option value=\"2\">2</option>\n    <option value=\"3\">3</option>\n    <option value=\"4\">4</option>\n    <option value=\"5\">5</option>\n</select>&#xA0;&#xA0;\n<label>Group: </label>\n<select id=\"input_group\">\n    <option value>null</option>\n    <option value=\"g1\">Group 1</option>\n    <option value=\"g2\">Group 2</option>\n    <option value=\"g3\">Group 3</option>\n</select><br>\n<hr>\n<button id=\"set_parent\">Set Group</button>&#xA0;&#xA0;\n<label>Column Index: </label>\n<select id=\"input_col\">\n    <option value=\"0\">0</option>\n    <option value=\"1\">1</option>\n    <option value=\"2\">2</option>\n    <option value=\"3\">3</option>\n    <option value=\"4\">4</option>\n    <option value=\"5\">5</option>\n</select>&#xA0;&#xA0;\n<label>Group: </label>\n<select id=\"input_grp\">\n    <option value>null</option>\n    <option value=\"g1\">Group 1</option>\n    <option value=\"g2\">Group 2</option>\n    <option value=\"g3\">Group 3</option>\n</select><br>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<fieldset>\n  <legend>Setting Group</legend>\n  <div id=\"set_buttons\"></div>\n</fieldset>\n<fieldset>\n  <legend>Adding child</legend>\n  <div id=\"add_buttons\"></div>\n</fieldset>\n<fieldset>\n  <legend>Removing child</legend>\n  <div id=\"remove_buttons\"></div>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            true                                                        Show tooltip in column's header        ","tagName":"tr"},{"text":"                            children                                                    Array.<string>                                                                                                                                                                                                    Child member in this group        ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                        <optional>                                                                                                                                                eg. left, center, right        ","tagName":"tr"},{"text":"                            render                                                    function                                                                                        <optional>                                                                                                                                                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.<number>}","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.<string>}","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.<string>}","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, it will disable an ability to drag and resize the column        ","tagName":"tr"},{"text":"                            defaultWidth                                                    number                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        By setting this to true, grid size will not change after double click to resize column        ","tagName":"tr"},{"text":"                            noResizing                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            dblClicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            dragStart                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            dragEnd                                                    function                                                                                        <optional>                                                                                                                            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.<Object>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnWidths() → {Array.<number>}","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.<number>                                                                                                                                                ","tagName":"tr"},{"text":"                            scalability                                                    boolean                                                                                        <optional>                                                                                            ","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If enabled, user can have one selection at any moment        ","tagName":"tr"},{"text":"                            clickToggle                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, click at the already selected column will deselect it        ","tagName":"tr"},{"text":"                            selectionChanged                                                    function                                                                                        <optional>                                                                                                                            null                                                        selectionChanged event handler        ","tagName":"tr"},{"text":"                            menuClicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event Handler when user clicks on menu icon.        ","tagName":"tr"},{"text":"                            menuPosition                                                    string                                                                                        <optional>                                                                                                                            \"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.<number>}","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<emerald-popup-menu id=\"popup_menu\"></emerald-popup-menu>","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":"<fieldset>\n  <legend>Setting stack</legend>\n  <div id=\"set_buttons\"></div>\n</fieldset>\n<fieldset>\n  <legend>Adding child</legend>\n  <div id=\"add_buttons\"></div>\n</fieldset>\n<fieldset>\n  <legend>Removing child</legend>\n  <div id=\"remove_buttons\"></div>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<emerald-popup-menu id=\"popup_menu\"></emerald-popup-menu>","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                                                                                        <optional>                                                                                    Group ID        ","tagName":"tr"},{"text":"                            stack                                                    string | ColumnStackPlugin~StackOptions                                                                                        <optional>                                                                                    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.<string>                                                                                                                                                                                                    Fields for stacking. The minimum is 2 fields        ","tagName":"tr"},{"text":"                            stacks                                                    Array.<ColumnStackPlugin~StackDefinition>                                                                                                                                                                                                    List of stacking configuration        ","tagName":"tr"},{"text":"ColumnStackPlugin~StackDefinition","tagName":"a"},{"text":"                            autoStacking                                                    boolean                                                                                        <optional>                                                                                                                                                Deprecated. Stacks are automatically maintained as long as its members exist        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler when user clicks on stack/expanding icon        ","tagName":"tr"},{"text":"                            menuElement                                                    Element                                                                                        <optional>                                                                                                                                                Element used to display a column selection list        ","tagName":"tr"},{"text":"                            menuItemClicked                                                    function                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            false                                                        If specified true, this group will be running in collapsing mode        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, this group will be expanded at the first time        ","tagName":"tr"},{"text":"                            activeColumn                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                                                            false                                                        If specified true, this group will be running in collapsing mode        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, this group will be expanded at the first time        ","tagName":"tr"},{"text":"                            children                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        List of column Ids for the stack members. String in this array is assumed to be column ids        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        List of column fields for the stack members. This will override children property        ","tagName":"tr"},{"text":"                            name                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Name defined for specific stack        ","tagName":"tr"},{"text":"                            activeColumn                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                                                            false                                                        If specified true, this group will be running in collapsing mode        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                        <optional>                                                                                                                            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.<number>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"expandGroup(colIndex) → {Array.<number>}","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.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIdsByIndex(colIndices) → {Array.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIndicesByColumnIds(colIds) → {Array.<string>}","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.<number>}","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.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getStackMemberIndices(stackId) → {Array.<number>}","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.<ColumnStackPlugin~StackDefinition>}","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.<Object>                                                            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.<number>                                                            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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<fieldset>\n\n  <legend>Apply color</legend>\n  <div class>\n    <button id=\"set_color_1_btn\">Set #1</button>\n    <label style=\"background-color: #FF2848;\"> &gt; 40 </label>\n    <label style=\"background-color: #FFB27B;\"> &gt; 0 </label>\n    <label style=\"background-color: #EEF3B4;\"> &lt; 0 </label>\n  </div>\n  <div class>\n    <button id=\"set_color_2_btn\">Set #2</button>\n    <label style=\"background-color: #64864A; color: #FFFFFF;\"> &gt; 40 </label>\n    <label style=\"background-color: #F56093;\"> &gt; 0 </label>\n    <label style=\"background-color: #FFCCCD;\"> &lt; 0 </label>\n  </div>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, border will be blinked instead of background        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                If not specified, field from column definition will be used        ","tagName":"tr"},{"text":"                            up                                                    string                                                                                        <optional>                                                                                                                                                CSS color (e.g. #00ff00, green)        ","tagName":"tr"},{"text":"                            down                                                    string                                                                                        <optional>                                                                                                                                                CSS color (e.g. #ff0000, red)        ","tagName":"tr"},{"text":"                            level                                                    string | boolean                                                                                        <optional>                                                                                                                                                CSS color (e.g. #33333, grey). If false value is specified, blinking for level color is disabled.        ","tagName":"tr"},{"text":"                            duration                                                    number                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                    If not specified, field from column definition will be used        ","tagName":"tr"},{"text":"                            upClass                                                    string                                                                                        <optional>                                                                                    CSS class name.        ","tagName":"tr"},{"text":"                            downClass                                                    string                                                                                        <optional>                                                                                    CSS class name.        ","tagName":"tr"},{"text":"                            levelClass                                                    string                                                                                        <optional>                                                                                    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.<ConditionalColoringPlugin~Condition>                                                                                        <optional>                                                                                                                            null                                                        List of condition options        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~Condition","tagName":"a"},{"text":"                            colorText                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                        <optional>                                                                                                                            null                                                        A shorthand for specifying default condition based on the field.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            tickColor                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                        <optional>                                                                                                                            null                                                        Alias of colorText.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            blinking                                                    string | boolean | ConditionalColoringPlugin~Blinking                                                                                        <optional>                                                                                                                            null                                                        Blink Options. If specified, the cell will be blinked on data change.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~Blinking","tagName":"a"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                                                The expression can be in the following forms: text, function, and 2 dimentional array        ","tagName":"tr"},{"text":"                            backgroundColor                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        CSS color (e.g. #ffffff, black)        ","tagName":"tr"},{"text":"                            color                                                    string                                                                                        <optional>                                                                                                                                                CSS=\"\" color (e.g. #000000, white)        ","tagName":"tr"},{"text":"                            cssClass                                                    string                                                                                        <optional>                                                                                                                                                cssClass=\"\" Predefined color class name        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                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.<ConditionalColoringPlugin~Condition>                                                                                        <optional>                                                                                                                            null                                                        List of condition options        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~Condition","tagName":"a"},{"text":"                            colorText                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                        <optional>                                                                                                                            null                                                        A shorthand for specifying default condition based on the field.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            tickColor                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                        <optional>                                                                                                                            null                                                        Alias of colorText        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                                                Predefined color object map for conditional coloring        ","tagName":"tr"},{"text":"                            blinkingDuration                                                    number                                                                                        <optional>                                                                                                                            250                                                        Blinking duration in milliseconds        ","tagName":"tr"},{"text":"                            insertionBlinking                                                    boolean                                                                                        <optional>                                                                                                                            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.<Object>}","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.<Object> 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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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":"<span id=\"text\"></span>\n\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                    Text to diplay at the item        ","tagName":"tr"},{"text":"                            value                                                    string | number                                                                                        <optional>                                                                                    Value attached to the item        ","tagName":"tr"},{"text":"                            isDisabled                                                    boolean                                                                                        <optional>                                                                                    If true the item will be disabled, default is false        ","tagName":"tr"},{"text":"                            isVisible                                                    boolean                                                                                        <optional>                                                                                    If false the item will not be displayed, default is true        ","tagName":"tr"},{"text":"                            isSeparator                                                    boolean                                                                                        <optional>                                                                                    If true the item is rendered as an item separator        ","tagName":"tr"},{"text":"                            items                                                    Array.<ContextMenuPlugin~MenuItem>                                                                                        <optional>                                                                                    Array of sub-menu items        ","tagName":"tr"},{"text":"ContextMenuPlugin~MenuItem","tagName":"a"},{"text":"                            renderer                                                    function                                                                                        <optional>                                                                                    Callback function to do custom rendering of the item, see more information in later section        ","tagName":"tr"},{"text":"                            callback                                                    ContextMenuPlugin~MenuItemEventCallback                                                                                        <optional>                                                                                    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.<string, ContextMenuPlugin~MenuItem>                                                            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.<number>                                                            Array of selected indices. Return null, if no selection        ","tagName":"tr"},{"text":"                            selectedRows                                                    Array.<number>                                                            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.<string, ContextMenuPlugin~MenuItem>                                                                                                                                                ","tagName":"tr"},{"text":"ContextMenuPlugin~MenuItem","tagName":"a"},{"text":"                            onMenu                                                    ContextMenuPlugin~OnMenuEventCallback                                                                                        <optional>                                                                                    @ @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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"Using filter input for fetching data","tagName":"h3"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter>\n</atlas-blotter>","tagName":"pre"},{"text":"var FilterInput = tr.FilterInputExtension;\nvar RowFiltering = tr.RowFilteringExtension;\nvar DataGenerator = tr.DataGenerator;\nvar fields = [\"market\", \"sentence\", \"CF_NETCHNG\", \"CF_LAST\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 100, seedd: 0 });\nvar filterInputExt = new FilterInput();\nvar rowFilteringExt = new RowFiltering();\n\nvar configObj = {\n  columns: [{\n      field: fields[0],\n      name: \"Market\",\n      filterInput: {\n        defaultLogic: function() {\n          // Disable default logic (disable filter to use server side filtering)\n          return true;\n        }\n      }\n    },\n    {\n      field: fields[1],\n      name: \"Description\",\n      filterInput: {\n        disabled: true\n      }\n    },\n    {\n      field: fields[2],\n      name: \"Net Chng.\",\n      filterInput: {\n        disabled: true\n      }\n    },\n    {\n      field: fields[3],\n      name: \"Last\",\n      filterInput: {\n        disabled: true\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [filterInputExt, rowFilteringExt]\n};\n\nvar grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;\n\nfilterInputExt.addEventListener(\"inputCreated\", function(e) {\n  var inputEl = e.input;\n  inputEl.addEventListener(\"value-changed\", onFilterInputKeyUp);\n});\n\nvar inputVal;\n\nfunction onFilterInputKeyUp(e) {\n  inputVal = e.detail.value;\n  // Simulate to fetch data from the server\n  conflationdFetch();\n}\n\n// ========== Simulate server side in below ==========\n\nfunction generateRecords(numRows, seed) {\n  // This function on server side\n  var records = DataGenerator.generateRecords(fields, {\n    numRows: numRows,\n    seed: seed\n  });\n\n  if (inputVal != null) {\n    console.log(inputVal);\n    var filterRecord = records.filter(function(record) {\n      return record[fields[0]].indexOf(inputVal) > -1;\n    });\n    return filterRecord;\n  }\n  return records;\n}\n\n// Define your fetch function\nfunction fetch() {\n  // Your code to make the server request goes here\n  console.log(\"Fetching data from the server...\");\n  // await data from the server\n  grid.data = generateRecords(1000); // assign data back to grid\n}\n\n// Create a conflation function to prevent excessive data call frequency\nfunction conflation(func, delay) {\n  let timeoutId;\n  return function() {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(func, delay);\n  };\n}\nvar conflationdFetch = conflation(fetch, 500);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\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":"                            defaultLogic                                                    function                                                                                        <optional>                                                                                                                            null                                                        Logic for filtering        ","tagName":"tr"},{"text":"                            filterLogic                                                    function                                                                                        <optional>                                                                                                                            null                                                        Alias to `defaultLogic`        ","tagName":"tr"},{"text":"                            disabled                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Disable UI        ","tagName":"tr"},{"text":"                            placeholder                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Placeholder text inside the input        ","tagName":"tr"},{"text":"                            type                                                    string                                                                                        <optional>                                                                                                                            \"text\"                                                        Type of UI. Available types are \"number\", \"multiselect\" ,\"select\", \"dropdown\", \"date\"        ","tagName":"tr"},{"text":"                            entries                                                    Array                                                                                        <optional>                                                                                                                                                Entries of dropdown filters when type is \"select\"        ","tagName":"tr"},{"text":"                            defaultValue                                                    *                                                                                        <optional>                                                                                                                                                Default value of input filter        ","tagName":"tr"},{"text":"                            trigger                                                    string                                                                                        <optional>                                                                                                                            \"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                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Handler executed after filter input is created        ","tagName":"tr"},{"text":"                            trigger                                                    string                                                                                        <optional>                                                                                                                            \"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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            0                                                        Middle point between values representing up and down colors        ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                        <optional>                                                                                                                            \"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":"<big>Double click on the content cell to open text editor</big>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<big>Double click on the content cell to open text editor</big>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"Preventing rows from moving during editing","tagName":"h3"},{"text":"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.  ","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","tagName":"pre"},{"text":"var extension = new tr.InCellEditingExtension();\n\nvar fields = [\"id\", \"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar colNames = [\"Id\", \"Company\", \"Market\", \"Last\", \"Net. Chng\", \"Industry\"];\nvar columns = fields.map(function(f, idx) {\n  return {\n    name: colNames[idx],\n    field: f\n  };\n});\ncolumns[0].width = 60;\ncolumns[2].width = 150;\ncolumns[3].width = 150;\ncolumns[3].blinking = true;\ncolumns[4].width = 80;\n\nvar configObj = {\n  sorting: {\n    initialSort: {\n      sortOrder: \"a\",\n      field: fields[3],\n    }\n  },\n  columns: columns,\n  staticDataRows: generateRecords(),\n  inCellEditing: {\n    editableTitle: false,\n    editableContent: true\n  },\n  extensions: [\n    extension\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\nfunction generateRecords() {\n  var records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\n  records.forEach(function(record, idx) {\n    record[\"id\"] = idx;\n  });\n  return records;\n}\n\nsetInterval(function() {\n  grid.data = generateRecords();\n}, 2000);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 250px;\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                                                                                        <optional>                                                                                                                            false                                                        Make the column editable by double click        ","tagName":"tr"},{"text":"                            inCellEditing                                                    InCellEditingPlugin~EditorOptions                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            \"text\"                                                        Specify type of the editor. Available types are text, number, dropdown, date, checkbox, and combobox.        ","tagName":"tr"},{"text":"                            entries                                                    Array                                                                                        <optional>                                                                                                                            null                                                        Specify list of items available in the dropdown box        ","tagName":"tr"},{"text":"                            attributes                                                    Object                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        Show editor in a balloon. This is useful when there is not much space in the cell        ","tagName":"tr"},{"text":"                            editableTitle                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all column headers can be edited by double click        ","tagName":"tr"},{"text":"                            editableContent                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all content cells can be edited by double click. This can be overridden individual column configuration.        ","tagName":"tr"},{"text":"                            autoCommitText                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, the text will be committed even if user leaving editor midway        ","tagName":"tr"},{"text":"                            dataBinding                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text will not be updated in the grid's data table        ","tagName":"tr"},{"text":"                            popupElement                                                    Element                                                                                        <optional>                                                                                                                            null                                                        Element to be attached under the editor        ","tagName":"tr"},{"text":"                            doubleClick                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, double click will not trigger editor        ","tagName":"tr"},{"text":"                            tabToMove                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, pressing tab key while editor is active will open editor on the next editable cell.        ","tagName":"tr"},{"text":"                            contentSource                                                    string                                                                                        <optional>                                                                                                                            \"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                                                                                        <optional>                                                                                                                            false                                                        force inline styles regardless of elf version.        ","tagName":"tr"},{"text":"                            disablingScroll                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Scrollbar will be frozen when editor opened. Deprecated in favor of uiBlocking        ","tagName":"tr"},{"text":"                            uiBlocking                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        append transparent overlay to block ui interaction        ","tagName":"tr"},{"text":"                            preEditorOpening                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler before editor is opened        ","tagName":"tr"},{"text":"                            editorOpened                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler after editor is opened        ","tagName":"tr"},{"text":"                            beforeCommit                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler before data binding, allowing data type conversion        ","tagName":"tr"},{"text":"                            editorClosed                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler after editor is closed        ","tagName":"tr"},{"text":"                            keyUp                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler for each keyup of the input text box        ","tagName":"tr"},{"text":"                            beforeRowCommit                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler before committing from all editors in the row        ","tagName":"tr"},{"text":"                            rowEditorClosed                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler after closing of all editors        ","tagName":"tr"},{"text":"                            autoSuggest                                                    Element                                                                                        <optional>                                                                                                                            null                                                        Element of emerald-autosuggest or atlas-autosuggest for handled with input cell        ","tagName":"tr"},{"text":"                            closingOnScroll                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the editor will not be automatically closed when scrolling grid.        ","tagName":"tr"},{"text":"                            autoHiding                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                    Text that user has entered        ","tagName":"tr"},{"text":"                            cancel                                                    boolean                                                                                        <optional>                                                                                    Set to true to cancel the commit operation.        ","tagName":"tr"},{"text":"                            groupHeader                                                    boolean                                                                                        <optional>                                                                                    This value is set to true if the editing row is a group header.        ","tagName":"tr"},{"text":"                            segmentSeparator                                                    boolean                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    Text that user has entered        ","tagName":"tr"},{"text":"                            groupHeader                                                    boolean                                                                                        <optional>                                                                                    This value is set to true if the editing row is a group header.        ","tagName":"tr"},{"text":"                            segmentSeparator                                                    boolean                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>\n<emerald-pagination id=\"pagination\"></emerald-pagination>","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                                                                                        <optional>                                                                                                                            1                                                        Initial page to be shown        ","tagName":"tr"},{"text":"                            pageSize                                                    number                                                                                        <optional>                                                                                                                            10                                                        Number of rows per page        ","tagName":"tr"},{"text":"                            element                                                    string | Element                                                                                        <optional>                                                                                                                                                A reference to pagination element. This can be a direct pointer or element's id        ","tagName":"tr"},{"text":"                            elements                                                    Array                                                                                        <optional>                                                                                                                            null                                                        Multiple references can be linked to a single grid        ","tagName":"tr"},{"text":"                            pageChanged                                                    function                                                                                        <optional>                                                                                                                            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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                            ","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                                                                                        <optional>                                                                                                                            8                                                        Extra space added to max width from autoTextSizing calculation        ","tagName":"tr"},{"text":"                            percentageLabel                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the value will not convert into percent format        ","tagName":"tr"},{"text":"                            autoTextSizing                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text space will be fixed.        ","tagName":"tr"},{"text":"                            autoFitting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, text space will be auto adjusted. Otherwise, text space will stay extended to the longest length        ","tagName":"tr"},{"text":"                            zeroValueHidden                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            \"\"                                                        Fixate percent bar alignment. By default, percent bar alignment will be changed according to grid column alignment.        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                            THIS_COLUMN                                                        Data field        ","tagName":"tr"},{"text":"                            textHidden                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, displays percent bar only        ","tagName":"tr"},{"text":"                            textWidth                                                    number | string                                                                                        <optional>                                                                                                                                                If specified, percent bar text will have fixed width        ","tagName":"tr"},{"text":"                            useMovementColor                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, percent bar will not use up and down colors        ","tagName":"tr"},{"text":"                            barColor                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Custom color for bar element. This will override the useMovementColor        ","tagName":"tr"},{"text":"                            padding                                                    number                                                                                        <optional>                                                                                                                            8                                                        Extra space added to max width from autoTextSizing calculation        ","tagName":"tr"},{"text":"                            percentageLabel                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the value will not convert into percent format        ","tagName":"tr"},{"text":"                            autoTextSizing                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text space will be fixed        ","tagName":"tr"},{"text":"                            autoFitting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, text space will be auto adjusted. Otherwise, text space will stay extended to the longest length        ","tagName":"tr"},{"text":"                            zeroValueHidden                                                    boolean                                                                                        <optional>                                                                                                                            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.<Object>}","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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 <High_value\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 99,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 99,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 99,\n  CFHIGH: 50,\n  percent: 99\n});\n\n// High<Low\nrecords.push({\n  id: records.length,\n  CFLOW: 99,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 99,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 99,\n  CFHIGH: 1,\n  percent: 99\n});\n\n// Two equal\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 1,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 50,\n  percent: 50\n});\n\n// Three equal \nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 1,\n  CFHIGH: 1,\n  percent: 1\n});\n\nvar configObj = {\n  scrollbar: true,\n  columns: [{\n      name: \"ID\",\n      field: fields[0],\n      width: 60\n    },\n    {\n      name: \"Low\",\n      field: fields[1],\n      width: 60\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 60\n    },\n    {\n      name: \"High\",\n      field: fields[3],\n      width: 60\n    },\n    {\n      name: \"Range (Low, Last, High)\",\n      field: fields[2],\n      alignment: \"c\",\n      rangeBar: {\n        low: \"CFLOW\",\n        high: \"CFHIGH\",\n        last: \"CF_LAST\"\n      }\n    },\n    {\n      name: \"Percent\",\n      field: fields[4],\n      width: 60\n    },\n    {\n      name: \"Percent (Without low, last, high)\",\n      field: fields[4],\n      rangeBar: {\n        field: fields[4]\n      }\n    },\n    {\n      name: \"Percent (start 30, end 70)\",\n      field: fields[4],\n      rangeBar: {\n        field: fields[4],\n        start: 30, // default 0\n        end: 70 // default 100\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [rangeBarExt]\n};\n\nvar grid = window.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":"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":"Price Graph","tagName":"h3"},{"text":"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.","tagName":"p"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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 <High_value\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 99,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 99,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 99,\n  CFHIGH: 50,\n  percent: 99\n});\n\n// High<Low\nrecords.push({\n  id: records.length,\n  CFLOW: 99,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 99,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 99,\n  CFHIGH: 1,\n  percent: 99\n});\n\n// Two equal\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 1,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 50,\n  percent: 50\n});\n\n// Three equal \nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 1,\n  CFHIGH: 1,\n  percent: 1\n});\n\nvar configObj = {\n  scrollbar: true,\n  columns: [{\n      name: \"ID\",\n      field: fields[0],\n      width: 60\n    },\n    {\n      name: \"Low\",\n      field: fields[1],\n      width: 60\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 60\n    },\n    {\n      name: \"High\",\n      field: fields[3],\n      width: 60\n    },\n    {\n      name: \"Range (Low, Last, High)\",\n      field: fields[2],\n      alignment: \"c\",\n      rangeBar: {\n        low: \"CFLOW\",\n        high: \"CFHIGH\",\n        last: \"CF_LAST\"\n      }\n    },\n    {\n      name: \"Percent\",\n      field: fields[4],\n      width: 60\n    },\n    {\n      name: \"Percent (Without low, last, high)\",\n      field: fields[4],\n      rangeBar: {\n        field: fields[4]\n      }\n    },\n    {\n      name: \"Percent (start 30, end 70)\",\n      field: fields[4],\n      rangeBar: {\n        field: fields[4],\n        start: 30, // default 0\n        end: 70 // default 100\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [rangeBarExt]\n};\n\nvar grid = window.grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\n// Create tooltip container section, we reused element for avoid create element multiple times\n// This container will be show the user\nvar LEDTooltipUI = document.createElement(\"div\");\nLEDTooltipUI.style.textTransform = \"capitalize\"; // To title case\nvar keys = [\"low\", \"last\", \"high\"];\nfor (var i = 0; i < keys.length; i++) {\n  var key = keys[i];\n  var elem = document.createElement(\"div\");\n  LEDTooltipUI[key] = elem;\n  LEDTooltipUI.appendChild(elem);\n}\n// End tooltip container creation\n\n// in application side need to import addTooltipCondition from tooltip component\n// For example import { addTooltipCondition } from \"@elf/coral-tooltip\"; // for elf v4\n// import { addTooltipCondition } from '@refinitiv-ui/elements/tooltip'; // for elf v6\ntr.addTooltipCondition(LEDGuageTooltipCondition, LEDGuageTooltipRenderer);\n\nfunction LEDGuageTooltipCondition(target, paths) {\n  var relPos = grid.api.getRelativePosition(target);\n  if (!relPos.hit) {\n    return false;\n  }\n  if (relPos.sectionType !== \"content\") {\n    return false;\n  }\n  if (rangeBarExt.isRangeBarColumn(relPos.colIndex)) {\n    LEDTooltipUI._relPos = relPos; // We need to cache the relative position in the container element for use when renderer in the tooltip to avoid calling getRelativePosition multiple times.\n    return true;\n  }\n  return false;\n}\n\nfunction LEDGuageTooltipRenderer(target) {\n  var relPos = LEDTooltipUI._relPos;\n  var colIndex = relPos.colIndex;\n  var lowLastHigh = rangeBarExt.getValue(colIndex, relPos[\"rowIndex\"]);\n  if (lowLastHigh) {\n    // update value into tooltip UI\n    LEDTooltipUI[\"low\"].textContent = \"Low: \" + (lowLastHigh[\"low\"] != null ? lowLastHigh[\"low\"] : \"--\");\n    LEDTooltipUI[\"last\"].textContent = \"Last: \" + (lowLastHigh[\"last\"] != null ? lowLastHigh[\"last\"] : \"--\");\n    LEDTooltipUI[\"high\"].textContent = \"High: \" + (lowLastHigh[\"high\"] != null ? lowLastHigh[\"high\"] : \"--\");\n  }\n  // else {} // Currenlty, we don't have the rangeBar field that can't getValue, even if the N/A case getValue will be return object (with undefiend value)\n  return LEDTooltipUI;\n}","tagName":"pre"},{"text":"atlas-blotter {\n  height: 208px;\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":"                            rangeBar                                                    RangeBarPlugin~RangeDefinition                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            THIS_COLUMN                                                        Field used as percentage. If specified, `low`, `high`, and `last` fields will be ignored.        ","tagName":"tr"},{"text":"                            start                                                    number                                                                                        <optional>                                                                                                                            0                                                        minimum value used with percentage `field`        ","tagName":"tr"},{"text":"                            end                                                    number                                                                                        <optional>                                                                                                                            100                                                        maximum value used with percentage `field`        ","tagName":"tr"},{"text":"                            low                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as minimum range        ","tagName":"tr"},{"text":"                            high                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as maximum range        ","tagName":"tr"},{"text":"                            last                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as current absolute value (white bar)        ","tagName":"tr"},{"text":"                            vwap                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as volume weighted average price (VWAP)        ","tagName":"tr"},{"text":"                            close                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as close price        ","tagName":"tr"},{"text":"                            tick                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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":"<button id=\"get_btn\">Show Data</button>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<textarea id=\"drop_target\" placeholder=\"Drop Content Here\"></textarea>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, information box will be shown during the drag        ","tagName":"tr"},{"text":"                            disabled                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            true                                                        If disabled, mousemove/mousedown will not trigger the drag operation.        ","tagName":"tr"},{"text":"                            dataTransfer                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, internal row data will not be moved at the end of the drag operation.        ","tagName":"tr"},{"text":"                            autoScroll                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, grid will not be verticallly scrolled when mouse is hovering around the edges of the grid.        ","tagName":"tr"},{"text":"                            dragBoxRenderer                                                    function                                                                                        <optional>                                                                                                                                                Allow user to customize dragBox        ","tagName":"tr"},{"text":"                            dragStart                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for dragStart event        ","tagName":"tr"},{"text":"                            drag                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for drag event        ","tagName":"tr"},{"text":"                            dragEnd                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for dragEnd event        ","tagName":"tr"},{"text":"                            dataMoved                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for dataMoved event        ","tagName":"tr"},{"text":"                            beforeDataMoved                                                    function                                                                                        <optional>                                                                                                                            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.<number>                                                            row indices of the selected rows        ","tagName":"tr"},{"text":"                            srcRowIds                                                    Array.<string>                                                            row ids of the selected rows        ","tagName":"tr"},{"text":"                            srcRowTypes                                                    Array.<string>                                                            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.<number>                                                            row indices of the selected rows        ","tagName":"tr"},{"text":"                            srcRowIds                                                    Array.<string>                                                            row ids of the selected rows        ","tagName":"tr"},{"text":"                            srcRowTypes                                                    Array.<string>                                                            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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<input id=\"search_input\" placeholder=\"Search Anything...\" type=\"search\">\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"filter_btn1\">Change &gt; 20%</button>\n\n<button id=\"filter_btn2\">Change 10%-20%</button>\n<button id=\"filter_btn3\">In NASDAQ</button>\n<button id=\"filter_btn4\">Services industry</button>\n<button id=\"filter_btn5\">Clear Filter</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"mode_always\"> always </button>\n\n<button id=\"mode_hover\"> onHover </button>\n<button id=\"mode_active\"> onActiveFilter </button>\n<button id=\"mode_none\"> none </button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                                                An expression string or Function        ","tagName":"tr"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"                            filterState                                                    *                                                                                        <optional>                                                                                                                                                Context object that will be passed as the third parameter for the filter logic        ","tagName":"tr"},{"text":"                            filterIcon                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                    show/hide sort UI        ","tagName":"tr"},{"text":"                            filterUI                                                    boolean                                                                                        <optional>                                                                                    show/hide filter UI        ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                        <optional>                                                                                    data type of column        ","tagName":"tr"},{"text":"                            lang                                                    string                                                                                        <optional>                                                                                    dialog language        ","tagName":"tr"},{"text":"                            rawDataAccessor                                                    function                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    This function will be called on each raw data, allowing formatting data to be displayed on the filter item list        ","tagName":"tr"},{"text":"                            sortLogic                                                    function                                                                                        <optional>                                                                                    This function for sorting filter item list in the dialog. The comparison will perform on raw values, and not formatted values        ","tagName":"tr"},{"text":"                            itemList                                                    Array                                                                                        <optional>                                                                                    Item list to be shown in the dialog. If this is not specified, the list will be collected from existing data on the grid        ","tagName":"tr"},{"text":"                            additionalItems                                                    Array                                                                                        <optional>                                                                                    Additional items to be put on the itemList        ","tagName":"tr"},{"text":"                            blankValues                                                    boolean | string                                                                                        <optional>                                                                                    Display a \"(Blanks)\" item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item        ","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        Deprecated in favor of `iconActivation`. Set iconActivation to none instead.        ","tagName":"tr"},{"text":"                            iconActivation                                                    string                                                                                        <optional>                                                                                                                            onActiveFilter                                                        Filter icon redering behavior, can be set to `always`,`onHover`,`onActiveFilter`,or `none`        ","tagName":"tr"},{"text":"                            dialogOptions                                                    RowFilteringPlugin~FilterDialogOptions                                                                                        <optional>                                                                                                                            null                                                        Default configuration for Filter Dialog, applying to all columns.        ","tagName":"tr"},{"text":"RowFilteringPlugin~FilterDialogOptions","tagName":"a"},{"text":"                            click                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched when a user clicks the column filter icon.        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Alias to `click` event handler        ","tagName":"tr"},{"text":"                            iconCreated                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched when a new column filter icon is created.        ","tagName":"tr"},{"text":"                            filterChanged                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched whenever global or column filter is changed by either adding or removing.        ","tagName":"tr"},{"text":"                            beforeDialogOpened                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched before dialog opening.        ","tagName":"tr"},{"text":"                            dialogCommitted                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched whenever the new settings from dialog are applied.        ","tagName":"tr"},{"text":"                            refreshed                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched after new filter is applied to grid's data view.        ","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.<function()>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnFilterExpression(colIndex) → {RowFilteringPlugin~Expression}","tagName":"h4"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"getColumnFilterIcons(colIndex) → {Array.<Element>}","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.<RowFilteringPlugin~FilterExpression>}","tagName":"h4"},{"text":"RowFilteringPlugin~FilterExpression","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowFilteringPlugin~FilterExpression","tagName":"a"},{"text":"getFilters() → {Array.<function()>}","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                                                                                        <optional>                                                                                    When filter is changed, the change will be passed through this property        ","tagName":"tr"},{"text":"                            sortOrder                                                    number                                                                                        <optional>                                                                                    When sort order is changed, the change will be passed through this property        ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                        <optional>                                                                                            ","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"If you want to use the predefinedColors option and specify a groupId using the groupColors property, there are certain limitations to be aware of. Specifically, you need to be aware of the group ID, as you've already set the groupColor within the grid configuration. This implies that you won't be able to alter the groupColors during runtime. ","tagName":"p"},{"text":"However, if your intention is to modify individual groups during runtime, you can achieve this by using the setGroupColor method. By providing the group ID and the color as arguments to this method to change the tag colors. If you want to add a new group to the grid and set its color using this API, we recommend listening for the groupAdded event and use setGroupColor method to set group color when the group is added as show you in example below.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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\n// Application should be manage your group object in your application\nvar currentCountGroup = 6;\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    colorClass: \"yellow\",\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    colorClass: \"yellow\",\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    colorClass: \"red\",\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    colorClass: \"red\",\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    colorClass: \"green\",\n    icon: \"info\",\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    colorClass: \"green\",\n    icon: \"info\",\n\n  }\n};\n\n// Approved \nfunction onContinueClicked(groupId, e) {\n  var rowIds = grid.api.getDataView().getGroup(groupId).getAllRowIds();\n  var groupStatus = statusMapping[groupId];\n  var nextStatus = groupStatus.statusName;\n  var statusObj = {\n    statusName: \"Approved Send\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"green\"].backgroundColor,\n    status: \"approved\",\n    icon: \"info\",\n    colorClass: \"green\"\n  };\n  var newGroupId = \"GROUP_\" + ++currentCountGroup;\n  statusMapping[newGroupId] = statusObj;\n  for (var i = 0; i < rowIds.length; i++) {\n    var rowId = rowIds[i];\n    var rowDef = grid.api.getRowDefinition(rowId);\n    rowDef.setData(\"status\", newGroupId);\n  }\n  currentCountGroup++;\n\n  e.stopPropagation(); // Prevent collapsing/expanding grouop when click header\n}\n\nfunction onAbortClicked(groupId, e) {\n  var rowIds = grid.api.getDataView().getGroup(groupId).getAllRowIds();\n  var groupStatus = statusMapping[groupId];\n  var nextStatus = groupStatus.statusName;\n  var statusObj = {\n    statusName: \"Denined Register\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"red\"].backgroundColor,\n    status: \"denied\",\n    icon: \"info\",\n    colorClass: \"red\"\n  };\n  var newGroupId = \"GROUP_\" + ++currentCountGroup;\n  statusMapping[newGroupId] = statusObj;\n  for (var i = 0; i < rowIds.length; i++) {\n    var rowId = rowIds[i];\n    var rowDef = grid.api.getRowDefinition(rowId);\n    rowDef.setData(\"status\", newGroupId);\n  }\n  currentCountGroup++;\n\n  e.stopPropagation(); // Prevent collapsing/expanding grouop when click header\n}\n\nfunction onGroupAdded(e) {\n  var newGroup = e.newGroup;\n  var groupId = newGroup.getGroupId();\n  var groupStatus = statusMapping[groupId];\n  rowGrouping.setGroupColor(groupId, statusMapping[groupId].colorClass);\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    autoGroupRemoval: true,\n    groupAdded: onGroupAdded\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 = 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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<button id=\"group_btn1\">Clear grouping</button>\n<button id=\"group_btn2\">Group by company name</button>\n<button id=\"group_btn3\">Group by market and then company name</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<div>\n  Predefined color #1\n  <div id=\"set1\" class=\"example-container\"></div>\n  <button id=\"apply_btn1\">Apply</button>\n</div>\n<div>\n  Predefined color #2\n  <div id=\"set2\" class=\"example-container\"></div>\n  <button id=\"apply_btn2\">Apply</button>\n</div>\n\n<hr>\n\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<fieldset>\n  <legend> Operations </legend>\n  <span> Position (rowIndex) : </span> <input value=\"1\" id=\"rowIndex_txt\">\n  <button id=\"add_row\"> Add row </button>\n  <button id=\"remove_row\"> Remove row </button>\n  <button id=\"update_row\"> Change row data </button>\n  <button id=\"change_group\"> Change Group </button>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                            ","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                                                                                        <optional>                                                                                                                            false                                                        Remove group that has no row member.        ","tagName":"tr"},{"text":"                            autoGroupHiding                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Hide \"null\" or \"undefined\" group headers, while keeping the group's items intact.        ","tagName":"tr"},{"text":"                            predefinedGroups                                                    Array | Array.<Array>                                                                                        <optional>                                                                                                                            null                                                        Add groups without content rows. Use 2D array for multi-level grouping.        ","tagName":"tr"},{"text":"                            groupBy                                                    RowGroupingPlugin~GroupCriteria                                                                                        <optional>                                                                                                                            null                                                        GroupCriteria can be string, function, or array of string.        ","tagName":"tr"},{"text":"RowGroupingPlugin~GroupCriteria","tagName":"a"},{"text":"                            groupCriteria                                                    RowGroupingPlugin~GroupCriteria                                                                                        <optional>                                                                                                                            null                                                        Alias to `groupBy`.        ","tagName":"tr"},{"text":"RowGroupingPlugin~GroupCriteria","tagName":"a"},{"text":"                            displayColumn                                                    number                                                                                        <optional>                                                                                                                            0                                                        Column Index for group header rendering.        ","tagName":"tr"},{"text":"                            fixedDisplayColumn                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, displayColumn will remain in the same index, even if columns are shifted by insertion or removal.        ","tagName":"tr"},{"text":"                            noCollapsible                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            true                                                        If disabled, clicking at cell will not expand that group        ","tagName":"tr"},{"text":"                            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.        ","tagName":"tr"},{"text":"                            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.        ","tagName":"tr"},{"text":"                            headerSpanning                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, every cell on the group header row is displayed        ","tagName":"tr"},{"text":"                            footerSpanning                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, only cells from the first column will be shown, spanning over other cells        ","tagName":"tr"},{"text":"                            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)        ","tagName":"tr"},{"text":"RowGroupingPlugin~GroupSortLogic","tagName":"a"},{"text":"                            autoGroupSorting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, group sorting will be performed after each `groupAdded` event        ","tagName":"tr"},{"text":"                            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.        ","tagName":"tr"},{"text":"                            colorTag                                                    boolean                                                                                        <optional>                                                                                                                                                If not specified, the color tag will be disabled when using extension without halo theme.        ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                        <optional>                                                                                                                                                Predefined color object map for color tag        ","tagName":"tr"},{"text":"                            groupColors                                                    Object                                                                                        <optional>                                                                                                                                                The object map of group ID and predefined color.        ","tagName":"tr"},{"text":"                            defaultCollapse                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Collapsing groups by default when a group is created        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler when user clicks on arrows or cells        ","tagName":"tr"},{"text":"                            groupAdded                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            beforeGroupAdded                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            groupHeaderBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Logic that will be executed on each group header row        ","tagName":"tr"},{"text":"                            groupFooterBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Once defined, footer row will be added on each group        ","tagName":"tr"},{"text":"                            headerBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Shorthand for `groupHeaderBinding`        ","tagName":"tr"},{"text":"                            footerBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Shorthand for `groupFooterBinding`        ","tagName":"tr"},{"text":"                            nonGroupBinding                                                    function                                                                                        <optional>                                                                                                                            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":"getFooterRowCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupingCriteria() → {Array.<string>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupingStates() → {Array.<RowGroupingPlugin~GroupingState>}","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":"setGroupColor(groupRef, groupColor)","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":"<button id=\"set_btn1\">Toggle Row 3</button>\n\n<button id=\"set_btn2\">Toggle Row 6</button>\n<button id=\"set_btn3\">Toggle Row 9</button>\n<button id=\"unset_btn\">Remove All Separators</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"set_btn1\">Classify by market</button>\n<button id=\"set_btn2\">Classify by industry</button>\n<button id=\"set_btn3\">Classify by market and industry</button>\n<button id=\"set_btn4\">Unclassify</button>\n<hr>\n<button id=\"data_btn1\">Set row 6 market to NASDAQ</button>\n<button id=\"data_btn2\">Set row 6 market to DJI</button>\n<button id=\"data_btn3\">Set row 6 industry to Investment Managers</button>\n<button id=\"data_btn4\">Set row 6 industry to Paper</button>\n<hr>\n<atlas-blotter></atlas-blotter>","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":"<button id=\"clear_sort\">Clear sorting states</button>\n\n<button id=\"original_sort_segment\">Sort segments to original order</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<div>\n  Predefined color #1\n  <div id=\"set1\" class=\"example-container\"></div>\n  <button id=\"apply_btn1\">Apply</button>\n</div>\n<div>\n  Predefined color #2\n  <div id=\"set2\" class=\"example-container\"></div>\n  <button id=\"apply_btn2\">Apply</button>\n</div>\n<hr>\n<div>\n  Change color of 6th row\n  <button id=\"set_color_btn1\">color #1</button>\n  <button id=\"set_color_btn2\">color #2</button>\n  <button id=\"set_color_btn3\">color #3</button>\n</div>\n<hr>\n\n<atlas-blotter></atlas-blotter>","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":"<span>Row Index</span>\n\n\n<input value=\"1\" type=\"number\" id=\"row_index\">\n<hr>\n<span> Set segment color</span>\n<button id=\"set_segment_color_1\"> Segment color 1 </button>\n<button id=\"set_segment_color_2\"> Segment color 2 </button>\n<button id=\"set_segment_color_3\"> Segment color 3 </button>\n<button id=\"unset_segment_color\"> Unset Segment Color</button>\n<hr>\n<span> Toggle Spanning </span>\n<button id=\"spanning_segment_separator\"> Toggle </button>\n<hr>\n<span> Save grid config for restore </span>\n<button id=\"save_config\"> Save config </button>\n<span id=\"copy_success\"> </span>\n<atlas-blotter></atlas-blotter>","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":"<span> You can load the grid config with pase in below text area and then click &quot;Start Grid&quot; </span>\n<hr>\n<button id=\"start_grid\"> Start Grid </button>\n<hr>\n<textarea id=\"area_config\" placeholder=\"Patse grid config and click Start Grid\"></textarea>\n<hr>\n<atlas-blotter></atlas-blotter>","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":"<label>Empty segment filtering: <input id=\"empty_segment_chk\" type=\"checkbox\" checked></label>\n<i></i>\n<label>Separator filtering: <input id=\"separator_chk\" type=\"checkbox\" checked></label>\n<hr>\n<atlas-blotter></atlas-blotter>","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                                                                                        <optional>                                                                                                                            true                                                        If disabled, segment separator rows will not be spanned/stretched across multiple cells        ","tagName":"tr"},{"text":"                            colorTag                                                    boolean                                                                                        <optional>                                                                                                                                                If not specified, the color tag will be disabled when using extension without halo theme.        ","tagName":"tr"},{"text":"                            cssField                                                    string                                                                                        <optional>                                                                                                                            \"TAG_CSS_CLASS\"                                                        Apply CSS class based on the given field        ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                        <optional>                                                                                                                                                Predefined color object map for color tag        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler when user clicks on arrows or cells        ","tagName":"tr"},{"text":"                            headerMenuClicked                                                    function                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Logic that will be executed on each segment separator row        ","tagName":"tr"},{"text":"                            nonSegmentSeparatorBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Logic that will be executed for all non segment separator row        ","tagName":"tr"},{"text":"                            sortingLogic                                                    function                                                                                        <optional>                                                                                                                            null                                                        Logic to be used by sortSegments method        ","tagName":"tr"},{"text":"                            rowSpanningField                                                    string                                                                                        <optional>                                                                                                                            \"ROW_SPANNING\"                                                        selected field for apply row spanning in row separator        ","tagName":"tr"},{"text":"                            segmentIdField                                                    string                                                                                        <optional>                                                                                                                            \"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.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentIds() → {Array.<string>}","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<big>Try copy (<b>Ctrl/Command + C</b>) text and paste the content on the text box below</big>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<hr>\n<textarea placeholder=\"Paste Clipboard Content Here\"></textarea>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, user can have one selection at any moment        ","tagName":"tr"},{"text":"                            selectionChanged                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler executed after selection is made        ","tagName":"tr"},{"text":"                            beforeSelection                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler executed before selection is made        ","tagName":"tr"},{"text":"                            basedOnContent                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Event Handler when user clicks on menu icon.        ","tagName":"tr"},{"text":"                            menuPosition                                                    string                                                                                        <optional>                                                                                                                            \"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.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedRows(sectRefopt) → {Array.<number>}","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":"<button id=\"set_btn\">Set Row Color</button>\n\nRow Index: <input id=\"row_inp\" type=\"number\" value=\"0\"> Color: <input id=\"color_inp\" type=\"color\" value=\"#cbaacb\">\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<div class=\"control-group\">\n  Row index <input type=\"number\" value=\"3\" id=\"row_index\">\n</div>\n<div class=\"control-group\">\n  Set color\n  <div id=\"btn_group\">\n  </div>\n  <button id=\"reset\">Reset</button>\n</div>\n<div class=\"control-group\">\n  Predefiend color\n  <button id=\"extend_color\">Extend</button>\n  <button id=\"shrink_color\">Shrink</button>\n</div>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            true                                                        If disabled, background color will not be applied to the row        ","tagName":"tr"},{"text":"                            textColoring                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text color will not be applied to the row        ","tagName":"tr"},{"text":"                            bgColorField                                                    string                                                                                        <optional>                                                                                                                            \"BG_COLOR\"                                                        Apply background color based on the given field        ","tagName":"tr"},{"text":"                            textColorField                                                    string                                                                                        <optional>                                                                                                                            \"TEXT_COLOR\"                                                        Apply text color based on the given field        ","tagName":"tr"},{"text":"                            cssField                                                    string                                                                                        <optional>                                                                                                                            \"CSS_CLASS\"                                                        Apply CSS class based on the given field        ","tagName":"tr"},{"text":"                            cssRangeField                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                                                            \"\"                                                        Apply alternative CSS class based on the given field which not in range field        ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                        <optional>                                                                                                                                                Predefined color object map        ","tagName":"tr"},{"text":"                            predefinedColoring                                                    boolean                                                                                        <optional>                                                                                                                            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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Array of StatisticsRowPlugin~RowOptions        ","tagName":"tr"},{"text":"                            invalidText                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Text to be shown for invalid statistic (i.e. Not a Number value)        ","tagName":"tr"},{"text":"                            noColoring                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all conditional coloring (i.e. tick coloring) will not automatically be applied.        ","tagName":"tr"},{"text":"                            noFormatting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all formatting (i.e. decimal places) will not automatically be applied.        ","tagName":"tr"},{"text":"                            postCalculation                                                    function                                                                                        <optional>                                                                                                                                                Function handler excuted after statistics calculation and before default rendering        ","tagName":"tr"},{"text":"                            postRendering                                                    function                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            \"footer\"                                                        Available footer are \"header\", \"title\", and \"footer\"        ","tagName":"tr"},{"text":"                            statistic                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Statistic to be calculated. Predefined values are \"average\", \"min\", \"max\", \"count\", and \"sum\"        ","tagName":"tr"},{"text":"                            label                                                    string                                                                                        <optional>                                                                                                                            null                                                        By default, label will be statistics name.        ","tagName":"tr"},{"text":"                            id                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            label                                                    boolean                                                                                        <optional>                                                                                    Indicating the column is used to show label        ","tagName":"tr"},{"text":"                            count                                                    number                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    Summation        ","tagName":"tr"},{"text":"                            average                                                    number                                                                                        <optional>                                                                                    Average        ","tagName":"tr"},{"text":"                            min                                                    number                                                                                        <optional>                                                                                    Minimum        ","tagName":"tr"},{"text":"                            max                                                    number                                                                                        <optional>                                                                                    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.<StatisticsRowPlugin~RowOptions>}","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.<string>                                                            Fields for current columns        ","tagName":"tr"},{"text":"                            statistics                                                    Array.<StatisticsRowPlugin~Stats>                                                            Array of statistic values. You should add your custom statistics to the object        ","tagName":"tr"},{"text":"StatisticsRowPlugin~Stats","tagName":"a"},{"text":"                            dataRows                                                    Array.<Object>                                                            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.<string>                                                            Fields for current columns        ","tagName":"tr"},{"text":"                            statistics                                                    Array.<StatisticsRowPlugin~Stats>                                                            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.<Object>                                                            Definition objects given at the configuration time        ","tagName":"tr"},{"text":"                            footerRows                                                    Array.<Object>                                                            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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"TextFormattingPlugin~FormatOptions","tagName":"a"},{"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                                                                                        <optional>                                                                                                                                                Available options are: number, scaled, percent, and datetime        ","tagName":"tr"},{"text":"                            type                                                    string                                                                                        <optional>                                                                                                                                                Alias to formatType        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                Field is required but can be defined in the column definition object        ","tagName":"tr"},{"text":"                            decimalPlaces                                                    number | boolean                                                                                        <optional>                                                                                                                            2                                                                ","tagName":"tr"},{"text":"                            precisionEnabled                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, number of decimal will remain as original.        ","tagName":"tr"},{"text":"                            plusSign                                                    boolean                                                                                        <optional>                                                                                                                            false                                                                ","tagName":"tr"},{"text":"                            separator                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Thousands separators        ","tagName":"tr"},{"text":"                            percentSign                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If the formatType is percent and the value of percentSign is not specified, the percentSign is set to true by default        ","tagName":"tr"},{"text":"                            scalingUnit                                                    string                                                                                        <optional>                                                                                                                            million                                                        Value can be million or billion        ","tagName":"tr"},{"text":"                            multiplyBy100                                                    boolean                                                                                        <optional>                                                                                                                            false                                                                ","tagName":"tr"},{"text":"                            mutiplyBy100                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Alias of multiplyBy100        ","tagName":"tr"},{"text":"                            dateTimeFormat                                                    string                                                                                        <optional>                                                                                                                            \"MM/DD/YYYY\"                                                                ","tagName":"tr"},{"text":"                            useUTCTime                                                    boolean                                                                                        <optional>                                                                                                                            true                                                                ","tagName":"tr"},{"text":"                            autoTextFormatting                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the extension's automatic formatting will not be triggered, including `formatLogic`        ","tagName":"tr"},{"text":"                            formatLogic                                                    function                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            2                                                                ","tagName":"tr"},{"text":"                            plusSign                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            separator                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            percentSign                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            scalingUnit                                                    string                                                                                        <optional>                                                                                                                                                Value can be million or billion        ","tagName":"tr"},{"text":"                            multiplyBy100                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            dateTimeFormat                                                    string                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            useUTCTime                                                    boolean                                                                                        <optional>                                                                                                                                                        ","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<big>Ctrl + Mouse Scroll to zoom in/out.</big>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            1                                                        Default zoom level range from 0.6 to 2        ","tagName":"tr"},{"text":"                            step                                                    number                                                                                        <optional>                                                                                                                            0.1                                                        Steps size of each zoom level        ","tagName":"tr"},{"text":"                            wheel                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, not allow wheel event to change zoom        ","tagName":"tr"},{"text":"                            maxFactor                                                    number                                                                                        <optional>                                                                                                                            2                                                        Maximum zoom factor level        ","tagName":"tr"},{"text":"                            minFactor                                                    number                                                                                        <optional>                                                                                                                            0.5                                                        Minimum zoom factor level        ","tagName":"tr"},{"text":"                            zoomChanged                                                    function                                                                                        <optional>                                                                                                                            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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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 = \"<span>\" + e.data + \"</span><span>2</span>\"; // 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":"<atlas-blotter>\n</atlas-blotter>","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":"<atlas-blotter>\n</atlas-blotter>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","tagName":"pre"},{"text":"var href = \"https://www.lseg.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.lseg.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.lseg.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.lseg.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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<fieldset>\n  <legend>Setting Columns</legend>\n  <button id=\"column_btn1\">Column Set 1</button>\n  <button id=\"column_btn2\">Column Set 2</button>\n  <button id=\"column_btn3\">Clear All Columns</button>\n</fieldset>\n<fieldset>\n  <legend>Setting Data</legend>\n  <button id=\"data_btn1\">Data Set 1</button>\n  <button id=\"data_btn2\">Data Set 2</button>\n  <button id=\"data_btn3\">Clear All Data</button>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<fieldset>\n  <legend>Setting Rows</legend>\n  <button id=\"row_btn1\">Row Set 1 (3 Rows)</button>\n  <button id=\"row_btn2\">Row Set 2 (4 Rows)</button>\n  <button id=\"row_btn3\">Row Set 3 (5 Rows)</button>\n  <button id=\"row_btn4\">Clear All Rows</button>\n</fieldset>\n<fieldset>\n  <legend>Updating Data</legend>\n  <button id=\"data_btn1\">Data Set 1 (3 Rows) </button>\n  <button id=\"data_btn2\">Data Set 2 (4 Rows) </button>\n  <button id=\"data_btn3\">Data Set 3 (5 Rows) </button>\n  <button id=\"data_btn4\">Clear All Data</button>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"multi_add_btn\">Add 5 Rows at once</button>\n<button id=\"add_btn\">Add Row at the Bottom</button>\n<button id=\"add_top_btn\">Add a row at the Top</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","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":"<button id=\"top_row_btn\">Get Top Row Data</button>\n<button id=\"col_btn\">Get Data from Column</button>\n<button id=\"all_btn\">Get All Data</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","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":"<button id=\"realtime_btn\">Toggle Real-time Update</button>\n<button id=\"eur_btn\">Update EUR=</button>\n<button id=\"jpy_btn\">Update JPY=</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","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":"<button id=\"remove_top_btn\">Remove Top Row</button>\n<button id=\"remove_all_btn\">Remove All Rows</button>\n<button id=\"add_5_btn\">Add 5 Rows</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"lft_btn\">Left Alignment</button>\n<button id=\"ctr_btn\">Center Alignment</button>\n<button id=\"rgt_btn\">Right Alignment</button>\n<button id=\"reset_btn\">Reset Alignment</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"insert_col_btn\">Insert Column</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"hideColumnButton\">Hide Column 0</button>\n<button id=\"showColumnButton\">Show Column 0</button>\n<button id=\"showColumn5Button\">Show Column 5</button>\n<button id=\"removeColumnButton\">Remove Column 0</button>\n<button id=\"removeAllColumns\">Remove All Columns</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<div id=\"container\">\n</div>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<big>Move</big>\n<select id=\"source_sel\"></select>\n<big>to the position before</big>\n<div id=\"destination_div\"></div>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"Custom Header/Title","filename":"columns/custom-title-formatter.html","contents":[{"text":"You can display anything you want on grid's column header/title by using headerBinding. The binding works in similar way to content binding, where the method will be executed each time grid's header gets updated. columnDef is supplied in the event argument to provide additional information about the column header being rendered. ","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":"Additional element example","tagName":"h2"},{"text":"<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var fields = [\"id\", \"companyName\", \"market\", \"CF_LAST\", \"PCTCHNG\"];\nvar columns = fields.map(function(f) {\n  return {\n    field: f\n  };\n});\n\ncolumns[0].headerBinding = function headerWithLink(e) {\n  var cell = e.cell;\n  var content = cell.getContent();\n  if (!content || !content._myHeaderWithLink) {\n    content = document.createElement(\"div\");\n    content._myHeaderWithLink = true;\n\n    var span = content._span = document.createElement(\"span\");\n    span.style.marginRight = \"5px\";\n    var link = content._link = document.createElement(\"ef-icon\");\n    link.icon = \"link\";\n    link.addEventListener(\"click\", function(arg) {\n      arg.stopPropagation();\n      alert(\"Icon clicked\");\n    });\n    content.appendChild(span);\n    content.appendChild(link);\n  }\n\n  content._span.textContent = e.columnDef.getName();\n  cell.setContent(content);\n};\n\ncolumns[2].headerBinding = function headerWithCheckbox(e) {\n  var cell = e.cell;\n  var content = cell.getContent();\n  if (!content || !content._myHeaderWithCheckbox) {\n    content = document.createElement(\"div\");\n    content._myHeaderWithCheckbox = true;\n\n    var span = content._span = document.createElement(\"span\");\n    span.style.marginRight = \"5px\";\n    // You will need to import the checkbox theme files for this to be shown\n    var chkbox = content._chkbox = document.createElement(\"ef-checkbox\");\n    chkbox.addEventListener(\"checked-changed\", function(arg) {\n      alert(\"Checkbox changed\");\n    });\n    chkbox.addEventListener(\"click\", function(arg) {\n      arg.stopPropagation();\n    });\n    content.appendChild(span);\n    content.appendChild(chkbox);\n  }\n\n  content._span.textContent = e.columnDef.getName();\n  cell.setContent(content);\n};\n\nvar ROW_COUNT = 10;\nvar records = DataGenerator.generateRecords(fields, {\n  seed: 0,\n  numRows: ROW_COUNT\n});\n\nvar configObj = {\n  columns: columns,\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Floating element example","tagName":"h2"},{"text":"<efx-grid id=\"grid\"></efx-grid>","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":"<big>Hover mouse over Grid to see row highlighting</big>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"hide_btn\">Hide First 3 Rows</button>\n<button id=\"show_btn\">Show Rows</button>\n<button id=\"clear_btn\">Unhide All</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"header_btn\">Add Header Section</button>\n<button id=\"footer_btn\">Add Footer Section</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<big>Group By:</big>\n\n<button id=\"g1_btn\">Market</button>\n<button id=\"g2_btn\">Industry</button>\n<button id=\"g23_btn\">Market and Industry</button>\n<button id=\"clear_btn\">Reset Grouping</button>\n<br><br>\n<big>Expand:</big>\n<button id=\"expand_btn\">Expand All Groups</button>\n<button id=\"collapse_btn\">Collapse All Groups</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"reset_btn\">Reset Grid Height to Default</button>\n<button id=\"set_200_btn\">Set Grid Height to 200px</button>\n<button id=\"set_600_btn\">Set Grid Height to 600px</button>\n<br><br>\n<atlas-blotter id=\"grid\" style=\"height: 200px\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"reset_btn\">Reset All Column Widths to Default</button>\n<button id=\"fixate_all_btn\">Fixate All Column Widths</button>\n<button id=\"fixate_first_btn\">Fixate the First Column</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<div id=\"grid_container\">\n  <atlas-blotter id=\"grid\"></atlas-blotter>\n</div>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<fieldset id=\"pinning_set\">\n  <legend>Pinning</legend>\n</fieldset>\n<fieldset id=\"unpinning_set\">\n  <legend>Unpinning</legend>\n</fieldset>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"sort_btn1\">Sort Column 1</button>\n<button id=\"sort_btn2\">Sort Column 2</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"sort_btn1\">Sort Column 1</button>\n<button id=\"sort_btn2\">Sort Column 2</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<hr>\n<textarea id=\"output_ta\" placeholder=\"Click at the grid header to sort\"></textarea>","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      requestData(evtArg);\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\n\nfunction mockCallbackData(resp) {\n  if (resp.success) {\n    console.log(\"Loading success, Data sorted\");\n    grid.data = resp.data;\n  }\n}\n\n// Mock to request data\nfunction requestData(obj) {\n  console.log(\"Loading data from server side\");\n  // Mock data on server side\n  setTimeout(function() {\n    // Mock to query data from DB.\n    var resRecords = tr.DataGenerator.generateRecords(fields, { numRows: 10 }); // NOTE: It's random data\n    var sortField = obj.sortedField;\n    var sortOrder = obj.sortOrder;\n    resRecords = resRecords.sort(sortFx.bind(null, sortOrder, sortField));\n    mockCallbackData({\n      success: true,\n      data: resRecords\n    });\n  }, 100);\n}\n\nfunction sortFx(sortOrder, sortField, rowA, rowB) {\n  return compareFunction(rowA, rowB, sortField, sortOrder);\n}\n\nfunction compareFunction(rowA, rowB, sortField, sortOrder) {\n  var valueA = rowA[sortField];\n  var valueB = rowB[sortField];\n\n  if (sortOrder === \"a\") {\n    return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;\n  } else {\n    return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;\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":"<efx-grid>\n</efx-grid>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"get_btn\">Get Current States</button>\n<button id=\"reset_btn\">Clear All Sorting</button>\n<textarea id=\"output_ta\" placeholder=\"Click at the grid header to sort\"></textarea>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<input id=\"rank_rather_10\" type=\"button\" value=\"Col1 - Rank &gt; 10\">\n<input id=\"start_with_a\" type=\"button\" value=\"Col2 - Countries start with &apos;A&apos;\">\n<input id=\"small_countries\" type=\"button\" value=\"Col3 - Small countries\">\n<input id=\"clear\" type=\"button\" value=\"Clear Filters\">\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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 <option> elements. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n  var items = [\n    [\">=\", \"GTE\"],\n    [\"<=\", \"LTE\"],\n    [\"==\", \"EQ\"],\n    [\"<\", \"LT\"],\n    [\">\", \"GT\"]\n  ];\n  var options = items.map(function(item) {\n    var optElem = document.createElement(\"option\");\n    optElem.textContent = item[0]; // Label\n    optElem.value = item[1];\n    return optElem;\n  });\n\n  // Create <select> element\n  var selElem = document.createElement(\"select\");\n  selElem.style.display = \"inline-block\";\n  selElem.style.width = \"40%\";\n  selElem.style.maxHeight = \"unset\";\n  options.forEach(function(optElem) {\n    selElem.appendChild(optElem);\n  });\n\n  // Save variables for later use\n  selElem.colIndex = e.colIndex;\n  selElem.input = e.input;\n  e.input.filterType = options[0].value;\n  e.input.style.width = \"60%\";\n\n  // Add event listener for business logic\n  selElem.addEventListener(\"mousedown\", function(e) {\n    e.stopPropagation();\n  }, false);\n  selElem.addEventListener(\"click\", function(e) {\n    e.stopPropagation();\n  }, false);\n  selElem.addEventListener(\"change\", function(e) {\n    e.stopPropagation();\n\n    var elem = e.currentTarget;\n    var selectedOption = elem.options[elem.selectedIndex];\n    var colIndex = elem.colIndex;\n    console.log(\"Selection changed on colIndex: \", colIndex);\n\n    // Update filter type\n    elem.input.filterType = selectedOption.value;\n\n    // Force recalculation of filtering\n    filterInputExt.refresh();\n  }, false);\n\n  // Insert select element before the input element\n  var parentInput = e.input.parentNode;\n  parentInput.insertBefore(selElem, parentInput.firstChild);\n}\n\nvar myFilterLogic = function(e, rowData) {\n  if (e.inputText) {\n    var num = +(e.inputText);\n    var cellValue = rowData[e.field];\n\n    switch (e.input.filterType) {\n      case \"GTE\":\n        return (cellValue >= num);\n      case \"LTE\":\n        return (cellValue <= num);\n      case \"GT\":\n        return (cellValue > num);\n      case \"LT\":\n        return (cellValue < num);\n      default:\n        return (cellValue == num);\n    }\n  } else {\n    return true;\n  }\n}\n\nvar configObj = {\n  columns: [{\n      name: \"Rate\",\n      field: \"rate\",\n      sortBy: \"rate\",\n      alignment: \"right\",\n      filterInput: {\n        defaultLogic: myFilterLogic,\n        placeholder: \"e.g. 1, 0, or -1\"\n      },\n      width: 200,\n      alignment: \"c\"\n    },\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  ],\n  rowFiltering: {\n    disabledUI: true\n  },\n  extensions: [\n    rowFilteringExt,\n    filterInputExt\n  ],\n  filterInput: {\n    inputCreated: onInputCreated\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":"Get Filter States / Reset All","filename":"filtering/filtering-get-reset.html","contents":[{"text":"The Row Filtering Extension provides APIs such as:","tagName":"p"},{"text":"Row Filtering Extension","tagName":"a"},{"text":"For more details see the Row Filter Extension API documentation.","tagName":"p"},{"text":"Row Filter Extension API documentation","tagName":"a"},{"text":"<button id=\"get_states_btn\">Get Filter States</button>\n<button id=\"reset_all_btn\">Clear All Filters</button>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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\ndocument.getElementById('get_states_btn').addEventListener('click', function() {\n  var states = rowFilteringExt.getColumnFilterStates();\n  alert(JSON.stringify(states));\n});\n\ndocument.getElementById('reset_all_btn').addEventListener('click', function() {\n  // Remove all filters and update the UI where applicable (via reset() method)\n  rowFilteringExt.removeAllColumnFilters();\n});\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":"Printing Grid","filename":"utilities/printing.html","contents":[{"text":"You can print Grid using the Printing Utility or the native printer feature within a browser. The native printer is more difficult to use, however.","tagName":"p"},{"text":"Using a native printer","tagName":"h2"},{"text":"Since content can scroll inside Grid, native printers do not work well with it, as the final print preview truncates any components that are not currently visible on the screen.","tagName":"p"},{"text":"To solve this, you need to update the grid's configuration to show all hidden information before you preview it. See the steps below.","tagName":"p"},{"text":"1. Initialize Grid","tagName":"h3"},{"text":"var config = {\n  // ... See column options for available options\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = config;","tagName":"pre"},{"text":"2. Adjust the Grid's resolution","tagName":"h3"},{"text":"Adjust the Grid's resolution to reflect the paper size (for example, A3, A4, A5).","tagName":"p"},{"text":"@media print CSS properties cannot be used to adjust Grid's style, as Grid will not re-render itself with CSS properties. They can only be used to adjust the layout before the print preview.","tagName":"p"},{"text":"function beforePrint() {\n  grid.style.width = \"180mm\"; // A4 width\n  grid.style.height = \"unset\";\n}","tagName":"pre"},{"text":"3. Delayed window.print","tagName":"h3"},{"text":"Grid needs approximately 300ms to recalculate and re-render itself. So you need to make sure Grid has enough time to update its state before the print preview appears.","tagName":"p"},{"text":"function print() {\n  beforePrint();\n  setTimeout(function () {\n    window.print();\n  }, 500); // Grid needs at least 300ms  to recalculate and repaint itself.\n}","tagName":"pre"},{"text":"4. After printing","tagName":"h3"},{"text":"Lastly, the grid's configuration needs to be restored to its initial state. For this, the window.onafterprint hook will be triggered once printing is finished.","tagName":"p"},{"text":"window.onafterprint = function () {\n  grid.style.width = \"100%\";\n  grid.style.height = \"500px\";\n}","tagName":"pre"},{"text":"Using the Printing Utility","tagName":"h2"},{"text":"Unlike the native printer above, the Printing Utility has been created to help print the grid without other components. Rows and columns will not be truncated when using the utility.","tagName":"p"},{"text":"Basically, the utility creates a new grid DOM dynamically and copies its data into this newly created grid. It will be destroyed automatically when printing is finished.","tagName":"p"},{"text":"<button id=\"print\">print</button>\n<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"icon\"];\nDataGenerator.addFieldInfo(\"icon\", {\n  type: \"set\",\n  members: [\"up\", \"down\", \"phone\", \"calendar\", \"flame\"]\n});\nvar records = DataGenerator.generateRecords(fields, { numRows: 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    { name: \"Icon\", field: fields[5], binding: EFIconFormatter.create() }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"print\").addEventListener(\"click\", function() {\n  GridPrinter.print(grid);\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 300px;\n}","tagName":"pre"},{"text":"First, install package from npm.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid","tagName":"pre"},{"text":"Then, use import syntax for importing the utility into your app.","tagName":"p"},{"text":"import { GridPrinter } from \"@refinitiv-ui/efx-grid/utils\";","tagName":"pre"},{"text":"Finally, send Grid into the GridPrinter utility.","tagName":"p"},{"text":"var config = {\n    // ... See column options for available options\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = config;\n\nGridPrinter.print(grid);","tagName":"pre"},{"text":"GridPrinter 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":"                            pageWidth                                                    number                                                                                        <optional>                                                                                    Paper width in pixel. This limits number of columns to be shown on a single page        ","tagName":"tr"},{"text":"                            pageHeight                                                    number                                                                                        <optional>                                                                                    Paper height in pixel. This limits number of rows to be shown on a single page        ","tagName":"tr"},{"text":"                            primaryColumn                                                    number                                                                                        <optional>                                                                                    Column index that will be placed as the first column on each page.        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"createPrintElement(grid, optionsopt) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"enableDebugMode(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getPreFlightInfo(grid, optionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"observe(iFrameElementopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"print(grid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setPrintOptions(options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unobserve()","tagName":"h4"}]},{"title":"Multi-table","filename":"utilities/multi-table.html","contents":[{"text":"Multiple grids can be created within a single page. They are independent from each other. A change made to one grid won't affect on the other grids. Sometimes, you want multiple instances of the same grid to make more room for displaying data. MultiTableManager is created to support such case. MultiTableManager will create multiple instances of the same grid and syncronize any column related change across all those instances. Each grid created by MultiTableManager will always have the same column configuration and the extensions. You can have different different row content on each grid. ","tagName":"p"},{"text":"Note that MultiTableManager is just a helper class object. It is not a Grid extension which is tied to single grid instance. It can be viewed as another wrapper that manages multiple Grid instances. ","tagName":"p"},{"text":"Support features","tagName":"h2"},{"text":"MultiTableManager is still in development and support only some basic features as listed below:","tagName":"p"},{"text":"Usage","tagName":"h2"},{"text":"To use multi-table feature, you need to import MultiTableManager, a helper, from package. Then, initialize the helper by supplying Grid element. The element will be used as a primary table for creating another table. Lastly, initialize the Grid element by using setGridConfig method from the helper to specify configuration. ","tagName":"p"},{"text":"To adjust number of tables, use setTableCount method. ","tagName":"p"},{"text":"To get Grid element, use getTable method.","tagName":"p"},{"text":"The basic setup process is shown in the example below:","tagName":"p"},{"text":"import MultiTableManager from \"@refinitiv-ui/efx-grid/utils\";\n\nvar gridElement = document.getElementById(\"grid\");\nvar mgr = new MultiTableManager(gridElement);\n\nvar configObj = {\n    /* grid configuration */\n};\nmgr.setGridConfig(configObj);\n\nmgr.setTableCount(3); // Or any other number","tagName":"pre"},{"text":"Multi-table example","tagName":"h3"},{"text":"<button id=\"table_btn1\">Table Count 1</button>\n\n<button id=\"table_btn2\">Table Count 2</button>\n<button id=\"table_btn3\">Table Count 3</button>\n<button id=\"table_btn4\">Table Count 4</button>\n<hr>\n<div id=\"v_scrollbar_host\">\n  <div id=\"h_scrollbar_host\">\n    <efx-grid id=\"grid\"></efx-grid>\n  </div>\n</div>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 5 });\n\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 100 },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 100 }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new RowSelection(),\n    new ColumnSelection(),\n    new ColumnResizing(),\n    new ColumnFitter(),\n    new ColumnDragging()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\nvar mgr = new MultiTableManager(grid);\n// You can place grids side by side by using the following commands\n// var vScrollbarHost = document.getElementById(\"v_scrollbar_host\");\n// var hScrollbarHost = document.getElementById(\"h_scrollbar_host\");\n// MultiTableManager.synchronizeVScrollbar(vScrollbarHost, hScrollbarHost, grid);\n\nmgr.setGridConfig(configObj);\nmgr.setTableCount(3);\n\ndocument.getElementById(\"table_btn1\").addEventListener(\"click\", function(e) {\n  mgr.setTableCount(1);\n});\ndocument.getElementById(\"table_btn2\").addEventListener(\"click\", function(e) {\n  mgr.setTableCount(2);\n});\ndocument.getElementById(\"table_btn3\").addEventListener(\"click\", function(e) {\n  mgr.setTableCount(3);\n});\ndocument.getElementById(\"table_btn4\").addEventListener(\"click\", function(e) {\n  mgr.setTableCount(4);\n});\nsetInterval(function simulateDataUpdate() {\n  if (!grid.api) {\n    return;\n  }\n  var rowCount = mgr.getRowCount();\n  for (var i = 0; i < 4; ++i) {\n    var tbl = mgr.getTable(i);\n    if (!tbl) {\n      break;\n    }\n    for (var r = 0; r < rowCount; ++r) {\n      if (!DataGenerator.randInt(0, 4)) {\n        var record = DataGenerator.generateRecord(fields);\n        tbl.api.setRowData(r, record);\n      }\n    }\n  }\n}, 500);","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  margin: 0 5px 5px;\n  vertical-align: top;\n}\n\n#h_scrollbar_host {\n  height: 400px;\n}","tagName":"pre"},{"text":"Multi-table: wrap mode example","tagName":"h3"},{"text":"In wrap mode, a single table will be used as a primary table and wrapped by specified number of rows. After wrapping, multiple secondary tables will be created with specified number of rows to represent the rows from the primary table. The main difference between wrap mode and multi-table mode is that content rows, in wrap mode, of each table are based on a single primary table. Any change on a row from the primary table will also apply to corresponding row on one of the secondary tables, and vice versa. In multi-table mode, rows in one table are independent from rows in other tables. ","tagName":"p"},{"text":"To enable wrap mode, use wrapTable method with number of wrapping rows as its parameter. ","tagName":"p"},{"text":"To disable wrap mode, use wrapTable method with 0 as its parameter.","tagName":"p"},{"text":"If you are in multi-table mode, wrapTable method will automatically remove any existing table and  switch to wrap mode.","tagName":"p"},{"text":"If you are in wrap mode, setTableCount method will automatically disable wrap-mode and  switch to multi-table mode.","tagName":"p"},{"text":"Note that original table is still kept intact after the wrapping, even though it is hidden from view. getTable(0) will return the original table. ","tagName":"p"},{"text":"<button id=\"wrap_btn1\">Wrap 3 rows</button>\n\n<button id=\"wrap_btn2\">Wrap 4 rows</button>\n<button id=\"wrap_btn3\">Wrap 5 rows</button>\n<button id=\"wrap_btn4\">Disable wrap mode</button>\n<hr>\n<button id=\"set_btn1\">Set Data on the second table</button>\n<button id=\"set_btn2\">Set Data on the third table</button>\n<button id=\"add_row_btn\">Add row</button>\n<button id=\"remove_row_btn\">Remove row</button>\n<hr>\n<button id=\"add_col_btn\">Add Column</button>\n<button id=\"remove_col_btn\">Remove Column</button>\n<hr>\n<div id=\"v_scrollbar_host\">\n  <div id=\"h_scrollbar_host\">\n    <efx-grid id=\"grid\"></efx-grid>\n  </div>\n</div>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 10 });\n\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  defaultColumnOptions: {\n    minWidth: 24\n  },\n  columns: [\n    { name: fields[0], width: 100, field: fields[0] },\n    { name: fields[2], width: 100, field: fields[2], formatType: \"number\", colorText: true },\n    { name: fields[3], width: 100, field: fields[3], formatType: \"percent\", blinking: true }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new RowSelection(),\n    new ColumnSelection(),\n    new ColumnResizing(),\n    new ColumnFitter(),\n    new ColumnDragging()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\nvar mgr = new MultiTableManager(grid);\nmgr.setGridConfig(configObj);\n\nwrap_btn1.addEventListener(\"click\", function() {\n  mgr.wrapTable(3);\n});\nwrap_btn2.addEventListener(\"click\", function() {\n  mgr.wrapTable(4);\n});\nwrap_btn3.addEventListener(\"click\", function() {\n  mgr.wrapTable(5);\n});\nwrap_btn4.addEventListener(\"click\", function() {\n  mgr.wrapTable(0);\n});\nadd_row_btn.addEventListener(\"click\", function() {\n  mgr.insertRow({});\n});\nremove_row_btn.addEventListener(\"click\", function() {\n  mgr.removeRow();\n});\nadd_col_btn.addEventListener(\"click\", function() {\n  mgr.insertColumn({ field: \"industry\", width: 80 });\n});\nremove_col_btn.addEventListener(\"click\", function() {\n  mgr.removeColumn(mgr.getColumnCount() - 1);\n});\nset_btn1.addEventListener(\"click\", function() {\n  randomlySetData(mgr.getTable(1));\n});\nset_btn2.addEventListener(\"click\", function() {\n  randomlySetData(mgr.getTable(2));\n});\n\nsetInterval(function simulateDataUpdate() {\n  var tblCount = mgr.getTableCount();\n\n  for (var i = 0; i < tblCount; ++i) {\n    if (Math.random() > 0.6) {\n      randomlySetData(mgr.getTable(i));\n    }\n  }\n}, 500);\n\nfunction randomlySetData(tbl) {\n  if (!tbl || !tbl.api) {\n    return;\n  }\n  var rowCount = mgr.getRowCount();\n  for (var i = 0; i < rowCount; ++i) {\n    if (Math.random() > 0.7) {\n      var rowDef = tbl.api.getRowDefinition(i);\n      if (rowDef) {\n        rowDef.setRowData(DataGenerator.generateRecord(fields));\n      }\n    }\n  }\n}","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  margin: 0 5px 5px;\n  vertical-align: top;\n}\n\n#h_scrollbar_host {\n  height: 250px;\n}","tagName":"pre"},{"text":"Positioning grids side by side with vertical scrollbar syncronization","tagName":"h2"},{"text":"You can display multiple grids side by side using CSS as shown in the above example. However, it does not work when you want to have a single vertical scrollbar for multiple grids. If normal native scrollbar is used, all rows in a grid have to be displayed and cannot be virtualized. Large number of rows in each grid can introduce performance problem. You can use Grid's scrollbars instead of native scrollbars to enable row virtualization and improve the performance. ","tagName":"p"},{"text":"To link multiple grids together and have only one single vertical scrollbar, use MultiTableManager.synchronizeVScrollbar method. The method requires two elements to host the scrollbars and array of Grid elements. The first element is for hosting Grid vertical scrollbar. The second element is for hosting native horizontal scrollbar and Grid elements. The vertical scrollbar requires separated host element because it has to be float over view and not moved when horizontal scrolling occurs. The setup for element structure is shown below:","tagName":"p"},{"text":"<div id=\"v_scrollbar_host\">\n    <div id=\"h_scrollbar_host\">\n        <efx-grid></efx-grid>\n        <efx-grid></efx-grid>\n    </div>\n</div>","tagName":"pre"},{"text":"The height for the grid can be specified on the vertical scrollbar host. If so, make sure that the height of horizontal scrollbar host is set to 100%. The width of the grid can be set on the element itself or on every column of the grid.","tagName":"p"},{"text":"Side by side Grids Example","tagName":"h3"},{"text":"<div id=\"v_scrollbar_host\">\n  <div id=\"h_scrollbar_host\">\n    <efx-grid id=\"grid_1\"></efx-grid>\n    <efx-grid id=\"grid_2\"></efx-grid>\n  </div>\n</div>\n<hr>","tagName":"pre"},{"text":"var gen = DataGenerator;\nvar fields = [\"companyName\", \"percent\", \"number_2\", \"bid\", \"ask\"];\n\nvar records1 = gen.generateRecords(fields, { seed: 1, rowCount: 20 });\nvar records2 = gen.generateRecords(fields, { seed: 100, rowCount: 20 });\n\nvar configObj1 = {\n  defaultColumnOptions: {\n    width: 100\n  },\n  sorting: {\n    initialSort: {\n      colIndex: 3,\n      sortOrder: \"d\"\n    }\n  },\n  columns: [\n    { name: fields[0], field: fields[0], width: 120 },\n    { name: fields[1], field: fields[1] },\n    { name: fields[2], field: fields[2], colorText: true },\n    { name: \"Bid\", field: \"bid\" }\n  ],\n  staticDataRows: records1\n};\nvar configObj2 = {\n  sorting: {\n    initialSort: {\n      colIndex: 0,\n      sortOrder: \"a\"\n    }\n  },\n  columns: [\n    { name: \"Ask\", field: \"ask\" },\n    { name: fields[2], field: fields[2], colorText: true },\n    { name: fields[1], field: fields[1] },\n    { name: fields[0], field: fields[0] }\n  ],\n  staticDataRows: records2\n};\n\nvar grid1 = document.getElementById(\"grid_1\");\nvar grid2 = document.getElementById(\"grid_2\");\n\ngrid1.config = configObj1;\ngrid2.config = configObj2;\n\nMultiTableManager.synchronizeVScrollbar(\n  document.getElementById(\"v_scrollbar_host\"),\n  document.getElementById(\"h_scrollbar_host\"), [grid1, grid2]\n);","tagName":"pre"},{"text":"efx-grid+efx-grid {\n  margin-left: 5px;\n}\n\n#v_scrollbar_host {\n  height: 300px;\n}\n\n#h_scrollbar_host {\n  height: 100%;\n}\n\n#grid_2 {\n  width: 500px;\n}","tagName":"pre"},{"text":"MultiTableManager API Reference","tagName":"h2"},{"text":"Methods","tagName":"h3"},{"text":"synchronizeVScrollbar(vScrollbarHost, hScrollbarHost, gridElems) → {Promise.<Array>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"getColumnCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTable(atopt) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getTableCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"insertColumn(columnOption, idxopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"insertRow(rowOptionopt, atopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeColumn(colRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeRow(atopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setGridConfig(configObjopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setTableCount(num)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"wrapTable(rowCount)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Native HTML table","filename":"utilities/native-table.html","contents":[{"text":"Sometimes you only need a simple table for your app. Native HTML table could be used in place of Grid component for quick and easy table layout. The main advantages of native HTML table is simplicity, flexibility, and style customization. However, manipulating HTML element directly could be tedious and cumbersome. Table class from our utility package can help managing native HTML table with ease.","tagName":"p"},{"text":"HTML table","tagName":"a"},{"text":"HTML table","tagName":"a"},{"text":"Note that Table class only provides JavaScript logic for HTML element manipulation. Styles and CSS are not provided by Grid utility package.","tagName":"p"},{"text":"Table initialization","tagName":"h2"},{"text":"Table class takes two parameters for its constructor. The first parameter is a placeholder element. It is used for positioning the table in the HTML document. The second parameter is a table configuration object, where you can define various parameters and options (e.g., number of columns, number of rows, width, height). For all available options, see Table API Reference section.","tagName":"p"},{"text":"<big>Table with default column size</big>\n<div id=\"table_div1\"></div>\n<hr>\n<big>Table with fixed column size and header section</big>\n<div id=\"table_div2\"></div>","tagName":"pre"},{"text":"var tableDiv1 = document.getElementById(\"table_div1\");\nvar tbl1 = new tr.Table(tableDiv1, {\n  colCount: 4,\n  rowCount: 5,\n  cellHeight: 30\n});\nvar tableDiv2 = document.getElementById(\"table_div2\");\nvar tbl2 = new tr.Table(tableDiv2, {\n  colCount: 4,\n  rowCount: 5,\n  cellWidth: 100,\n  cellHeight: 30,\n  header: 1\n});\ntbl2.getHeader().getCellsInRow(0).forEach(function(cell, idx) {\n  cell.textContent = \"Header \" + (idx + 1);\n});","tagName":"pre"},{"text":"html hr {\n  margin-top: 5px;\n  margin-bottom: 10px;\n}","tagName":"pre"},{"text":"Table structure","tagName":"h2"},{"text":"Table class generates HTML elements and table structure based on the given configuration. The general structure created by the class will look like the code snippet below:","tagName":"p"},{"text":"<div>\n    <table>\n        <colgroup>\n            <col>\n            ...\n        </colgroup>\n        <thead>\n            <tr>\n                <th></th>\n                ...\n            <tr>\n            ...\n        </thead>\n        <tbody>\n            <tr>\n                <td></td>\n                ...\n            </tr>\n            ...\n        </tbody>\n    </table>\n</div>","tagName":"pre"},{"text":"Table class instance itself represent the placeholder element (root element) and not the table element. The table below shows how to get corresponding element from the Table instance. ","tagName":"p"},{"text":"\nElement\nAPI\n","tagName":"tr"},{"text":"\nPlaceholder element\nTable.getElement()\n","tagName":"tr"},{"text":"\ntable\nTable.getTableElement()\n","tagName":"tr"},{"text":"\ntbody\nTable.getBody().getElement()\n","tagName":"tr"},{"text":"\nthead\nTable.getHeader().getElement()\n","tagName":"tr"},{"text":"\ntfoot\nTable.getFooter().getElement()\n","tagName":"tr"},{"text":"\ntr\nTable.getRow(r), Table.getBody().getRow(r)\n","tagName":"tr"},{"text":"\ntd (tbody)\nTable.getCell(c, r), Table.getBody().getCell(c, r)\n","tagName":"tr"},{"text":"\nth (thead)\nTable.getHeaderCell(c, r), Table.getHeader().getCell(c, r)\n","tagName":"tr"},{"text":"\ntd (tfoot)\nTable.getFooterCell(c, r), Table.getFooter().getCell(c, r)\n","tagName":"tr"},{"text":"Table manipulation","tagName":"h2"},{"text":"With Table class, you can add and remove rows and columns at runtime. For changing content and styles, you need to retrieve the element from Table instance, and then manipulate the element properties directly.","tagName":"p"},{"text":"To change number of rows, use addRows and removeRows methods.","tagName":"p"},{"text":"To change number of columns, use addColumns and removeColumns methods. ","tagName":"p"},{"text":"The example below also shows how to change row height of each row in the table.","tagName":"p"},{"text":"<button id=\"add_row_btn\">Add row</button>\n\n<button id=\"rem_row_btn\">Remove row</button>\n<i></i>\n<label for=\"set_row_in\">Set row count:</label>\n<input id=\"set_row_in\" type=\"number\" value=\"6\">\n<hr>\n<button id=\"add_col_btn\">Add column</button>\n<button id=\"rem_col_btn\">Remove column</button>\n<i></i>\n<label for=\"set_col_in\">Set col count:</label>\n<input id=\"set_col_in\" type=\"number\" value=\"6\">\n<hr>\n<button id=\"row_height_btn1\">Compact row height</button>\n<button id=\"row_height_btn2\">Regular row height</button>\n<button id=\"row_height_btn3\">Spacious row height</button>\n<i></i>\n<label for=\"col_width_in\">Set 1st column width:</label>\n<input id=\"col_width_in\" type=\"number\" value=\"150\">\n<hr>\n<div id=\"table_div\"></div>","tagName":"pre"},{"text":"var rowId = 0;\n\nvar tbl = new tr.Table(document.getElementById(\"table_div\"), {\n  colCount: 4,\n  rowCount: 7,\n  cellWidth: 100,\n  rowHeight: 30,\n  header: 1\n});\nvar cells = tbl.getCellsInColumn(0);\ncells.forEach(function(cell) {\n  cell.textContent = \"\" + (rowId++);\n});\ntbl.getHeader().getCellsInRow(0).forEach(function(cell, idx) {\n  cell.textContent = \"Header \" + (idx + 1);\n});\ntbl.getHeaderCell(0, 0).textContent = \"Row id\";\n\ndocument.getElementById(\"add_row_btn\").addEventListener(\"click\", function(e) {\n  var ary = tbl.addRows();\n  var trElem = ary[0];\n  var cell = trElem.cells[0];\n  cell.textContent = \"\" + (rowId++);\n});\ndocument.getElementById(\"rem_row_btn\").addEventListener(\"click\", function(e) {\n  tbl.removeRows(1);\n});\ndocument.getElementById(\"set_row_in\").addEventListener(\"change\", function(e) {\n  var rowCount = +e.currentTarget.value;\n  if (rowCount !== rowCount) {\n    return; // Cannot process NaN value;\n  }\n  tbl.setRowCount(rowCount);\n});\n\ndocument.getElementById(\"add_col_btn\").addEventListener(\"click\", function(e) {\n  var colCount = tbl.getColumnCount();\n  tbl.addColumns();\n  tbl.getHeaderCell(colCount, 0).textContent = \"Header \" + (colCount + 1);\n});\ndocument.getElementById(\"rem_col_btn\").addEventListener(\"click\", function(e) {\n  tbl.removeColumns(1);\n});\ndocument.getElementById(\"set_col_in\").addEventListener(\"change\", function(e) {\n  var colCount = +e.currentTarget.value;\n  if (colCount !== colCount) {\n    return; // Cannot process NaN value;\n  }\n  tbl.setColumnCount(colCount);\n});\n\ndocument.getElementById(\"row_height_btn1\").addEventListener(\"click\", function(e) {\n  tbl.setDefaultRowHeight(24);\n  tbl.getElement().classList.add(\"compact\");\n});\ndocument.getElementById(\"row_height_btn2\").addEventListener(\"click\", function(e) {\n  tbl.setDefaultRowHeight(30);\n  tbl.getElement().classList.remove(\"compact\");\n});\ndocument.getElementById(\"row_height_btn3\").addEventListener(\"click\", function(e) {\n  tbl.setDefaultRowHeight(36);\n  tbl.getElement().classList.remove(\"compact\");\n});\n\ndocument.getElementById(\"col_width_in\").addEventListener(\"change\", function(e) {\n  var width = +(e.currentTarget.value);\n  if (!width) {\n    width = 100;\n  }\n  tbl.setColMinWidths(width, 0);\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\ni:empty {\n  padding-left: 20px;\n}\n\n.compact td,\n.compact th {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n\ntd:nth-child(1),\nth:nth-child(1) {\n  text-align: center;\n}\n\n#table_div {\n  height: 300px;\n}","tagName":"pre"},{"text":"Cell manipulation","tagName":"h2"},{"text":"Table class does not provide APIs for modifying its cells. However, you can get cell elements through various Table APIs.","tagName":"p"},{"text":"To get a single cell element from the body section of the table, use getCell method.","tagName":"p"},{"text":"To get all cell elements in a single column from the body section of the table, use getCellsInColumn method.","tagName":"p"},{"text":"To get all cell elements in a single row from the body section of the table, use getCellsInRow method.","tagName":"p"},{"text":"To set colSpan or rowSpan on a cell, use spanBlock method","tagName":"p"},{"text":"Event listeners can be added on Table instance and its sub table (i.e., body section) for all native events. To add an event listener to Table instance, use addEventListener method.","tagName":"p"},{"text":"The example below shows how to set cell span and get cell position from a mousemove event.","tagName":"p"},{"text":"<button id=\"span_btn\">Span cells</button>\n\n<button id=\"reset_btn\">Clear cell span</button>\n<hr>\n<span>Starting from:</span>\n<input id=\"from_col_in\" type=\"number\" value=\"0\">\n<input id=\"from_row_in\" type=\"number\" value=\"0\">\n<i></i>\n<span>Span size:</span>\n<input id=\"col_span_in\" type=\"number\" value=\"2\">\n<input id=\"row_span_in\" type=\"number\" value=\"2\">\n<hr>\n<div>\n  <div id=\"table_div\"></div>\n  <textarea id=\"msg_ta\"></textarea>\n</div>","tagName":"pre"},{"text":"var fields = [\"id\", \"companyName\", \"market\", \"industry\", \"CF_LAST\"];\nvar colCount = fields.length;\nvar rowCount = 10;\nvar records = tr.DataGenerator.generateRecords(fields, rowCount);\nvar tbl = new tr.Table(document.getElementById(\"table_div\"), {\n  colCount: colCount,\n  rowCount: rowCount,\n  rowHeight: 30,\n  header: 1\n});\ntbl.setColumnWidths([60, 150, 100, 200, 100]);\nvar cells = tbl.getAllHeaderCells();\nvar cell;\nvar record;\ncells.forEach(function(cell, idx) {\n  cell.textContent = fields[idx];\n});\nfor (var r = 0; r < rowCount; ++r) {\n  record = records[r];\n  cells = tbl.getCellsInRow(r);\n  for (var c = 0; c < colCount; ++c) {\n    cell = cells[c];\n    cell.textContent = record[fields[c]];\n  }\n}\n\nvar bodyTbl = tbl.getBody();\nvar headTbl = tbl.getHeader();\nbodyTbl.addEventListener(\"mousemove\", onMouseMoveOverBody);\n\nfunction onMouseMoveOverBody(e) {\n  var colIndex = bodyTbl.getColumnIndex(e);\n  var rowIndex = bodyTbl.getRowIndex(e);\n  var cell = bodyTbl.getCell(colIndex, rowIndex);\n  var cellContent = cell ? cell.textContent : null;\n\n  var lines = [\n    \"Column index: \" + colIndex,\n    \"Row index: \" + rowIndex,\n    \"Cell content: \" + cellContent\n  ];\n  msg_ta.value = lines.join(\"\\n\");\n}\n\nvar fromColIn = document.getElementById(\"from_col_in\");\nvar fromRowIn = document.getElementById(\"from_row_in\");\nvar colSpanIn = document.getElementById(\"col_span_in\");\nvar rowSpanIn = document.getElementById(\"row_span_in\");\ndocument.getElementById(\"span_btn\").addEventListener(\"click\", function(e) {\n  var c1 = +fromColIn.value;\n  var r1 = +fromRowIn.value;\n\n  var colSpan = +colSpanIn.value;\n  var rowSpan = +rowSpanIn.value;\n  var c2 = c1 + colSpan - 1;\n  var r2 = r1 + rowSpan - 1;\n\n  tbl.spanBlock(c1, c2, r1, r2);\n});\ndocument.getElementById(\"reset_btn\").addEventListener(\"click\", function(e) {\n  var c1 = +fromColIn.value;\n  var r1 = +fromRowIn.value;\n  tbl.spanBlock(c1, c1, r1, r1);\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\ni:empty {\n  padding-left: 20px;\n}\n\ninput[type=\"number\"] {\n  width: 50px;\n}\n\ntd:nth-child(1),\nth:nth-child(1) {\n  text-align: center;\n}\n\n#table_div {\n  display: inline-block;\n}\n\n#msg_ta {\n  height: 260px;\n  width: 100px;\n  vertical-align: top;\n}","tagName":"pre"},{"text":"QuoteLine example","tagName":"h2"},{"text":"You are free to customize the table in any way you like. Table class is just a utility that helps you create HTML table and provide some APIs for accessing some part of the table.","tagName":"p"},{"text":"<div id=\"table_div\">\n\n</div>","tagName":"pre"},{"text":"var tbl = new tr.Table(table_div, {\n  colCount: 9,\n  rowCount: 8,\n  cellWidth: 100,\n  rowHeight: 30,\n  header: 1\n});\ntbl.setColMinWidths(30, 6);\ntbl.setColMinWidths(110, 7);\ntbl.setColMinWidths(110, 8);\nvar cellTexts = [\n  [\"\", \"GBP=\", \"\", \"\", \"\", \"1.1926\", \"/\", \"1.1930\", \"0.71%\"],\n  [\"UK Pound Sterling/US Dollar FX Spot Rate\", \"\", \"\", \"\", \"\", \"SANTANDER\", \"\", \"HKG\", \"SAHK\"],\n  [\"Change Summary\", \"\", \"Daily View\", \"\", \"\", \"Weekly\", \"\", \"Monthly\", \"Yearly\"],\n  [\"MTD %\", \"-0.78 %\", \"O\", 1.1843, \"High\", 1.2065, \"\", 1.2088, 1.2447],\n  [\"3M %\", \"-2.68 %\", \"H\", 1.1936, \"H Date\", \"01-Mar-2023\", \"\", \"01-Mar-2023\", \"23-Jan-2023\"],\n  [\"6M %\", \"2.93 %\", \"L\", 1.1832, \"Low \", 1.1805, \"\", 1.1805, 1.1805],\n  [\"YTD %\", \"1.41 %\", \"C\", 1.1842, \"L Date\", \"08-Mar-2023\", \"\", \"08-Mar-2023\", \"08-Mar-2023\"],\n  [\"Latest Trade\", \"\", \"09-Mar-2023 15:33\", \"\", \"\", \"\", \"\", \"\", \"\"]\n];\n\nhideMiddleBorders(0, 1);\nhideMiddleBorders(2, 3);\nhideMiddleBorders(4, 5);\n\nspanColumn(1, 0, 3);\nspanColumn(2, 0, 1);\nspanColumn(2, 2, 3);\nspanColumn(7, 0, 1);\nspanColumn(7, 2, 5);\n\ntbl.getRow(0).classList.add(\"big-font\");\ntbl.getRow(2).classList.add(\"blue-font-color\");\n\ntbl.getCellsInColumn(6).forEach(addClass.bind(null, \"align-center\"));\ntbl.getCellsInColumn(0).slice(2).forEach(addClass.bind(null, \"blue-font-color\"));\ntbl.getCellsInColumn(2).slice(2).forEach(addClass.bind(null, \"blue-font-color\"));\ntbl.getCellsInColumn(4).slice(2).forEach(addClass.bind(null, \"blue-font-color\"));\n\naddClass(\"red-font-color\", tbl.getCell(1, 3));\naddClass(\"red-font-color\", tbl.getCell(1, 4));\naddClass(\"green-font-color\", tbl.getCell(1, 5));\naddClass(\"green-font-color\", tbl.getCell(1, 6));\ntbl.getCellsInRow(0).slice(5, 8).forEach(addClass.bind(null, \"green-font-color\"));\n\nvar colCount = tbl.getColumnCount();\nvar rowCount = tbl.getRowCount();\nfor (var r = 0; r < rowCount; ++r) {\n  var rowText = cellTexts[r];\n  for (var c = 0; c < colCount; ++c) {\n    var cellText = rowText[c];\n    var cell = tbl.getCell(c, r);\n    cell.textContent = cellText;\n  }\n}\n\nvar newsIcon = document.createElement(\"coral-icon\");\nnewsIcon.icon = \"news\";\naddClass(\"blue-font-color\", newsIcon);\ntbl.getCell(0, 0).appendChild(newsIcon);\n\nvar downIcon = document.createElement(\"coral-icon\");\ndownIcon.icon = \"hollow-arrow-down\";\naddClass(\"red-font-color\", downIcon);\ntbl.getCell(2, 0).appendChild(downIcon);\n\naddClass(\"red-bg-color\", tbl.getCell(8, 0));\n\nfunction spanColumn(rowIndex, c1, c2) {\n  tbl.spanBlock(c1, c2, rowIndex, rowIndex);\n}\n\nfunction hideMiddleBorders(c1, c2) {\n  var rowCount = tbl.getRowCount();\n  for (var r = 0; r < rowCount; ++r) {\n    var cell1 = tbl.getCell(c1, r);\n    var cell2 = tbl.getCell(c2, r);\n    cell1.classList.add(\"no-border-right\");\n    cell2.classList.add(\"no-border-left\");\n  }\n}\n\nfunction addClass(classStr, elem) {\n  elem.classList.add(classStr);\n}","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\n#table_div {\n  display: inline-block;\n}\n\ntd.no-border-right,\n.no-border-right td {\n  border-right-width: 0;\n}\n\ntd.no-border-left,\n.no-border-left td {\n  border-left-width: 0;\n}\n\n.big-font {\n  font-size: 2em;\n}\n\n.big-font td {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.blue-font-color {\n  color: blue;\n}\n\n.red-font-color {\n  color: red;\n}\n\n.red-bg-color {\n  background-color: red;\n}\n\n.green-font-color {\n  color: green;\n}\n\n.align-center {\n  text-align: center;\n}","tagName":"pre"},{"text":"Table 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":"                            colCount                                                    number                                                                                        <optional>                                                                                                                            0                                                        Number of columns        ","tagName":"tr"},{"text":"                            rowCount                                                    number                                                                                        <optional>                                                                                                                            0                                                        Number of rows in content table (tbody)        ","tagName":"tr"},{"text":"                            cellWidth                                                    number                                                                                        <optional>                                                                                                                                                Default cell width of each column        ","tagName":"tr"},{"text":"                            cellHeight                                                    number                                                                                        <optional>                                                                                                                                                Default cell height of each row        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                        <optional>                                                                                                                                                Total width of the table. If it is specified, it will override cellWidth        ","tagName":"tr"},{"text":"                            height                                                    number                                                                                        <optional>                                                                                                                                                Total height of the table. If it is specified, it will override cellHeight        ","tagName":"tr"},{"text":"                            header                                                    number                                                                                        <optional>                                                                                                                            0                                                        Number of header rows        ","tagName":"tr"},{"text":"                            footer                                                    number                                                                                        <optional>                                                                                                                            0                                                        Number of footer rows        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"addColumns(countopt) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addFooterRows(opt_countopt) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addHeaderRows(opt_countopt) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addListener(obj, type)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#addListener","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var obj = {\"mouseUp\": function(e) { console.log(e); }};\nplugin.addListener(obj, \"mouseUp\");\nplugin.addListener(obj, \"mouseDown\");","tagName":"pre"},{"text":"addRows(countopt) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"cloak(tblElem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"distributeColumnWidth()","tagName":"h4"},{"text":"fixateTableWidth(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getAllCells() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllFooterCells() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllHeaderCells() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllRows() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getBody() → {SubTable}","tagName":"h4"},{"text":"SubTable","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"SubTable","tagName":"a"},{"text":"getBoundingClientRect() → {Object}","tagName":"h4"},{"text":"ElementWrapper#getBoundingClientRect","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getCell(c, r) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellPosition(cell, ret_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellsInColumn(c) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellsInRow(r) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellTextContent(c, r) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIndex(e) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnLeft(colIndex, rowIndexopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnTextContent(c) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getElement() → {Element}","tagName":"h4"},{"text":"ElementWrapper#getElement","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getFooter() → {SubTable}","tagName":"h4"},{"text":"SubTable","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"SubTable","tagName":"a"},{"text":"getFooterCell(c, r) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getHeader() → {SubTable}","tagName":"h4"},{"text":"SubTable","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"SubTable","tagName":"a"},{"text":"getHeaderCell(c, r) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getListener(type, idxopt) → {function}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#getListener","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getMousePosition(e, retObjopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getMousePosition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRow(r) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowIndex(e) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRows() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowTextContent(r) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowTop(rowRef) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getTableElement() → {Element}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTableTextContent() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContents() → {Array.<Array.<string>>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasListener(type) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#hasListener","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"init(options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Table~Options","tagName":"a"},{"text":"log(opt_rowLimitopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"loosenTableWidth(opt_boolopt)","tagName":"h4"},{"text":"Table#fixateTableWidth","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"removeAllColumns()","tagName":"h4"},{"text":"removeAllEventListeners()","tagName":"h4"},{"text":"EventDispatcher#removeAllEventListeners","tagName":"a"},{"text":"removeAllRows()","tagName":"h4"},{"text":"removeColumns(opt_countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeFooterRows(opt_countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeHeaderRows(opt_countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeRows(countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setCellSize(defaultWidth, defaultHeight)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColBackgroundColors(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColBGColors(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColBorders(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColMinWidths(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnCount(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnWidths(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setCRWH(col, row, width, height)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDefaultColumnWidth(valopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDefaultRowHeight(valopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setParent(parent)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setParent","tagName":"a"},{"text":"setRowCount(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSize(width, height)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"spanBlock(c1, c2, r1, r2) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"spanHorizontally(r, bool) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"}]},{"title":"Data genarator","filename":"utilities/data-generator.html","contents":[{"text":"DataGenerator class from grid utility packages is for generating data for testing purpose. ","tagName":"p"},{"text":"To generate data for feeding into Grid, use generateRecords(fields, options) method.","tagName":"p"},{"text":"To add custom field data, use addFieldInfo(field, options or function) method.","tagName":"p"},{"text":"DataGenerator API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"DataOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            seed                                                    number                                                                                        <optional>                                                                                    Seed for randomization. If seed is not specified (default), new set of data will be generated every time. Otherwise, the same set of data will be generated.        ","tagName":"tr"},{"text":"                            numRows                                                    number                                                                                        <optional>                                                                                    Number of rows to be generated        ","tagName":"tr"},{"text":"                            rowCount                                                    number                                                                                        <optional>                                                                                    Alias to numRows        ","tagName":"tr"},{"text":"FieldInformation","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            type                                                    string                                                                                        <optional>                                                                                    Available types are number, float, boolean, set, function, and isoDate        ","tagName":"tr"},{"text":"                            prefix                                                    string                                                                                        <optional>                                                                                    Add a text prefix to the data        ","tagName":"tr"},{"text":"                            suffix                                                    string                                                                                        <optional>                                                                                    Add a text suffix to the data        ","tagName":"tr"},{"text":"                            min                                                    number                                                                                        <optional>                                                                                    Minimum value of the numeric data        ","tagName":"tr"},{"text":"                            max                                                    number                                                                                        <optional>                                                                                    Maximum value of the numeric data. This is exclusive (not included in the result).        ","tagName":"tr"},{"text":"                            prec                                                    string                                                                                        <optional>                                                                                    Precision (place number after the decimal point) of the numeric data.        ","tagName":"tr"},{"text":"                            fixedValue                                                    string                                                                                        <optional>                                                                                    Single/static/constant value        ","tagName":"tr"},{"text":"                            members                                                    Array                                                                                        <optional>                                                                                    List of possible data when the type is \"set\"        ","tagName":"tr"},{"text":"                            generate                                                    function                                                                                        <optional>                                                                                    Function for generating data when the type is \"function\"        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"addFieldInfo(field, options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~FieldInformation","tagName":"a"},{"text":"generate(fields, optionsopt) → {Array.<Array>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"generateRecord(fields, optionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"generateRecords(fields, optionsopt) → {Array.<Object>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"randBetween(minopt, maxopt, seedopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randBoolean(seedopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randDate(minopt, maxopt, seedopt) → {Date}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randIndex(max, seedopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randInt(min, max, seedopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randMember(set, seedopt) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randNumber(minopt, maxopt, precopt, seedopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randString(minopt, maxopt, subTypeopt, seedopt) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"toRecords(data2D, fieldsopt) → {Array.<Object>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"generate(fields, optionsopt) → {Array.<Array>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"generateQuoteData(field, optionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"generateRecords(fields, optionsopt) → {Array.<Object>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSeed() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"randBetween(minopt, maxopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randBoolean() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"randDate(minopt, maxopt) → {Date}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randIndex(max) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randInt(min, max) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randMember(set) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randNumber(minopt, maxopt, precopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randString(minopt, maxopt) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setSeed(seed)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Column Format Dialog","filename":"widgets/column-format-dialog.html","contents":[{"text":"Column Format Dialog","tagName":"h2"},{"text":"The Column Format Dialog is a user-friendly interface for column display customization. It can format a column's value display from General to Number, Scaled, Percent or Datetime, and so on.","tagName":"p"},{"text":"Features","tagName":"h3"},{"text":"Demo","tagName":"h3"},{"text":"Right-click on each column header to see the dialog.","tagName":"p"},{"text":" Language:\n<select id=\"lang_selector\">\n  <option value=\"en\">English</option>\n  <option value=\"ja\">Japanese</option>\n  <option value=\"de\">German</option>\n  <option value=\"zh\">Simplified Chinese</option>\n  <option value=\"zh-Hant\">Traditional Chinese</option>\n</select>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var columnFormattingExt = new ColumnFormatting();\nvar contextMenuExt = new ContextMenu();\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"CF_VOLUME\", \"TR.IPODate\"];\nvar records = 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, alignment: \"right\" },\n    { name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\" },\n    { name: \"Volume\", field: fields[4], alignment: \"right\" },\n    { name: \"IPO date\", field: fields[5], width: 100 }\n  ],\n  dataModel: {\n    data: records\n  },\n  contextMenu: {\n    items: {\n      MENU_1: {\n        text: 'Format',\n        callback: function(e) {\n          var lang = document.getElementById(\"lang_selector\").value;\n          columnFormattingExt.openDialog(e.colIndex, {\n            lang: lang\n          });\n        }\n      }\n    },\n    onMenu: function(e) {\n      e.menu.addItem('MENU_1');\n    }\n  },\n  extensions: [\n    columnFormattingExt,\n    contextMenuExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"textarea {\n  width: 100%;\n  height: 100px;\n}\n\nefx-grid {\n  min-height: 500px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"For more information about the extension see the Column Formatting Extension page.","tagName":"p"},{"text":"Column Formatting Extension","tagName":"a"},{"text":"Setup guide","tagName":"h3"},{"text":"First, let's import the modules.","tagName":"p"},{"text":"// efx-grid\nimport '@refinitiv-ui/efx-grid';\nimport '@refinitiv-ui/efx-grid/themes/halo/light';\n\n// extensions\nimport {\n  ConditionalColoring,\n  HeatMap,\n  TextFormatting,\n  ColumnFormatting\n } from '@refinitiv-ui/efx-grid/extensions';\n\n// Column Formatting Dialog module\nimport '@refinitiv-ui/efx-grid/column-format-dialog';\nimport '@refinitiv-ui/efx-grid/column-format-dialog/themes/halo/light';","tagName":"pre"},{"text":"Create a new Column Formatting Extension instance and push it to an extensions configuration.","tagName":"p"},{"text":"var cfe = new ColumnFormatting();\n\nvar configObj = {\n  extensions: [\n    cfe,\n    new TextFormatting(),\n    new HeatMap(),\n    new ConditionalColoring()\n  ],\n  columns: columns, // Columns config\n  dataModel: { // Data config\n    fields: fields,\n    data: dataRows\n  },\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"To open the dialog, you need to call openDialog() method on the extension object.","tagName":"p"},{"text":"cfe.openDialog(0); // Change \"0\" to any column index.\n\n// Or open the dialog with specific configuration.\ncfe.openDialog(0, {\n  supportDisplayStyleOptions: {\n    fx: true,\n  },\n  supportValueFormatOptions: {\n    fx: true\n  }\n  supportHighlightApplyToSwitch: true,\n  data: {\n    'fieldList': [{'value': 'col1'}, {'value': 'col2'}, {'value': 'col3'}, {'value': 'col4'}, {'value': 'col5'}],\n    'valueFormatTab': {'formatType': 'general'},\n    'colorTextTab': {'colorText': {'field': 'col2'}},\n    'displayStyleTab': {'general': {'alignment': 'center'}, 'mode': 'general'},\n    'fieldDataType': 'general'\n  },\n  fields: [\"intCol\", \"strCol\", \"boolCol\", \"floatCol\", \"dateCol\"],\n});","tagName":"pre"},{"text":"Changing Language","tagName":"h3"},{"text":"For more information about internationalization and how is it applied in different contexts see Language Support.","tagName":"p"},{"text":"Language Support","tagName":"a"},{"text":"Using with Context Menu Extension","tagName":"h3"},{"text":"Context Menu Extension","tagName":"a"},{"text":"For most cases, you will want the dialog button to appear when the user right-clicks on the column header (known as the context menu).","tagName":"p"},{"text":"To do this, simply import Context Menu extension and its configurations.","tagName":"p"},{"text":"import {\n  ContextMenu,\n  ColumnFormatting,\n  TextFormatting,\n  HeatMap,\n  ConditionalColoring\n} from '@refinitiv-ui/efx-grid/extensions';\n\nvar cfe = new ColumnFormatting();\n\nvar configObj = {\n  extensions: [\n    cfe,\n    new ContextMenu(),\n    new TextFormatting(),\n    new HeatMap(),\n    new ConditionalColoring()\n  ],\n  columns: columns, // Columns config\n  dataModel: { // Data config\n    fields: fields,\n    data: dataRows\n  },\n  contextMenu: {\n    items: {\n      MENU_1: {\n        text: \"Format\",\n        callback: function (e) {\n          // Open the dialog when click on the \"Format\" menu\n          cfe.openDialog(e.colIndex);\n        }\n      },\n    },\n    onMenu: function (e) {\n      e.menu.addItem(\"MENU_1\");\n    }\n  },\n};","tagName":"pre"},{"text":"And that's it!","tagName":"p"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Config","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            data                                                    Object                                                                                                                                        Context object indicating current states of the column        ","tagName":"tr"},{"text":"                            supportHighlightApplyToSwitch                                                    boolean                                                                                        <optional>                                                                                    support HighlightApplyToSwitch        ","tagName":"tr"},{"text":"                            supportValueFormatOptions                                                    ColumnFormatDialog~SupportValueFormatOptions                                                                                        <optional>                                                                                    Support FxFormat        ","tagName":"tr"},{"text":"ColumnFormatDialog~SupportValueFormatOptions","tagName":"a"},{"text":"                            supportDisplayStyleOptions                                                    ColumnFormatDialog~SupportDisplayStyleOptions                                                                                        <optional>                                                                                    Support items in \"Display Style\" dropdown        ","tagName":"tr"},{"text":"ColumnFormatDialog~SupportDisplayStyleOptions","tagName":"a"},{"text":"                            fields                                                    Array.<string>                                                                                        <optional>                                                                                    List of available fields to be shown in the dialog        ","tagName":"tr"},{"text":"                            confirm                                                    function                                                                                        <optional>                                                                                    Confirm event callback        ","tagName":"tr"},{"text":"                            cancel                                                    function                                                                                        <optional>                                                                                    Cancel event callback        ","tagName":"tr"},{"text":"SupportDisplayStyleOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            bar                                                    boolean                                                            support \"bar\"        ","tagName":"tr"},{"text":"SupportValueFormatOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            fx                                                    boolean                                                            support \"fx\"        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"hide()","tagName":"h4"},{"text":"init(userConfigopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnFormatDialog~Config","tagName":"a"},{"text":"show()","tagName":"h4"},{"text":"updateDataWithAutosuggest(selectedItem, autoSuggest)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Column Selection Dialog","filename":"widgets/column-selection-dialog.html","contents":[{"text":"Column Selection Dialog","tagName":"h2"},{"text":"The Column Selection Dialog is UI for managing Grid's columns.","tagName":"p"},{"text":"Features","tagName":"h3"},{"text":"Demo","tagName":"h3"},{"text":"Click on Open Dialog button to see the dialog.","tagName":"p"},{"text":" Language:\n<select id=\"lang_selector\">\n  <option value=\"en\">English</option>\n  <option value=\"ja\">Japanese</option>\n  <option value=\"de\">German</option>\n  <option value=\"zh\">Simplified Chinese</option>\n  <option value=\"zh-Hant\">Traditional Chinese</option>\n</select>\n<ef-button id=\"open_btn\">Open Dialog</ef-button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"CF_VOLUMN\", \"date\", \"PCTCHNG2\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 6 });\n\nvar allColumns = [\n  { name: \"Company\", field: fields[0], disabled: true },\n  { name: \"Market\", field: fields[1], width: 100 },\n  { name: \"Last\", field: fields[2], width: 80, alignment: \"right\" },\n  { name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\" },\n  { name: \"Industry\", field: fields[4] },\n  { name: \"Volumn\", field: fields[5], alignment: \"right\" },\n  { name: \"IPO Date\", field: fields[6] },\n  { name: \"Pct. Chng\", field: fields[7], alignment: \"right\" }\n];\n\nvar configObj = {\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.columns = [\n  allColumns[0],\n  allColumns[1],\n  allColumns[2],\n  allColumns[3],\n  allColumns[4]\n];\n\nvar dialog = document.createElement(\"column-selection-dialog\");\ndialog.config = {\n  data: allColumns,\n  defaultItems: grid.columns\n};\ndialog.addEventListener(\"confirm\", function(e) {\n  grid.columns = e.detail.value;\n});\n\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  var lang = document.getElementById(\"lang_selector\").value;\n  dialog.lang = lang;\n  dialog.visibleItems = grid.api.getConfigObject().columns;\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Setup guide","tagName":"h3"},{"text":"// efx-grid\nimport '@refinitiv-ui/efx-grid';\nimport '@refinitiv-ui/efx-grid/themes/halo/light';\n\n// Column Selection Dialog module\nimport '@refinitiv-ui/efx-grid/column-selection-dialog';\nimport '@refinitiv-ui/efx-grid/column-selection-dialog/themes/halo/light';","tagName":"pre"},{"text":"Create a column-selection-dialog using the document.createElement method. This way, the column-selection-dialog DOM instance will not be mounted initially.","tagName":"p"},{"text":"var dialog = document.createElement(\"column-selection-dialog\");","tagName":"pre"},{"text":"Then you need to subscribe to confirm event which will be fired when the user has confirmed their changes. It is also required to directly manipulate grid.columns with the e.detail.value like below.","tagName":"p"},{"text":"dialog.addEventListener(\"confirm\", function (e) {\n  var grid = document.getElementById(\"grid\");\n  grid.columns = e.detail.value;\n});","tagName":"pre"},{"text":"By default, once users click Done the dialog will automatically hide. In order to prevent the dialog from closing (eg. Validate something before closing), use beforeConfirm event and set e.cancel to true.","tagName":"p"},{"text":"dialog.addEventListener(\"beforeConfirm\", function (e) {\n  if (/*Some logic*/) {\n    e.cancel = true;\n    window.alert(\"Don't hide the dialog\");\n  }\n});","tagName":"pre"},{"text":"Then set initial data using the init(configObj) method. This takes a configuration object consisting of two properties, data and visibleItems. Alternatively, the same configuration can be set through config property. For example, dialog.config = configObj;","tagName":"p"},{"text":"var columns = [/* Grid Column Option */];\nvar grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.config = {/* Grid Option */};\ngrid.columns = columns; // Explicitly set columns, otherwise it will be undefined\n\ndialog.config = {\n  data: columns, // All columns\n  visibleItems: grid.columns // Currently visible columns\n};","tagName":"pre"},{"text":"Note: grid.columns needs to be set explicitly due to limitations of the Grid.","tagName":"p"},{"text":"Finally, to open the dialog you need to call dialog.show() method on dialog element.","tagName":"p"},{"text":"dialog.show();","tagName":"pre"},{"text":"Changing Language","tagName":"h3"},{"text":"For more information about internationalization and how is it applied in different contexts see Language Support.","tagName":"p"},{"text":"Language Support","tagName":"a"},{"text":"Multi Level with Column Selection","tagName":"h3"},{"text":"<button id=\"open_btn\">Open Dialog</button>\n\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"CF_VOLUMN\", \"date\", \"PCTCHNG2\"];\nvar records = DataGenerator.generateRecords(fields, 20);\n\nvar allColumns = [\n  { name: \"Company\", field: fields[0], disabled: true },\n  { name: \"Market\", field: fields[1], width: 100 },\n  { name: \"Last\", field: fields[2], width: 80, alignment: \"right\" },\n  { name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\" },\n  { name: \"Industry\", field: fields[4] },\n  { name: \"Volumn\", field: fields[5], alignment: \"right\" },\n  { name: \"IPO Date\", field: fields[6] },\n  { name: \"Pct. Chng\", field: fields[7], alignment: \"right\" }\n];\n\nvar configObj = {\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.columns = [\n  allColumns[0],\n  allColumns[1],\n  allColumns[2],\n  allColumns[3],\n  allColumns[4]\n];\n\nvar columnTree = [\n  allColumns[0],\n  {\n    label: 'Basic Info',\n    items: [\n      allColumns[1],\n      allColumns[4],\n      allColumns[6]\n    ]\n  },\n  {\n    label: 'Trading Info',\n    items: [{\n        label: 'Net.',\n        items: [\n          allColumns[2],\n          allColumns[3],\n          allColumns[5]\n        ]\n      },\n      {\n        label: 'Percent',\n        items: [\n          allColumns[7]\n        ]\n      }\n    ]\n  }\n];\n\nvar dialog = document.createElement(\"column-selection-dialog\");\ndialog.config = {\n  data: columnTree\n};\n\ndialog.addEventListener(\"confirm\", function(e) {\n  grid.columns = e.detail.value;\n});\n\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  dialog.visibleItems = grid.api.getConfigObject().columns;\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Disabled column","tagName":"h3"},{"text":"In case you do not want specific columns to move out of the grid, you can set the flag as disabled for that specific column, as the example below:","tagName":"p"},{"text":"var columns = [/* Grid Column Option */];\nvar grid = document.getElementById(\"grid_id\");\ngrid.config = {/* Grid Option */};\ngrid.columns = columns; // Explicitly set columns, otherwise it will be undefined\n\ncolumns[1].disabled = true; // To prevent this column from moving between the lists\ndialog.config = {\n    data: columns, // All columns\n    visibleItems: columns// Currently visible columns\n};","tagName":"pre"},{"text":"Stationary column","tagName":"h3"},{"text":"In case you are having pinned columns, and you do not want pinned columns to be moved or removed from the grid, you can enable the stationary flag to disable select and moving operation for that specific column.","tagName":"p"},{"text":"<button id=\"open_btn\">Open Dialog</button>\n\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"CF_VOLUMN\", \"date\", \"PCTCHNG2\"];\nvar records = DataGenerator.generateRecords(fields, 20);\n\nvar allColumns = [\n  { name: \"Company\", field: fields[0], width: 250, leftPinned: true, stationary: true },\n  { name: \"Market\", field: fields[1], width: 250 },\n  { name: \"Last\", field: fields[2], width: 120, alignment: \"right\" },\n  { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n  { name: \"Industry\", field: fields[4], width: 200 },\n  { name: \"Volumn\", field: fields[5], width: 100, alignment: \"right\" },\n  { name: \"IPO Date\", field: fields[6], width: 100 },\n  { name: \"Pct. Chng\", field: fields[7], width: 100, alignment: \"right\" }\n];\n\nvar configObj = {\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.columns = [\n  allColumns[0],\n  allColumns[1],\n  allColumns[2],\n  allColumns[3],\n  allColumns[4]\n];\n\nvar columnTree = [\n  allColumns[0],\n  {\n    label: 'Basic Info',\n    items: [\n      allColumns[1],\n      allColumns[4],\n      allColumns[6]\n    ]\n  },\n  {\n    label: 'Trading Info',\n    items: [{\n        label: 'Net.',\n        items: [\n          allColumns[2],\n          allColumns[3],\n          allColumns[5]\n        ]\n      },\n      {\n        label: 'Percent',\n        items: [\n          allColumns[7]\n        ]\n      }\n    ]\n  }\n];\n\nvar dialog = document.createElement(\"column-selection-dialog\");\ndialog.config = {\n  data: columnTree\n};\n\ndialog.addEventListener(\"confirm\", function(e) {\n  grid.columns = e.detail.value;\n});\n\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  dialog.visibleItems = grid.api.getConfigObject().columns;\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Note: ","tagName":"p"},{"text":"Hide Columns in Visible Columns","tagName":"h3"},{"text":"There is a use case where you might not want some columns to be moved. You can disable the number of columns in the visible columns using excludedColumns config.","tagName":"p"},{"text":"dialog.config = {\n    // Other dialog config\n    excludedColumns: 2, // This will make column index 0-1 hidden in the Visible Columns.\n};","tagName":"pre"},{"text":"Default Columns","tagName":"h3"},{"text":"The \"RESTORE DEFAULT\" button will show only when defaultItems has been set. This button will reset all visible columns to default.","tagName":"p"},{"text":"var allColumns = [\n    {name: \"Company\", field: fields[0], disabled: true},\n    {name: \"Market\", field: fields[1], width: 100},\n    {name: \"Last\", field: fields[2], width: 80, alignment: \"right\"},\n    {name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\"},\n    {name: \"Industry\", field: fields[4]},\n    {name: \"Volumn\", field: fields[5], alignment: \"right\"},\n    {name: \"IPO Date\", field: fields[6]},\n    {name: \"Pct. Chng\", field: fields[7], alignment: \"right\"}\n];\n\ngrid.columns = [\n    allColumns[0],\n    allColumns[1],\n    allColumns[2],\n    allColumns[3],\n    allColumns[4]\n];\n\ndialog.config = {\n    // Other dialog config\n    defaultItems: grid.columns\n};","tagName":"pre"},{"text":"Note: availableItems is deprecated.","tagName":"p"},{"text":"Restoring columns with retaining sorting and filtering states","tagName":"h3"},{"text":"The Column Selection Dialog only provides column information to the user. If you wish to retain certain states, such as sorting and filtering, you will need to utilize the grid API to restore the updated data back to the grid from your side.","tagName":"p"},{"text":"In the example below, we will demonstrate how to retain the sorting and filtering state in the grid when confirming the column selection dialog.","tagName":"p"},{"text":"<button id=\"open_btn\">Open Dialog</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var rowFilteringExt = new RowFiltering();\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"CF_VOLUMN\", \"date\", \"PCTCHNG2\"];\nvar records = DataGenerator.generateRecords(fields, 20);\nvar allColumns = [\n  { name: \"Company\", field: fields[0], disabled: true },\n  { name: \"Market\", field: fields[1], width: 100 },\n  { name: \"Last\", field: fields[2], width: 80, alignment: \"right\" },\n  { name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\" },\n  { name: \"Industry\", field: fields[4] },\n  { name: \"Volumn\", field: fields[5], alignment: \"right\" },\n  { name: \"IPO Date\", field: fields[6] },\n  { name: \"Pct. Chng\", field: fields[7], alignment: \"right\" }\n];\n\nvar configObj = {\n  dataModel: {\n    data: records\n  },\n  extensions: [rowFilteringExt],\n  rowFiltering: {\n    iconActivation: \"always\"\n  },\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.columns = [\n  allColumns[0],\n  allColumns[1],\n  allColumns[2],\n  allColumns[3],\n  allColumns[4]\n];\n\nvar dialog = document.createElement(\"column-selection-dialog\");\ndialog.config = {\n  data: allColumns,\n  defaultItems: grid.columns\n};\n\ndialog.addEventListener(\"confirm\", function(e) {\n  grid.api.restoreColumns(e.detail.data, true);\n});\n\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  dialog.visibleItems = grid.api.getConfigObject().columns;\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Tag searching","tagName":"h3"},{"text":"To add available tag list to the dialog, set an array of tags to tags property on the dialog configuration object. tags property can also be set on column configuration object for matching. ","tagName":"p"},{"text":"<button id=\"open_btn\">Open Dialog</button>\n<hr>\n<big id=\"msg_big\"></big>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var availableTags = [\"Runner\", \"Swimmer\", \"Flier\", \"red\", \"green\", \"blue\"];\nvar fieldDefs = [\n  [\"Red Dog\", [\"red\", \"runner\", \"running\"]],\n  [\"Red Snake\", [\"red\"]],\n  [\"Blue Penguin\", [\"Blue\", \"Runner\", \"Running\", \"Swimmer\"]],\n  [\"Blue Bird\", [\"Blue\", \"Flier\"]],\n  [\"Blue Chicken\", [\"Blue\", \"runner\", \"running\"]],\n  [\"Green Lion\", [\"Green\", \"Runner\", \"running\"]],\n  [\"Red Bat\", [\"red\", \"Flier\"]],\n  [\"Green Frog\", [\"Green\", \"Swimmer\"]],\n  [\"Blue Rabbit\", [\"Blue\", \"Runner\", \"running\"]],\n  [\"Red Fish\", [\"red\", \"Swimmer\"]]\n];\ndocument.getElementById(\"msg_big\").textContent = \"Available tags: \" + availableTags.join(\", \");\nvar columnDefMap = fieldDefs.reduce(function(obj, def) {\n  var field = def[0];\n  var tag = def[1];\n  obj[field] = {\n    field: field,\n    id: field,\n    tags: tag\n  };\n  return obj;\n}, {});\n\nfunction idToColumnDef(colId) {\n  return columnDefMap[colId] || null;\n}\n\nvar fields = Object.keys(columnDefMap);\nvar availableColumns = Object.values(columnDefMap);\n\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\nvar configObj = {\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\ngrid.columns = availableColumns.slice(0, 4);\n\nfunction onConfirm(e) {\n  grid.columns = e.detail.value;\n}\n\nvar dialog = null;\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  if (!dialog) {\n    dialog = document.createElement(\"column-selection-dialog\");\n\n    dialog.config = {\n      data: availableColumns,\n      confirm: onConfirm,\n      tags: availableTags,\n      infoTooltip: \"Search Column to add to the right list. Press Tab to add a Tag. Available tags for Search: Red, Blue, Green, Runner, Swimmer, and Flier\",\n      searchPlaceholder: \"Search Column. Press Tab to add a Tag\"\n    };\n  }\n\n  var columnIds = grid.api.getColumnIds();\n  dialog.visibleItems = columnIds.map(idToColumnDef);\n\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Config","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            data                                                    Array.<Object>                                                                                                                                                                                                    All possible columns for selection.        ","tagName":"tr"},{"text":"                            visibleItems                                                    Array.<Object>                                                                                        <optional>                                                                                                                                                Column list that is in existing Grid.        ","tagName":"tr"},{"text":"                            defaultItems                                                    Array.<Object>                                                                                        <optional>                                                                                                                                                Column list that is default.        ","tagName":"tr"},{"text":"                            confirm                                                    function                                                                                        <optional>                                                                                                                                                Confirm event callback.        ","tagName":"tr"},{"text":"                            cancel                                                    function                                                                                        <optional>                                                                                                                                                Cancel event callback.        ","tagName":"tr"},{"text":"                            excludedColumns                                                    number                                                                                        <optional>                                                                                                                                                Deprecated, Alias wigh excludedLeftColumns.        ","tagName":"tr"},{"text":"                            excludedLeftColumns                                                    number                                                                                        <optional>                                                                                                                                                Number of columns on the left side that should be hidden from Visible Columns.        ","tagName":"tr"},{"text":"                            excludedRightColumns                                                    number                                                                                        <optional>                                                                                                                                                Number of columns on the right side that should be hidden from Visible Columns.        ","tagName":"tr"},{"text":"                            unmovableColumns                                                    number                                                                                        <optional>                                                                                                                                                Depricated, Alias with stationary column option. Number of columns that is unmovable in Visible Columns.        ","tagName":"tr"},{"text":"                            descriptionBox                                                    boolean                                                                                        <optional>                                                                                                                                                Show description box        ","tagName":"tr"},{"text":"                            middleSeparator                                                    string                                                                                        <optional>                                                                                                                                                Field of column which used as middle separator to divide grid into two sides        ","tagName":"tr"},{"text":"                            collapseAll                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Default collapse property applies to all groups        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                        <optional>                                                                                                                                                Specify width of the dialog, with the minimum width of 490px        ","tagName":"tr"},{"text":"                            height                                                    number                                                                                        <optional>                                                                                                                                                Specify height of the dialog        ","tagName":"tr"},{"text":"                            tags                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        All available tags for filtering        ","tagName":"tr"},{"text":"                            infoTooltip                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        If specified, an informational icon will appear on the top with the given text as its tooltip        ","tagName":"tr"},{"text":"                            searchPlaceholder                                                    string                                                                                        <optional>                                                                                                                            \"Search\"                                                        Placeholder text inside the search input.        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"hide()","tagName":"h4"},{"text":"init(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnSelectionDialog~Config","tagName":"a"},{"text":"show()","tagName":"h4"}]},{"title":"Filter Dialog","filename":"widgets/filter-dialog.html","contents":[{"text":"Filter Dialog","tagName":"h2"},{"text":"The Filter Dialog is a user-friendly interface for filtering and sorting. The example below shows how Filter Dialog can be used in conjunction with Row Filtering Extension. Users can hover over column header to show filter icon. Clicking on the icon will open Filter Dialog.","tagName":"p"},{"text":"Row Filtering Extension","tagName":"a"},{"text":"<efx-grid id=\"grid\">\n\n</efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 0, 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: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowFiltering: {\n    iconActivation: \"onHover\"\n  },\n  extensions: [\n    new RowFiltering()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Setup guide","tagName":"h3"},{"text":" // efx-grid\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/light\";\n\n// Extensions\nimport { RowFiltering } from \"@refinitiv-ui/efx-grid/extensions\";\n\n// Filter Dialog module\nimport \"@refinitiv-ui/efx-grid/filter-dialog\";\nimport \"@refinitiv-ui/efx-grid/filter-dialog/themes/halo/light\";  // !Important. Theme must be imported.\n","tagName":"pre"},{"text":"The dialog cannot be used without Row Filtering Extension. So, initialize Row Filtering Extension instance and add it to extensions property on the grid configuration object. To open the dialog, you can either use iconActivation property or openDialog method from the extension.","tagName":"p"},{"text":"var rowFilteringExt = new RowFiltering();\n\nvar configObj = {\n    extensions: [\n        rowFilteringExt\n    ],\n    rowFiltering:{\n        iconActivation: \"onHover\"\n    },\n    columns: columns, // Columns config\n    staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid_id\");\ngrid.config = configObj;\n\nfunction onClickButton(e) {\n  rowFilteringExt.openDialog(columnIndex);\n}","tagName":"pre"},{"text":"Advanced condition tab","tagName":"h3"},{"text":"Filter dialog has three types of condition tabs: generic value condition (default), numeric value condition, and date time value condition. Each type has a different list of available operators. For example, numeric value condition contains only nemeric operators, such as Less than or Greater than operators. To specify the type for the dialog, define fieldDataType property on the column configuration object to one of the following values: number, datetime, and text or nothing (default). ","tagName":"p"},{"text":"<efx-grid id=\"grid\">\n\n</efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"CF_NETCHNG\", \"ISODate\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 20 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: \"companyName\" },\n    { name: \"Company (text)\", field: \"companyName\", fieldDataType: \"text\" },\n    { name: \"Date (generic)\", field: \"ISODate\", width: 180 },\n    { name: \"Date (datetime)\", field: \"ISODate\", width: 180, fieldDataType: \"datetime\" },\n    { name: \"Change (generic)\", field: \"CF_NETCHNG\", width: 130 },\n    { name: \"Change (number)\", field: \"CF_NETCHNG\", width: 130, fieldDataType: \"number\" }\n  ],\n  staticDataRows: records,\n  rowFiltering: {\n    iconActivation: \"onHover\"\n  },\n  extensions: [\n    new RowFiltering()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Dialog options","tagName":"h3"},{"text":"Filter Dialog can be customized by setting dialogOptions property on the Row Filtering Extension configuration object as shown in the following code snippet:","tagName":"p"},{"text":"var configObj = {\n    rowFiltering: {\n        dialogOptions: {\n            sortUI: false\n        }\n    }\n};","tagName":"pre"},{"text":"The options will be applied for every column in the grid. The options can be overriden on a column basis by using beforeDialogOpened event. You can specify dialogOptions property on the event argument and override the options set on the grid level as shown in the following code snippet:","tagName":"p"},{"text":"var configObj = {\n    rowFiltering: {\n        dialogOptions: {\n            sortUI: false\n        },\n        beforeDialogOpened: function(e) {\n            if(e.field === \"field A\") {\n                e.dialogOptions = {\n                    sortUI: true\n                };\n            }\n        }\n    }\n};","tagName":"pre"},{"text":"Customizing filter item list","tagName":"h3"},{"text":"By default, the item list in Filter Dialog is generated from existing data on the column, where the dialog is openned. Any duplicate value is automatically removed from the list. If there is formatting applied by Text Formatting Extension on the column, the items will also be formatted. ","tagName":"p"},{"text":"itemList property on the dialog options can be used to replace the autogenerated one. This is useful when you want to prevent some values from being available for  filtering. ","tagName":"p"},{"text":"additionalItems property on the dialog options can be used to add more values to the existing list. The property can be used to include some nonexistent values (e.g., you have some server side filtering).","tagName":"p"},{"text":"formattedDataAccessor property on the dialog options allows you to specify a method for transforming and displaying items on the list. The method will be called on each item and it should return the formatted text you want to display in the dialog. The method can also be used to retrieve data from an object (i.e., data with non-premitive data type).","tagName":"p"},{"text":"sortLogic property on the dialog options allows you to specify a method for reordering items on the list. The method will be used by Array.sort method","tagName":"p"},{"text":"Array.sort method","tagName":"a"},{"text":"<efx-grid id=\"grid\">\n\n</efx-grid>","tagName":"pre"},{"text":"var sortIdInDescendingOrder = function(valA, valB) {\n  if (valA < valB) {\n    return 1;\n  }\n  if (valB < valA) {\n    return -1;\n  }\n  return 0;\n};\nvar booleanToYesNo = function(val) {\n  if (val != null) {\n    return val ? \"Yes\" : \"No\";\n  }\n  return \"\";\n};\nvar onBeforeDialogOpened = function(e) {\n  var colIndex = e.colIndex;\n  if (colIndex === 0) { // id\n    e.dialogOptions = {\n      sortLogic: sortIdInDescendingOrder\n    };\n  } else if (colIndex === 2) { // replacement\n    e.dialogOptions = {\n      itemList: [\"Left\", \"Center\", \"Right\"]\n    };\n  } else if (colIndex === 3) { // addition\n    e.dialogOptions = {\n      additionalItems: [1, 0, \"N/A\"]\n    };\n  } else if (colIndex === 4) { // formatted\n    e.dialogOptions = {\n      formattedDataAccessor: booleanToYesNo\n    };\n  }\n};\nvar fields = [\"id\", \"boolean\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 10 });\nvar configObj = {\n  rowFiltering: {\n    iconActivation: \"onHover\",\n    beforeDialogOpened: onBeforeDialogOpened\n  },\n  columns: [\n    { name: \"Id\", field: \"id\", width: 80 },\n    { name: \"Boolean (default)\", field: \"boolean\" },\n    { name: \"Boolean (replacement)\", field: \"boolean\" },\n    { name: \"Boolean (addition)\", field: \"boolean\" },\n    { name: \"Boolean (formatted)\", field: \"boolean\" }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new RowFiltering()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 300px;\n}","tagName":"pre"},{"text":"Changing dialog language","tagName":"h3"},{"text":"For more information about internationalization and how is it applied in different contexts see Language Support.","tagName":"p"},{"text":"Language Support","tagName":"a"},{"text":"Opening Filter Dialog using an API","tagName":"h3"},{"text":"The dialog can be openned from anywhere, not just from filter icon on the column header. Use openDialog method from Row Filtering extension instance, so that the dialog can be openned for specific column and linked up with grid instance. ","tagName":"p"},{"text":"The following example illustrates how the dialog can be opened from context menu using Context Menu Extension. Right click on the column header to see the dialog.","tagName":"p"},{"text":"Context Menu Extension","tagName":"a"},{"text":" Language:\n<select id=\"lang_selector\">\n    <option value=\"en\">English</option>\n    <option value=\"ja\">Japanese</option>\n    <option value=\"de\">German</option>\n    <option value=\"zh\">Simplified Chinese</option>\n    <option value=\"zh-Hant\">Traditional Chinese</option>\n</select>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var rowFilteringExt = new RowFiltering();\nvar contextMenuExt = new ContextMenu();\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"ISODate\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], sortable: true, fieldDataType: \"text\" },\n    { name: \"Market\", field: fields[1], width: 100, sortable: true, fieldDataType: \"text\" },\n    { name: \"Last\", field: fields[2], width: 100, sortable: true, fieldDataType: \"number\" },\n    { name: \"Net. Chng\", field: fields[3], width: 100, sortable: true, fieldDataType: \"number\" },\n    { name: \"IPO Date\", field: fields[4], sortable: true, fieldDataType: \"datetime\" }\n  ],\n  dataModel: {\n    data: records\n  },\n  contextMenu: {\n    items: {\n      MENU_1: {\n        text: \"Filter\",\n        callback: function(e) {\n          var colIndex = e.colIndex;\n          var lang = document.getElementById(\"lang_selector\").value;\n          var dialogOptions = {\n            sortUI: true, // Show sorting section\n            filterUI: true, // Show filtering section\n            lang: lang,\n            fieldDataType: grid.api.getColumnDataType(colIndex)\n          };\n          rowFilteringExt.openDialog(colIndex, dialogOptions);\n        }\n      },\n    },\n    onMenu: function(e) {\n      e.menu.addItem(\"MENU_1\");\n    }\n  },\n  extensions: [\n    rowFilteringExt,\n    contextMenuExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Listening an event","tagName":"h3"},{"text":"If you want to do a custom task after the dialog has been commited, you can listen for dialogCommitted event from Row Filtering Extension. The change from the dialog will be passed as value property in the event argument. ","tagName":"p"},{"text":"var onDialogCommitted = function (e) {\n    if(e.value) { // When user confirm dialog\n        console.log(e)\n    } else { // When user sort data from dialog\n        console.log(e);\n    }\n}\n\nvar gridConfig = {\n    rowFiltering: {\n        dialogCommitted: onDialogCommitted\n    }\n};\n\n// Alternatively\nrowFilteringExt.addEventListener(\"dialogCommitted\", onDialogCommitted);","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Config","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            data                                                    Object                                                                                                                                        Column data        ","tagName":"tr"},{"text":"                            sortState                                                    string                                                                                        <optional>                                                                                    \"a\" for ascending or \"d\" for descending        ","tagName":"tr"},{"text":"                            sortUI                                                    boolean                                                                                        <optional>                                                                                    Show Sort area        ","tagName":"tr"},{"text":"                            filterUI                                                    boolean                                                                                        <optional>                                                                                    Show Filter area        ","tagName":"tr"},{"text":"                            blankValues                                                    string | boolean                                                                                        <optional>                                                                                    Display a Blanks item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item        ","tagName":"tr"},{"text":"                            filterChanged                                                    function                                                                                        <optional>                                                                                    Filter changed handler        ","tagName":"tr"},{"text":"                            confirm                                                    function                                                                                        <optional>                                                                                    Alias of filterChanged        ","tagName":"tr"},{"text":"                            cancel                                                    function                                                                                        <optional>                                                                                    Alias of dialog cancel        ","tagName":"tr"},{"text":"                            sortChanged                                                    function                                                                                        <optional>                                                                                    Sort changed handler        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"hide()","tagName":"h4"},{"text":"hideSortUI(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"init(options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"FilterDialog~Config","tagName":"a"},{"text":"setSortState(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"show()","tagName":"h4"}]},{"title":"Language Support","filename":"widgets/language-support.html","contents":[{"text":"Widgets support localization, including translated messages and formatting. In your app, setting your html lang attribute will trigger that language to be applied to widget elements.","tagName":"p"},{"text":"<html lang=\"ja\">\n\n</html>","tagName":"pre"},{"text":"Alternatively, setting the lang attribute directly on elements will have the same effect.","tagName":"p"},{"text":"lang on an element supersedes the html lang, meaning multiple languages can exist on the same page.","tagName":"p"},{"text":"var dialog = document.createElement(\"column-selection-dialog\");\ndialog.lang = \"ja\";","tagName":"pre"},{"text":"Currently, the following languages are supported:","tagName":"p"},{"text":"\nLanguage\nlang value\n","tagName":"tr"},{"text":"\nEnglish (default)\nen\n","tagName":"tr"},{"text":"\nJapanese\nja\n","tagName":"tr"},{"text":"\nGerman\nde\n","tagName":"tr"},{"text":"\nSimplified Chinese\nzh\n","tagName":"tr"},{"text":"\nTraditional Chinese\nzh-Hant\n","tagName":"tr"},{"text":"If an unsupported language is set, English is the default fallback.","tagName":"p"},{"text":"More details about localization is avaiable on Internationalization","tagName":"p"},{"text":"Internationalization","tagName":"a"}]},{"title":"Using Core APIs","filename":"misc/core-apis.html","contents":[{"text":"Core Grid is the internal part of Grid, containing logics for UI and layout manipulation. Grid is just a wrapper that make the JavaScript grid component (Core Grid) become a custom element in the Web Components standard. ","tagName":"p"},{"text":"custom element","tagName":"a"},{"text":"Web Components","tagName":"a"},{"text":"Some of the APIs are already propagated and exposed to the api property of the element. However, most of the APIs are still only available in the core part of Grid. ","tagName":"p"},{"text":"To unlock all the APIs you need to get a reference to the Core Grid by using the getCoreGrid method from api as shown in the below sample:","tagName":"p"},{"text":"var grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.addEventListener(\"configured\", function(e) {\n    var core = e.detail.api.getCoreGrid(); // Getting Core Grid reference\n\n    var titleSection = core.getSection(\"title\");\n    var contentSection = core.getSection(\"content\");\n    var colCount = core.getColumnCount();\n});","tagName":"pre"},{"text":"Note: The custom elements are not defined immediately after the page load. api will only be available after the element is defined. So, use the configured event to ensure the existence of the api property.","tagName":"p"},{"text":"custom elements","tagName":"a"},{"text":"For all available Core Grid APIs, see this page.","tagName":"p"},{"text":"this page","tagName":"a"},{"text":"Getting built-in plugins and extensions","tagName":"h2"},{"text":"Due to the long history of its development, Grid contains a lot of legacy codes, including built-in plugins. A plugin is just an old name for an extension. So, to get a reference for plugins or extensions, you can use the getPlugin method from the Core Grid. ","tagName":"p"},{"text":"Note: The \"SortableTitlePlugin\" is the only notable plugin worth mentioning among built-in plugins, since it manages how Grid sorts the data. ","tagName":"p"},{"text":"The following example shows how you can listen to the columnSorted event fired after each sorting state change from the SortableTitlePlugin.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"<big id=\"msg_div\">Click grid top section to sort</big>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\n\nvar onColumnSorted = function(e) {\n  msg_div.textContent = \"Column \" + e.colIndex + \" is sorted in \" + (e.sortOrder === \"a\" ? \"ascending\" : \"descending\") + \" order\";\n};\n\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};\n\nvar grid = document.getElementById(\"grid\");\ngrid.addEventListener(\"configured\", function(e) {\n  var core = e.detail.api.getCoreGrid();\n\n  var plugin = core.getPlugin(\"SortableTitle\");\n  plugin.listen(\"columnSorted\", onColumnSorted);\n});\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Note: you can use the listen method to listen to a custom event fired from Grid and Grid's plugins, instead of the conventional addEventListener method.","tagName":"p"}]},{"title":"Pagination","filename":"misc/pagination.html","contents":[{"text":"In case you want to retrieve a chunk of data from the server and do not want to load all of the data at once, you need to do server side pagination. The pagination component is enough to do this. Do not use the Pagination Extension for server side pagination. ","tagName":"p"},{"text":"pagination","tagName":"a"},{"text":"All related logics (such as data requesting, validation, and transformation) must be implemented on the application side. Once data is received, you can just assign data to Grid's data property. ","tagName":"p"},{"text":"See more details about data setting at Columns and Data Properties.","tagName":"p"},{"text":"Columns and Data Properties","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"    function onServerResponse(data) {\n        hideLoadingMask();\n        grid.data = data; // Setting data from server\n    }\n    function onRowCountRecieved(total) {\n        pagination_ui.max = Math.ceil(total / PAGE_SIZE);\n    }\n    function onPageChanged(e) {\n        requestData(e.detail.value, PAGE_SIZE, onServerResponse);\n    }","tagName":"pre"},{"text":"<div id=\"container_div\">\n  <atlas-blotter id=\"grid\"></atlas-blotter>\n  <emerald-pagination id=\"pagination_ui\" value=\"1\"></emerald-pagination>\n</div>","tagName":"pre"},{"text":"var paginationUI = document.getElementById(\"pagination_ui\");\nvar SERVER_DELAY = 300;\nvar loading_mask = document.createElement(\"amber-loader\");\nvar PAGE_SIZE = 5;\n\nfunction showLoadingMask() {\n  if (!loading_mask.parentElement) {\n    container_div.classList.add('blur');\n    container_div.append(loading_mask);\n  }\n\n  paginationUI.disabled = true;\n}\n\nfunction hideLoadingMask() {\n  if (loading_mask.parentElement) {\n    container_div.classList.remove('blur');\n    loading_mask.parentElement.removeChild(loading_mask);\n  }\n\n  paginationUI.disabled = false;\n}\n\n// Event handlers\nfunction onServerResponse(data) {\n  hideLoadingMask();\n  grid.data = data; // Setting data from server\n}\n\nfunction onRowCountRecieved(total) {\n  paginationUI.max = Math.ceil(total / PAGE_SIZE);\n}\n\nfunction onPageChanged(e) {\n  requestData(e.detail.value, PAGE_SIZE, onServerResponse);\n}\n\n// Mocking Server\nfunction requestTotalPage(callback) {\n  setTimeout(function() { // Simulate network delay when requesting data from server\n    callback(serverData.length);\n  }, SERVER_DELAY);\n}\n\nfunction requestData(page, itemPerPage, callback) {\n  showLoadingMask();\n  page = parseInt(page);\n  itemPerPage = parseInt(itemPerPage);\n  setTimeout(function() { // Simulate network delay when requesting data from server\n    var start = itemPerPage * (page - 1);\n    var end = start + itemPerPage;\n    callback(serverData.slice(start, end));\n  }, SERVER_DELAY);\n}\n\n// Mocking Data\nvar totalCount = 100;\ntr.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 serverData = tr.DataGenerator.generateRecords(fields, { numRows: totalCount });\n\n// Initializing UIs\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  // ,dataModel: {...} Initial data is optional\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\npaginationUI.addEventListener(\"value-changed\", onPageChanged);\n\n// Start app by getting total number of items and data\nrequestTotalPage(onRowCountRecieved);\nrequestData(paginationUI.value, PAGE_SIZE, onServerResponse);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}\n\nemerald-pagination {\n  margin-bottom: 30px;\n}\n\n.blur {\n  filter: blur(2px);\n}","tagName":"pre"},{"text":"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.","tagName":"p"},{"text":"pagination","tagName":"a"},{"text":"Pagination Extension","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>\n<emerald-pagination id=\"pagination\"></emerald-pagination>","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: 100 });\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  dataModel: {\n    data: records\n  },\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"}]},{"title":"Loading Mask","filename":"misc/loading-mask.html","contents":[{"text":"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.","tagName":"p"},{"text":"loader","tagName":"a"},{"text":"Basic Example","tagName":"h2"},{"text":"<button id=\"show_btn\">Show Masking</button>\n<button id=\"hide_btn\">Hide Masking</button>\n<br><br>\n<div id=\"container_div\">\n  <atlas-blotter id=\"grid\"></atlas-blotter>\n</div>","tagName":"pre"},{"text":"var loadingMaskEl = document.createElement(\"amber-loader\"); // Element can be created at runtime \n\ntr.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: 10 });\nvar configObj = {\n  columns: [\n    { name: \"ID\", field: fields[5], alignment: \"center\", width: 80 },\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(\"show_btn\").addEventListener(\"click\", function() {\n  document.getElementById(\"container_div\").appendChild(loadingMaskEl);\n});\n\ndocument.getElementById(\"hide_btn\").addEventListener(\"click\", function() {\n  loadingMaskEl.remove();\n});","tagName":"pre"},{"text":"#container_div {\n  position: relative;\n  /*amber-loader has position absolute*/\n  height: 250px;\n}\n\natlas-blotter {\n  height: 100%;\n}","tagName":"pre"},{"text":"Infinite Scrolling with Data Fetching Example","tagName":"h2"},{"text":"<button id=\"fetch_btn\">Fetch Data</button>\n\n<button id=\"clear_btn\">Clear Data</button>\n<big>Total rows: <span id=\"total_row\">0</span></big>\n<br>\n<div id=\"container_div\">\n  <atlas-blotter id=\"grid\"></atlas-blotter>\n</div>","tagName":"pre"},{"text":"var loading_mask = null; // Cache the element for re-using multiple times\ntr.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\"];\n\nfunction fetchData() { // Simulate Data Fetching\n  if (!loading_mask) { // If we are not loading anything\n    toggleLoadingMask();\n    setTimeout(onDataReceived, 1500); // Simulate delay for communication with a server\n  }\n};\n\nfunction clearData() {\n  grid.api.removeAllRows();\n  document.getElementById(\"total_row\").textContent = 0;\n};\n\nfunction onDataReceived() {\n  toggleLoadingMask(); // Remove loading mask\n\n  var records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\n  grid.api.addStaticDataRows(records);\n\n  document.getElementById(\"total_row\").textContent = grid.api.getRowCount(); // Update UI\n}\n\nfunction onScrollEnd(e) {\n  var vScrollbar = grid.api.getCoreGrid().getVScrollbar();\n  if (vScrollbar.isEndOfVerticalScroll()) {\n    fetchData();\n  }\n}\n\nfunction toggleLoadingMask() {\n  if (loading_mask) {\n    grid.classList.remove(\"blur\");\n\n    loading_mask.remove();\n    loading_mask = null;\n  } else {\n    grid.classList.add(\"blur\");\n\n    loading_mask = document.createElement(\"amber-loader\");\n    document.getElementById(\"container_div\").appendChild(loading_mask);\n  }\n}\n\nvar configObj = {\n  columns: [\n    { name: \"ID\", field: fields[5], alignment: \"center\", width: 80 },\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};\n\nvar grid = document.getElementById(\"grid\");\ngrid.addEventListener(\"configured\", function(e) {\n  fetchData();\n  var vScrollbar = e.detail.api.getCoreGrid().getVScrollbar();\n  vScrollbar.listen(\"scroll\", onScrollEnd);\n});\ngrid.config = configObj;\n\ndocument.getElementById(\"fetch_btn\").addEventListener(\"click\", fetchData);\ndocument.getElementById(\"clear_btn\").addEventListener(\"click\", clearData);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 250px;\n}\n\n.blur {\n  filter: blur(2px);\n}\n\n#container_div {\n  position: relative;\n  /*amber-loader has position absolute*/\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"50,000 Rows Handling","filename":"misc/fifty-thosand-rows.html","contents":[{"text":"Grid utilizes a virtual rendering technique that renders a range of visible rows and uses/shares the same cells across multiple rows. This allows you to display an extraordinarily large number of rows on the grid, as shown in the example below.","tagName":"p"},{"text":"Note that by default, the grid's wheel scrolling behavior will skip multiple rows based on the total number of rows, to avoid small and tiresome scrolling. Use the linearWheelScrolling flag to enable native wheel scrolling behavior.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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: 5000 });\nvar configObj = {\n  linearWheelScrolling: true,\n  columns: [\n    { name: \"ID\", field: fields[5], alignment: \"center\", width: 80 },\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: 500px;\n}","tagName":"pre"}]},{"title":"Row Span","filename":"misc/row-span.html","contents":[{"text":"Setting row span on a cell can be done through Core Grid API (e.g., setCellRowSpan). A cell with row span will simply be expanded on top of cells below it. Cells are not actually merged by row span, but appeared as if they are merged together.","tagName":"p"},{"text":"Since cells in grid are reused across multiple rows by default, rowVirtualization need to be turned off for row span to work properly.","tagName":"p"},{"text":"Row virtualization mode","tagName":"h2"},{"text":"Grid does not support row span in row virtualization mode. The row virtualization mode can be set using rowVirtualization: false in the configs.","tagName":"p"},{"text":"Example 1: setting row span after initialization","tagName":"h3"},{"text":"<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"id\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 10 });\nvar configObj = {\n  rowVirtualization: false,\n  columns: [\n    { name: \"Row Index\", field: fields[0], width: 60 },\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.addEventListener(\"configured\", function(e) {\n  var core = e.detail.api.getCoreGrid();\n  var section = core.getSection('content');\n  section.setCellRowSpan(1, 0, 2);\n  section.setCellRowSpan(4, 4, 3);\n  section.setCellRowSpan(0, 4, 4);\n});\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Example 2: setting row span in data binding","tagName":"h3"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"id\", \"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 20 });\n\nvar onCustomBinding = function(e) {\n  if (e.rowIndex % 2 === 0) {\n    e.section.setCellRowSpan(e.colIndex, e.rowIndex, 2);\n  }\n  e.cell.setContent(e.data);\n};\n\nvar configObj = {\n  rowVirtualization: false,\n  columns: [\n    { name: \"Row Index\", field: fields[0], width: 60 },\n    { name: \"Company Name\", field: fields[1], width: 120, binding: onCustomBinding },\n    { name: \"Market\", field: fields[2], width: 120, binding: onCustomBinding },\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};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 300px;\n  margin-bottom: 40px;\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"Row Expansion","filename":"misc/row-expansion.html","contents":[{"text":"Row expansion is an extra row that is extended directly from a normal row. It's a great place to show extra information which cannot normally be shown on a single row. ","tagName":"p"},{"text":"It looks just like a normal row but, unlike a normal row, it has no data from the main data table associated with it. This means that the states or data of the row expansion have to come from the expanded row. Grid will not perform sorting or filtering on the row expansion, as it has no data. ","tagName":"p"},{"text":"In effect, row expansion is completely different from row grouping, where rows are grouped based on their data. Row expansion is tightly connected to the expanded row and cannot be separated. When the expanded row is moved, the row expansion is also moved. So, be aware that operations like sorting, filtering, or pagination can still have an impact on how row expansion is displayed.","tagName":"p"},{"text":"To add a row expansion, call addRowExpansion(rowId) or toggleRowExpansion(rowId) from Grid's data view. rowId is the row ID of the row to be expanded. ","tagName":"p"},{"text":"To remove all row expansions at once, use removeAllRowExpansions(). ","tagName":"p"},{"text":"To get existing rows with an expansion, use getRowsWithExpansion().","tagName":"p"},{"text":"To render content on the row expansion, define renderer property of rowExpansion on the grid configuration object, like so:","tagName":"p"},{"text":"var configObj = {\n    //...\n    rowExpansionBinding: function (e) {\n        var rowIndex = e[\"rowIndex\"];\n        var section = e[\"section\"];\n\n        if(e.rowExpansion) {\n            // render\n            var rowData = e.originalRowData;\n            var cell = section.stretchCell(0, rowIndex);\n            var str = \"expanded from row \\\"\" + rowData[\"col1\"] + \", \" + rowData[\"col2\"] + \", \" + rowData[\"col3\"] + \"\\\"\";\n            cell.setContent(str);\n            cell.setStyle(\"background-color\", \"lightblue\");\n        } else {\n            //dispose\n            var cell = section.stretchCell(0, rowIndex, false);\n            cell.setStyle(\"background-color\", \"\");\n        }\n    },\n    //...\n};","tagName":"pre"},{"text":"Note: the same cell element is used for both normal row and row expansion due to the virtualization technique. Any custom style has to be removed using the dispose part.","tagName":"p"},{"text":"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.","tagName":"p"},{"text":"<button id=\"save_states\">Save</button>\n\n<button id=\"load_states\">Load</button>\n<button id=\"clear_row_expan\">Clear all row expansions</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<hr>\n<pre id=\"msg\"></pre>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 1, numRows: 10 });\n\nfunction onCellCliked(e) {\n  var pos = grid.api.getRelativePosition(e);\n  if (pos.sectionType === \"content\") { // Prevent clicking on header section\n    var dv = grid.api.getDataView();\n    dv.toggleRowExpansion(pos.rowIndex);\n  }\n}\n\ndocument.getElementById(\"save_states\").addEventListener(\"click\", function() {\n  var dv = grid.api.getDataView();\n  var rowWithExpansions = dv.getRowsWithExpansion();\n  var rowIds = rowWithExpansions.filter(function(id) {\n    return id;\n  });\n\n  msg.textContent = \"Row Ids saved:\\n\" + JSON.stringify(rowIds, null, 4);\n  sessionStorage.setItem(\"row_expansion_data\", JSON.stringify(rowIds));\n});\n\ndocument.getElementById(\"load_states\").addEventListener(\"click\", function() {\n  // Initial row expansion from rowId\n  var dv = grid.api.getDataView();\n  var data = sessionStorage.getItem(\"row_expansion_data\");\n  msg.textContent = \"Data loaded: \" + data;\n  const rowIds = JSON.parse(data);\n  dv.removeAllRowExpansions();\n  for (var rowId of rowIds) {\n    dv.addRowExpansion(rowId);\n  }\n});\n\ndocument.getElementById(\"clear_row_expan\").addEventListener(\"click\", function() {\n  var dv = grid.api.getDataView();\n  dv.removeAllRowExpansions();\n  msg.textContent = \"Row expansions are cleared\";\n});\n\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  rowExpansionBinding: function(e) {\n    var rowIndex = e[\"rowIndex\"];\n    var section = e[\"section\"];\n    var colCount = section.getColumnCount();\n    if (e.rowExpansion) {\n      for (var c = 0; c < colCount; ++c) {\n        var cell = section.getCell(c, rowIndex);\n        cell.setContent(\"Row Expansion_\" + c);\n        cell.setStyle(\"backgroundColor\", \"mistyrose\");\n      }\n    } else {\n      for (var c = 0; c < colCount; ++c) {\n        var cell = section.getCell(c, rowIndex);\n        cell.setStyle(\"backgroundColor\", \"\");\n      }\n    }\n  },\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.addEventListener(\"click\", onCellCliked);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Managing states for row expansion","tagName":"h2"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\n\nvar buttonFormatter = function(e) {\n  var cell = e[\"cell\"];\n  var content = cell.getContent();\n  if (!content || !cell._buttons) {\n    var buttonsContainer = (cell._buttons = document.createElement(\"div\"));\n    var firstButton = document.createElement(\"coral-button\");\n    firstButton.icon = \"edit\";\n    firstButton.addEventListener(\"click\", onFirstClickButton);\n\n    var secondButton = document.createElement(\"coral-button\");\n    secondButton.icon = \"filter\";\n    secondButton.addEventListener(\"click\", onSecondClickButton);\n    buttonsContainer.appendChild(firstButton);\n    buttonsContainer.appendChild(secondButton);\n  }\n  cell.setContent(cell._buttons);\n};\n\nvar onFirstClickButton = function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  var dv = grid.api.getDataView();\n\n  // Save the state to the expanded row\n  dv.setDataAt(pos.rowIndex, \"My_Clicked_Button\", 1);\n\n  dv.toggleRowExpansion(pos.rowIndex);\n};\n\nvar onSecondClickButton = function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  var dv = grid.api.getDataView();\n\n  // Save the state to the expanded row\n  dv.setDataAt(pos.rowIndex, \"My_Clicked_Button\", 2);\n\n  dv.toggleRowExpansion(pos.rowIndex);\n};\n\nvar configObj = {\n  columns: [{\n      name: \"Buttons\",\n      field: \"btnClicked\",\n      binding: buttonFormatter,\n      width: 80,\n      alignment: \"center\"\n    },\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  rowExpansionBinding: function(e) {\n    var rowIndex = e[\"rowIndex\"];\n    var section = e[\"section\"];\n    if (e.rowExpansion) {\n      // render\n      var cell = section.stretchCell(0, rowIndex, true);\n      var rowData = e.originalRowData;\n      if (rowData[\"My_Clicked_Button\"] === 1) {\n        cell.setContent(\"First button was clicked\");\n      } else {\n        cell.setContent(\"Second button was clicked\");\n      }\n      cell.setStyle(\"backgroundColor\", \"mistyrose\");\n      cell.setStyle(\"textAlign\", \"left\");\n    } else {\n      // dispose\n      var cell = section.stretchCell(0, rowIndex, false);\n      cell.setStyle(\"backgroundColor\", \"\");\n      cell.setStyle(\"textAlign\", \"\");\n    }\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"},{"text":"Multiple row expansions from a single row","tagName":"h2"},{"text":"You can specify the number of row expansions to be added on a single row by passing the number as the third parameter for toggleRowExpansion(rowId, null, numRows). ","tagName":"p"},{"text":"Note that row expansion has no row data. So the entire data set for multiple row expansions have to be stored on the expanded row. Luckily, any data structure can be stored on the row data. For instance, you can have an array of objects representing states of row expansions, like so:","tagName":"p"},{"text":"dv.setData(rowId, \"My_Row_Expansion_States\", [ \n    {name: \"Row 1\", value: 1},\n    {name: \"Row 2\", value: 2},\n    // ...\n]);","tagName":"pre"},{"text":"Handling asynchronous content","tagName":"h2"},{"text":"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. ","tagName":"p"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<hr>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\n\nvar onRowExpansionBinding = function(e) {\n  var rowData = e.originalRowData;\n  var rowIndex = e[\"rowIndex\"];\n  var section = e[\"section\"];\n  if (e.rowExpansion && rowData) {\n    // render\n    var cell = section.stretchCell(0, rowIndex, true);\n    cell.setStyle(\"backgroundColor\", \"mistyrose\");\n    section.setRowHeight(rowIndex, 72); // Customized height\n\n    var expContent = cell.getContent();\n    if (!expContent || !expContent._myExpansion) {\n      expContent = document.createElement(\"div\");\n      expContent._myExpansion = true;\n\n      var firstLine = expContent._firstLine = document.createElement(\"div\");\n      var secondLine = expContent._secondLine = document.createElement(\"div\");\n      var loader = expContent._loader = document.createElement(\"amber-loader\");\n      var button = document.createElement(\"button\");\n      button.textContent = \"Column & Row Index\";\n      button.addEventListener(\"click\", function(e) {\n        var pos = grid.api.getRelativePosition(e);\n        alert(pos.colIndex + \", \" + pos.rowIndex);\n      });\n\n      secondLine.appendChild(button);\n\n      expContent.appendChild(firstLine);\n      expContent.appendChild(secondLine);\n      expContent.appendChild(loader);\n    }\n\n    var rowData = e.originalRowData;\n    if (rowData[\"My_Expansion_Status\"] === \"loading\") {\n      expContent._firstLine.style.display = \"none\";\n      expContent._secondLine.style.display = \"none\";\n      expContent._loader.style.display = \"\";\n    } else {\n      expContent._firstLine.style.display = \"\";\n      expContent._secondLine.style.display = \"\";\n      expContent._loader.style.display = \"none\";\n    }\n    cell.setContent(expContent);\n  } else {\n    // dispose\n    var cell = section.stretchCell(0, rowIndex, false);\n    cell.setStyle(\"backgroundColor\", \"\");\n    section.setRowHeight(rowIndex, section.getDefaultRowHeight()); // Default height\n  }\n}\n\nvar onCellCliked = function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  if (pos.sectionType === \"content\") { // Prevent clicking on header section\n    var rowIndex = pos.rowIndex;\n    var rowDef = grid.api.getRowDefinition(rowIndex);\n    if (rowDef) { // Prevent clicking on expanded row\n      var rowId = rowDef.getRowId();\n      var dv = grid.api.getDataView();\n      if (!dv.isRowExpansion(rowId)) {\n        if (rowDef.getData(\"My_Expansion_Status\") == null) {\n          rowDef.setData(\"My_Expansion_Status\", \"loading\");\n          // Simulate delay from data request\n          setTimeout(onServerResponse.bind(null, dv, rowDef), 3000); // Asynchronous\n        }\n        dv.toggleRowExpansion(pos.rowIndex);\n      }\n    }\n  }\n};\nvar onServerResponse = function(dv, rowDef) {\n  if (!dv.isRowExpansion(rowDef.getRowId())) {\n    rowDef.setData(\"My_Expansion_Status\", \"data received\");\n  }\n  grid.api.getCoreGrid().requestRowRefresh(); // WORKAROUND: Force re-rendering\n};\n\nvar configObj = {\n  columnReorder: true,\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  rowExpansionBinding: onRowExpansionBinding,\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.addEventListener(\"click\", onCellCliked);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"}]},{"title":"Text Selection","filename":"misc/text-selection.html","contents":[{"text":"Text selection has 2 scopes. It's grid scope and column scope. The default value of text selection is disabled, but you can enable it. If you enable it, users can select text in scope.","tagName":"p"},{"text":"Grid","tagName":"a"},{"text":"Columns","tagName":"a"},{"text":"Limitation with safari","tagName":"h2"},{"text":"Row Dragging","tagName":"a"},{"text":"Custom Formatter","tagName":"a"},{"text":"Example","tagName":"h3"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar buttonDisplay = {\n  binding: function(e) {\n    var cellData = e.cell;\n    var buttonContent = document.createElement(\"button\");\n    var spanContent = document.createElement(\"span\");\n    buttonContent.addEventListener(\"click\", () => {\n      alert(e.data);\n    });\n    spanContent.textContent = `${e.data}`;\n    buttonContent.appendChild(spanContent);\n    cellData.setContent(buttonContent);\n  }\n};\n\nvar configObj = {\n  rowVirtualRendering: false,\n  textSelect: true,\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], formatter: buttonDisplay, width: 120 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Limitation with row virtualization","tagName":"h2"},{"text":"Text 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.","tagName":"p"},{"text":"Custom Formatter","tagName":"a"},{"text":"Example","tagName":"h3"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>\n<hr>\n<textarea placeholder=\"Paste text here\"></textarea>","tagName":"pre"},{"text":"var fields = [\n  \"id\",\n  \"companyName\",\n  \"market\",\n  \"CF_LAST\",\n  \"CF_NETCHNG\",\n  \"industry\"\n];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 50, seed: 0 });\nvar config = {\n  textSelect: true,\n  columns: [{\n      field: fields[0],\n      name: \"ID\"\n    },\n    {\n      field: fields[1],\n      name: \"Company Name\"\n    },\n    {\n      field: fields[2],\n      name: \"Market\"\n    },\n    {\n      field: fields[3],\n      name: \"Last\"\n    },\n    {\n      field: fields[4],\n      name: \"Net. Chng\"\n    },\n    {\n      field: fields[5],\n      name: \"Industry\"\n    },\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = config;\nwindow.grid = grid;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 300px;\n}\n\ntextarea {\n  height: 200px;\n  width: 100%;\n}","tagName":"pre"},{"text":"Copying all content in the grid without text selection","tagName":"h2"},{"text":"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.","tagName":"p"},{"text":"Example","tagName":"h3"},{"text":"<div id=\"header\"> Click for focus in the grid and copy text with &quot;ctrl+c&quot; inside grid, it will be write your clipboard with all data in the grid </div>\n<div id=\"feedback\"></div>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<hr>\n<textarea placeholder=\"Paste text here\"></textarea>","tagName":"pre"},{"text":"var fields = [\n  \"id\",\n  \"companyName\",\n  \"market\",\n  \"CF_LAST\",\n  \"CF_NETCHNG\",\n  \"industry\"\n];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 50, seed: 0 });\nvar config = {\n  columns: [{\n      field: fields[0],\n      name: \"ID\"\n    },\n    {\n      field: fields[1],\n      name: \"Company Name\"\n    },\n    {\n      field: fields[2],\n      name: \"Market\"\n    },\n    {\n      field: fields[3],\n      name: \"Last\"\n    },\n    {\n      field: fields[4],\n      name: \"Net. Chng\"\n    },\n    {\n      field: fields[5],\n      name: \"Industry\"\n    },\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = config;\nwindow.grid = grid;\n\ngrid.addEventListener(\"click\", onGridClick);\ngrid.addEventListener(\"copy\", onGridCopy);\n\nfunction onGridClick(e) {\n  // We need to listen for a click event on the grid to focus on it, which will allow us to track the copy event\n  grid.api.focus();\n}\n\nfunction onGridCopy(e) {\n  // When the grid is focused, the listen function will be triggered and we can provide data to be copied to the clipboard before the copy event occurs\n  var allNames = grid.api.getColumnNames();\n\n  var i;\n  var colValues = allNames;\n\n  var rows = grid.api.getMultipleRowData();\n\n  // We can use the join method to map the rows of object data to a string, separating each row with a tab character. This can be useful when trying to paste the data into an Excel spreadsheet.\n  var rowValues = rows.map(function(row) {\n    return [\n      row[\"id\"],\n      row[\"companyName\"],\n      row[\"market\"],\n      row[\"CF_LAST\"],\n      row[\"CF_NETCHNG\"],\n      row[\"industry\"]\n    ].join(\"\\t\");\n  });\n  var text = colValues.join(\"\\t\") + \"\\n\" + rowValues.join(\"\\n\");\n  e.clipboardData.setData(\"text/plain\", text);\n  // Below is a feedback message that is displayed to the user when they have successfully copied text. The message will automatically clear after 3 seconds\n  feedback.textContent = \"Successfully copied text from the grid\";\n  setTimeout(function(e) {\n    feedback.textContent = \"\";\n  }, 3000);\n\n  e.preventDefault();\n}","tagName":"pre"},{"text":"atlas-blotter {\n  height: 300px;\n}\n\ntextarea {\n  height: 200px;\n  width: 100%;\n}\n\n#feedback {\n  color: green;\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"Emerald Grid","filename":"migrating/from-emerald-grid.html","contents":[{"text":"Emerald Grid has a lot of built-in features which make it big. Moving from Emerald Grid to EFX Grid usually involves around using extensions as a replacement for the built-ins. In this guide, we are going to list out all the differences and how you can migrate those features to EFX grid. ","tagName":"p"},{"text":"Deprecated properties","tagName":"h2"},{"text":"The following properties are available in Emerald Grid configuration object, but not available in EFX Grid configuration object. ","tagName":"p"},{"text":"formatter property","tagName":"h3"},{"text":"Change","tagName":"h4"},{"text":"formatter, formatter.render, and formatter.bind properties should be replaced by binding property. Any logic in formatter.render method should be combined with formatter.bind method for simplication. The parameters passed to formatter.render and formatter.bind methods are grouped into a single parameter in binding method.","tagName":"p"},{"text":"Reason","tagName":"h4"},{"text":"formatter property requires render and bind methods to be defined, which is quite clunky. In addition, there are too many parameters passed to the methods. Most of them are not useful in most cases. They are locked into the function signature. They are inflexible and cumbersome to write.","tagName":"p"},{"text":"Sample","tagName":"h4"},{"text":"If you have the following Emerald Grid configuration:","tagName":"p"},{"text":"var configObj = {\n    columns: [\n        {\n            // Column options\n            formatter: {\n                render: function() {},\n                binding: function(rowIndex, colIndex, data, cell) {\n                    var inputElem = cell.getContent();\n                    if (!inputElem) {\n                        inputElem = document.createElement(\"input\");\n                    }\n\n                    inputElem.value = data;\n                    cell.setContent(inputElem);\n                }\n            }\n        },\n        ...\n    ]\n\n};","tagName":"pre"},{"text":"then you would change to the following EFX Grid configuration:","tagName":"p"},{"text":"var configObj = {\n    columns: [\n        {\n            // Column options\n            binding: function(e) {\n                var cell = e.cell;\n                var inputElem = cell.getContent();\n                if (!inputElem) {\n                    inputElem = document.createElement(\"input\");\n                }\n\n                inputElem.value = e.data;\n                cell.setContent(inputElem);\n            }\n        },\n        ...\n    ]\n\n};","tagName":"pre"},{"text":"Note that the parameter names are now defined by the event argument. Some parameters may have its name changed. Please use the debugger to check for the parameters' availability.","tagName":"p"},{"text":"dataModel property","tagName":"h3"},{"text":"Change","tagName":"h4"},{"text":"dataModel property is replaced by staticDataRows property. value in dataModel.data should be used as staticDataRows value. dataModel.fields and dataModel.format will be automatically resolved by EFX Grid and should be safely removed. For reliable conversion, array of object maps should be used instead of two dimentional array. ","tagName":"p"},{"text":"Reason","tagName":"h4"},{"text":"A row in EFX Grid can contains some information (i.e., real-time related metadata) other than just data content. rows property is created to hold the additional information. In the same sense, staticDataRows property is created for rows with only data content.","tagName":"p"},{"text":"Sample","tagName":"h4"},{"text":"If you have the following Emerald Grid configuration:","tagName":"p"},{"text":"var configObj = {\n    dataModel: {\n        fields: [\"field1\", \"field2\"],\n        format: \"array\",\n        data: [\n            [1, 2],\n            [3, 4]\n        ]\n    }\n};","tagName":"pre"},{"text":"then you would change to the following EFX Grid configuration:","tagName":"p"},{"text":"var configObj = {\n    staticDataRows: [\n        {\"field1\": 1, \"field2\": 2},\n        {\"field1\": 3, \"field2\": 4}\n    ]\n};","tagName":"pre"},{"text":"title and titleAlignment properties","tagName":"h3"},{"text":"Title keyword is used in HTML tag as global attribute for tooltips. To avoid confusion between tooltip and header text, title and titleAlignment properties are renamed to name and headerAlignment, respectively.","tagName":"p"},{"text":"global attribute","tagName":"a"},{"text":"blinkBy and blinker properties","tagName":"h3"},{"text":"Blinking related features have been moved to Conditional Coloring extension. ","tagName":"p"},{"text":"Conditional Coloring extension","tagName":"a"},{"text":"cellEditing and autoEdit properties","tagName":"h3"},{"text":"Cell editing related features have been moved to In-Cell Editing extension.","tagName":"p"},{"text":"In-Cell Editing extension","tagName":"a"},{"text":"checkboxSelector property","tagName":"h3"},{"text":"Checkbox related features have been moved to Checkbox extension.","tagName":"p"},{"text":"Checkbox extension","tagName":"a"},{"text":"filterRow property","tagName":"h3"},{"text":"Filter row feature has been moved to Filter Input extension.","tagName":"p"},{"text":"Filter Input extension","tagName":"a"},{"text":"Built-in filter related methods and events","tagName":"h2"},{"text":"Filter related feature has been moved to Row Filtering extension.","tagName":"p"},{"text":"Row Filtering extension","tagName":"a"},{"text":"The following filter related methods are not available in EFX Grid. Use methods provided from the extension instead. ","tagName":"p"},{"text":"The following custom events are not available in EFX Grid. Use events provided from the extension instead.","tagName":"p"},{"text":"Built-in cell editing related methods and events","tagName":"h2"},{"text":"Cell editing related features have been moved to In-Cell Editing extension.","tagName":"p"},{"text":"In-Cell Editing extension","tagName":"a"},{"text":"The following cell editing related methods are not available in EFX Grid. Use methods provided from the extension instead. ","tagName":"p"},{"text":"The following custom events are not available in EFX Grid. Use events provided from the extension instead.","tagName":"p"},{"text":"Built-in formatters","tagName":"h2"},{"text":"All provided built-in formatters (formatter/AsyncFormatter, formatter/CheckBox, and formatter/UpDownColor) are replaced by predefined formatters.","tagName":"p"},{"text":"predefined formatters","tagName":"a"},{"text":"Built-in plugins","tagName":"h2"},{"text":"the following table shows plugins and its equivalent extension ","tagName":"p"},{"text":"\nPlugin:\nExtension\n","tagName":"tr"},{"text":"\nCellBlinkingPlugin\nConditional Coloring extension\n","tagName":"tr"},{"text":"Conditional Coloring extension","tagName":"a"},{"text":"\nCellEditingPlugin\nIn-Cell Editing extension\n","tagName":"tr"},{"text":"In-Cell Editing extension","tagName":"a"},{"text":"\nColumnGroupingPlugin\nColumn Stack extension\n","tagName":"tr"},{"text":"Column Stack extension","tagName":"a"},{"text":"\nGroupStatisticsPlugin\nStatistics Row extension\n","tagName":"tr"},{"text":"Statistics Row extension","tagName":"a"},{"text":"\nRowHeightAdjustingPlugin\nContent Wrap extension\n","tagName":"tr"},{"text":"Content Wrap extension","tagName":"a"},{"text":"\nColumnWidthAdjustingPlugin\nColumn Fitter extension\n","tagName":"tr"},{"text":"Column Fitter extension","tagName":"a"},{"text":"Accessing Data","tagName":"h2"},{"text":"Accessing data in Emerald Grid is done directly to its internal data stores (i.e., DataTable and DataView). This works fine, since rows in Emerald Grid contain only data content. However, the direct interaction with internal data store can cause out of synchronization with other parts in EFX Grid. ","tagName":"p"},{"text":"Change","tagName":"h3"},{"text":"Direct access to grid's internal data stores are removed. Data can be set or retrieved through grid's APIs or row definition objects instead.","tagName":"p"},{"text":"Reason","tagName":"h3"},{"text":"The change in data has to be recognized by Grid in order to synchronize with their corresponding rows and real-time data requests. ","tagName":"p"},{"text":"Sample","tagName":"h3"},{"text":"If you have the following code with Emerald Grid:","tagName":"p"},{"text":"var dv = grid.api.getDataView();\n\ndv.getRowDataAt(1);\n\ndv.getMultipleRowData([\"1\", \"2\"]);\n\ndv.getAllRowData();","tagName":"pre"},{"text":"then you would change to the following code for EFX Grid:","tagName":"p"},{"text":"grid.api.getRowData(1); // Note getRowDataAt is shorthen to getRowData\ngrid.api.getRowDefinition(1).getRowData(); // Alternatively, RowDefinition object can be used for referencing\n\ngrid.api.getMultipleRowData([\"1\", \"2\"]);\n\ngrid.api.getMultipleRowData(); // getAllRowData is replaced with getMultipleRowData() for simplicity","tagName":"pre"}]},{"title":"License","filename":"license.html","contents":[{"text":"Copyright © 2022 LSEG. All rights reserved.","tagName":"p"},{"text":"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:","tagName":"p"},{"text":"The person is an active LSEG Subscription License holder currently using LSEG products or services.","tagName":"p"},{"text":"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.","tagName":"p"},{"text":"Redistribution of the Software in source code in any form must retain the above copyright notice, this list of conditions, and the following disclaimer.","tagName":"p"},{"text":"Redistribution of the Software in binary form must reproduce the above copyright notice, this list of conditions, and the following disclaimer, in the documentation and/or other materials provided with the distribution.","tagName":"p"},{"text":"Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this Software without specific prior written authorization.","tagName":"p"},{"text":"DISCLAIMERTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.","tagName":"p"}]}]
\ No newline at end of file
+Pandora.book._.searchIndex = [{"title":"Grid Usage Guide","filename":"index.html","contents":[{"text":"Grid has been created to handle a large number of rows. It achieves high performance by utilizing a row virtualization technique, and all of the display logics and layouts are calculated programmatically. So, it lacks the flexibility of managing the layout when compared to the native table. Grid can be viewed to have 3 layers of controls. The outer layer is EFX Grid, which provides high level configuration through HTML properties and attributes. The middle layer is API instance, which provides most runtime interactions through JavaScript methods. The inner layer is Core Grid, which provides internal interaction with UI elements.","tagName":"p"},{"text":"native table","tagName":"a"},{"text":"Installation","tagName":"h2"},{"text":"EFX Grid element and extensions are published under single package.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid","tagName":"pre"},{"text":"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.","tagName":"p"},{"text":"npm install @refinitiv-ui/halo-theme","tagName":"pre"},{"text":"Setup guide","tagName":"h2"},{"text":"Use import syntax to import the Grid and theme into your app.","tagName":"p"},{"text":"// Import element and its Halo dark theme\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/dark\";\n\n// Import native styles for typography, css variables, etc.\nimport \"@refinitiv-ui/halo-theme/dark/imports/native-elements\";","tagName":"pre"},{"text":"Now, you can use Grid in your HTML page.","tagName":"p"},{"text":"<efx-grid></efx-grid>","tagName":"pre"},{"text":"By default, Grid without any configuration will be shown as empty element, since it doesn't have any column or row. You will need to set configuration object to define how Grid shows its content. The code snippet below shows how you would set a configuration object in JavaScript file:","tagName":"p"},{"text":"var grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.config = {\n    columns: [\n        {name: \"Company Name\", field: \"companyName\"},\n        {name: \"Last Price\", field: \"lastPrice\"}\n    ],\n    staticDataRows: [\n        {companyName: \"Company A\", lastPrice: 10},\n        {companyName: \"Company B\", lastPrice: 20}\n    ]\n};","tagName":"pre"},{"text":"License for the Grid","tagName":"h2"},{"text":"Please see the license here.","tagName":"p"},{"text":"here","tagName":"a"},{"text":"License for the Halo Theme","tagName":"h2"},{"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.","tagName":"p"},{"text":"here","tagName":"a"}]},{"title":"TypeScript","filename":"getting_started/typescript.html","contents":[{"text":"TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.","tagName":"p"},{"text":"TypeScript","tagName":"a"},{"text":"To apply Typescript for EFX Grid, first you are required to install @refinitiv-ui/efx-grid in your project.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid","tagName":"pre"},{"text":"Use import syntax to import the Grid and theme into your app.","tagName":"p"},{"text":"// Import element and its Halo dark theme\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/dark\";\n\n// Import native styles for typography, css variables, etc.\nimport \"@refinitiv-ui/halo-theme/dark/imports/native-elements\";","tagName":"pre"},{"text":"Then import types from efx-grid package to your file. These types are typically for properties on a configuration object or APIs defined by Grid components. You don't need to import every type, if you don't use them. All of the types are optional.","tagName":"p"},{"text":"import {\n    RealtimeGrid, // Provide types for api object\n    ColumnDefinition, // Provide types for column config and ColumnDefinition object\n    CoreGrid // Provide types for core object\n} from \"@refinitiv-ui/efx-grid\";","tagName":"pre"},{"text":"Optionally, you can also import Grid's extensions from efx-grid/extensions package to extend its functionalities. ","tagName":"p"},{"text":"extensions","tagName":"a"},{"text":"import { ColumnResizing } from \"@refinitiv-ui/efx-grid/extensions\";","tagName":"pre"},{"text":"To define how the grid renders its content, use ColumnDefinition.Options as shown below:","tagName":"p"},{"text":"let columns: ColumnDefinition.Options[] = [\n    { name: \"Integer\", field: \"intCol\" },\n    { name: \"String\", field: \"strCol\" },\n    { name: \"Float\", field: \"floatCol\" }\n];\nlet records: Array<Object> = [\n    { intCol: 1, strCol: \"Sample data\", floatCol: 1.1 },\n    { intCol: 2, strCol: \"Sample data\", floatCol: 2.2 },\n    { intCol: 3, strCol: \"Sample data\", floatCol: 3.3 }\n];","tagName":"pre"},{"text":"To define a configuration object, use RealtimeGrid.GridOptions as shown below:","tagName":"p"},{"text":"let configObj: RealtimeGrid.GridOptions = {\n    columns: columns,\n    staticDataRows: records,\n    extensions: [\n        new ColumnResizing()\n    ]\n};","tagName":"pre"},{"text":"Finally assign configuration to efx-grid element. Note that efx-grid element already has type defined. There is no need to cast it to some other types.","tagName":"p"},{"text":"let grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.addEventListener(\"configured\", function (e: any) {\n    let api: RealtimeGrid = e.detail.api;\n    let core: CoreGrid = api.getCoreGrid();\n\n    console.log(\"Grid has been configured.\");\n});\n\ngrid.config = configObj;","tagName":"pre"},{"text":"Grid element is not immediately initialized when it is put on to the document. Only after it has been configured, then you can use its api to perform any runtime change or custom task.","tagName":"p"},{"text":"For a complete list of APIs, please see the API document.","tagName":"p"},{"text":"API document","tagName":"a"}]},{"title":"Using with React","filename":"getting_started/react_guide.html","contents":[{"text":"For using EFX Grid with React, first you are required to install @refinitiv-ui/efx-grid and @lit-labs/react in your project.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid\nnpm install @lit-labs/react","tagName":"pre"},{"text":"Use import syntax to import the Grid and theme into your app.","tagName":"p"},{"text":"// Import element and its Halo dark theme\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/dark\";\n\n// Import native styles for typography, css variables, etc.\nimport \"@refinitiv-ui/halo-theme/dark/imports/native-elements\";","tagName":"pre"},{"text":"Import createComponent from @lit-labs/react, which will be used to transform custom element into React component.","tagName":"p"},{"text":"import { createComponent } from '@lit-labs/react';","tagName":"pre"},{"text":"Then import types from efx-grid package to your file. Type Grid is mandatory for making grid as React component and all other types are typically for properties on a configuration object or APIs defined by Grid components. You don't need to import every type, if you don't use them.","tagName":"p"},{"text":"import {\n    Grid, // Provide type for making EFX Grid as React component\n    RealtimeGrid, // Provide types for api object\n    ColumnDefinition, // Provide types for column config and ColumnDefinition object\n    CoreGrid // Provide types for core object\n} from \"@refinitiv-ui/efx-grid\";","tagName":"pre"},{"text":"Optionally, you can also import Grid's extensions from efx-grid/extensions package to extend its functionalities. ","tagName":"p"},{"text":"extensions","tagName":"a"},{"text":"import { ColumnResizing } from \"@refinitiv-ui/efx-grid/extensions\";","tagName":"pre"},{"text":"Define grid as React component using createComponent, then EfxGrid will be used instead of efx-grid in React project","tagName":"p"},{"text":"const EfxGrid = createComponent({\n  tagName: 'efx-grid',\n  elementClass: Grid,\n  react: React,\n  events: {\n    onConfigured: 'configured' //Grid custom event handler\n  }\n});","tagName":"pre"},{"text":"To define how the grid renders its content. First, create a function App which will be the main entry point. Then use ColumnDefinition.Options as shown below:","tagName":"p"},{"text":"let columns: ColumnDefinition.Options[] = [\n    { name: \"Integer\", field: \"intCol\" },\n    { name: \"String\", field: \"strCol\" },\n    { name: \"Float\", field: \"floatCol\" }\n];\nlet records: Array<Object> = [\n    { intCol: 1, strCol: \"Sample data\", floatCol: 1.1 },\n    { intCol: 2, strCol: \"Sample data\", floatCol: 2.2 },\n    { intCol: 3, strCol: \"Sample data\", floatCol: 3.3 }\n];","tagName":"pre"},{"text":"To define a configuration object, use type RealtimeGrid.GridOptions as shown below.Then, finally assign configuration to EfxGrid component by passing through config attribute of grid component.","tagName":"p"},{"text":"function gridConfigured(e: any) {\n    let api: RealtimeGrid = e.detail.api;\n    let core: CoreGrid = api.getCoreGrid();\n\n    console.log(\"Grid has been configured.\");\n}\n\nfunction App() {\n    //Extensions are recommended to use with useState to prevent multiple re-initializatioin\n    const [colResizingExt, setColResizingExt] = React.useState<ColumnResizing>(new ColumnResizing())\n    const [configObj, setConfigObj] = React.useState<RealtimeGrid.GridOptions>(\n        {\n            columns: columns,\n            staticDataRows: records,\n            extensions: [\n                colResizingExt\n            ]\n        }\n    )\n    return (\n        <EfxGrid config={configObj} onConfigured={gridConfigured}></EfxGrid>\n    )\n} ","tagName":"pre"},{"text":"Grid element is not immediately initialized when it is put on to the document. Only after it has been configured, then you can use its api to perform any runtime change or custom task.","tagName":"p"},{"text":"For a complete list of APIs, please see the API document.","tagName":"p"},{"text":"API document","tagName":"a"}]},{"title":"Using with Angular","filename":"getting_started/angular_guide.html","contents":[{"text":"For using EFX Grid with Angular, first you are required to install @refinitiv-ui/efx-grid in your project.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid","tagName":"pre"},{"text":"In component logic file, for example src/app/app.component.ts, use import syntax to import the Grid and theme into your app.","tagName":"p"},{"text":"// Import element and its Halo dark theme\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/dark\";\n\n// Import native styles for typography, css variables, etc.\nimport \"@refinitiv-ui/halo-theme/dark/imports/native-elements\";","tagName":"pre"},{"text":"Then import types from efx-grid package to your file. These types are typically for properties on a configuration object or APIs defined by Grid components. You don't need to import every type, if you don't use them. All of the types are optional.","tagName":"p"},{"text":"import {\n    RealtimeGrid, // Provide types for api object\n    ColumnDefinition, // Provide types for column config and ColumnDefinition object\n    CoreGrid // Provide types for core object\n} from \"@refinitiv-ui/efx-grid\";","tagName":"pre"},{"text":"Optionally, you can also import Grid's extensions from efx-grid/extensions package to extend its functionalities. ","tagName":"p"},{"text":"extensions","tagName":"a"},{"text":"import { ColumnResizing } from \"@refinitiv-ui/efx-grid/extensions\";","tagName":"pre"},{"text":"Prepare grid data and configuration object by follow following steps.1) Define how the grid renders its content in each column by using type ColumnDefinition.Options2) Define rows of data for displaying in the grid3) Define a configuration object by using type RealtimeGrid.GridOptions4) Define a function for assigning run time tasks to grid after grid is initialized. (Optional)","tagName":"p"},{"text":"@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.less'],\n})\nclass AppComponent {\n    // Step 1)\n    columns: ColumnDefinition.Options[] = [\n        { name: \"Integer\", field: \"intCol\" },\n        { name: \"String\", field: \"strCol\" },\n        { name: \"Float\", field: \"floatCol\" }\n    ];\n    // Step 2)\n    records: Array<Object> = [\n        { intCol: 1, strCol: \"Sample data\", floatCol: 1.1 },\n        { intCol: 2, strCol: \"Sample data\", floatCol: 2.2 },\n        { intCol: 3, strCol: \"Sample data\", floatCol: 3.3 }\n    ];\n    // Step 3)\n    configObj: RealtimeGrid.GridOptions = {\n        columns: this.columns,\n        staticDataRows: this.records,\n        extensions: [\n            new ColumnResizing()\n        ]\n    };\n    // Step 4)\n    gridConfigured(e: any) {\n        let api: RealtimeGrid = e.detail.api;\n        let core: CoreGrid = api.getCoreGrid();\n\n        console.log(\"Grid has been configured.\");\n    }\n}","tagName":"pre"},{"text":"In HTML template file, src/app/app.component.html, finally assign configuration to efx-grid element. Note that efx-grid element already has type defined. There is no need to cast it to some other types.","tagName":"p"},{"text":"src/app/app.component.html","tagName":"p"},{"text":"    <efx-grid [config]=\"configObj\" (configured)=\"gridConfigured($event)\" #grid ></efx-grid>","tagName":"pre"},{"text":"Grid element is not immediately initialized when it is put on to the document. Only after it has been configured, then you can use its api to perform any runtime change or custom task.","tagName":"p"},{"text":"For a complete list of APIs, please see the API document.","tagName":"p"},{"text":"API document","tagName":"a"}]},{"title":"Overview","filename":"getting_started/overview.html","contents":[{"text":"EFX Grid","tagName":"h2"},{"text":"EFX Grid is a custom element, providing simple ways to display and manipulate data in table layout. All HTML native properties and events are available in EFX Grid. It can be easily created by just writing the tag and setting the configuration as shown below:","tagName":"p"},{"text":"custom element","tagName":"a"},{"text":"<body>\n    <efx-grid></efx-grid>\n\n    <script>\n        var grid = document.getElementsByTagName(\"efx-grid\")[0];\n        grid.config = {\n            /* See the API Doc for all available options */\n        };\n    </script>\n</body>","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":"<efx-grid id=\"grid\">\n\n</efx-grid>","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":"<efx-grid></efx-grid>","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":"<efx-grid id=\"grid\"></efx-grid>","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":"<efx-grid></efx-grid>","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":"<efx-grid></efx-grid>","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":"<button id=\"insert_btn\">Insert Top Row</button>\n<button id=\"update_btn\">Update Top Row</button>\n<button id=\"print_btn\">Get Top Row</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>\n<hr>\n<div id=\"msg_div\"></div>","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":"<textarea id=\"msg_ta\"></textarea>\n<hr>\n<atlas-blotter></atlas-blotter>","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":"<div>\n  <button id=\"get_btn\">Get cell content</button>\n  <label for=\"col_in\">Column index:</label>\n  <input id=\"col_in\" value=\"2\" type=\"number\">\n  <i></i>\n  <label for=\"row_in\">Row index:</label>\n  <input id=\"row_in\" value=\"2\" type=\"number\">\n</div>\n<hr>\n<textarea id=\"msg_ta\"></textarea>\n<hr>\n<atlas-blotter></atlas-blotter>","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":"<fieldset>\n  <legend>Operation</legend>\n  <span>\n        <coral-button id=\"select_column_btn\">Select Columns</coral-button>\n        Data Size:\n        <coral-select id=\"dataSize\">\n            <coral-item value=\"10\">10 Rows</coral-item>\n            <coral-item value=\"100\" selected>100 Rows</coral-item>\n            <coral-item value=\"1000\">1,000 Rows</coral-item>\n            <coral-item value=\"10000\">10,000 Rows</coral-item>\n            <coral-item value=\"100000\">100,000 Rows</coral-item>\n        </coral-select>\n    </span>\n  <hr>\n  <span>\n        <label for=\"search_input\">Filter: </label>\n        <input id=\"search_input\" type=\"search\" placeholder=\"Filter any column\">\n    </span>\n  <hr>\n  <div id=\"grouping\">\n    <coral-select id=\"column_grouping_selector\" placeholder=\"Group By\"></coral-select>\n  </div>\n</fieldset>\n<hr>\n\n<atlas-blotter id=\"preview\"></atlas-blotter>\n<emerald-popup-menu id=\"popup_menu\"></emerald-popup-menu>","tagName":"pre"},{"text":"var 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();\nvar columnStackExt = new tr.ColumnStackExtension();\nvar rangeBarExt = new tr.RangeBarExtension();\nvar generator = tr.DataGenerator;\nvar dateTimePicker = tr.EmeraldDateTimePickerFormatter ? tr.EmeraldDateTimePickerFormatter : EFDateTimePickerFormatter; // WORKAROUND: for datetime picker in v6\n\nvar grid = window.grid = document.getElementsByTagName(\"atlas-blotter\")[0];\nvar dataSizeSelect = document.getElementById(\"dataSize\");\nvar selectColumnBtn = document.getElementById(\"select_column_btn\");\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];\nconst userListEntries = userList.map(function(item) {\n  return {\n    label: item,\n    value: item\n  };\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 languageList = [\"French\", \"English\", \"German\", \"Italian\", \"Portuguese\", \"Chinese\"];\n\nconst languageEntries = languageList.map(function(item) {\n  return {\n    label: item,\n    value: item\n  };\n});\n\ngenerator.addFieldInfo(\"userList\", {\n  type: \"set\",\n  members: userList\n})\n\ngenerator.addFieldInfo(\"languageList\", {\n  type: \"set\",\n  members: languageList\n});\n\ngenerator.addFieldInfo(\"countryList\", {\n  type: \"set\",\n  members: [\"FRA\", \"GBR\", \"ISL\", \"ITA\", \"PRT\", \"SWE\", \"GRC\", \"DEU\", \"NOR\", \"GBR\", \"IND\", \"FRA\", \"DEU\", \"CHN\"]\n})\n\n\ngenerator.addFieldInfo(\"CF_CLOSE\", {\n  type: \"number\",\n  min: 0,\n  max: 1000,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"TR.TSVWAP\", {\n  type: \"number\",\n  min: 0,\n  max: 1000,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"Jan\", {\n  type: \"number\",\n  min: -100,\n  max: 100,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"Feb\", {\n  type: \"number\",\n  min: -100,\n  max: 100,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"Mar\", {\n  type: \"number\",\n  min: -100,\n  max: 100,\n  prec: 2\n});\n\ngenerator.addFieldInfo(\"changed\", {\n  type: \"number\",\n  min: -100,\n  max: 100,\n  prec: 2\n});\n\nvar dateConditions = [{\n    expression: [\"GT\", 60],\n    backgroundColor: \"#b9f6ca66\"\n  },\n  {\n    expression: [\"LT\", 20],\n    backgroundColor: \"#ff80ab66\"\n  },\n];\n\nvar dataTypeFields = [\n  \"id\",\n  \"userList\",\n  \"languageList\",\n  \"countryList\",\n  \"boolean\", // Bought\n  \"TR.Volume\", // Bank Balance\n  \"changed\", // Rating\n  \"CFLOW\",\n  \"CF_LAST\",\n  \"CFHIGH\",\n  \"CF_TICK\",\n  \"CF_CLOSE\",\n  \"TR.TSVWAP\",\n  \"ISODate\",\n  \"Jan\",\n  \"Feb\",\n  \"Mar\"\n];\nvar dataRows = generator.generateRecords(dataTypeFields, { seed: 0, numRows: 100 });\n\nvar allAvailableColumns = [{\n    checkboxColumn: true,\n    leftPinned: true\n  },\n  {\n    field: \"userList\",\n    name: \"Name\",\n    id: \"userList\",\n    filterInput: {\n      type: \"multiselect\",\n      entries: userListEntries\n    },\n    minWidth: 150,\n    width: 165,\n    editableContent: true\n  },\n  {\n    field: \"TR.Volume\",\n    name: \"Bank Balance\",\n    id: \"TR.Volume\",\n    width: 90,\n    noFitting: true,\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    field: \"CF_CLOSE\",\n    id: \"CF_CLOSE\",\n    sortable: false,\n    name: \"Price Graph\",\n    filterInput: false,\n    minWidth: 120,\n    rangeBar: {\n      low: \"CFLOW\",\n      high: \"CFHIGH\",\n      last: \"CF_LAST\",\n      close: \"CF_CLOSE\",\n      vwap: \"TR.TSVWAP\",\n      tick: \"CF_TICK\",\n    },\n  },\n  {\n    field: \"CF_LAST\",\n    id: \"CF_LAST\",\n    sortable: false,\n    name: \"Year High Low Range\",\n    minWidth: 150,\n    filterInput: false,\n    rangeBar: {\n      low: \"CFLOW\",\n      high: \"CFHIGH\",\n      last: \"CF_LAST\"\n    }\n  },\n  {\n    field: \"changed\",\n    id: \"changed\",\n    name: \"Pct. Chng\",\n    fieldDataType: \"number\",\n    filterInput: false,\n    percentBar: {\n      alignment: \"c\"\n    },\n    editableContent: true,\n    noFitting: true,\n    minWidth: 150\n  },\n  {\n    field: \"id\",\n    name: \"Order\",\n    noFitting: true,\n    id: \"id\",\n    filterInput: {\n      type: \"number\"\n    },\n    width: 40,\n    filterInput: false,\n  },\n  {\n    field: \"CF_TICK\",\n    name: \"Tick\",\n    id: \"CF_TICK\",\n    noFitting: true,\n    width: 40,\n    filterInput: false,\n    binding: onTickBinding\n  },\n  {\n    field: \"boolean\",\n    name: \"Bought\",\n    id: \"boolean\",\n    filterInput: false,\n    noFitting: true,\n    width: 40,\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    field: \"ISODate\",\n    id: \"ISODate\",\n    name: \"Date\",\n    fieldDataType: \"datetime\",\n    filterInput: {\n      type: \"date\"\n    },\n    noFitting: true,\n    binding: dateTimePicker.create({\n      styles: {\n        width: 180\n      }\n    }),\n    width: 180,\n    alignment: \"c\"\n  },\n  {\n    field: \"languageList\",\n    id: \"languageList\",\n    name: \"Language\",\n    editableContent: true,\n    inCellEditing: {\n      type: \"select\",\n      entries: languageEntries\n    },\n    filterInput: {\n      type: \"select\",\n      entries: languageEntries\n    },\n    minWidth: 120\n  },\n  {\n    field: \"countryList\",\n    id: \"countryList\",\n    name: \"Country\",\n    filterInput: false,\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    minWidth: 80\n  },\n  {\n    field: \"Jan\",\n    id: \"Jan\",\n    name: \"Jan\",\n    filterInput: {\n      type: \"number\"\n    },\n    conditions: dateConditions,\n    alignment: \"c\",\n    formatType: \"percent\",\n    minWidth: 80, // Equal to fit content\n    stackId: \"stack1\"\n  },\n  {\n    field: \"Feb\",\n    name: \"Feb\",\n    id: \"Feb\",\n    filterInput: {\n      type: \"number\"\n    },\n    conditions: dateConditions,\n    alignment: \"c\",\n    formatType: \"percent\",\n    minWidth: 80,\n    stackId: \"stack1\"\n  }, {\n    field: \"Mar\",\n    name: \"Mar\",\n    id: \"Mar\",\n    filterInput: {\n      type: \"number\"\n    },\n    conditions: dateConditions,\n    alignment: \"c\",\n    formatType: \"percent\",\n    minWidth: 80,\n    stackId: \"stack1\"\n  }\n\n];\n\nfunction onTickBinding(e) {\n  var cell = e.cell;\n  var data = e.data;\n  var content = cell.getContent();\n  if (!content) {\n    content = document.createElement(\"coral-icon\");\n  }\n  content.icon = data === 1 ? \"arrow-down-fill\" : \"arrow-up-fill\";\n  content.style.color = data === 1 ? \"rgb(245, 71, 91)\" : \"rgb(57, 196, 110)\";\n  cell.setContent(content);\n};\n\n// generate dynamic data and assign to \"atlas-blotter\"\ndataSizeSelect.addEventListener(\"value-changed\", function(e) {\n  var dataRows = generator.generateRecords(dataTypeFields, { seed: 0, numRows: e.detail.value });\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 selectionDialogConfirmed = function(e) {\n  var columnCommited = e.detail.data;\n  columnCommited = columnCommited.map(function(column) {\n    return {\n      ...column, // Clone object to retain format\n      field: nameToField[column.name]\n    }\n  })\n  grid.api.restoreColumns(columnCommited);\n};\n\nvar nameToField = {\n  \"Name\": \"userList\",\n  \"Order\": \"id\",\n  \"Bought\": \"boolean\",\n  \"Tick\": \"CF_TICK\",\n  \"Bank Balance\": \"TR.Volume\",\n  \"Price Graph\": \"CF_CLOSE\",\n  \"Year High Low Range\": \"CF_LAST\",\n  \"Pct. Chng\": \"changed\",\n  \"Date\": \"ISODate\",\n  \"Country\": \"countryList\",\n  \"Language\": \"languageList\",\n  \"Jan\": \"Jan\",\n  \"Feb\": \"Feb\",\n  \"Mar\": \"Mar\"\n};\n\nselectColumnBtn.addEventListener(\"click\", function() {\n  if (!dialog) {\n    dialog = document.createElement(\"column-selection-dialog\");\n    dialog.addEventListener(\"confirm\", selectionDialogConfirmed);\n  }\n\n  var columns = grid.api.getConfigObject().columns;\n  var visibleColumns = 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  var columnObj = allColumns.map(function(column) {\n    return {\n      ...column, // Clone object to retain format\n      field: column.name,\n      id: nameToField[column.name]\n    }\n  });\n  visibleColumns = visibleColumns.map(function(column) {\n    return {\n      ...column, // Clone object to retain format\n      field: column.name,\n      id: column.id\n    }\n  });\n  dialog.init({\n    data: columnObj.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: \"Account Profile\",\n      alignment: \"center\",\n      children: [\"userList\", \"TR.Volume\"]\n    },\n    {\n      id: \"g2\",\n      name: \"Transaction Details\",\n      alignment: \"center\",\n      children: [\"id\", \"CF_TICK\", \"boolean\"]\n    },\n    {\n      id: \"g3\",\n      name: \"Financial Overview\",\n      alignment: \"center\",\n      children: [\"CF_CLOSE\", \"CF_LAST\", \"changed\"]\n    },\n    {\n      id: \"g4\",\n      name: \"Localization Information\",\n      children: [\"ISODate\", \"languageList\", \"countryList\"]\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    columnStackExt,\n    rangeBarExt,\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  columnStack: {\n    menuElement: document.getElementById(\"popup_menu\")\n  },\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 = [{\n      field: \"userList\",\n      name: \"Name\"\n    }, {\n      field: \"languageList\",\n      name: \"Language\",\n    }, {\n      field: \"countryList\",\n      name: \"Country\",\n    }];\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":"body {\n  padding: 24px;\n}\n\natlas-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}\n\nhr {\n  margin: 8px;\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":"Realtime Data","filename":"showcases/realtime-data.html","contents":[{"text":"<fieldset>\n  <legend>Operations</legend>\n  <input value=\"DOWN.N\" id=\"ric_txt\">\n  <button id=\"insert_ric_btn\">Insert RIC</button>\n  <button id=\"bkr_btn\">BKR.OQ</button>\n  <button id=\"usd_btn\">USD=</button>\n  <button id=\"jyp_btn\">JYP=</button>\n  <button id=\"ndx_btn\">.NDX</button>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var heatMapExt = new tr.HeatMapExtension();\nvar textFormattingExt = new tr.TextFormattingExtension();\n\nvar Toolkit = tr.MockRTK ? tr.MockRTK : MockRTK; // WORKAROUND for v6\nToolkit.init({ ID: 'rtk-atlas-blotter', minInterval: 100, maxInterval: 800 }, ['Quotes', 'Data']).then(onInit);\n\nfunction onInit(rtk) {\n  var configObj = {\n    rowSelection: true,\n    fieldCaching: true,\n    columns: [{\n        field: \"X_RIC_NAME\",\n        name: \"RIC\",\n        tickColor: \"CF_NETCHNG\",\n        minWidth: 100,\n      },\n      {\n        field: \"CF_TICK\",\n        name: \"Tick\",\n        binding: onTickBinding,\n      },\n      {\n        field: \"CF_LAST\",\n        tickColor: \"CF_TICK\",\n        blinking: true,\n      },\n      {\n        field: \"CF_NETCHNG\",\n        blinking: true,\n        tickColor: \"CF_TICK\"\n      },\n      {\n        field: \"PCTCHNG\",\n        heatmap: true,\n        formatType: \"percent\",\n      }\n    ],\n    rows: [\n      { ric: \"BA.N\" },\n      { ric: \"AAPL.O\" },\n      { ric: \"MSFT.O\" },\n      { ric: \"TSLA.O\" },\n      { ric: \"PTT.BK\" },\n      { ric: \"AOT.BK\" },\n      { ric: \".DJI\", asChain: true, collapsed: false },\n\n    ],\n    extensions: [heatMapExt, textFormattingExt],\n    RTK: rtk\n  };\n\n  grid.config = configObj;\n}\n\nfunction onTickBinding(e) {\n  var cell = e.cell;\n  var data = e.data;\n  var content = cell.getContent();\n  if (!content) {\n    content = document.createElement(\"coral-icon\");\n  }\n  if (data != null) {\n    content.icon = data === 2 ? \"arrow-down-fill\" : \"arrow-up-fill\";\n    content.style.color = data === 2 ? \"rgb(245, 71, 91)\" : \"rgb(57, 196, 110)\";\n  }\n  cell.setContent(content);\n};\n\nbkr_btn.addEventListener(\"click\", insertRic.bind(null, bkr_btn.textContent));\nusd_btn.addEventListener(\"click\", insertRic.bind(null, usd_btn.textContent));\njyp_btn.addEventListener(\"click\", insertRic.bind(null, jyp_btn.textContent));\nndx_btn.addEventListener(\"click\", function(e) { // Chain ric\n  grid.api.insertRow({ ric: \".NDX\", asChain: true }, 0);\n});\ninsert_ric_btn.addEventListener(\"click\", onClickInsertButton);\n\nfunction onClickInsertButton(e) {\n  var ric = document.getElementById(\"ric_txt\").value;\n  insertRic(ric.toUpperCase()); // Ric upper case\n}\n\nfunction insertRic(ric) {\n  grid.api.insertRow(ric, 0);\n}","tagName":"pre"},{"text":"body {\n  padding: 24px;\n}\n\natlas-blotter {\n  height: 300px;\n}\n\nhr {\n  margin: 8px;\n}","tagName":"pre"},{"text":"As demonstrated in the example above, we utilize mock data to simulate real-time data streaming, with each RIC receiving periodic data updates. We use the heat map extension to visually represent this data to users.","tagName":"p"}]},{"title":"Grid Builder","filename":"showcases/grid-builder.html","contents":[{"text":"Grid Builder","tagName":"h2"},{"text":"The grid configuration builder provide a quick start way of using grid in your application. This will help new users to getting started with grid easier. You can try with different grid customization and grid extensions with a realtime result, then this configuration can be copy and paste into any application to get the same result as seen from this section.","tagName":"p"},{"text":"<coral-sidebar-layout sidebar-width=\"0px\" class=\"main-layout\">\n  <coral-panel slot=\"main-content\" class=\"main-content\" spacing>\n    <coral-tab-bar id=\"tabs\"></coral-tab-bar>\n    <coral-panel spacing>\n      <div id=\"section-detail\"></div>\n    </coral-panel>\n    <atlas-blotter id=\"grid\"></atlas-blotter>\n    <emerald-popup-menu id=\"menu\"></emerald-popup-menu>\n    <textarea id=\"configArea\"></textarea>\n  </coral-panel>\n</coral-sidebar-layout>","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"html,\nbody {\n  margin: 0;\n}\n\nbody {\n  padding: 20px;\n  box-sizing: border-box;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\na {\n  font: 1.2em Arial;\n  display: inline-block;\n  padding: 10px;\n  margin: 4px;\n  box-sizing: border-box;\n  border-radius: 8px;\n  border: 1px solid #eeeeee;\n  width: 32%;\n  text-align: center;\n  vertical-align: middle;\n  box-shadow: 0 5px 5px lightgrey;\n}\n\n.main-layout {\n  height: 95vh;\n  display: flex;\n}\n\n.content-title {\n  padding-top: 5px;\n  padding-bottom: 5px;\n  font-size: 14px;\n}\n\n.main-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n#grid {\n  height: 350px;\n}\n\ndiv {\n  min-height: 24px;\n}\n\nhr {\n  margin-top: 15px;\n  margin-bottom: 15px;\n  width: 100%;\n}\n\n#configArea {\n  flex: 1;\n  width: 100%;\n  margin-top: 10px;\n  font-family: monospace;\n}\n\n#section-detail {\n  height: 160px;\n  overflow-y: scroll;\n  padding-bottom: 10px;\n  border: grey solid 1px;\n}\n\n.two-columns {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n}\n\n.two-columns>*:not(hr) {\n  padding: 2px;\n  display: flex;\n  align-items: center;\n}\n\nlabel {\n  padding-right: 10px;\n}","tagName":"pre"},{"text":"Grid Loader","tagName":"h2"},{"text":"In this section, you can try to paste your configuration object here to see an live result. This allow user to make advance customization to grid configuration object before using with their real application.","tagName":"p"},{"text":"<coral-sidebar-layout sidebar-width=\"0px\" style=\"height: 95vh;\">\n  <coral-header slot=\"main-header\" level=\"1\">\n    <coral-button id=\"run\" icon=\"play\">RUN</coral-button>\n  </coral-header>\n  <coral-panel slot=\"main-content\" class=\"main-content\" spacing>\n    <textarea id=\"configArea\"></textarea>\n    <div id=\"container\">\n      <atlas-blotter id=\"grid\"></atlas-blotter>\n    </div>\n    <emerald-popup-menu id=\"menu\"></emerald-popup-menu>\n  </coral-panel>\n</coral-sidebar-layout>","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"html,\nbody {\n  margin: 0;\n}\n\nbody {\n  padding: 20px;\n  box-sizing: border-box;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\na {\n  font: 1.2em Arial;\n  display: inline-block;\n  padding: 10px;\n  margin: 4px;\n  box-sizing: border-box;\n  border-radius: 8px;\n  border: 1px solid #eeeeee;\n  width: 32%;\n  text-align: center;\n  vertical-align: middle;\n  box-shadow: 0 5px 5px lightgrey;\n}\n\n.content-title {\n  padding-top: 5px;\n  padding-bottom: 5px;\n  font-size: 14px;\n}\n\n.main-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n#container {\n  height: 400px;\n}\n\n#grid {\n  height: 100%;\n}\n\ndiv {\n  min-height: 24px;\n}\n\nhr {\n  margin-top: 15px;\n  margin-bottom: 15px;\n}\n\n#configArea {\n  width: 100%;\n  padding-top: 15px;\n  height: 300px;\n  margin-bottom: 8px;\n  font-family: monospace;\n}\n\n#sidebar-content {\n  display: flex;\n  flex-direction: column;\n}","tagName":"pre"}]},{"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.<string>,\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.<string>,\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.<string, *>                                                            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                                                                                        <optional>                                                                                    1 indicates ascending order, and -1 indicates descending order        ","tagName":"tr"},{"text":"                            contextObject                                                    *                                                                                        <optional>                                                                                    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.<string>,\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.<string>,\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.<string, *>                                                            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.<string>,\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.<string, *>                                                            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                                                                                        <optional>                                                                                    Column width        ","tagName":"tr"},{"text":"                            minWidth                                                    number                                                                                        <optional>                                                                                    Minimum column width        ","tagName":"tr"},{"text":"                            minSize                                                    number                                                                                        <optional>                                                                                    Alias to `minWidth`        ","tagName":"tr"},{"text":"                            size                                                    number                                                                                        <optional>                                                                                    Alias to `width`        ","tagName":"tr"},{"text":"                            visible                                                    boolean                                                                                        <optional>                                                                                    Column visibility        ","tagName":"tr"},{"text":"                            scalable                                                    boolean                                                                                        <optional>                                                                                    Column scalability        ","tagName":"tr"},{"text":"                            styles                                                    Object.<string, string>                                                                                        <optional>                                                                                    Key/value pair object specifying CSS styles        ","tagName":"tr"},{"text":"                            classes                                                    Object.<string, string>                                                                                        <optional>                                                                                    Key/value pair object specifying CSS classes        ","tagName":"tr"},{"text":"                            dataColumnName                                                    string                                                                                        <optional>                                                                                    Data column for sorting        ","tagName":"tr"},{"text":"                            renderingHandler                                                    function                                                                                        <optional>                                                                                    Deprecated        ","tagName":"tr"},{"text":"                            dataBindingHandler                                                    function                                                                                        <optional>                                                                                    Column binding function        ","tagName":"tr"},{"text":"                            columnData                                                    string                                                                                        <optional>                                                                                    For attaching context (user data)        ","tagName":"tr"},{"text":"                            layout                                                    TrackLayout                                                                                        <optional>                                                                                    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.<string, *>                                                                    ","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                                                                                        <optional>                                                                                                                            false                                                        If enable, the column can be sorted by user click        ","tagName":"tr"},{"text":"                            sortBy                                                    string                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            null                                                        Custom compare function for sorting        ","tagName":"tr"},{"text":"                            sortingLogic                                                    DataTable.SortLogic                                                                                        <optional>                                                                                                                                                Alias to `sortLogic`        ","tagName":"tr"},{"text":"                            sorter                                                    DataTable.SortLogic                                                                                        <optional>                                                                                                                                                Alias to `sortLogic`        ","tagName":"tr"},{"text":"                            defaultSort                                                    string                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Set to \"d\" for descending order and \"a\" for ascending order        ","tagName":"tr"},{"text":"SortableTitlePlugin~SortOrder","tagName":"a"},{"text":"                            order                                                    SortableTitlePlugin~SortOrder                                                                                        <optional>                                                                                                                                                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.<SortableTitlePlugin.InitialSort>                                                                                        <optional>                                                                                                                            null                                                        Set this config to initiate sorting after grid is created.        ","tagName":"tr"},{"text":"SortableTitlePlugin~InitialSort","tagName":"a"},{"text":"                            multicolumn                                                    boolean | number                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        Alias to `multicolumn`        ","tagName":"tr"},{"text":"                            threeStatesSorting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, sorting will cycle through ascending, descending and original order states.        ","tagName":"tr"},{"text":"                            sortLogic                                                    Object.<string, DataTable.SortLogic>                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If enabled, double click on column title to sort        ","tagName":"tr"},{"text":"                            sortableColumns                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all columns will be sortable by field automatically        ","tagName":"tr"},{"text":"                            sortableIndicator                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                                                Set to \"manual\" to disable data sorting. Deprecated in favor of `indicatorOnly`        ","tagName":"tr"},{"text":"                            disabled                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                                                A shortcut to define the columnSorted event handler        ","tagName":"tr"},{"text":"                            preClicked                                                    function                                                                                        <optional>                                                                                                                                                A shortcut to define the preClicked event handler        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                                                A shortcut to define the clicked event handler        ","tagName":"tr"},{"text":"                            preDataSorting                                                    function                                                                                        <optional>                                                                                                                                                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.<number>                                                            An array of colIndex        ","tagName":"tr"},{"text":"                            sortOrders                                                    Array.<string>                                                            An array of sortOrder        ","tagName":"tr"},{"text":"                            sortedFields                                                    Array.<string>                                                            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                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                                                            \"\"                                                        Field for real-time, ADC, formula sources        ","tagName":"tr"},{"text":"                            dataType                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        data type eg. string, datetime, number        ","tagName":"tr"},{"text":"                            formulaReference                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                                ","tagName":"tr"},{"text":"                            require                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        Extra fields required by this column will be requested for real-time data.        ","tagName":"tr"},{"text":"                            name                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Label of the column        ","tagName":"tr"},{"text":"                            notRealTimeField                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Show tooltip in header section        ","tagName":"tr"},{"text":"                            headerBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Method for custom header rendering.        ","tagName":"tr"},{"text":"                            headerRenderer                                                    function                                                                                        <optional>                                                                                                                            null                                                        Alias to `headerBinding`        ","tagName":"tr"},{"text":"                            binding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Method for custom rendering. It will be executed on each data update and scrolling        ","tagName":"tr"},{"text":"                            renderer                                                    function                                                                                        <optional>                                                                                                                            null                                                        Alias to `binding`        ","tagName":"tr"},{"text":"                            sortLogic                                                    ColumnDefinition~SortLogic                                                                                        <optional>                                                                                                                            null                                                                ","tagName":"tr"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"                            sortingLogic                                                    ColumnDefinition~SortLogic                                                                                        <optional>                                                                                                                            null                                                        Alias to `sortLogic`        ","tagName":"tr"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"                            sorter                                                    ColumnDefinition~SortLogic                                                                                        <optional>                                                                                                                            null                                                        Alias to `sortLogic`        ","tagName":"tr"},{"text":"ColumnDefinition~SortLogic","tagName":"a"},{"text":"                            rowSorting                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            true                                                        If disabled, the column cannot be sorted by user click        ","tagName":"tr"},{"text":"                            sort                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Deprecated Alias to `sortOrder`        ","tagName":"tr"},{"text":"                            sortOrder                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                                                            null                                                        Key/value pair Object specifying CSS styles        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                        <optional>                                                                                                                            NaN                                                        If specified, column will have a fixed width in pixel        ","tagName":"tr"},{"text":"                            minWidth                                                    number                                                                                        <optional>                                                                                                                            NaN                                                        If specified, column will have a minimum width in pixel        ","tagName":"tr"},{"text":"                            scalable                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            \"\"                                                                ","tagName":"tr"},{"text":"                            class                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Alias to `className`        ","tagName":"tr"},{"text":"                            textAlign                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Text alignment for content and column header. Available values are: left|center|right        ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Alias to `textAlign`        ","tagName":"tr"},{"text":"                            headerAlignment                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Text alignment for column header. This will override `textAlign` option for column header.        ","tagName":"tr"},{"text":"                            titleAlignment                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Alias to `headerAlignment`        ","tagName":"tr"},{"text":"                            hidden                                                    boolean                                                                                        <optional>                                                                                                                            false                                                                ","tagName":"tr"},{"text":"                            id                                                    string                                                                                        <optional>                                                                                                                                                A unique identifier for the column        ","tagName":"tr"},{"text":"                            textSelect                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, user can select text in this column        ","tagName":"tr"},{"text":"                            keepModel                                                    boolean                                                                                        <optional>                                                                                                                                                If enabled, initial column's options will be kept        ","tagName":"tr"},{"text":"                            stationary                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        For storing any additional information to the column        ","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                                                                                        <optional>                                                                                                                            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)>                                                                                        <optional>                                                                                                                                                Collection of the column definitions        ","tagName":"tr"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"                            defaultColumnOptions                                                    ColumnDefinition~Options                                                                                        <optional>                                                                                                                                                All Columns will inherit from this default object        ","tagName":"tr"},{"text":"ColumnDefinition~Options","tagName":"a"},{"text":"                            rows                                                    Array.<RowDefinition~Options>                                                                                        <optional>                                                                                                                                                Collection of the row definitions        ","tagName":"tr"},{"text":"RowDefinition~Options","tagName":"a"},{"text":"                            fields                                                    Array.<string>                                                                                        <optional>                                                                                                                                                Shorthand for setting fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                                                        <optional>                                                                                                                                                Shorthand for creating row definition        ","tagName":"tr"},{"text":"                            plugins                                                    Array                                                                                        <optional>                                                                                                                                                Additional plugins for core grid (from getBlotter()/getCoreGrid())        ","tagName":"tr"},{"text":"                            extensions                                                    Array                                                                                        <optional>                                                                                                                                                Alias to `plugins`        ","tagName":"tr"},{"text":"                            scrollbar                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Enable both vertical and horizontal scrollbar in grid        ","tagName":"tr"},{"text":"                            linearWheelScrolling                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If enabled, a full row will be scrolled at a time instead of actual scroll value.        ","tagName":"tr"},{"text":"                            autoHideScrollbar                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Fading in/out Scrollbar on hover.        ","tagName":"tr"},{"text":"                            pageSize                                                    string                                                                                        <optional>                                                                                                                            0                                                        Make grid show specified number of row        ","tagName":"tr"},{"text":"                            rowHeight                                                    number                                                                                        <optional>                                                                                                                            32                                                        Set default row height for body (content) section        ","tagName":"tr"},{"text":"                            headerRowHeight                                                    number                                                                                        <optional>                                                                                                                            32                                                        Set default row height for header section        ","tagName":"tr"},{"text":"                            noColumnDragging                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        All columns can be moved by dragging. If this option is true, the feature is disabled        ","tagName":"tr"},{"text":"                            columnReorder                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Alias with noColumnDragging but in opposite value. This property deprecated in favor of noColumnDragging.        ","tagName":"tr"},{"text":"                            rowHighlighting                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Highlight a row when hovering mouse over grid        ","tagName":"tr"},{"text":"                            autoLayoutUpdate                                                    boolean | number                                                                                        <optional>                                                                                                                            false                                                        Grid will check for layout change periodically.        ","tagName":"tr"},{"text":"                            columnFreezing                                                    number                                                                                        <optional>                                                                                                                                                Deprecated in favor of column's leftPinned property. Enable horizontal scrollbar after `columnFreezing` index        ","tagName":"tr"},{"text":"                            freezeColumn                                                    number                                                                                        <optional>                                                                                                                                                Deprecated in favor of column's leftPinned property. An alias to columnFreezing        ","tagName":"tr"},{"text":"                            pinnedRightColumns                                                    number                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                                                Shorthand for calling Grid#addStaticDataRows        ","tagName":"tr"},{"text":"Grid#addStaticDataRows","tagName":"a"},{"text":"                            dataFields                                                    Array.<string>                                                                                        <optional>                                                                                                                                                Shorthand for calling Grid#addDataFields        ","tagName":"tr"},{"text":"Grid#addDataFields","tagName":"a"},{"text":"                            rowVirtualization                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        Lines around grid element        ","tagName":"tr"},{"text":"                            gridlines                                                    boolean                                                                                        <optional>                                                                                                                                                Horizontal and Vertical lines for ONLY content sections        ","tagName":"tr"},{"text":"                            verticalLines                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Vertical lines for all sections        ","tagName":"tr"},{"text":"                            contentVerticalLines                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Vertical lines for all content section        ","tagName":"tr"},{"text":"                            horizontalLines                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Horizontal lines for all sections        ","tagName":"tr"},{"text":"                            RTK                                                    *                                                                                        <optional>                                                                                                                            null                                                        rtk toolkit instance        ","tagName":"tr"},{"text":"                            ADC                                                    Grid~ADCOptions                                                                                        <optional>                                                                                                                            null                                                        ADC requesting level config object from adc team        ","tagName":"tr"},{"text":"Grid~ADCOptions","tagName":"a"},{"text":"                            synapse                                                    Grid~SynapseConfig                                                                                        <optional>                                                                                                                            null                                                        synapse config object        ","tagName":"tr"},{"text":"Grid~SynapseConfig","tagName":"a"},{"text":"                            contentRightPadding                                                    number                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            0                                                        Padding that is added below the last section. The padding is still a part of scrollable content.        ","tagName":"tr"},{"text":"                            dataConflationRate                                                    number                                                                                        <optional>                                                                                                                            0                                                        set delay for data to avoid to much sorting operation when data changed        ","tagName":"tr"},{"text":"                            autoDateConversion                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, date-time field with numeric value will be automatically converted to native date object.        ","tagName":"tr"},{"text":"                            textSelect                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, user can select content text by using mouse drag.        ","tagName":"tr"},{"text":"                            lang                                                    string                                                                                        <optional>                                                                                                                                                laguage for config localization date time, if null the default language is \"en\"        ","tagName":"tr"},{"text":"                            scrollbarParent                                                    Element                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            0                                                        Length of polling interval for refreshing ADC data in milliseconds. The default value (0) means no polling.        ","tagName":"tr"},{"text":"                            fieldCaching                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, field definition will be caching internal mechanism        ","tagName":"tr"},{"text":"                            timeSeriesExpansion                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the time series field will be treated as a normal field and not expanded.        ","tagName":"tr"},{"text":"                            childDataField                                                    string                                                                                        <optional>                                                                                                                            CHILD_VALUES                                                        The given field will be used to store children's static data, such as row color assignment.        ","tagName":"tr"},{"text":"                            topSection                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, title section will not be rendered        ","tagName":"tr"},{"text":"                            sorting                                                    SortableTitlePlugin~Options                                                                                        <optional>                                                                                                                                                Options for sorting        ","tagName":"tr"},{"text":"                            dataComposed                                                    function                                                                                        <optional>                                                                                                                                                Handler for dataComposed event        ","tagName":"tr"},{"text":"                            beforeContentBinding                                                    function                                                                                        <optional>                                                                                                                                                Handler for beforeContentBinding event        ","tagName":"tr"},{"text":"                            firstRendered                                                    function                                                                                        <optional>                                                                                                                                                Handler for firstRendered event        ","tagName":"tr"},{"text":"                            afterContentBinding                                                    function                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                                                Synapse authen token        ","tagName":"tr"},{"text":"                            debug                                                    boolean                                                                                        <optional>                                                                                                                            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":"let 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":"let 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":"let 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":"let gridConfig = {\n  synapse: { // define synapse configuration\n    apiKey: \"xxx\",\n    contextApp: \"xxx\",\n    auth: \"xxx\" (optional)\n  }\n};\nlet 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.<string>,\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.<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.<string>                                                            An array of newly added fields        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.<RowDefinition>                                                            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.<string>                                                            An array of recently removed fields        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.<RowDefinition>                                                            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.<string>                                                            An array of newly added rics        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.<RowDefinition>                                                            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.<string>                                                            An array of recently removed rics        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                            All fields        ","tagName":"tr"},{"text":"                            rics                                                    Array.<string>                                                            All rics        ","tagName":"tr"},{"text":"                            rowDefs                                                    Array.<RowDefinition>                                                            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                                                                                        <optional>                                                                                                                            \"\"                                                        RIC for real-time fields. Prefixing 0# to the ric is equivalent to specifying asChain property.        ","tagName":"tr"},{"text":"                            permId                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Organization PermId to be used instead of ric for private company.        ","tagName":"tr"},{"text":"                            values                                                    Array | Object                                                                                        <optional>                                                                                                                            null                                                        Values for static data        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        Field that corresponds to the given static values        ","tagName":"tr"},{"text":"                            asChain                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        The given ric will be treated as a chain        ","tagName":"tr"},{"text":"                            chainRic                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        RIC to be used for chain request (overiding ric property)        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Chain is collapsed by default        ","tagName":"tr"},{"text":"                            label                                                    string | null                                                                                        <optional>                                                                                                                            null                                                                ","tagName":"tr"},{"text":"                            hidden                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        When this row is hidden        ","tagName":"tr"},{"text":"                            realTime                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        Realtime row, able to request for JET/RTK        ","tagName":"tr"},{"text":"                            info                                                    Object                                                                                        <optional>                                                                                                                            null                                                        For storing any additional information to the row        ","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":"let 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":"getRowInfo()","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":"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":"setRowInfo(obj)","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 ELF team. The documentation for the element can be found on LSEG UI's Pagination page.","tagName":"p"},{"text":"ELF 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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<div class=\"container\">\n  <h5>Double tooltip will occur at clipped text</h5>\n  <div class=\"clipped\" title=\"This is a long long text example to show double tooltip behaviour.\">This is a long long text example to show double tooltip behaviour.</div>\n  <h5>Short text is fine</h5>\n  <div class=\"clipped\" title=\"Short text is fine.\">Short text</div>\n</div>","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":"<h3>\n\n  Round up case</h3>\n<div class=\"detail\">\n  Actual scrollWidth: 112.84px, javascript will round up to 113 <br> Actual clientWidth: 112px <br> 113 &gt; 112 = true <br> tooltip will be setted\n</div>\n<div class=\"example\" style=\"width: 112px;\">sample text ~~~</div>\n<h3>Round down case</h3>\n<div class=\"detail\">\n  Actual scrollWidth: 118.42px, javascript will round down to 118 <br> Actual clientWidth: 118px <br> 118 &gt; 118 = false <br> no tooltip apply\n</div>\n<div class=\"example\" style=\"width: 118px;\">sample text ~ ~</div>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If true, text in the header sections (top section) will be qualified for showing tooltip.        ","tagName":"tr"},{"text":"                            title                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Alias to `header`        ","tagName":"tr"},{"text":"                            footer                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If true, text in the footer sections will be qualified for showing tooltip.        ","tagName":"tr"},{"text":"                            content                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<textarea rows=\"5\" placeholder=\"Copy (Ctrl+C) the selected cells to retrieve text and store it in clipboard. Paste it to Excel or here and see if it is in tab separated format.\"></textarea>","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                                                                                        <optional>                                                                                                                            \"cell\"                                                        Available options are cell, row, and column        ","tagName":"tr"},{"text":"                            multipleSelection                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, only single cell can be selected at time        ","tagName":"tr"},{"text":"                            autoDeselecting                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the selection will remain after grid losing focus        ","tagName":"tr"},{"text":"                            tabToSelect                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            copy                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            beforeMouseDown                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            selectableSections                                                    Array                                                                                        <optional>                                                                                                                            ['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.<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                                                                                        <optional>                                                                                    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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<emerald-pagination id=\"paging_ui\"></emerald-pagination>\n<hr>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If enabled, grid row will be selected as checkbox is checked.        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                            \"CHECK_BOX\"                                                        Field that will be used for storing check state        ","tagName":"tr"},{"text":"                            disablingField                                                    string                                                                                        <optional>                                                                                                                            \"CHECK_BOX_DISABLED\"                                                        Field that will be used for storing disabling state        ","tagName":"tr"},{"text":"                            checkboxCreated                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for checkboxCreated event        ","tagName":"tr"},{"text":"                            checkboxBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for checkboxBinding event        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for checkbox clicked event        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                        <optional>                                                                                                                            34                                                        Width for checkbox column        ","tagName":"tr"},{"text":"                            topCheckboxHandler                                                    boolean                                                                                        <optional>                                                                                                                            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.<number>}","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":"<big>Try drag the top column header and check out the order of the available events in the console</big>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                    Function handler for dragStart event        ","tagName":"tr"},{"text":"                            drag                                                    function                                                                                        <optional>                                                                                    Function handler for drag event        ","tagName":"tr"},{"text":"                            dragEnd                                                    function                                                                                        <optional>                                                                                    Function handler for dragEnd event        ","tagName":"tr"},{"text":"                            preColumnMoved                                                    function                                                                                        <optional>                                                                                    Function handler for preColumnMoved event        ","tagName":"tr"},{"text":"                            columnMoved                                                    function                                                                                        <optional>                                                                                    Function handler for columnMoved event        ","tagName":"tr"},{"text":"                            dragInterval                                                    function                                                                                        <optional>                                                                                    Function handler for dragInterval event        ","tagName":"tr"},{"text":"                            dragBoxRenderer                                                    function                                                                                        <optional>                                                                                    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":"<button id=\"toggle_btn\">Toggle Column Fitting</button>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<button id=\"toggle_btn\">Toggle Column Fitting</button>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, the given column will not be included in the calculation        ","tagName":"tr"},{"text":"                            contentFitting                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                                                Minimum width of the column        ","tagName":"tr"},{"text":"                            maxWidth                                                    number                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            false                                                        Proportionally expand columns, if there is enough space        ","tagName":"tr"},{"text":"                            constraint                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Prevents column width to go lower than its content size        ","tagName":"tr"},{"text":"                            autoAdjust                                                    boolean | number                                                                                        <optional>                                                                                                                            false                                                        Automatic column width adjusting on each data update        ","tagName":"tr"},{"text":"                            autoAdjusting                                                    boolean | number                                                                                        <optional>                                                                                                                            false                                                        Alias to `autoAdjust`        ","tagName":"tr"},{"text":"                            title                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Include title section in the fitting calculation        ","tagName":"tr"},{"text":"                            paddingSize                                                    number                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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":"<span style=\"line-height: 24px;\">IPO Date column </span>\n\n<button id=\"btn_1\">MMM-DD-YYYY</button>\n<button id=\"btn_2\">MMM-DD-YY</button>\n<button id=\"btn_3\">Get format</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            showValues                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Fixate percent bar alignment. By default, percent bar alignment will be changed according to grid column alignment.        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                            THIS_COLUMN                                                        Data field        ","tagName":"tr"},{"text":"                            textHidden                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, displays percent bar only        ","tagName":"tr"},{"text":"                            textWidth                                                    number | string                                                                                        <optional>                                                                                                                                                If specified, percent bar text will have fixed width        ","tagName":"tr"},{"text":"                            barColor                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Custom color for bar element. This will override the useMovementColor        ","tagName":"tr"},{"text":"                            padding                                                    number                                                                                        <optional>                                                                                                                            8                                                        Extra space added to max width from autoTextSizing calculation        ","tagName":"tr"},{"text":"                            percentageLabel                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the value will not convert into percent format        ","tagName":"tr"},{"text":"                            autoTextSizing                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text space will be fixed        ","tagName":"tr"},{"text":"                            autoFitting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, text space will be auto adjusted. Otherwise, text space will stay extended to the longest length        ","tagName":"tr"},{"text":"                            zeroValueHidden                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            displayStyleTab                                                    ColumnFormattingPlugin~DisplayStyleOption                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"ColumnFormattingPlugin~DisplayStyleOption","tagName":"a"},{"text":"                            colorTextTab                                                    Object                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                        <optional>                                                                                            ","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                                                                                        <optional>                                                                                                                            \"\"                                                        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.<Object>                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"DisplayStyleOption","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                        <optional>                                                                                    \"default\" \"left\" \"right\" or \"center\"        ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                        <optional>                                                                                    Available options are \"general\", \"bar\", \"heatmap\", or \"conditionalColor\"        ","tagName":"tr"},{"text":"                            bar                                                    ColumnFormattingPlugin~BarOption                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"ColumnFormattingPlugin~BarOption","tagName":"a"},{"text":"                            conditionalColor                                                    ColumnFormattingPlugin~ConditionalColorOption                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"ColumnFormattingPlugin~ConditionalColorOption","tagName":"a"},{"text":"                            heatmap                                                    ColumnFormattingPlugin~HeatmapOption                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"ColumnFormattingPlugin~HeatmapOption","tagName":"a"},{"text":"                            general                                                    Object                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"HeatmapOption","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            midPoint                                                    string                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                        <optional>                                                                                    \"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.<string>}","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"move_to_group\">Move Column</button>\n&#xA0;&#xA0;\n<label>From Index: </label>\n<select id=\"input_column\">\n    <option value=\"0\">0</option>\n    <option value=\"1\">1</option>\n    <option value=\"2\">2</option>\n    <option value=\"3\">3</option>\n    <option value=\"4\">4</option>\n    <option value=\"5\">5</option>\n</select>&#xA0;&#xA0;\n<label>To Index: </label>\n<select id=\"input_dest\">\n    <option value>null</option>\n    <option value=\"0\">0</option>\n    <option value=\"1\">1</option>\n    <option value=\"2\">2</option>\n    <option value=\"3\">3</option>\n    <option value=\"4\">4</option>\n    <option value=\"5\">5</option>\n</select>&#xA0;&#xA0;\n<label>Group: </label>\n<select id=\"input_group\">\n    <option value>null</option>\n    <option value=\"g1\">Group 1</option>\n    <option value=\"g2\">Group 2</option>\n    <option value=\"g3\">Group 3</option>\n</select><br>\n<hr>\n<button id=\"set_parent\">Set Group</button>&#xA0;&#xA0;\n<label>Column Index: </label>\n<select id=\"input_col\">\n    <option value=\"0\">0</option>\n    <option value=\"1\">1</option>\n    <option value=\"2\">2</option>\n    <option value=\"3\">3</option>\n    <option value=\"4\">4</option>\n    <option value=\"5\">5</option>\n</select>&#xA0;&#xA0;\n<label>Group: </label>\n<select id=\"input_grp\">\n    <option value>null</option>\n    <option value=\"g1\">Group 1</option>\n    <option value=\"g2\">Group 2</option>\n    <option value=\"g3\">Group 3</option>\n</select><br>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<fieldset>\n  <legend>Setting Group</legend>\n  <div id=\"set_buttons\"></div>\n</fieldset>\n<fieldset>\n  <legend>Adding child</legend>\n  <div id=\"add_buttons\"></div>\n</fieldset>\n<fieldset>\n  <legend>Removing child</legend>\n  <div id=\"remove_buttons\"></div>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            true                                                        Show tooltip in column's header        ","tagName":"tr"},{"text":"                            children                                                    Array.<string>                                                                                                                                                                                                    Child member in this group        ","tagName":"tr"},{"text":"                            alignment                                                    string                                                                                        <optional>                                                                                                                                                eg. left, center, right        ","tagName":"tr"},{"text":"                            render                                                    function                                                                                        <optional>                                                                                                                                                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.<number>}","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.<string>}","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.<string>}","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, it will disable an ability to drag and resize the column        ","tagName":"tr"},{"text":"                            defaultWidth                                                    number                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        By setting this to true, grid size will not change after double click to resize column        ","tagName":"tr"},{"text":"                            noResizing                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            dblClicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            dragStart                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            dragEnd                                                    function                                                                                        <optional>                                                                                                                            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.<Object>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnWidths() → {Array.<number>}","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.<number>                                                                                                                                                ","tagName":"tr"},{"text":"                            scalability                                                    boolean                                                                                        <optional>                                                                                            ","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        If enabled, user can have one selection at any moment        ","tagName":"tr"},{"text":"                            clickToggle                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, click at the already selected column will deselect it        ","tagName":"tr"},{"text":"                            selectionChanged                                                    function                                                                                        <optional>                                                                                                                            null                                                        selectionChanged event handler        ","tagName":"tr"},{"text":"                            menuClicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event Handler when user clicks on menu icon.        ","tagName":"tr"},{"text":"                            menuPosition                                                    string                                                                                        <optional>                                                                                                                            \"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.<number>}","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<emerald-popup-menu id=\"popup_menu\"></emerald-popup-menu>","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":"<fieldset>\n  <legend>Setting stack</legend>\n  <div id=\"set_buttons\"></div>\n</fieldset>\n<fieldset>\n  <legend>Adding child</legend>\n  <div id=\"add_buttons\"></div>\n</fieldset>\n<fieldset>\n  <legend>Removing child</legend>\n  <div id=\"remove_buttons\"></div>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<emerald-popup-menu id=\"popup_menu\"></emerald-popup-menu>","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                                                                                        <optional>                                                                                    Group ID        ","tagName":"tr"},{"text":"                            stack                                                    string | ColumnStackPlugin~StackOptions                                                                                        <optional>                                                                                    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.<string>                                                                                                                                                                                                    Fields for stacking. The minimum is 2 fields        ","tagName":"tr"},{"text":"                            stacks                                                    Array.<ColumnStackPlugin~StackDefinition>                                                                                                                                                                                                    List of stacking configuration        ","tagName":"tr"},{"text":"ColumnStackPlugin~StackDefinition","tagName":"a"},{"text":"                            autoStacking                                                    boolean                                                                                        <optional>                                                                                                                                                Deprecated. Stacks are automatically maintained as long as its members exist        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler when user clicks on stack/expanding icon        ","tagName":"tr"},{"text":"                            menuElement                                                    Element                                                                                        <optional>                                                                                                                                                Element used to display a column selection list        ","tagName":"tr"},{"text":"                            menuItemClicked                                                    function                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            false                                                        If specified true, this group will be running in collapsing mode        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, this group will be expanded at the first time        ","tagName":"tr"},{"text":"                            activeColumn                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                                                            false                                                        If specified true, this group will be running in collapsing mode        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, this group will be expanded at the first time        ","tagName":"tr"},{"text":"                            children                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        List of column Ids for the stack members. String in this array is assumed to be column ids        ","tagName":"tr"},{"text":"                            fields                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        List of column fields for the stack members. This will override children property        ","tagName":"tr"},{"text":"                            name                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Name defined for specific stack        ","tagName":"tr"},{"text":"                            activeColumn                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                                                            false                                                        If specified true, this group will be running in collapsing mode        ","tagName":"tr"},{"text":"                            collapsed                                                    boolean                                                                                        <optional>                                                                                                                            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.<number>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"config(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"expandGroup(colIndex) → {Array.<number>}","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.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIdsByIndex(colIndices) → {Array.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIndicesByColumnIds(colIds) → {Array.<string>}","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.<number>}","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.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getStackMemberIndices(stackId) → {Array.<number>}","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.<ColumnStackPlugin~StackDefinition>}","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.<Object>                                                            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.<number>                                                            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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<fieldset>\n\n  <legend>Apply color</legend>\n  <div class>\n    <button id=\"set_color_1_btn\">Set #1</button>\n    <label style=\"background-color: #FF2848;\"> &gt; 40 </label>\n    <label style=\"background-color: #FFB27B;\"> &gt; 0 </label>\n    <label style=\"background-color: #EEF3B4;\"> &lt; 0 </label>\n  </div>\n  <div class>\n    <button id=\"set_color_2_btn\">Set #2</button>\n    <label style=\"background-color: #64864A; color: #FFFFFF;\"> &gt; 40 </label>\n    <label style=\"background-color: #F56093;\"> &gt; 0 </label>\n    <label style=\"background-color: #FFCCCD;\"> &lt; 0 </label>\n  </div>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, border will be blinked instead of background        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                If not specified, field from column definition will be used        ","tagName":"tr"},{"text":"                            up                                                    string                                                                                        <optional>                                                                                                                                                CSS color (e.g. #00ff00, green)        ","tagName":"tr"},{"text":"                            down                                                    string                                                                                        <optional>                                                                                                                                                CSS color (e.g. #ff0000, red)        ","tagName":"tr"},{"text":"                            level                                                    string | boolean                                                                                        <optional>                                                                                                                                                CSS color (e.g. #33333, grey). If false value is specified, blinking for level color is disabled.        ","tagName":"tr"},{"text":"                            duration                                                    number                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                    If not specified, field from column definition will be used        ","tagName":"tr"},{"text":"                            upClass                                                    string                                                                                        <optional>                                                                                    CSS class name.        ","tagName":"tr"},{"text":"                            downClass                                                    string                                                                                        <optional>                                                                                    CSS class name.        ","tagName":"tr"},{"text":"                            levelClass                                                    string                                                                                        <optional>                                                                                    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.<ConditionalColoringPlugin~Condition>                                                                                        <optional>                                                                                                                            null                                                        List of condition options        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~Condition","tagName":"a"},{"text":"                            colorText                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                        <optional>                                                                                                                            null                                                        A shorthand for specifying default condition based on the field.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            tickColor                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                        <optional>                                                                                                                            null                                                        Alias of colorText.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            blinking                                                    string | boolean | ConditionalColoringPlugin~Blinking                                                                                        <optional>                                                                                                                            null                                                        Blink Options. If specified, the cell will be blinked on data change.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~Blinking","tagName":"a"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                                                The expression can be in the following forms: text, function, and 2 dimentional array        ","tagName":"tr"},{"text":"                            backgroundColor                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        CSS color (e.g. #ffffff, black)        ","tagName":"tr"},{"text":"                            color                                                    string                                                                                        <optional>                                                                                                                                                CSS=\"\" color (e.g. #000000, white)        ","tagName":"tr"},{"text":"                            cssClass                                                    string                                                                                        <optional>                                                                                                                                                cssClass=\"\" Predefined color class name        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                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.<ConditionalColoringPlugin~Condition>                                                                                        <optional>                                                                                                                            null                                                        List of condition options        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~Condition","tagName":"a"},{"text":"                            colorText                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                        <optional>                                                                                                                            null                                                        A shorthand for specifying default condition based on the field.        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            tickColor                                                    string | boolean | ConditionalColoringPlugin~ColorText                                                                                        <optional>                                                                                                                            null                                                        Alias of colorText        ","tagName":"tr"},{"text":"ConditionalColoringPlugin~ColorText","tagName":"a"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                                                Predefined color object map for conditional coloring        ","tagName":"tr"},{"text":"                            blinkingDuration                                                    number                                                                                        <optional>                                                                                                                            250                                                        Blinking duration in milliseconds        ","tagName":"tr"},{"text":"                            insertionBlinking                                                    boolean                                                                                        <optional>                                                                                                                            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.<Object>}","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.<Object> 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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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":"<span id=\"text\"></span>\n\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                    Text to diplay at the item        ","tagName":"tr"},{"text":"                            value                                                    string | number                                                                                        <optional>                                                                                    Value attached to the item        ","tagName":"tr"},{"text":"                            isDisabled                                                    boolean                                                                                        <optional>                                                                                    If true the item will be disabled, default is false        ","tagName":"tr"},{"text":"                            isVisible                                                    boolean                                                                                        <optional>                                                                                    If false the item will not be displayed, default is true        ","tagName":"tr"},{"text":"                            isSeparator                                                    boolean                                                                                        <optional>                                                                                    If true the item is rendered as an item separator        ","tagName":"tr"},{"text":"                            items                                                    Array.<ContextMenuPlugin~MenuItem>                                                                                        <optional>                                                                                    Array of sub-menu items        ","tagName":"tr"},{"text":"ContextMenuPlugin~MenuItem","tagName":"a"},{"text":"                            renderer                                                    function                                                                                        <optional>                                                                                    Callback function to do custom rendering of the item, see more information in later section        ","tagName":"tr"},{"text":"                            callback                                                    ContextMenuPlugin~MenuItemEventCallback                                                                                        <optional>                                                                                    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.<string, ContextMenuPlugin~MenuItem>                                                            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.<number>                                                            Array of selected indices. Return null, if no selection        ","tagName":"tr"},{"text":"                            selectedRows                                                    Array.<number>                                                            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.<string, ContextMenuPlugin~MenuItem>                                                                                                                                                ","tagName":"tr"},{"text":"ContextMenuPlugin~MenuItem","tagName":"a"},{"text":"                            onMenu                                                    ContextMenuPlugin~OnMenuEventCallback                                                                                        <optional>                                                                                    @ @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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"Using filter input for fetching data","tagName":"h3"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter>\n</atlas-blotter>","tagName":"pre"},{"text":"var FilterInput = tr.FilterInputExtension;\nvar RowFiltering = tr.RowFilteringExtension;\nvar DataGenerator = tr.DataGenerator;\nvar fields = [\"market\", \"sentence\", \"CF_NETCHNG\", \"CF_LAST\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 100, seedd: 0 });\nvar filterInputExt = new FilterInput();\nvar rowFilteringExt = new RowFiltering();\n\nvar configObj = {\n  columns: [{\n      field: fields[0],\n      name: \"Market\",\n      filterInput: {\n        defaultLogic: function() {\n          // Disable default logic (disable filter to use server side filtering)\n          return true;\n        }\n      }\n    },\n    {\n      field: fields[1],\n      name: \"Description\",\n      filterInput: {\n        disabled: true\n      }\n    },\n    {\n      field: fields[2],\n      name: \"Net Chng.\",\n      filterInput: {\n        disabled: true\n      }\n    },\n    {\n      field: fields[3],\n      name: \"Last\",\n      filterInput: {\n        disabled: true\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [filterInputExt, rowFilteringExt]\n};\n\nvar grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.config = configObj;\n\nfilterInputExt.addEventListener(\"inputCreated\", function(e) {\n  var inputEl = e.input;\n  inputEl.addEventListener(\"value-changed\", onFilterInputKeyUp);\n});\n\nvar inputVal;\n\nfunction onFilterInputKeyUp(e) {\n  inputVal = e.detail.value;\n  // Simulate to fetch data from the server\n  conflationdFetch();\n}\n\n// ========== Simulate server side in below ==========\n\nfunction generateRecords(numRows, seed) {\n  // This function on server side\n  var records = DataGenerator.generateRecords(fields, {\n    numRows: numRows,\n    seed: seed\n  });\n\n  if (inputVal != null) {\n    console.log(inputVal);\n    var filterRecord = records.filter(function(record) {\n      return record[fields[0]].indexOf(inputVal) > -1;\n    });\n    return filterRecord;\n  }\n  return records;\n}\n\n// Define your fetch function\nfunction fetch() {\n  // Your code to make the server request goes here\n  console.log(\"Fetching data from the server...\");\n  // await data from the server\n  grid.data = generateRecords(1000); // assign data back to grid\n}\n\n// Create a conflation function to prevent excessive data call frequency\nfunction conflation(func, delay) {\n  let timeoutId;\n  return function() {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(func, delay);\n  };\n}\nvar conflationdFetch = conflation(fetch, 500);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\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":"                            defaultLogic                                                    function                                                                                        <optional>                                                                                                                            null                                                        Logic for filtering        ","tagName":"tr"},{"text":"                            filterLogic                                                    function                                                                                        <optional>                                                                                                                            null                                                        Alias to `defaultLogic`        ","tagName":"tr"},{"text":"                            disabled                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Disable UI        ","tagName":"tr"},{"text":"                            placeholder                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Placeholder text inside the input        ","tagName":"tr"},{"text":"                            type                                                    string                                                                                        <optional>                                                                                                                            \"text\"                                                        Type of UI. Available types are \"number\", \"multiselect\" ,\"select\", \"dropdown\", \"date\"        ","tagName":"tr"},{"text":"                            entries                                                    Array                                                                                        <optional>                                                                                                                                                Entries of dropdown filters when type is \"select\"        ","tagName":"tr"},{"text":"                            defaultValue                                                    *                                                                                        <optional>                                                                                                                                                Default value of input filter        ","tagName":"tr"},{"text":"                            trigger                                                    string                                                                                        <optional>                                                                                                                            \"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                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Handler executed after filter input is created        ","tagName":"tr"},{"text":"                            trigger                                                    string                                                                                        <optional>                                                                                                                            \"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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            0                                                        Middle point between values representing up and down colors        ","tagName":"tr"},{"text":"                            mode                                                    string                                                                                        <optional>                                                                                                                            \"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":"<big>Double click on the content cell to open text editor</big>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<big>Double click on the content cell to open text editor</big>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"Preventing rows from moving during editing","tagName":"h3"},{"text":"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.  ","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","tagName":"pre"},{"text":"var extension = new tr.InCellEditingExtension();\n\nvar fields = [\"id\", \"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar colNames = [\"Id\", \"Company\", \"Market\", \"Last\", \"Net. Chng\", \"Industry\"];\nvar columns = fields.map(function(f, idx) {\n  return {\n    name: colNames[idx],\n    field: f\n  };\n});\ncolumns[0].width = 60;\ncolumns[2].width = 150;\ncolumns[3].width = 150;\ncolumns[3].blinking = true;\ncolumns[4].width = 80;\n\nvar configObj = {\n  sorting: {\n    initialSort: {\n      sortOrder: \"a\",\n      field: fields[3],\n    }\n  },\n  columns: columns,\n  staticDataRows: generateRecords(),\n  inCellEditing: {\n    editableTitle: false,\n    editableContent: true\n  },\n  extensions: [\n    extension\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\nfunction generateRecords() {\n  var records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\n  records.forEach(function(record, idx) {\n    record[\"id\"] = idx;\n  });\n  return records;\n}\n\nsetInterval(function() {\n  grid.data = generateRecords();\n}, 2000);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 250px;\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                                                                                        <optional>                                                                                                                            false                                                        Make the column editable by double click        ","tagName":"tr"},{"text":"                            inCellEditing                                                    InCellEditingPlugin~EditorOptions                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            \"text\"                                                        Specify type of the editor. Available types are text, number, dropdown, date, checkbox, and combobox.        ","tagName":"tr"},{"text":"                            entries                                                    Array                                                                                        <optional>                                                                                                                            null                                                        Specify list of items available in the dropdown box        ","tagName":"tr"},{"text":"                            attributes                                                    Object                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        Show editor in a balloon. This is useful when there is not much space in the cell        ","tagName":"tr"},{"text":"                            editableTitle                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all column headers can be edited by double click        ","tagName":"tr"},{"text":"                            editableContent                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all content cells can be edited by double click. This can be overridden individual column configuration.        ","tagName":"tr"},{"text":"                            autoCommitText                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, the text will be committed even if user leaving editor midway        ","tagName":"tr"},{"text":"                            dataBinding                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text will not be updated in the grid's data table        ","tagName":"tr"},{"text":"                            popupElement                                                    Element                                                                                        <optional>                                                                                                                            null                                                        Element to be attached under the editor        ","tagName":"tr"},{"text":"                            doubleClick                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, double click will not trigger editor        ","tagName":"tr"},{"text":"                            tabToMove                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, pressing tab key while editor is active will open editor on the next editable cell.        ","tagName":"tr"},{"text":"                            contentSource                                                    string                                                                                        <optional>                                                                                                                            \"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                                                                                        <optional>                                                                                                                            false                                                        force inline styles regardless of elf version.        ","tagName":"tr"},{"text":"                            disablingScroll                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Scrollbar will be frozen when editor opened. Deprecated in favor of uiBlocking        ","tagName":"tr"},{"text":"                            uiBlocking                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        append transparent overlay to block ui interaction        ","tagName":"tr"},{"text":"                            preEditorOpening                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler before editor is opened        ","tagName":"tr"},{"text":"                            editorOpened                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler after editor is opened        ","tagName":"tr"},{"text":"                            beforeCommit                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler before data binding, allowing data type conversion        ","tagName":"tr"},{"text":"                            editorClosed                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler after editor is closed        ","tagName":"tr"},{"text":"                            keyUp                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler for each keyup of the input text box        ","tagName":"tr"},{"text":"                            beforeRowCommit                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler before committing from all editors in the row        ","tagName":"tr"},{"text":"                            rowEditorClosed                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler after closing of all editors        ","tagName":"tr"},{"text":"                            autoSuggest                                                    Element                                                                                        <optional>                                                                                                                            null                                                        Element of emerald-autosuggest or atlas-autosuggest for handled with input cell        ","tagName":"tr"},{"text":"                            closingOnScroll                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the editor will not be automatically closed when scrolling grid.        ","tagName":"tr"},{"text":"                            autoHiding                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                    Text that user has entered        ","tagName":"tr"},{"text":"                            cancel                                                    boolean                                                                                        <optional>                                                                                    Set to true to cancel the commit operation.        ","tagName":"tr"},{"text":"                            groupHeader                                                    boolean                                                                                        <optional>                                                                                    This value is set to true if the editing row is a group header.        ","tagName":"tr"},{"text":"                            segmentSeparator                                                    boolean                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    Text that user has entered        ","tagName":"tr"},{"text":"                            groupHeader                                                    boolean                                                                                        <optional>                                                                                    This value is set to true if the editing row is a group header.        ","tagName":"tr"},{"text":"                            segmentSeparator                                                    boolean                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>\n<emerald-pagination id=\"pagination\"></emerald-pagination>","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                                                                                        <optional>                                                                                                                            1                                                        Initial page to be shown        ","tagName":"tr"},{"text":"                            pageSize                                                    number                                                                                        <optional>                                                                                                                            10                                                        Number of rows per page        ","tagName":"tr"},{"text":"                            element                                                    string | Element                                                                                        <optional>                                                                                                                                                A reference to pagination element. This can be a direct pointer or element's id        ","tagName":"tr"},{"text":"                            elements                                                    Array                                                                                        <optional>                                                                                                                            null                                                        Multiple references can be linked to a single grid        ","tagName":"tr"},{"text":"                            pageChanged                                                    function                                                                                        <optional>                                                                                                                            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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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                                                                                        <optional>                                                                                            ","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                                                                                        <optional>                                                                                                                            8                                                        Extra space added to max width from autoTextSizing calculation        ","tagName":"tr"},{"text":"                            percentageLabel                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the value will not convert into percent format        ","tagName":"tr"},{"text":"                            autoTextSizing                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text space will be fixed.        ","tagName":"tr"},{"text":"                            autoFitting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, text space will be auto adjusted. Otherwise, text space will stay extended to the longest length        ","tagName":"tr"},{"text":"                            zeroValueHidden                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            \"\"                                                        Fixate percent bar alignment. By default, percent bar alignment will be changed according to grid column alignment.        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                            THIS_COLUMN                                                        Data field        ","tagName":"tr"},{"text":"                            textHidden                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, displays percent bar only        ","tagName":"tr"},{"text":"                            textWidth                                                    number | string                                                                                        <optional>                                                                                                                                                If specified, percent bar text will have fixed width        ","tagName":"tr"},{"text":"                            useMovementColor                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, percent bar will not use up and down colors        ","tagName":"tr"},{"text":"                            barColor                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Custom color for bar element. This will override the useMovementColor        ","tagName":"tr"},{"text":"                            padding                                                    number                                                                                        <optional>                                                                                                                            8                                                        Extra space added to max width from autoTextSizing calculation        ","tagName":"tr"},{"text":"                            percentageLabel                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the value will not convert into percent format        ","tagName":"tr"},{"text":"                            autoTextSizing                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text space will be fixed        ","tagName":"tr"},{"text":"                            autoFitting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, text space will be auto adjusted. Otherwise, text space will stay extended to the longest length        ","tagName":"tr"},{"text":"                            zeroValueHidden                                                    boolean                                                                                        <optional>                                                                                                                            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.<Object>}","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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 <High_value\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 99,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 99,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 99,\n  CFHIGH: 50,\n  percent: 99\n});\n\n// High<Low\nrecords.push({\n  id: records.length,\n  CFLOW: 99,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 99,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 99,\n  CFHIGH: 1,\n  percent: 99\n});\n\n// Two equal\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 1,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 50,\n  percent: 50\n});\n\n// Three equal \nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 1,\n  CFHIGH: 1,\n  percent: 1\n});\n\nvar configObj = {\n  scrollbar: true,\n  columns: [{\n      name: \"ID\",\n      field: fields[0],\n      width: 60\n    },\n    {\n      name: \"Low\",\n      field: fields[1],\n      width: 60\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 60\n    },\n    {\n      name: \"High\",\n      field: fields[3],\n      width: 60\n    },\n    {\n      name: \"Range (Low, Last, High)\",\n      field: fields[2],\n      alignment: \"c\",\n      rangeBar: {\n        low: \"CFLOW\",\n        high: \"CFHIGH\",\n        last: \"CF_LAST\"\n      }\n    },\n    {\n      name: \"Percent\",\n      field: fields[4],\n      width: 60\n    },\n    {\n      name: \"Percent (Without low, last, high)\",\n      field: fields[4],\n      rangeBar: {\n        field: fields[4]\n      }\n    },\n    {\n      name: \"Percent (start 30, end 70)\",\n      field: fields[4],\n      rangeBar: {\n        field: fields[4],\n        start: 30, // default 0\n        end: 70 // default 100\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [rangeBarExt]\n};\n\nvar grid = window.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":"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":"Price Graph","tagName":"h3"},{"text":"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.","tagName":"p"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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 <High_value\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 99,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 99,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 99,\n  CFHIGH: 50,\n  percent: 99\n});\n\n// High<Low\nrecords.push({\n  id: records.length,\n  CFLOW: 99,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 99,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 99,\n  CFHIGH: 1,\n  percent: 99\n});\n\n// Two equal\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 1,\n  CFHIGH: 50,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 50,\n  CFHIGH: 1,\n  percent: 50\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 50,\n  CF_LAST: 1,\n  CFHIGH: 1,\n  percent: 1\n});\n\nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 50,\n  CFHIGH: 50,\n  percent: 50\n});\n\n// Three equal \nrecords.push({\n  id: records.length,\n  CFLOW: 1,\n  CF_LAST: 1,\n  CFHIGH: 1,\n  percent: 1\n});\n\nvar configObj = {\n  scrollbar: true,\n  columns: [{\n      name: \"ID\",\n      field: fields[0],\n      width: 60\n    },\n    {\n      name: \"Low\",\n      field: fields[1],\n      width: 60\n    },\n    {\n      name: \"Last\",\n      field: fields[2],\n      width: 60\n    },\n    {\n      name: \"High\",\n      field: fields[3],\n      width: 60\n    },\n    {\n      name: \"Range (Low, Last, High)\",\n      field: fields[2],\n      alignment: \"c\",\n      rangeBar: {\n        low: \"CFLOW\",\n        high: \"CFHIGH\",\n        last: \"CF_LAST\"\n      }\n    },\n    {\n      name: \"Percent\",\n      field: fields[4],\n      width: 60\n    },\n    {\n      name: \"Percent (Without low, last, high)\",\n      field: fields[4],\n      rangeBar: {\n        field: fields[4]\n      }\n    },\n    {\n      name: \"Percent (start 30, end 70)\",\n      field: fields[4],\n      rangeBar: {\n        field: fields[4],\n        start: 30, // default 0\n        end: 70 // default 100\n      }\n    }\n  ],\n  staticDataRows: records,\n  extensions: [rangeBarExt]\n};\n\nvar grid = window.grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\n// Create tooltip container section, we reused element for avoid create element multiple times\n// This container will be show the user\nvar LEDTooltipUI = document.createElement(\"div\");\nLEDTooltipUI.style.textTransform = \"capitalize\"; // To title case\nvar keys = [\"low\", \"last\", \"high\"];\nfor (var i = 0; i < keys.length; i++) {\n  var key = keys[i];\n  var elem = document.createElement(\"div\");\n  LEDTooltipUI[key] = elem;\n  LEDTooltipUI.appendChild(elem);\n}\n// End tooltip container creation\n\n// in application side need to import addTooltipCondition from tooltip component\n// For example import { addTooltipCondition } from \"@elf/coral-tooltip\"; // for elf v4\n// import { addTooltipCondition } from '@refinitiv-ui/elements/tooltip'; // for elf v6\ntr.addTooltipCondition(LEDGuageTooltipCondition, LEDGuageTooltipRenderer);\n\nfunction LEDGuageTooltipCondition(target, paths) {\n  var relPos = grid.api.getRelativePosition(target);\n  if (!relPos.hit) {\n    return false;\n  }\n  if (relPos.sectionType !== \"content\") {\n    return false;\n  }\n  if (rangeBarExt.isRangeBarColumn(relPos.colIndex)) {\n    LEDTooltipUI._relPos = relPos; // We need to cache the relative position in the container element for use when renderer in the tooltip to avoid calling getRelativePosition multiple times.\n    return true;\n  }\n  return false;\n}\n\nfunction LEDGuageTooltipRenderer(target) {\n  var relPos = LEDTooltipUI._relPos;\n  var colIndex = relPos.colIndex;\n  var lowLastHigh = rangeBarExt.getValue(colIndex, relPos[\"rowIndex\"]);\n  if (lowLastHigh) {\n    // update value into tooltip UI\n    LEDTooltipUI[\"low\"].textContent = \"Low: \" + (lowLastHigh[\"low\"] != null ? lowLastHigh[\"low\"] : \"--\");\n    LEDTooltipUI[\"last\"].textContent = \"Last: \" + (lowLastHigh[\"last\"] != null ? lowLastHigh[\"last\"] : \"--\");\n    LEDTooltipUI[\"high\"].textContent = \"High: \" + (lowLastHigh[\"high\"] != null ? lowLastHigh[\"high\"] : \"--\");\n  }\n  // else {} // Currenlty, we don't have the rangeBar field that can't getValue, even if the N/A case getValue will be return object (with undefiend value)\n  return LEDTooltipUI;\n}","tagName":"pre"},{"text":"atlas-blotter {\n  height: 208px;\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":"                            rangeBar                                                    RangeBarPlugin~RangeDefinition                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            THIS_COLUMN                                                        Field used as percentage. If specified, `low`, `high`, and `last` fields will be ignored.        ","tagName":"tr"},{"text":"                            start                                                    number                                                                                        <optional>                                                                                                                            0                                                        minimum value used with percentage `field`        ","tagName":"tr"},{"text":"                            end                                                    number                                                                                        <optional>                                                                                                                            100                                                        maximum value used with percentage `field`        ","tagName":"tr"},{"text":"                            low                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as minimum range        ","tagName":"tr"},{"text":"                            high                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as maximum range        ","tagName":"tr"},{"text":"                            last                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as current absolute value (white bar)        ","tagName":"tr"},{"text":"                            vwap                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as volume weighted average price (VWAP)        ","tagName":"tr"},{"text":"                            close                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Field used as close price        ","tagName":"tr"},{"text":"                            tick                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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":"<button id=\"get_btn\">Show Data</button>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<textarea id=\"drop_target\" placeholder=\"Drop Content Here\"></textarea>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, information box will be shown during the drag        ","tagName":"tr"},{"text":"                            disabled                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            true                                                        If disabled, mousemove/mousedown will not trigger the drag operation.        ","tagName":"tr"},{"text":"                            dataTransfer                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, internal row data will not be moved at the end of the drag operation.        ","tagName":"tr"},{"text":"                            autoScroll                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, grid will not be verticallly scrolled when mouse is hovering around the edges of the grid.        ","tagName":"tr"},{"text":"                            dragBoxRenderer                                                    function                                                                                        <optional>                                                                                                                                                Allow user to customize dragBox        ","tagName":"tr"},{"text":"                            dragStart                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for dragStart event        ","tagName":"tr"},{"text":"                            drag                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for drag event        ","tagName":"tr"},{"text":"                            dragEnd                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for dragEnd event        ","tagName":"tr"},{"text":"                            dataMoved                                                    function                                                                                        <optional>                                                                                                                            null                                                        Function handler for dataMoved event        ","tagName":"tr"},{"text":"                            beforeDataMoved                                                    function                                                                                        <optional>                                                                                                                            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.<number>                                                            row indices of the selected rows        ","tagName":"tr"},{"text":"                            srcRowIds                                                    Array.<string>                                                            row ids of the selected rows        ","tagName":"tr"},{"text":"                            srcRowTypes                                                    Array.<string>                                                            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.<number>                                                            row indices of the selected rows        ","tagName":"tr"},{"text":"                            srcRowIds                                                    Array.<string>                                                            row ids of the selected rows        ","tagName":"tr"},{"text":"                            srcRowTypes                                                    Array.<string>                                                            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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<input id=\"search_input\" placeholder=\"Search Anything...\" type=\"search\">\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"filter_btn1\">Change &gt; 20%</button>\n\n<button id=\"filter_btn2\">Change 10%-20%</button>\n<button id=\"filter_btn3\">In NASDAQ</button>\n<button id=\"filter_btn4\">Services industry</button>\n<button id=\"filter_btn5\">Clear Filter</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"mode_always\"> always </button>\n\n<button id=\"mode_hover\"> onHover </button>\n<button id=\"mode_active\"> onActiveFilter </button>\n<button id=\"mode_none\"> none </button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                                                An expression string or Function        ","tagName":"tr"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"                            filterState                                                    *                                                                                        <optional>                                                                                                                                                Context object that will be passed as the third parameter for the filter logic        ","tagName":"tr"},{"text":"                            filterIcon                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                    show/hide sort UI        ","tagName":"tr"},{"text":"                            filterUI                                                    boolean                                                                                        <optional>                                                                                    show/hide filter UI        ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                        <optional>                                                                                    data type of column        ","tagName":"tr"},{"text":"                            lang                                                    string                                                                                        <optional>                                                                                    dialog language        ","tagName":"tr"},{"text":"                            rawDataAccessor                                                    function                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    This function will be called on each raw data, allowing formatting data to be displayed on the filter item list        ","tagName":"tr"},{"text":"                            sortLogic                                                    function                                                                                        <optional>                                                                                    This function for sorting filter item list in the dialog. The comparison will perform on raw values, and not formatted values        ","tagName":"tr"},{"text":"                            itemList                                                    Array                                                                                        <optional>                                                                                    Item list to be shown in the dialog. If this is not specified, the list will be collected from existing data on the grid        ","tagName":"tr"},{"text":"                            additionalItems                                                    Array                                                                                        <optional>                                                                                    Additional items to be put on the itemList        ","tagName":"tr"},{"text":"                            blankValues                                                    boolean | string                                                                                        <optional>                                                                                    Display a \"(Blanks)\" item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item        ","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            false                                                        Deprecated in favor of `iconActivation`. Set iconActivation to none instead.        ","tagName":"tr"},{"text":"                            iconActivation                                                    string                                                                                        <optional>                                                                                                                            onActiveFilter                                                        Filter icon redering behavior, can be set to `always`,`onHover`,`onActiveFilter`,or `none`        ","tagName":"tr"},{"text":"                            dialogOptions                                                    RowFilteringPlugin~FilterDialogOptions                                                                                        <optional>                                                                                                                            null                                                        Default configuration for Filter Dialog, applying to all columns.        ","tagName":"tr"},{"text":"RowFilteringPlugin~FilterDialogOptions","tagName":"a"},{"text":"                            click                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched when a user clicks the column filter icon.        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Alias to `click` event handler        ","tagName":"tr"},{"text":"                            iconCreated                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched when a new column filter icon is created.        ","tagName":"tr"},{"text":"                            filterChanged                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched whenever global or column filter is changed by either adding or removing.        ","tagName":"tr"},{"text":"                            beforeDialogOpened                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched before dialog opening.        ","tagName":"tr"},{"text":"                            dialogCommitted                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched whenever the new settings from dialog are applied.        ","tagName":"tr"},{"text":"                            refreshed                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler dispatched after new filter is applied to grid's data view.        ","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.<function()>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnFilterExpression(colIndex) → {RowFilteringPlugin~Expression}","tagName":"h4"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"RowFilteringPlugin~Expression","tagName":"a"},{"text":"getColumnFilterIcons(colIndex) → {Array.<Element>}","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.<RowFilteringPlugin~FilterExpression>}","tagName":"h4"},{"text":"RowFilteringPlugin~FilterExpression","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"RowFilteringPlugin~FilterExpression","tagName":"a"},{"text":"getFilters() → {Array.<function()>}","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                                                                                        <optional>                                                                                    When filter is changed, the change will be passed through this property        ","tagName":"tr"},{"text":"                            sortOrder                                                    number                                                                                        <optional>                                                                                    When sort order is changed, the change will be passed through this property        ","tagName":"tr"},{"text":"                            fieldDataType                                                    string                                                                                        <optional>                                                                                            ","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"If you want to use the predefinedColors option and specify a groupId using the groupColors property, there are certain limitations to be aware of. Specifically, you need to be aware of the group ID, as you've already set the groupColor within the grid configuration. This implies that you won't be able to alter the groupColors during runtime. ","tagName":"p"},{"text":"However, if your intention is to modify individual groups during runtime, you can achieve this by using the setGroupColor method. By providing the group ID and the color as arguments to this method to change the tag colors. If you want to add a new group to the grid and set its color using this API, we recommend listening for the groupAdded event and use setGroupColor method to set group color when the group is added as show you in example below.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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\n// Application should be manage your group object in your application\nvar currentCountGroup = 6;\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    colorClass: \"yellow\",\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    colorClass: \"yellow\",\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    colorClass: \"red\",\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    colorClass: \"red\",\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    colorClass: \"green\",\n    icon: \"info\",\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    colorClass: \"green\",\n    icon: \"info\",\n\n  }\n};\n\n// Approved \nfunction onContinueClicked(groupId, e) {\n  var rowIds = grid.api.getDataView().getGroup(groupId).getAllRowIds();\n  var groupStatus = statusMapping[groupId];\n  var nextStatus = groupStatus.statusName;\n  var statusObj = {\n    statusName: \"Approved Send\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"green\"].backgroundColor,\n    status: \"approved\",\n    icon: \"info\",\n    colorClass: \"green\"\n  };\n  var newGroupId = \"GROUP_\" + ++currentCountGroup;\n  statusMapping[newGroupId] = statusObj;\n  for (var i = 0; i < rowIds.length; i++) {\n    var rowId = rowIds[i];\n    var rowDef = grid.api.getRowDefinition(rowId);\n    rowDef.setData(\"status\", newGroupId);\n  }\n  currentCountGroup++;\n\n  e.stopPropagation(); // Prevent collapsing/expanding grouop when click header\n}\n\nfunction onAbortClicked(groupId, e) {\n  var rowIds = grid.api.getDataView().getGroup(groupId).getAllRowIds();\n  var groupStatus = statusMapping[groupId];\n  var nextStatus = groupStatus.statusName;\n  var statusObj = {\n    statusName: \"Denined Register\",\n    detail: \"Buy TASLA.O 5,000 @ 145.11 (gs)\",\n    color: predefinedColorsSet[\"red\"].backgroundColor,\n    status: \"denied\",\n    icon: \"info\",\n    colorClass: \"red\"\n  };\n  var newGroupId = \"GROUP_\" + ++currentCountGroup;\n  statusMapping[newGroupId] = statusObj;\n  for (var i = 0; i < rowIds.length; i++) {\n    var rowId = rowIds[i];\n    var rowDef = grid.api.getRowDefinition(rowId);\n    rowDef.setData(\"status\", newGroupId);\n  }\n  currentCountGroup++;\n\n  e.stopPropagation(); // Prevent collapsing/expanding grouop when click header\n}\n\nfunction onGroupAdded(e) {\n  var newGroup = e.newGroup;\n  var groupId = newGroup.getGroupId();\n  var groupStatus = statusMapping[groupId];\n  rowGrouping.setGroupColor(groupId, statusMapping[groupId].colorClass);\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    autoGroupRemoval: true,\n    groupAdded: onGroupAdded\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 = 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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<button id=\"group_btn1\">Clear grouping</button>\n<button id=\"group_btn2\">Group by company name</button>\n<button id=\"group_btn3\">Group by market and then company name</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<div>\n  Predefined color #1\n  <div id=\"set1\" class=\"example-container\"></div>\n  <button id=\"apply_btn1\">Apply</button>\n</div>\n<div>\n  Predefined color #2\n  <div id=\"set2\" class=\"example-container\"></div>\n  <button id=\"apply_btn2\">Apply</button>\n</div>\n\n<hr>\n\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<fieldset>\n  <legend> Operations </legend>\n  <span> Position (rowIndex) : </span> <input value=\"1\" id=\"rowIndex_txt\">\n  <button id=\"add_row\"> Add row </button>\n  <button id=\"remove_row\"> Remove row </button>\n  <button id=\"update_row\"> Change row data </button>\n  <button id=\"change_group\"> Change Group </button>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                            ","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                                                                                        <optional>                                                                                                                            false                                                        Remove group that has no row member.        ","tagName":"tr"},{"text":"                            autoGroupHiding                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Hide \"null\" or \"undefined\" group headers, while keeping the group's items intact.        ","tagName":"tr"},{"text":"                            predefinedGroups                                                    Array | Array.<Array>                                                                                        <optional>                                                                                                                            null                                                        Add groups without content rows. Use 2D array for multi-level grouping.        ","tagName":"tr"},{"text":"                            groupBy                                                    RowGroupingPlugin~GroupCriteria                                                                                        <optional>                                                                                                                            null                                                        GroupCriteria can be string, function, or array of string.        ","tagName":"tr"},{"text":"RowGroupingPlugin~GroupCriteria","tagName":"a"},{"text":"                            groupCriteria                                                    RowGroupingPlugin~GroupCriteria                                                                                        <optional>                                                                                                                            null                                                        Alias to `groupBy`.        ","tagName":"tr"},{"text":"RowGroupingPlugin~GroupCriteria","tagName":"a"},{"text":"                            displayColumn                                                    number                                                                                        <optional>                                                                                                                            0                                                        Column Index for group header rendering.        ","tagName":"tr"},{"text":"                            fixedDisplayColumn                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, displayColumn will remain in the same index, even if columns are shifted by insertion or removal.        ","tagName":"tr"},{"text":"                            noCollapsible                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            true                                                        If disabled, clicking at cell will not expand that group        ","tagName":"tr"},{"text":"                            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.        ","tagName":"tr"},{"text":"                            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.        ","tagName":"tr"},{"text":"                            headerSpanning                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, every cell on the group header row is displayed        ","tagName":"tr"},{"text":"                            footerSpanning                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, only cells from the first column will be shown, spanning over other cells        ","tagName":"tr"},{"text":"                            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)        ","tagName":"tr"},{"text":"RowGroupingPlugin~GroupSortLogic","tagName":"a"},{"text":"                            autoGroupSorting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, group sorting will be performed after each `groupAdded` event        ","tagName":"tr"},{"text":"                            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.        ","tagName":"tr"},{"text":"                            colorTag                                                    boolean                                                                                        <optional>                                                                                                                                                If not specified, the color tag will be disabled when using extension without halo theme.        ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                        <optional>                                                                                                                                                Predefined color object map for color tag        ","tagName":"tr"},{"text":"                            groupColors                                                    Object                                                                                        <optional>                                                                                                                                                The object map of group ID and predefined color.        ","tagName":"tr"},{"text":"                            defaultCollapse                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Collapsing groups by default when a group is created        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler when user clicks on arrows or cells        ","tagName":"tr"},{"text":"                            groupAdded                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            beforeGroupAdded                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler        ","tagName":"tr"},{"text":"                            groupHeaderBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Logic that will be executed on each group header row        ","tagName":"tr"},{"text":"                            groupFooterBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Once defined, footer row will be added on each group        ","tagName":"tr"},{"text":"                            headerBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Shorthand for `groupHeaderBinding`        ","tagName":"tr"},{"text":"                            footerBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Shorthand for `groupFooterBinding`        ","tagName":"tr"},{"text":"                            nonGroupBinding                                                    function                                                                                        <optional>                                                                                                                            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":"getFooterRowCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupingCriteria() → {Array.<string>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getGroupingStates() → {Array.<RowGroupingPlugin~GroupingState>}","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":"setGroupColor(groupRef, groupColor)","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":"<button id=\"set_btn1\">Toggle Row 3</button>\n\n<button id=\"set_btn2\">Toggle Row 6</button>\n<button id=\"set_btn3\">Toggle Row 9</button>\n<button id=\"unset_btn\">Remove All Separators</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"set_btn1\">Classify by market</button>\n<button id=\"set_btn2\">Classify by industry</button>\n<button id=\"set_btn3\">Classify by market and industry</button>\n<button id=\"set_btn4\">Unclassify</button>\n<hr>\n<button id=\"data_btn1\">Set row 6 market to NASDAQ</button>\n<button id=\"data_btn2\">Set row 6 market to DJI</button>\n<button id=\"data_btn3\">Set row 6 industry to Investment Managers</button>\n<button id=\"data_btn4\">Set row 6 industry to Paper</button>\n<hr>\n<atlas-blotter></atlas-blotter>","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":"<button id=\"clear_sort\">Clear sorting states</button>\n\n<button id=\"original_sort_segment\">Sort segments to original order</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<div>\n  Predefined color #1\n  <div id=\"set1\" class=\"example-container\"></div>\n  <button id=\"apply_btn1\">Apply</button>\n</div>\n<div>\n  Predefined color #2\n  <div id=\"set2\" class=\"example-container\"></div>\n  <button id=\"apply_btn2\">Apply</button>\n</div>\n<hr>\n<div>\n  Change color of 6th row\n  <button id=\"set_color_btn1\">color #1</button>\n  <button id=\"set_color_btn2\">color #2</button>\n  <button id=\"set_color_btn3\">color #3</button>\n</div>\n<hr>\n\n<atlas-blotter></atlas-blotter>","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":"<span>Row Index</span>\n\n\n<input value=\"1\" type=\"number\" id=\"row_index\">\n<hr>\n<span> Set segment color</span>\n<button id=\"set_segment_color_1\"> Segment color 1 </button>\n<button id=\"set_segment_color_2\"> Segment color 2 </button>\n<button id=\"set_segment_color_3\"> Segment color 3 </button>\n<button id=\"unset_segment_color\"> Unset Segment Color</button>\n<hr>\n<span> Toggle Spanning </span>\n<button id=\"spanning_segment_separator\"> Toggle </button>\n<hr>\n<span> Save grid config for restore </span>\n<button id=\"save_config\"> Save config </button>\n<span id=\"copy_success\"> </span>\n<atlas-blotter></atlas-blotter>","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":"<span> You can load the grid config with pase in below text area and then click &quot;Start Grid&quot; </span>\n<hr>\n<button id=\"start_grid\"> Start Grid </button>\n<hr>\n<textarea id=\"area_config\" placeholder=\"Patse grid config and click Start Grid\"></textarea>\n<hr>\n<atlas-blotter></atlas-blotter>","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":"<label>Empty segment filtering: <input id=\"empty_segment_chk\" type=\"checkbox\" checked></label>\n<i></i>\n<label>Separator filtering: <input id=\"separator_chk\" type=\"checkbox\" checked></label>\n<hr>\n<atlas-blotter></atlas-blotter>","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                                                                                        <optional>                                                                                                                            true                                                        If disabled, segment separator rows will not be spanned/stretched across multiple cells        ","tagName":"tr"},{"text":"                            colorTag                                                    boolean                                                                                        <optional>                                                                                                                                                If not specified, the color tag will be disabled when using extension without halo theme.        ","tagName":"tr"},{"text":"                            cssField                                                    string                                                                                        <optional>                                                                                                                            \"TAG_CSS_CLASS\"                                                        Apply CSS class based on the given field        ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                        <optional>                                                                                                                                                Predefined color object map for color tag        ","tagName":"tr"},{"text":"                            clicked                                                    function                                                                                        <optional>                                                                                                                            null                                                        Event handler when user clicks on arrows or cells        ","tagName":"tr"},{"text":"                            headerMenuClicked                                                    function                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Logic that will be executed on each segment separator row        ","tagName":"tr"},{"text":"                            nonSegmentSeparatorBinding                                                    function                                                                                        <optional>                                                                                                                            null                                                        Logic that will be executed for all non segment separator row        ","tagName":"tr"},{"text":"                            sortingLogic                                                    function                                                                                        <optional>                                                                                                                            null                                                        Logic to be used by sortSegments method        ","tagName":"tr"},{"text":"                            rowSpanningField                                                    string                                                                                        <optional>                                                                                                                            \"ROW_SPANNING\"                                                        selected field for apply row spanning in row separator        ","tagName":"tr"},{"text":"                            segmentIdField                                                    string                                                                                        <optional>                                                                                                                            \"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.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSegmentIds() → {Array.<string>}","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<big>Try copy (<b>Ctrl/Command + C</b>) text and paste the content on the text box below</big>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<hr>\n<textarea placeholder=\"Paste Clipboard Content Here\"></textarea>","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                                                                                        <optional>                                                                                                                            false                                                        If enabled, user can have one selection at any moment        ","tagName":"tr"},{"text":"                            selectionChanged                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler executed after selection is made        ","tagName":"tr"},{"text":"                            beforeSelection                                                    function                                                                                        <optional>                                                                                                                            null                                                        Handler executed before selection is made        ","tagName":"tr"},{"text":"                            basedOnContent                                                    boolean                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Event Handler when user clicks on menu icon.        ","tagName":"tr"},{"text":"                            menuPosition                                                    string                                                                                        <optional>                                                                                                                            \"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.<string>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSelectedRows(sectRefopt) → {Array.<number>}","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":"<button id=\"set_btn\">Set Row Color</button>\n\nRow Index: <input id=\"row_inp\" type=\"number\" value=\"0\"> Color: <input id=\"color_inp\" type=\"color\" value=\"#cbaacb\">\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<div class=\"control-group\">\n  Row index <input type=\"number\" value=\"3\" id=\"row_index\">\n</div>\n<div class=\"control-group\">\n  Set color\n  <div id=\"btn_group\">\n  </div>\n  <button id=\"reset\">Reset</button>\n</div>\n<div class=\"control-group\">\n  Predefiend color\n  <button id=\"extend_color\">Extend</button>\n  <button id=\"shrink_color\">Shrink</button>\n</div>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            true                                                        If disabled, background color will not be applied to the row        ","tagName":"tr"},{"text":"                            textColoring                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, text color will not be applied to the row        ","tagName":"tr"},{"text":"                            bgColorField                                                    string                                                                                        <optional>                                                                                                                            \"BG_COLOR\"                                                        Apply background color based on the given field        ","tagName":"tr"},{"text":"                            textColorField                                                    string                                                                                        <optional>                                                                                                                            \"TEXT_COLOR\"                                                        Apply text color based on the given field        ","tagName":"tr"},{"text":"                            cssField                                                    string                                                                                        <optional>                                                                                                                            \"CSS_CLASS\"                                                        Apply CSS class based on the given field        ","tagName":"tr"},{"text":"                            cssRangeField                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                                                            \"\"                                                        Apply alternative CSS class based on the given field which not in range field        ","tagName":"tr"},{"text":"                            predefinedColors                                                    Object                                                                                        <optional>                                                                                                                                                Predefined color object map        ","tagName":"tr"},{"text":"                            predefinedColoring                                                    boolean                                                                                        <optional>                                                                                                                            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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            null                                                        Array of StatisticsRowPlugin~RowOptions        ","tagName":"tr"},{"text":"                            invalidText                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Text to be shown for invalid statistic (i.e. Not a Number value)        ","tagName":"tr"},{"text":"                            noColoring                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all conditional coloring (i.e. tick coloring) will not automatically be applied.        ","tagName":"tr"},{"text":"                            noFormatting                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If enabled, all formatting (i.e. decimal places) will not automatically be applied.        ","tagName":"tr"},{"text":"                            postCalculation                                                    function                                                                                        <optional>                                                                                                                                                Function handler excuted after statistics calculation and before default rendering        ","tagName":"tr"},{"text":"                            postRendering                                                    function                                                                                        <optional>                                                                                                                                                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                                                                                        <optional>                                                                                                                            \"footer\"                                                        Available footer are \"header\", \"title\", and \"footer\"        ","tagName":"tr"},{"text":"                            statistic                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        Statistic to be calculated. Predefined values are \"average\", \"min\", \"max\", \"count\", and \"sum\"        ","tagName":"tr"},{"text":"                            label                                                    string                                                                                        <optional>                                                                                                                            null                                                        By default, label will be statistics name.        ","tagName":"tr"},{"text":"                            id                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        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                                                                                        <optional>                                                                                            ","tagName":"tr"},{"text":"                            label                                                    boolean                                                                                        <optional>                                                                                    Indicating the column is used to show label        ","tagName":"tr"},{"text":"                            count                                                    number                                                                                        <optional>                                                                                    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                                                                                        <optional>                                                                                    Summation        ","tagName":"tr"},{"text":"                            average                                                    number                                                                                        <optional>                                                                                    Average        ","tagName":"tr"},{"text":"                            min                                                    number                                                                                        <optional>                                                                                    Minimum        ","tagName":"tr"},{"text":"                            max                                                    number                                                                                        <optional>                                                                                    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.<StatisticsRowPlugin~RowOptions>}","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.<string>                                                            Fields for current columns        ","tagName":"tr"},{"text":"                            statistics                                                    Array.<StatisticsRowPlugin~Stats>                                                            Array of statistic values. You should add your custom statistics to the object        ","tagName":"tr"},{"text":"StatisticsRowPlugin~Stats","tagName":"a"},{"text":"                            dataRows                                                    Array.<Object>                                                            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.<string>                                                            Fields for current columns        ","tagName":"tr"},{"text":"                            statistics                                                    Array.<StatisticsRowPlugin~Stats>                                                            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.<Object>                                                            Definition objects given at the configuration time        ","tagName":"tr"},{"text":"                            footerRows                                                    Array.<Object>                                                            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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"TextFormattingPlugin~FormatOptions","tagName":"a"},{"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                                                                                        <optional>                                                                                                                                                Available options are: number, scaled, percent, and datetime        ","tagName":"tr"},{"text":"                            type                                                    string                                                                                        <optional>                                                                                                                                                Alias to formatType        ","tagName":"tr"},{"text":"                            field                                                    string                                                                                        <optional>                                                                                                                                                Field is required but can be defined in the column definition object        ","tagName":"tr"},{"text":"                            decimalPlaces                                                    number | boolean                                                                                        <optional>                                                                                                                            2                                                                ","tagName":"tr"},{"text":"                            precisionEnabled                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, number of decimal will remain as original.        ","tagName":"tr"},{"text":"                            plusSign                                                    boolean                                                                                        <optional>                                                                                                                            false                                                                ","tagName":"tr"},{"text":"                            separator                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Thousands separators        ","tagName":"tr"},{"text":"                            percentSign                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        If the formatType is percent and the value of percentSign is not specified, the percentSign is set to true by default        ","tagName":"tr"},{"text":"                            scalingUnit                                                    string                                                                                        <optional>                                                                                                                            million                                                        Value can be million or billion        ","tagName":"tr"},{"text":"                            multiplyBy100                                                    boolean                                                                                        <optional>                                                                                                                            false                                                                ","tagName":"tr"},{"text":"                            mutiplyBy100                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Alias of multiplyBy100        ","tagName":"tr"},{"text":"                            dateTimeFormat                                                    string                                                                                        <optional>                                                                                                                            \"MM/DD/YYYY\"                                                                ","tagName":"tr"},{"text":"                            useUTCTime                                                    boolean                                                                                        <optional>                                                                                                                            true                                                                ","tagName":"tr"},{"text":"                            autoTextFormatting                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, the extension's automatic formatting will not be triggered, including `formatLogic`        ","tagName":"tr"},{"text":"                            formatLogic                                                    function                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            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                                                                                        <optional>                                                                                                                            2                                                                ","tagName":"tr"},{"text":"                            plusSign                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            separator                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            percentSign                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            scalingUnit                                                    string                                                                                        <optional>                                                                                                                                                Value can be million or billion        ","tagName":"tr"},{"text":"                            multiplyBy100                                                    boolean                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            dateTimeFormat                                                    string                                                                                        <optional>                                                                                                                                                        ","tagName":"tr"},{"text":"                            useUTCTime                                                    boolean                                                                                        <optional>                                                                                                                                                        ","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<big>Ctrl + Mouse Scroll to zoom in/out.</big>\n\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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                                                                                        <optional>                                                                                                                            1                                                        Default zoom level range from 0.6 to 2        ","tagName":"tr"},{"text":"                            step                                                    number                                                                                        <optional>                                                                                                                            0.1                                                        Steps size of each zoom level        ","tagName":"tr"},{"text":"                            wheel                                                    boolean                                                                                        <optional>                                                                                                                            true                                                        If disabled, not allow wheel event to change zoom        ","tagName":"tr"},{"text":"                            maxFactor                                                    number                                                                                        <optional>                                                                                                                            2                                                        Maximum zoom factor level        ","tagName":"tr"},{"text":"                            minFactor                                                    number                                                                                        <optional>                                                                                                                            0.5                                                        Minimum zoom factor level        ","tagName":"tr"},{"text":"                            zoomChanged                                                    function                                                                                        <optional>                                                                                                                            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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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 = \"<span>\" + e.data + \"</span><span>2</span>\"; // 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":"<atlas-blotter>\n</atlas-blotter>","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":"<atlas-blotter>\n</atlas-blotter>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","tagName":"pre"},{"text":"var href = \"https://www.lseg.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.lseg.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.lseg.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.lseg.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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<efx-grid id=\"grid\">\n</efx-grid>","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":"<fieldset>\n  <legend>Setting Columns</legend>\n  <button id=\"column_btn1\">Column Set 1</button>\n  <button id=\"column_btn2\">Column Set 2</button>\n  <button id=\"column_btn3\">Clear All Columns</button>\n</fieldset>\n<fieldset>\n  <legend>Setting Data</legend>\n  <button id=\"data_btn1\">Data Set 1</button>\n  <button id=\"data_btn2\">Data Set 2</button>\n  <button id=\"data_btn3\">Clear All Data</button>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<fieldset>\n  <legend>Setting Rows</legend>\n  <button id=\"row_btn1\">Row Set 1 (3 Rows)</button>\n  <button id=\"row_btn2\">Row Set 2 (4 Rows)</button>\n  <button id=\"row_btn3\">Row Set 3 (5 Rows)</button>\n  <button id=\"row_btn4\">Clear All Rows</button>\n</fieldset>\n<fieldset>\n  <legend>Updating Data</legend>\n  <button id=\"data_btn1\">Data Set 1 (3 Rows) </button>\n  <button id=\"data_btn2\">Data Set 2 (4 Rows) </button>\n  <button id=\"data_btn3\">Data Set 3 (5 Rows) </button>\n  <button id=\"data_btn4\">Clear All Data</button>\n</fieldset>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"multi_add_btn\">Add 5 Rows at once</button>\n<button id=\"add_btn\">Add Row at the Bottom</button>\n<button id=\"add_top_btn\">Add a row at the Top</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","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":"<button id=\"top_row_btn\">Get Top Row Data</button>\n<button id=\"col_btn\">Get Data from Column</button>\n<button id=\"all_btn\">Get All Data</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","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":"<button id=\"realtime_btn\">Toggle Real-time Update</button>\n<button id=\"eur_btn\">Update EUR=</button>\n<button id=\"jpy_btn\">Update JPY=</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","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":"<button id=\"remove_top_btn\">Remove Top Row</button>\n<button id=\"remove_all_btn\">Remove All Rows</button>\n<button id=\"add_5_btn\">Add 5 Rows</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","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":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"lft_btn\">Left Alignment</button>\n<button id=\"ctr_btn\">Center Alignment</button>\n<button id=\"rgt_btn\">Right Alignment</button>\n<button id=\"reset_btn\">Reset Alignment</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"insert_col_btn\">Insert Column</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"hideColumnButton\">Hide Column 0</button>\n<button id=\"showColumnButton\">Show Column 0</button>\n<button id=\"showColumn5Button\">Show Column 5</button>\n<button id=\"removeColumnButton\">Remove Column 0</button>\n<button id=\"removeAllColumns\">Remove All Columns</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<div id=\"container\">\n</div>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<big>Move</big>\n<select id=\"source_sel\"></select>\n<big>to the position before</big>\n<div id=\"destination_div\"></div>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"Custom Header/Title","filename":"columns/custom-title-formatter.html","contents":[{"text":"You can display anything you want on grid's column header/title by using headerBinding. The binding works in similar way to content binding, where the method will be executed each time grid's header gets updated. columnDef is supplied in the event argument to provide additional information about the column header being rendered. ","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":"Additional element example","tagName":"h2"},{"text":"<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var fields = [\"id\", \"companyName\", \"market\", \"CF_LAST\", \"PCTCHNG\"];\nvar columns = fields.map(function(f) {\n  return {\n    field: f\n  };\n});\n\ncolumns[0].headerBinding = function headerWithLink(e) {\n  var cell = e.cell;\n  var content = cell.getContent();\n  if (!content || !content._myHeaderWithLink) {\n    content = document.createElement(\"div\");\n    content._myHeaderWithLink = true;\n\n    var span = content._span = document.createElement(\"span\");\n    span.style.marginRight = \"5px\";\n    var link = content._link = document.createElement(\"ef-icon\");\n    link.icon = \"link\";\n    link.addEventListener(\"click\", function(arg) {\n      arg.stopPropagation();\n      alert(\"Icon clicked\");\n    });\n    content.appendChild(span);\n    content.appendChild(link);\n  }\n\n  content._span.textContent = e.columnDef.getName();\n  cell.setContent(content);\n};\n\ncolumns[2].headerBinding = function headerWithCheckbox(e) {\n  var cell = e.cell;\n  var content = cell.getContent();\n  if (!content || !content._myHeaderWithCheckbox) {\n    content = document.createElement(\"div\");\n    content._myHeaderWithCheckbox = true;\n\n    var span = content._span = document.createElement(\"span\");\n    span.style.marginRight = \"5px\";\n    // You will need to import the checkbox theme files for this to be shown\n    var chkbox = content._chkbox = document.createElement(\"ef-checkbox\");\n    chkbox.addEventListener(\"checked-changed\", function(arg) {\n      alert(\"Checkbox changed\");\n    });\n    chkbox.addEventListener(\"click\", function(arg) {\n      arg.stopPropagation();\n    });\n    content.appendChild(span);\n    content.appendChild(chkbox);\n  }\n\n  content._span.textContent = e.columnDef.getName();\n  cell.setContent(content);\n};\n\nvar ROW_COUNT = 10;\nvar records = DataGenerator.generateRecords(fields, {\n  seed: 0,\n  numRows: ROW_COUNT\n});\n\nvar configObj = {\n  columns: columns,\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Floating element example","tagName":"h2"},{"text":"<efx-grid id=\"grid\"></efx-grid>","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":"<big>Hover mouse over Grid to see row highlighting</big>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"hide_btn\">Hide First 3 Rows</button>\n<button id=\"show_btn\">Show Rows</button>\n<button id=\"clear_btn\">Unhide All</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"header_btn\">Add Header Section</button>\n<button id=\"footer_btn\">Add Footer Section</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<big>Group By:</big>\n\n<button id=\"g1_btn\">Market</button>\n<button id=\"g2_btn\">Industry</button>\n<button id=\"g23_btn\">Market and Industry</button>\n<button id=\"clear_btn\">Reset Grouping</button>\n<br><br>\n<big>Expand:</big>\n<button id=\"expand_btn\">Expand All Groups</button>\n<button id=\"collapse_btn\">Collapse All Groups</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<button id=\"reset_btn\">Reset Grid Height to Default</button>\n<button id=\"set_200_btn\">Set Grid Height to 200px</button>\n<button id=\"set_600_btn\">Set Grid Height to 600px</button>\n<br><br>\n<atlas-blotter id=\"grid\" style=\"height: 200px\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"reset_btn\">Reset All Column Widths to Default</button>\n<button id=\"fixate_all_btn\">Fixate All Column Widths</button>\n<button id=\"fixate_first_btn\">Fixate the First Column</button>\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<div id=\"grid_container\">\n  <atlas-blotter id=\"grid\"></atlas-blotter>\n</div>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<fieldset id=\"pinning_set\">\n  <legend>Pinning</legend>\n</fieldset>\n<fieldset id=\"unpinning_set\">\n  <legend>Unpinning</legend>\n</fieldset>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"sort_btn1\">Sort Column 1</button>\n<button id=\"sort_btn2\">Sort Column 2</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"sort_btn1\">Sort Column 1</button>\n<button id=\"sort_btn2\">Sort Column 2</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<hr>\n<textarea id=\"output_ta\" placeholder=\"Click at the grid header to sort\"></textarea>","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      requestData(evtArg);\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\n\nfunction mockCallbackData(resp) {\n  if (resp.success) {\n    console.log(\"Loading success, Data sorted\");\n    grid.data = resp.data;\n  }\n}\n\n// Mock to request data\nfunction requestData(obj) {\n  console.log(\"Loading data from server side\");\n  // Mock data on server side\n  setTimeout(function() {\n    // Mock to query data from DB.\n    var resRecords = tr.DataGenerator.generateRecords(fields, { numRows: 10 }); // NOTE: It's random data\n    var sortField = obj.sortedField;\n    var sortOrder = obj.sortOrder;\n    resRecords = resRecords.sort(sortFx.bind(null, sortOrder, sortField));\n    mockCallbackData({\n      success: true,\n      data: resRecords\n    });\n  }, 100);\n}\n\nfunction sortFx(sortOrder, sortField, rowA, rowB) {\n  return compareFunction(rowA, rowB, sortField, sortOrder);\n}\n\nfunction compareFunction(rowA, rowB, sortField, sortOrder) {\n  var valueA = rowA[sortField];\n  var valueB = rowB[sortField];\n\n  if (sortOrder === \"a\") {\n    return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;\n  } else {\n    return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;\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":"<efx-grid>\n</efx-grid>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<button id=\"get_btn\">Get Current States</button>\n<button id=\"reset_btn\">Clear All Sorting</button>\n<textarea id=\"output_ta\" placeholder=\"Click at the grid header to sort\"></textarea>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<input id=\"rank_rather_10\" type=\"button\" value=\"Col1 - Rank &gt; 10\">\n<input id=\"start_with_a\" type=\"button\" value=\"Col2 - Countries start with &apos;A&apos;\">\n<input id=\"small_countries\" type=\"button\" value=\"Col3 - Small countries\">\n<input id=\"clear\" type=\"button\" value=\"Clear Filters\">\n<br><br>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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 <option> elements. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n  var items = [\n    [\">=\", \"GTE\"],\n    [\"<=\", \"LTE\"],\n    [\"==\", \"EQ\"],\n    [\"<\", \"LT\"],\n    [\">\", \"GT\"]\n  ];\n  var options = items.map(function(item) {\n    var optElem = document.createElement(\"option\");\n    optElem.textContent = item[0]; // Label\n    optElem.value = item[1];\n    return optElem;\n  });\n\n  // Create <select> element\n  var selElem = document.createElement(\"select\");\n  selElem.style.display = \"inline-block\";\n  selElem.style.width = \"40%\";\n  selElem.style.maxHeight = \"unset\";\n  options.forEach(function(optElem) {\n    selElem.appendChild(optElem);\n  });\n\n  // Save variables for later use\n  selElem.colIndex = e.colIndex;\n  selElem.input = e.input;\n  e.input.filterType = options[0].value;\n  e.input.style.width = \"60%\";\n\n  // Add event listener for business logic\n  selElem.addEventListener(\"mousedown\", function(e) {\n    e.stopPropagation();\n  }, false);\n  selElem.addEventListener(\"click\", function(e) {\n    e.stopPropagation();\n  }, false);\n  selElem.addEventListener(\"change\", function(e) {\n    e.stopPropagation();\n\n    var elem = e.currentTarget;\n    var selectedOption = elem.options[elem.selectedIndex];\n    var colIndex = elem.colIndex;\n    console.log(\"Selection changed on colIndex: \", colIndex);\n\n    // Update filter type\n    elem.input.filterType = selectedOption.value;\n\n    // Force recalculation of filtering\n    filterInputExt.refresh();\n  }, false);\n\n  // Insert select element before the input element\n  var parentInput = e.input.parentNode;\n  parentInput.insertBefore(selElem, parentInput.firstChild);\n}\n\nvar myFilterLogic = function(e, rowData) {\n  if (e.inputText) {\n    var num = +(e.inputText);\n    var cellValue = rowData[e.field];\n\n    switch (e.input.filterType) {\n      case \"GTE\":\n        return (cellValue >= num);\n      case \"LTE\":\n        return (cellValue <= num);\n      case \"GT\":\n        return (cellValue > num);\n      case \"LT\":\n        return (cellValue < num);\n      default:\n        return (cellValue == num);\n    }\n  } else {\n    return true;\n  }\n}\n\nvar configObj = {\n  columns: [{\n      name: \"Rate\",\n      field: \"rate\",\n      sortBy: \"rate\",\n      alignment: \"right\",\n      filterInput: {\n        defaultLogic: myFilterLogic,\n        placeholder: \"e.g. 1, 0, or -1\"\n      },\n      width: 200,\n      alignment: \"c\"\n    },\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  ],\n  rowFiltering: {\n    disabledUI: true\n  },\n  extensions: [\n    rowFilteringExt,\n    filterInputExt\n  ],\n  filterInput: {\n    inputCreated: onInputCreated\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":"Get Filter States / Reset All","filename":"filtering/filtering-get-reset.html","contents":[{"text":"The Row Filtering Extension provides APIs such as:","tagName":"p"},{"text":"Row Filtering Extension","tagName":"a"},{"text":"For more details see the Row Filter Extension API documentation.","tagName":"p"},{"text":"Row Filter Extension API documentation","tagName":"a"},{"text":"<button id=\"get_states_btn\">Get Filter States</button>\n<button id=\"reset_all_btn\">Clear All Filters</button>\n<atlas-blotter id=\"grid\"></atlas-blotter>","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\ndocument.getElementById('get_states_btn').addEventListener('click', function() {\n  var states = rowFilteringExt.getColumnFilterStates();\n  alert(JSON.stringify(states));\n});\n\ndocument.getElementById('reset_all_btn').addEventListener('click', function() {\n  // Remove all filters and update the UI where applicable (via reset() method)\n  rowFilteringExt.removeAllColumnFilters();\n});\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":"Printing Grid","filename":"utilities/printing.html","contents":[{"text":"You can print Grid using the Printing Utility or the native printer feature within a browser. The native printer is more difficult to use, however.","tagName":"p"},{"text":"Using a native printer","tagName":"h2"},{"text":"Since content can scroll inside Grid, native printers do not work well with it, as the final print preview truncates any components that are not currently visible on the screen.","tagName":"p"},{"text":"To solve this, you need to update the grid's configuration to show all hidden information before you preview it. See the steps below.","tagName":"p"},{"text":"1. Initialize Grid","tagName":"h3"},{"text":"var config = {\n  // ... See column options for available options\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = config;","tagName":"pre"},{"text":"2. Adjust the Grid's resolution","tagName":"h3"},{"text":"Adjust the Grid's resolution to reflect the paper size (for example, A3, A4, A5).","tagName":"p"},{"text":"@media print CSS properties cannot be used to adjust Grid's style, as Grid will not re-render itself with CSS properties. They can only be used to adjust the layout before the print preview.","tagName":"p"},{"text":"function beforePrint() {\n  grid.style.width = \"180mm\"; // A4 width\n  grid.style.height = \"unset\";\n}","tagName":"pre"},{"text":"3. Delayed window.print","tagName":"h3"},{"text":"Grid needs approximately 300ms to recalculate and re-render itself. So you need to make sure Grid has enough time to update its state before the print preview appears.","tagName":"p"},{"text":"function print() {\n  beforePrint();\n  setTimeout(function () {\n    window.print();\n  }, 500); // Grid needs at least 300ms  to recalculate and repaint itself.\n}","tagName":"pre"},{"text":"4. After printing","tagName":"h3"},{"text":"Lastly, the grid's configuration needs to be restored to its initial state. For this, the window.onafterprint hook will be triggered once printing is finished.","tagName":"p"},{"text":"window.onafterprint = function () {\n  grid.style.width = \"100%\";\n  grid.style.height = \"500px\";\n}","tagName":"pre"},{"text":"Using the Printing Utility","tagName":"h2"},{"text":"Unlike the native printer above, the Printing Utility has been created to help print the grid without other components. Rows and columns will not be truncated when using the utility.","tagName":"p"},{"text":"Basically, the utility creates a new grid DOM dynamically and copies its data into this newly created grid. It will be destroyed automatically when printing is finished.","tagName":"p"},{"text":"<button id=\"print\">print</button>\n<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"icon\"];\nDataGenerator.addFieldInfo(\"icon\", {\n  type: \"set\",\n  members: [\"up\", \"down\", \"phone\", \"calendar\", \"flame\"]\n});\nvar records = DataGenerator.generateRecords(fields, { numRows: 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    { name: \"Icon\", field: fields[5], binding: EFIconFormatter.create() }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ndocument.getElementById(\"print\").addEventListener(\"click\", function() {\n  GridPrinter.print(grid);\n});","tagName":"pre"},{"text":"atlas-blotter {\n  height: 300px;\n}","tagName":"pre"},{"text":"First, install package from npm.","tagName":"p"},{"text":"npm install @refinitiv-ui/efx-grid","tagName":"pre"},{"text":"Then, use import syntax for importing the utility into your app.","tagName":"p"},{"text":"import { GridPrinter } from \"@refinitiv-ui/efx-grid/utils\";","tagName":"pre"},{"text":"Finally, send Grid into the GridPrinter utility.","tagName":"p"},{"text":"var config = {\n    // ... See column options for available options\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = config;\n\nGridPrinter.print(grid);","tagName":"pre"},{"text":"GridPrinter 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":"                            pageWidth                                                    number                                                                                        <optional>                                                                                    Paper width in pixel. This limits number of columns to be shown on a single page        ","tagName":"tr"},{"text":"                            pageHeight                                                    number                                                                                        <optional>                                                                                    Paper height in pixel. This limits number of rows to be shown on a single page        ","tagName":"tr"},{"text":"                            primaryColumn                                                    number                                                                                        <optional>                                                                                    Column index that will be placed as the first column on each page.        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"createPrintElement(grid, optionsopt) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"enableDebugMode(boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getPreFlightInfo(grid, optionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"observe(iFrameElementopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"print(grid)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setPrintOptions(options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"unobserve()","tagName":"h4"}]},{"title":"Multi-table","filename":"utilities/multi-table.html","contents":[{"text":"Multiple grids can be created within a single page. They are independent from each other. A change made to one grid won't affect on the other grids. Sometimes, you want multiple instances of the same grid to make more room for displaying data. MultiTableManager is created to support such case. MultiTableManager will create multiple instances of the same grid and syncronize any column related change across all those instances. Each grid created by MultiTableManager will always have the same column configuration and the extensions. You can have different different row content on each grid. ","tagName":"p"},{"text":"Note that MultiTableManager is just a helper class object. It is not a Grid extension which is tied to single grid instance. It can be viewed as another wrapper that manages multiple Grid instances. ","tagName":"p"},{"text":"Support features","tagName":"h2"},{"text":"MultiTableManager is still in development and support only some basic features as listed below:","tagName":"p"},{"text":"Usage","tagName":"h2"},{"text":"To use multi-table feature, you need to import MultiTableManager, a helper, from package. Then, initialize the helper by supplying Grid element. The element will be used as a primary table for creating another table. Lastly, initialize the Grid element by using setGridConfig method from the helper to specify configuration. ","tagName":"p"},{"text":"To adjust number of tables, use setTableCount method. ","tagName":"p"},{"text":"To get Grid element, use getTable method.","tagName":"p"},{"text":"The basic setup process is shown in the example below:","tagName":"p"},{"text":"import MultiTableManager from \"@refinitiv-ui/efx-grid/utils\";\n\nvar gridElement = document.getElementById(\"grid\");\nvar mgr = new MultiTableManager(gridElement);\n\nvar configObj = {\n    /* grid configuration */\n};\nmgr.setGridConfig(configObj);\n\nmgr.setTableCount(3); // Or any other number","tagName":"pre"},{"text":"Multi-table example","tagName":"h3"},{"text":"<button id=\"table_btn1\">Table Count 1</button>\n\n<button id=\"table_btn2\">Table Count 2</button>\n<button id=\"table_btn3\">Table Count 3</button>\n<button id=\"table_btn4\">Table Count 4</button>\n<hr>\n<div id=\"v_scrollbar_host\">\n  <div id=\"h_scrollbar_host\">\n    <efx-grid id=\"grid\"></efx-grid>\n  </div>\n</div>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 5 });\n\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], width: 100 },\n    { name: \"Market\", field: fields[1], width: 100 },\n    { name: \"Last\", field: fields[2], width: 100 }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new RowSelection(),\n    new ColumnSelection(),\n    new ColumnResizing(),\n    new ColumnFitter(),\n    new ColumnDragging()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\nvar mgr = new MultiTableManager(grid);\n// You can place grids side by side by using the following commands\n// var vScrollbarHost = document.getElementById(\"v_scrollbar_host\");\n// var hScrollbarHost = document.getElementById(\"h_scrollbar_host\");\n// MultiTableManager.synchronizeVScrollbar(vScrollbarHost, hScrollbarHost, grid);\n\nmgr.setGridConfig(configObj);\nmgr.setTableCount(3);\n\ndocument.getElementById(\"table_btn1\").addEventListener(\"click\", function(e) {\n  mgr.setTableCount(1);\n});\ndocument.getElementById(\"table_btn2\").addEventListener(\"click\", function(e) {\n  mgr.setTableCount(2);\n});\ndocument.getElementById(\"table_btn3\").addEventListener(\"click\", function(e) {\n  mgr.setTableCount(3);\n});\ndocument.getElementById(\"table_btn4\").addEventListener(\"click\", function(e) {\n  mgr.setTableCount(4);\n});\nsetInterval(function simulateDataUpdate() {\n  if (!grid.api) {\n    return;\n  }\n  var rowCount = mgr.getRowCount();\n  for (var i = 0; i < 4; ++i) {\n    var tbl = mgr.getTable(i);\n    if (!tbl) {\n      break;\n    }\n    for (var r = 0; r < rowCount; ++r) {\n      if (!DataGenerator.randInt(0, 4)) {\n        var record = DataGenerator.generateRecord(fields);\n        tbl.api.setRowData(r, record);\n      }\n    }\n  }\n}, 500);","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  margin: 0 5px 5px;\n  vertical-align: top;\n}\n\n#h_scrollbar_host {\n  height: 400px;\n}","tagName":"pre"},{"text":"Multi-table: wrap mode example","tagName":"h3"},{"text":"In wrap mode, a single table will be used as a primary table and wrapped by specified number of rows. After wrapping, multiple secondary tables will be created with specified number of rows to represent the rows from the primary table. The main difference between wrap mode and multi-table mode is that content rows, in wrap mode, of each table are based on a single primary table. Any change on a row from the primary table will also apply to corresponding row on one of the secondary tables, and vice versa. In multi-table mode, rows in one table are independent from rows in other tables. ","tagName":"p"},{"text":"To enable wrap mode, use wrapTable method with number of wrapping rows as its parameter. ","tagName":"p"},{"text":"To disable wrap mode, use wrapTable method with 0 as its parameter.","tagName":"p"},{"text":"If you are in multi-table mode, wrapTable method will automatically remove any existing table and  switch to wrap mode.","tagName":"p"},{"text":"If you are in wrap mode, setTableCount method will automatically disable wrap-mode and  switch to multi-table mode.","tagName":"p"},{"text":"Note that original table is still kept intact after the wrapping, even though it is hidden from view. getTable(0) will return the original table. ","tagName":"p"},{"text":"<button id=\"wrap_btn1\">Wrap 3 rows</button>\n\n<button id=\"wrap_btn2\">Wrap 4 rows</button>\n<button id=\"wrap_btn3\">Wrap 5 rows</button>\n<button id=\"wrap_btn4\">Disable wrap mode</button>\n<hr>\n<button id=\"set_btn1\">Set Data on the second table</button>\n<button id=\"set_btn2\">Set Data on the third table</button>\n<button id=\"add_row_btn\">Add row</button>\n<button id=\"remove_row_btn\">Remove row</button>\n<hr>\n<button id=\"add_col_btn\">Add Column</button>\n<button id=\"remove_col_btn\">Remove Column</button>\n<hr>\n<div id=\"v_scrollbar_host\">\n  <div id=\"h_scrollbar_host\">\n    <efx-grid id=\"grid\"></efx-grid>\n  </div>\n</div>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 10 });\n\nvar configObj = {\n  sorting: {\n    sortableColumns: true\n  },\n  defaultColumnOptions: {\n    minWidth: 24\n  },\n  columns: [\n    { name: fields[0], width: 100, field: fields[0] },\n    { name: fields[2], width: 100, field: fields[2], formatType: \"number\", colorText: true },\n    { name: fields[3], width: 100, field: fields[3], formatType: \"percent\", blinking: true }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new RowSelection(),\n    new ColumnSelection(),\n    new ColumnResizing(),\n    new ColumnFitter(),\n    new ColumnDragging()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\nvar mgr = new MultiTableManager(grid);\nmgr.setGridConfig(configObj);\n\nwrap_btn1.addEventListener(\"click\", function() {\n  mgr.wrapTable(3);\n});\nwrap_btn2.addEventListener(\"click\", function() {\n  mgr.wrapTable(4);\n});\nwrap_btn3.addEventListener(\"click\", function() {\n  mgr.wrapTable(5);\n});\nwrap_btn4.addEventListener(\"click\", function() {\n  mgr.wrapTable(0);\n});\nadd_row_btn.addEventListener(\"click\", function() {\n  mgr.insertRow({});\n});\nremove_row_btn.addEventListener(\"click\", function() {\n  mgr.removeRow();\n});\nadd_col_btn.addEventListener(\"click\", function() {\n  mgr.insertColumn({ field: \"industry\", width: 80 });\n});\nremove_col_btn.addEventListener(\"click\", function() {\n  mgr.removeColumn(mgr.getColumnCount() - 1);\n});\nset_btn1.addEventListener(\"click\", function() {\n  randomlySetData(mgr.getTable(1));\n});\nset_btn2.addEventListener(\"click\", function() {\n  randomlySetData(mgr.getTable(2));\n});\n\nsetInterval(function simulateDataUpdate() {\n  var tblCount = mgr.getTableCount();\n\n  for (var i = 0; i < tblCount; ++i) {\n    if (Math.random() > 0.6) {\n      randomlySetData(mgr.getTable(i));\n    }\n  }\n}, 500);\n\nfunction randomlySetData(tbl) {\n  if (!tbl || !tbl.api) {\n    return;\n  }\n  var rowCount = mgr.getRowCount();\n  for (var i = 0; i < rowCount; ++i) {\n    if (Math.random() > 0.7) {\n      var rowDef = tbl.api.getRowDefinition(i);\n      if (rowDef) {\n        rowDef.setRowData(DataGenerator.generateRecord(fields));\n      }\n    }\n  }\n}","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  margin: 0 5px 5px;\n  vertical-align: top;\n}\n\n#h_scrollbar_host {\n  height: 250px;\n}","tagName":"pre"},{"text":"Positioning grids side by side with vertical scrollbar syncronization","tagName":"h2"},{"text":"You can display multiple grids side by side using CSS as shown in the above example. However, it does not work when you want to have a single vertical scrollbar for multiple grids. If normal native scrollbar is used, all rows in a grid have to be displayed and cannot be virtualized. Large number of rows in each grid can introduce performance problem. You can use Grid's scrollbars instead of native scrollbars to enable row virtualization and improve the performance. ","tagName":"p"},{"text":"To link multiple grids together and have only one single vertical scrollbar, use MultiTableManager.synchronizeVScrollbar method. The method requires two elements to host the scrollbars and array of Grid elements. The first element is for hosting Grid vertical scrollbar. The second element is for hosting native horizontal scrollbar and Grid elements. The vertical scrollbar requires separated host element because it has to be float over view and not moved when horizontal scrolling occurs. The setup for element structure is shown below:","tagName":"p"},{"text":"<div id=\"v_scrollbar_host\">\n    <div id=\"h_scrollbar_host\">\n        <efx-grid></efx-grid>\n        <efx-grid></efx-grid>\n    </div>\n</div>","tagName":"pre"},{"text":"The height for the grid can be specified on the vertical scrollbar host. If so, make sure that the height of horizontal scrollbar host is set to 100%. The width of the grid can be set on the element itself or on every column of the grid.","tagName":"p"},{"text":"Side by side Grids Example","tagName":"h3"},{"text":"<div id=\"v_scrollbar_host\">\n  <div id=\"h_scrollbar_host\">\n    <efx-grid id=\"grid_1\"></efx-grid>\n    <efx-grid id=\"grid_2\"></efx-grid>\n  </div>\n</div>\n<hr>","tagName":"pre"},{"text":"var gen = DataGenerator;\nvar fields = [\"companyName\", \"percent\", \"number_2\", \"bid\", \"ask\"];\n\nvar records1 = gen.generateRecords(fields, { seed: 1, rowCount: 20 });\nvar records2 = gen.generateRecords(fields, { seed: 100, rowCount: 20 });\n\nvar configObj1 = {\n  defaultColumnOptions: {\n    width: 100\n  },\n  sorting: {\n    initialSort: {\n      colIndex: 3,\n      sortOrder: \"d\"\n    }\n  },\n  columns: [\n    { name: fields[0], field: fields[0], width: 120 },\n    { name: fields[1], field: fields[1] },\n    { name: fields[2], field: fields[2], colorText: true },\n    { name: \"Bid\", field: \"bid\" }\n  ],\n  staticDataRows: records1\n};\nvar configObj2 = {\n  sorting: {\n    initialSort: {\n      colIndex: 0,\n      sortOrder: \"a\"\n    }\n  },\n  columns: [\n    { name: \"Ask\", field: \"ask\" },\n    { name: fields[2], field: fields[2], colorText: true },\n    { name: fields[1], field: fields[1] },\n    { name: fields[0], field: fields[0] }\n  ],\n  staticDataRows: records2\n};\n\nvar grid1 = document.getElementById(\"grid_1\");\nvar grid2 = document.getElementById(\"grid_2\");\n\ngrid1.config = configObj1;\ngrid2.config = configObj2;\n\nMultiTableManager.synchronizeVScrollbar(\n  document.getElementById(\"v_scrollbar_host\"),\n  document.getElementById(\"h_scrollbar_host\"), [grid1, grid2]\n);","tagName":"pre"},{"text":"efx-grid+efx-grid {\n  margin-left: 5px;\n}\n\n#v_scrollbar_host {\n  height: 300px;\n}\n\n#h_scrollbar_host {\n  height: 100%;\n}\n\n#grid_2 {\n  width: 500px;\n}","tagName":"pre"},{"text":"MultiTableManager API Reference","tagName":"h2"},{"text":"Methods","tagName":"h3"},{"text":"synchronizeVScrollbar(vScrollbarHost, hScrollbarHost, gridElems) → {Promise.<Array>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"dispose()","tagName":"h4"},{"text":"getColumnCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTable(atopt) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getTableCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"insertColumn(columnOption, idxopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"insertRow(rowOptionopt, atopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeColumn(colRef)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeRow(atopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setGridConfig(configObjopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setTableCount(num)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"wrapTable(rowCount)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Native HTML table","filename":"utilities/native-table.html","contents":[{"text":"Sometimes you only need a simple table for your app. Native HTML table could be used in place of Grid component for quick and easy table layout. The main advantages of native HTML table is simplicity, flexibility, and style customization. However, manipulating HTML element directly could be tedious and cumbersome. Table class from our utility package can help managing native HTML table with ease.","tagName":"p"},{"text":"HTML table","tagName":"a"},{"text":"HTML table","tagName":"a"},{"text":"Note that Table class only provides JavaScript logic for HTML element manipulation. Styles and CSS are not provided by Grid utility package.","tagName":"p"},{"text":"Table initialization","tagName":"h2"},{"text":"Table class takes two parameters for its constructor. The first parameter is a placeholder element. It is used for positioning the table in the HTML document. The second parameter is a table configuration object, where you can define various parameters and options (e.g., number of columns, number of rows, width, height). For all available options, see Table API Reference section.","tagName":"p"},{"text":"<big>Table with default column size</big>\n<div id=\"table_div1\"></div>\n<hr>\n<big>Table with fixed column size and header section</big>\n<div id=\"table_div2\"></div>","tagName":"pre"},{"text":"var tableDiv1 = document.getElementById(\"table_div1\");\nvar tbl1 = new tr.Table(tableDiv1, {\n  colCount: 4,\n  rowCount: 5,\n  cellHeight: 30\n});\nvar tableDiv2 = document.getElementById(\"table_div2\");\nvar tbl2 = new tr.Table(tableDiv2, {\n  colCount: 4,\n  rowCount: 5,\n  cellWidth: 100,\n  cellHeight: 30,\n  header: 1\n});\ntbl2.getHeader().getCellsInRow(0).forEach(function(cell, idx) {\n  cell.textContent = \"Header \" + (idx + 1);\n});","tagName":"pre"},{"text":"html hr {\n  margin-top: 5px;\n  margin-bottom: 10px;\n}","tagName":"pre"},{"text":"Table structure","tagName":"h2"},{"text":"Table class generates HTML elements and table structure based on the given configuration. The general structure created by the class will look like the code snippet below:","tagName":"p"},{"text":"<div>\n    <table>\n        <colgroup>\n            <col>\n            ...\n        </colgroup>\n        <thead>\n            <tr>\n                <th></th>\n                ...\n            <tr>\n            ...\n        </thead>\n        <tbody>\n            <tr>\n                <td></td>\n                ...\n            </tr>\n            ...\n        </tbody>\n    </table>\n</div>","tagName":"pre"},{"text":"Table class instance itself represent the placeholder element (root element) and not the table element. The table below shows how to get corresponding element from the Table instance. ","tagName":"p"},{"text":"\nElement\nAPI\n","tagName":"tr"},{"text":"\nPlaceholder element\nTable.getElement()\n","tagName":"tr"},{"text":"\ntable\nTable.getTableElement()\n","tagName":"tr"},{"text":"\ntbody\nTable.getBody().getElement()\n","tagName":"tr"},{"text":"\nthead\nTable.getHeader().getElement()\n","tagName":"tr"},{"text":"\ntfoot\nTable.getFooter().getElement()\n","tagName":"tr"},{"text":"\ntr\nTable.getRow(r), Table.getBody().getRow(r)\n","tagName":"tr"},{"text":"\ntd (tbody)\nTable.getCell(c, r), Table.getBody().getCell(c, r)\n","tagName":"tr"},{"text":"\nth (thead)\nTable.getHeaderCell(c, r), Table.getHeader().getCell(c, r)\n","tagName":"tr"},{"text":"\ntd (tfoot)\nTable.getFooterCell(c, r), Table.getFooter().getCell(c, r)\n","tagName":"tr"},{"text":"Table manipulation","tagName":"h2"},{"text":"With Table class, you can add and remove rows and columns at runtime. For changing content and styles, you need to retrieve the element from Table instance, and then manipulate the element properties directly.","tagName":"p"},{"text":"To change number of rows, use addRows and removeRows methods.","tagName":"p"},{"text":"To change number of columns, use addColumns and removeColumns methods. ","tagName":"p"},{"text":"The example below also shows how to change row height of each row in the table.","tagName":"p"},{"text":"<button id=\"add_row_btn\">Add row</button>\n\n<button id=\"rem_row_btn\">Remove row</button>\n<i></i>\n<label for=\"set_row_in\">Set row count:</label>\n<input id=\"set_row_in\" type=\"number\" value=\"6\">\n<hr>\n<button id=\"add_col_btn\">Add column</button>\n<button id=\"rem_col_btn\">Remove column</button>\n<i></i>\n<label for=\"set_col_in\">Set col count:</label>\n<input id=\"set_col_in\" type=\"number\" value=\"6\">\n<hr>\n<button id=\"row_height_btn1\">Compact row height</button>\n<button id=\"row_height_btn2\">Regular row height</button>\n<button id=\"row_height_btn3\">Spacious row height</button>\n<i></i>\n<label for=\"col_width_in\">Set 1st column width:</label>\n<input id=\"col_width_in\" type=\"number\" value=\"150\">\n<hr>\n<div id=\"table_div\"></div>","tagName":"pre"},{"text":"var rowId = 0;\n\nvar tbl = new tr.Table(document.getElementById(\"table_div\"), {\n  colCount: 4,\n  rowCount: 7,\n  cellWidth: 100,\n  rowHeight: 30,\n  header: 1\n});\nvar cells = tbl.getCellsInColumn(0);\ncells.forEach(function(cell) {\n  cell.textContent = \"\" + (rowId++);\n});\ntbl.getHeader().getCellsInRow(0).forEach(function(cell, idx) {\n  cell.textContent = \"Header \" + (idx + 1);\n});\ntbl.getHeaderCell(0, 0).textContent = \"Row id\";\n\ndocument.getElementById(\"add_row_btn\").addEventListener(\"click\", function(e) {\n  var ary = tbl.addRows();\n  var trElem = ary[0];\n  var cell = trElem.cells[0];\n  cell.textContent = \"\" + (rowId++);\n});\ndocument.getElementById(\"rem_row_btn\").addEventListener(\"click\", function(e) {\n  tbl.removeRows(1);\n});\ndocument.getElementById(\"set_row_in\").addEventListener(\"change\", function(e) {\n  var rowCount = +e.currentTarget.value;\n  if (rowCount !== rowCount) {\n    return; // Cannot process NaN value;\n  }\n  tbl.setRowCount(rowCount);\n});\n\ndocument.getElementById(\"add_col_btn\").addEventListener(\"click\", function(e) {\n  var colCount = tbl.getColumnCount();\n  tbl.addColumns();\n  tbl.getHeaderCell(colCount, 0).textContent = \"Header \" + (colCount + 1);\n});\ndocument.getElementById(\"rem_col_btn\").addEventListener(\"click\", function(e) {\n  tbl.removeColumns(1);\n});\ndocument.getElementById(\"set_col_in\").addEventListener(\"change\", function(e) {\n  var colCount = +e.currentTarget.value;\n  if (colCount !== colCount) {\n    return; // Cannot process NaN value;\n  }\n  tbl.setColumnCount(colCount);\n});\n\ndocument.getElementById(\"row_height_btn1\").addEventListener(\"click\", function(e) {\n  tbl.setDefaultRowHeight(24);\n  tbl.getElement().classList.add(\"compact\");\n});\ndocument.getElementById(\"row_height_btn2\").addEventListener(\"click\", function(e) {\n  tbl.setDefaultRowHeight(30);\n  tbl.getElement().classList.remove(\"compact\");\n});\ndocument.getElementById(\"row_height_btn3\").addEventListener(\"click\", function(e) {\n  tbl.setDefaultRowHeight(36);\n  tbl.getElement().classList.remove(\"compact\");\n});\n\ndocument.getElementById(\"col_width_in\").addEventListener(\"change\", function(e) {\n  var width = +(e.currentTarget.value);\n  if (!width) {\n    width = 100;\n  }\n  tbl.setColMinWidths(width, 0);\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\ni:empty {\n  padding-left: 20px;\n}\n\n.compact td,\n.compact th {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n\ntd:nth-child(1),\nth:nth-child(1) {\n  text-align: center;\n}\n\n#table_div {\n  height: 300px;\n}","tagName":"pre"},{"text":"Cell manipulation","tagName":"h2"},{"text":"Table class does not provide APIs for modifying its cells. However, you can get cell elements through various Table APIs.","tagName":"p"},{"text":"To get a single cell element from the body section of the table, use getCell method.","tagName":"p"},{"text":"To get all cell elements in a single column from the body section of the table, use getCellsInColumn method.","tagName":"p"},{"text":"To get all cell elements in a single row from the body section of the table, use getCellsInRow method.","tagName":"p"},{"text":"To set colSpan or rowSpan on a cell, use spanBlock method","tagName":"p"},{"text":"Event listeners can be added on Table instance and its sub table (i.e., body section) for all native events. To add an event listener to Table instance, use addEventListener method.","tagName":"p"},{"text":"The example below shows how to set cell span and get cell position from a mousemove event.","tagName":"p"},{"text":"<button id=\"span_btn\">Span cells</button>\n\n<button id=\"reset_btn\">Clear cell span</button>\n<hr>\n<span>Starting from:</span>\n<input id=\"from_col_in\" type=\"number\" value=\"0\">\n<input id=\"from_row_in\" type=\"number\" value=\"0\">\n<i></i>\n<span>Span size:</span>\n<input id=\"col_span_in\" type=\"number\" value=\"2\">\n<input id=\"row_span_in\" type=\"number\" value=\"2\">\n<hr>\n<div>\n  <div id=\"table_div\"></div>\n  <textarea id=\"msg_ta\"></textarea>\n</div>","tagName":"pre"},{"text":"var fields = [\"id\", \"companyName\", \"market\", \"industry\", \"CF_LAST\"];\nvar colCount = fields.length;\nvar rowCount = 10;\nvar records = tr.DataGenerator.generateRecords(fields, rowCount);\nvar tbl = new tr.Table(document.getElementById(\"table_div\"), {\n  colCount: colCount,\n  rowCount: rowCount,\n  rowHeight: 30,\n  header: 1\n});\ntbl.setColumnWidths([60, 150, 100, 200, 100]);\nvar cells = tbl.getAllHeaderCells();\nvar cell;\nvar record;\ncells.forEach(function(cell, idx) {\n  cell.textContent = fields[idx];\n});\nfor (var r = 0; r < rowCount; ++r) {\n  record = records[r];\n  cells = tbl.getCellsInRow(r);\n  for (var c = 0; c < colCount; ++c) {\n    cell = cells[c];\n    cell.textContent = record[fields[c]];\n  }\n}\n\nvar bodyTbl = tbl.getBody();\nvar headTbl = tbl.getHeader();\nbodyTbl.addEventListener(\"mousemove\", onMouseMoveOverBody);\n\nfunction onMouseMoveOverBody(e) {\n  var colIndex = bodyTbl.getColumnIndex(e);\n  var rowIndex = bodyTbl.getRowIndex(e);\n  var cell = bodyTbl.getCell(colIndex, rowIndex);\n  var cellContent = cell ? cell.textContent : null;\n\n  var lines = [\n    \"Column index: \" + colIndex,\n    \"Row index: \" + rowIndex,\n    \"Cell content: \" + cellContent\n  ];\n  msg_ta.value = lines.join(\"\\n\");\n}\n\nvar fromColIn = document.getElementById(\"from_col_in\");\nvar fromRowIn = document.getElementById(\"from_row_in\");\nvar colSpanIn = document.getElementById(\"col_span_in\");\nvar rowSpanIn = document.getElementById(\"row_span_in\");\ndocument.getElementById(\"span_btn\").addEventListener(\"click\", function(e) {\n  var c1 = +fromColIn.value;\n  var r1 = +fromRowIn.value;\n\n  var colSpan = +colSpanIn.value;\n  var rowSpan = +rowSpanIn.value;\n  var c2 = c1 + colSpan - 1;\n  var r2 = r1 + rowSpan - 1;\n\n  tbl.spanBlock(c1, c2, r1, r2);\n});\ndocument.getElementById(\"reset_btn\").addEventListener(\"click\", function(e) {\n  var c1 = +fromColIn.value;\n  var r1 = +fromRowIn.value;\n  tbl.spanBlock(c1, c1, r1, r1);\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\ni:empty {\n  padding-left: 20px;\n}\n\ninput[type=\"number\"] {\n  width: 50px;\n}\n\ntd:nth-child(1),\nth:nth-child(1) {\n  text-align: center;\n}\n\n#table_div {\n  display: inline-block;\n}\n\n#msg_ta {\n  height: 260px;\n  width: 100px;\n  vertical-align: top;\n}","tagName":"pre"},{"text":"QuoteLine example","tagName":"h2"},{"text":"You are free to customize the table in any way you like. Table class is just a utility that helps you create HTML table and provide some APIs for accessing some part of the table.","tagName":"p"},{"text":"<div id=\"table_div\">\n\n</div>","tagName":"pre"},{"text":"var tbl = new tr.Table(table_div, {\n  colCount: 9,\n  rowCount: 8,\n  cellWidth: 100,\n  rowHeight: 30,\n  header: 1\n});\ntbl.setColMinWidths(30, 6);\ntbl.setColMinWidths(110, 7);\ntbl.setColMinWidths(110, 8);\nvar cellTexts = [\n  [\"\", \"GBP=\", \"\", \"\", \"\", \"1.1926\", \"/\", \"1.1930\", \"0.71%\"],\n  [\"UK Pound Sterling/US Dollar FX Spot Rate\", \"\", \"\", \"\", \"\", \"SANTANDER\", \"\", \"HKG\", \"SAHK\"],\n  [\"Change Summary\", \"\", \"Daily View\", \"\", \"\", \"Weekly\", \"\", \"Monthly\", \"Yearly\"],\n  [\"MTD %\", \"-0.78 %\", \"O\", 1.1843, \"High\", 1.2065, \"\", 1.2088, 1.2447],\n  [\"3M %\", \"-2.68 %\", \"H\", 1.1936, \"H Date\", \"01-Mar-2023\", \"\", \"01-Mar-2023\", \"23-Jan-2023\"],\n  [\"6M %\", \"2.93 %\", \"L\", 1.1832, \"Low \", 1.1805, \"\", 1.1805, 1.1805],\n  [\"YTD %\", \"1.41 %\", \"C\", 1.1842, \"L Date\", \"08-Mar-2023\", \"\", \"08-Mar-2023\", \"08-Mar-2023\"],\n  [\"Latest Trade\", \"\", \"09-Mar-2023 15:33\", \"\", \"\", \"\", \"\", \"\", \"\"]\n];\n\nhideMiddleBorders(0, 1);\nhideMiddleBorders(2, 3);\nhideMiddleBorders(4, 5);\n\nspanColumn(1, 0, 3);\nspanColumn(2, 0, 1);\nspanColumn(2, 2, 3);\nspanColumn(7, 0, 1);\nspanColumn(7, 2, 5);\n\ntbl.getRow(0).classList.add(\"big-font\");\ntbl.getRow(2).classList.add(\"blue-font-color\");\n\ntbl.getCellsInColumn(6).forEach(addClass.bind(null, \"align-center\"));\ntbl.getCellsInColumn(0).slice(2).forEach(addClass.bind(null, \"blue-font-color\"));\ntbl.getCellsInColumn(2).slice(2).forEach(addClass.bind(null, \"blue-font-color\"));\ntbl.getCellsInColumn(4).slice(2).forEach(addClass.bind(null, \"blue-font-color\"));\n\naddClass(\"red-font-color\", tbl.getCell(1, 3));\naddClass(\"red-font-color\", tbl.getCell(1, 4));\naddClass(\"green-font-color\", tbl.getCell(1, 5));\naddClass(\"green-font-color\", tbl.getCell(1, 6));\ntbl.getCellsInRow(0).slice(5, 8).forEach(addClass.bind(null, \"green-font-color\"));\n\nvar colCount = tbl.getColumnCount();\nvar rowCount = tbl.getRowCount();\nfor (var r = 0; r < rowCount; ++r) {\n  var rowText = cellTexts[r];\n  for (var c = 0; c < colCount; ++c) {\n    var cellText = rowText[c];\n    var cell = tbl.getCell(c, r);\n    cell.textContent = cellText;\n  }\n}\n\nvar newsIcon = document.createElement(\"coral-icon\");\nnewsIcon.icon = \"news\";\naddClass(\"blue-font-color\", newsIcon);\ntbl.getCell(0, 0).appendChild(newsIcon);\n\nvar downIcon = document.createElement(\"coral-icon\");\ndownIcon.icon = \"hollow-arrow-down\";\naddClass(\"red-font-color\", downIcon);\ntbl.getCell(2, 0).appendChild(downIcon);\n\naddClass(\"red-bg-color\", tbl.getCell(8, 0));\n\nfunction spanColumn(rowIndex, c1, c2) {\n  tbl.spanBlock(c1, c2, rowIndex, rowIndex);\n}\n\nfunction hideMiddleBorders(c1, c2) {\n  var rowCount = tbl.getRowCount();\n  for (var r = 0; r < rowCount; ++r) {\n    var cell1 = tbl.getCell(c1, r);\n    var cell2 = tbl.getCell(c2, r);\n    cell1.classList.add(\"no-border-right\");\n    cell2.classList.add(\"no-border-left\");\n  }\n}\n\nfunction addClass(classStr, elem) {\n  elem.classList.add(classStr);\n}","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\n#table_div {\n  display: inline-block;\n}\n\ntd.no-border-right,\n.no-border-right td {\n  border-right-width: 0;\n}\n\ntd.no-border-left,\n.no-border-left td {\n  border-left-width: 0;\n}\n\n.big-font {\n  font-size: 2em;\n}\n\n.big-font td {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.blue-font-color {\n  color: blue;\n}\n\n.red-font-color {\n  color: red;\n}\n\n.red-bg-color {\n  background-color: red;\n}\n\n.green-font-color {\n  color: green;\n}\n\n.align-center {\n  text-align: center;\n}","tagName":"pre"},{"text":"Table 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":"                            colCount                                                    number                                                                                        <optional>                                                                                                                            0                                                        Number of columns        ","tagName":"tr"},{"text":"                            rowCount                                                    number                                                                                        <optional>                                                                                                                            0                                                        Number of rows in content table (tbody)        ","tagName":"tr"},{"text":"                            cellWidth                                                    number                                                                                        <optional>                                                                                                                                                Default cell width of each column        ","tagName":"tr"},{"text":"                            cellHeight                                                    number                                                                                        <optional>                                                                                                                                                Default cell height of each row        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                        <optional>                                                                                                                                                Total width of the table. If it is specified, it will override cellWidth        ","tagName":"tr"},{"text":"                            height                                                    number                                                                                        <optional>                                                                                                                                                Total height of the table. If it is specified, it will override cellHeight        ","tagName":"tr"},{"text":"                            header                                                    number                                                                                        <optional>                                                                                                                            0                                                        Number of header rows        ","tagName":"tr"},{"text":"                            footer                                                    number                                                                                        <optional>                                                                                                                            0                                                        Number of footer rows        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"addColumns(countopt) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addFooterRows(opt_countopt) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addHeaderRows(opt_countopt) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"addListener(obj, type)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#addListener","tagName":"a"},{"text":"Example:","tagName":"h5"},{"text":"var obj = {\"mouseUp\": function(e) { console.log(e); }};\nplugin.addListener(obj, \"mouseUp\");\nplugin.addListener(obj, \"mouseDown\");","tagName":"pre"},{"text":"addRows(countopt) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"cloak(tblElem)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"distributeColumnWidth()","tagName":"h4"},{"text":"fixateTableWidth(opt_boolopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"getAllCells() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllFooterCells() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllHeaderCells() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getAllRows() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getBody() → {SubTable}","tagName":"h4"},{"text":"SubTable","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"SubTable","tagName":"a"},{"text":"getBoundingClientRect() → {Object}","tagName":"h4"},{"text":"ElementWrapper#getBoundingClientRect","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getCell(c, r) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellPosition(cell, ret_objopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellsInColumn(c) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellsInRow(r) → {Array.<Element>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getCellTextContent(c, r) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnIndex(e) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnLeft(colIndex, rowIndexopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getColumnTextContent(c) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getElement() → {Element}","tagName":"h4"},{"text":"ElementWrapper#getElement","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getFooter() → {SubTable}","tagName":"h4"},{"text":"SubTable","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"SubTable","tagName":"a"},{"text":"getFooterCell(c, r) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getHeader() → {SubTable}","tagName":"h4"},{"text":"SubTable","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"SubTable","tagName":"a"},{"text":"getHeaderCell(c, r) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getListener(type, idxopt) → {function}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#getListener","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getMousePosition(e, retObjopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper#getMousePosition","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"getRow(r) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowCount() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowIndex(e) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRows() → {Array.<Element>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getRowTextContent(r) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getRowTop(rowRef) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getTableElement() → {Element}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTableTextContent() → {string}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"getTextContents() → {Array.<Array.<string>>}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"hasListener(type) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"EventDispatcher#hasListener","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"init(options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Table~Options","tagName":"a"},{"text":"log(opt_rowLimitopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"loosenTableWidth(opt_boolopt)","tagName":"h4"},{"text":"Table#fixateTableWidth","tagName":"a"},{"text":"Parameters:","tagName":"h5"},{"text":"removeAllColumns()","tagName":"h4"},{"text":"removeAllEventListeners()","tagName":"h4"},{"text":"EventDispatcher#removeAllEventListeners","tagName":"a"},{"text":"removeAllRows()","tagName":"h4"},{"text":"removeColumns(opt_countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeFooterRows(opt_countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeHeaderRows(opt_countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"removeRows(countopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setCellSize(defaultWidth, defaultHeight)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColBackgroundColors(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColBGColors(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColBorders(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColMinWidths(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnCount(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setColumnWidths(val, colIndexopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setCRWH(col, row, width, height)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDefaultColumnWidth(valopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setDefaultRowHeight(valopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setParent(parent)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ElementWrapper","tagName":"a"},{"text":"ElementWrapper#setParent","tagName":"a"},{"text":"setRowCount(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"setSize(width, height)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"spanBlock(c1, c2, r1, r2) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"spanHorizontally(r, bool) → {Element}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"}]},{"title":"Data genarator","filename":"utilities/data-generator.html","contents":[{"text":"DataGenerator class from grid utility packages is for generating data for testing purpose. ","tagName":"p"},{"text":"To generate data for feeding into Grid, use generateRecords(fields, options) method.","tagName":"p"},{"text":"To add custom field data, use addFieldInfo(field, options or function) method.","tagName":"p"},{"text":"DataGenerator API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"DataOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            seed                                                    number                                                                                        <optional>                                                                                    Seed for randomization. If seed is not specified (default), new set of data will be generated every time. Otherwise, the same set of data will be generated.        ","tagName":"tr"},{"text":"                            numRows                                                    number                                                                                        <optional>                                                                                    Number of rows to be generated        ","tagName":"tr"},{"text":"                            rowCount                                                    number                                                                                        <optional>                                                                                    Alias to numRows        ","tagName":"tr"},{"text":"FieldInformation","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            type                                                    string                                                                                        <optional>                                                                                    Available types are number, float, boolean, set, function, and isoDate        ","tagName":"tr"},{"text":"                            prefix                                                    string                                                                                        <optional>                                                                                    Add a text prefix to the data        ","tagName":"tr"},{"text":"                            suffix                                                    string                                                                                        <optional>                                                                                    Add a text suffix to the data        ","tagName":"tr"},{"text":"                            min                                                    number                                                                                        <optional>                                                                                    Minimum value of the numeric data        ","tagName":"tr"},{"text":"                            max                                                    number                                                                                        <optional>                                                                                    Maximum value of the numeric data. This is exclusive (not included in the result).        ","tagName":"tr"},{"text":"                            prec                                                    string                                                                                        <optional>                                                                                    Precision (place number after the decimal point) of the numeric data.        ","tagName":"tr"},{"text":"                            fixedValue                                                    string                                                                                        <optional>                                                                                    Single/static/constant value        ","tagName":"tr"},{"text":"                            members                                                    Array                                                                                        <optional>                                                                                    List of possible data when the type is \"set\"        ","tagName":"tr"},{"text":"                            generate                                                    function                                                                                        <optional>                                                                                    Function for generating data when the type is \"function\"        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"addFieldInfo(field, options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~FieldInformation","tagName":"a"},{"text":"generate(fields, optionsopt) → {Array.<Array>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"generateRecord(fields, optionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"generateRecords(fields, optionsopt) → {Array.<Object>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"randBetween(minopt, maxopt, seedopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randBoolean(seedopt) → {boolean}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randDate(minopt, maxopt, seedopt) → {Date}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randIndex(max, seedopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randInt(min, max, seedopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randMember(set, seedopt) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randNumber(minopt, maxopt, precopt, seedopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randString(minopt, maxopt, subTypeopt, seedopt) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"toRecords(data2D, fieldsopt) → {Array.<Object>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"generate(fields, optionsopt) → {Array.<Array>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"generateQuoteData(field, optionsopt) → {Object}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"DataGenerator~DataOptions","tagName":"a"},{"text":"Returns:","tagName":"h5"},{"text":"generateRecords(fields, optionsopt) → {Array.<Object>}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"getSeed() → {number}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"randBetween(minopt, maxopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randBoolean() → {boolean}","tagName":"h4"},{"text":"Returns:","tagName":"h5"},{"text":"randDate(minopt, maxopt) → {Date}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randIndex(max) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randInt(min, max) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randMember(set) → {*}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randNumber(minopt, maxopt, precopt) → {number}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"randString(minopt, maxopt) → {string}","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"Returns:","tagName":"h5"},{"text":"setSeed(seed)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Column Format Dialog","filename":"widgets/column-format-dialog.html","contents":[{"text":"Column Format Dialog","tagName":"h2"},{"text":"The Column Format Dialog is a user-friendly interface for column display customization. It can format a column's value display from General to Number, Scaled, Percent or Datetime, and so on.","tagName":"p"},{"text":"Features","tagName":"h3"},{"text":"Demo","tagName":"h3"},{"text":"Right-click on each column header to see the dialog.","tagName":"p"},{"text":" Language:\n<select id=\"lang_selector\">\n  <option value=\"en\">English</option>\n  <option value=\"ja\">Japanese</option>\n  <option value=\"de\">German</option>\n  <option value=\"zh\">Simplified Chinese</option>\n  <option value=\"zh-Hant\">Traditional Chinese</option>\n</select>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var columnFormattingExt = new ColumnFormatting();\nvar contextMenuExt = new ContextMenu();\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"CF_VOLUME\", \"TR.IPODate\"];\nvar records = 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, alignment: \"right\" },\n    { name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\" },\n    { name: \"Volume\", field: fields[4], alignment: \"right\" },\n    { name: \"IPO date\", field: fields[5], width: 100 }\n  ],\n  dataModel: {\n    data: records\n  },\n  contextMenu: {\n    items: {\n      MENU_1: {\n        text: 'Format',\n        callback: function(e) {\n          var lang = document.getElementById(\"lang_selector\").value;\n          columnFormattingExt.openDialog(e.colIndex, {\n            lang: lang\n          });\n        }\n      }\n    },\n    onMenu: function(e) {\n      e.menu.addItem('MENU_1');\n    }\n  },\n  extensions: [\n    columnFormattingExt,\n    contextMenuExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"textarea {\n  width: 100%;\n  height: 100px;\n}\n\nefx-grid {\n  min-height: 500px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"For more information about the extension see the Column Formatting Extension page.","tagName":"p"},{"text":"Column Formatting Extension","tagName":"a"},{"text":"Setup guide","tagName":"h3"},{"text":"First, let's import the modules.","tagName":"p"},{"text":"// efx-grid\nimport '@refinitiv-ui/efx-grid';\nimport '@refinitiv-ui/efx-grid/themes/halo/light';\n\n// extensions\nimport {\n  ConditionalColoring,\n  HeatMap,\n  TextFormatting,\n  ColumnFormatting\n } from '@refinitiv-ui/efx-grid/extensions';\n\n// Column Formatting Dialog module\nimport '@refinitiv-ui/efx-grid/column-format-dialog';\nimport '@refinitiv-ui/efx-grid/column-format-dialog/themes/halo/light';","tagName":"pre"},{"text":"Create a new Column Formatting Extension instance and push it to an extensions configuration.","tagName":"p"},{"text":"var cfe = new ColumnFormatting();\n\nvar configObj = {\n  extensions: [\n    cfe,\n    new TextFormatting(),\n    new HeatMap(),\n    new ConditionalColoring()\n  ],\n  columns: columns, // Columns config\n  dataModel: { // Data config\n    fields: fields,\n    data: dataRows\n  },\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"To open the dialog, you need to call openDialog() method on the extension object.","tagName":"p"},{"text":"cfe.openDialog(0); // Change \"0\" to any column index.\n\n// Or open the dialog with specific configuration.\ncfe.openDialog(0, {\n  supportDisplayStyleOptions: {\n    fx: true,\n  },\n  supportValueFormatOptions: {\n    fx: true\n  }\n  supportHighlightApplyToSwitch: true,\n  data: {\n    'fieldList': [{'value': 'col1'}, {'value': 'col2'}, {'value': 'col3'}, {'value': 'col4'}, {'value': 'col5'}],\n    'valueFormatTab': {'formatType': 'general'},\n    'colorTextTab': {'colorText': {'field': 'col2'}},\n    'displayStyleTab': {'general': {'alignment': 'center'}, 'mode': 'general'},\n    'fieldDataType': 'general'\n  },\n  fields: [\"intCol\", \"strCol\", \"boolCol\", \"floatCol\", \"dateCol\"],\n});","tagName":"pre"},{"text":"Changing Language","tagName":"h3"},{"text":"For more information about internationalization and how is it applied in different contexts see Language Support.","tagName":"p"},{"text":"Language Support","tagName":"a"},{"text":"Using with Context Menu Extension","tagName":"h3"},{"text":"Context Menu Extension","tagName":"a"},{"text":"For most cases, you will want the dialog button to appear when the user right-clicks on the column header (known as the context menu).","tagName":"p"},{"text":"To do this, simply import Context Menu extension and its configurations.","tagName":"p"},{"text":"import {\n  ContextMenu,\n  ColumnFormatting,\n  TextFormatting,\n  HeatMap,\n  ConditionalColoring\n} from '@refinitiv-ui/efx-grid/extensions';\n\nvar cfe = new ColumnFormatting();\n\nvar configObj = {\n  extensions: [\n    cfe,\n    new ContextMenu(),\n    new TextFormatting(),\n    new HeatMap(),\n    new ConditionalColoring()\n  ],\n  columns: columns, // Columns config\n  dataModel: { // Data config\n    fields: fields,\n    data: dataRows\n  },\n  contextMenu: {\n    items: {\n      MENU_1: {\n        text: \"Format\",\n        callback: function (e) {\n          // Open the dialog when click on the \"Format\" menu\n          cfe.openDialog(e.colIndex);\n        }\n      },\n    },\n    onMenu: function (e) {\n      e.menu.addItem(\"MENU_1\");\n    }\n  },\n};","tagName":"pre"},{"text":"And that's it!","tagName":"p"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Config","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            data                                                    Object                                                                                                                                        Context object indicating current states of the column        ","tagName":"tr"},{"text":"                            supportHighlightApplyToSwitch                                                    boolean                                                                                        <optional>                                                                                    support HighlightApplyToSwitch        ","tagName":"tr"},{"text":"                            supportValueFormatOptions                                                    ColumnFormatDialog~SupportValueFormatOptions                                                                                        <optional>                                                                                    Support FxFormat        ","tagName":"tr"},{"text":"ColumnFormatDialog~SupportValueFormatOptions","tagName":"a"},{"text":"                            supportDisplayStyleOptions                                                    ColumnFormatDialog~SupportDisplayStyleOptions                                                                                        <optional>                                                                                    Support items in \"Display Style\" dropdown        ","tagName":"tr"},{"text":"ColumnFormatDialog~SupportDisplayStyleOptions","tagName":"a"},{"text":"                            fields                                                    Array.<string>                                                                                        <optional>                                                                                    List of available fields to be shown in the dialog        ","tagName":"tr"},{"text":"                            confirm                                                    function                                                                                        <optional>                                                                                    Confirm event callback        ","tagName":"tr"},{"text":"                            cancel                                                    function                                                                                        <optional>                                                                                    Cancel event callback        ","tagName":"tr"},{"text":"SupportDisplayStyleOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            bar                                                    boolean                                                            support \"bar\"        ","tagName":"tr"},{"text":"SupportValueFormatOptions","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                        Description    ","tagName":"tr"},{"text":"                            fx                                                    boolean                                                            support \"fx\"        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"hide()","tagName":"h4"},{"text":"init(userConfigopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnFormatDialog~Config","tagName":"a"},{"text":"show()","tagName":"h4"},{"text":"updateDataWithAutosuggest(selectedItem, autoSuggest)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"}]},{"title":"Column Selection Dialog","filename":"widgets/column-selection-dialog.html","contents":[{"text":"Column Selection Dialog","tagName":"h2"},{"text":"The Column Selection Dialog is UI for managing Grid's columns.","tagName":"p"},{"text":"Features","tagName":"h3"},{"text":"Demo","tagName":"h3"},{"text":"Click on Open Dialog button to see the dialog.","tagName":"p"},{"text":" Language:\n<select id=\"lang_selector\">\n  <option value=\"en\">English</option>\n  <option value=\"ja\">Japanese</option>\n  <option value=\"de\">German</option>\n  <option value=\"zh\">Simplified Chinese</option>\n  <option value=\"zh-Hant\">Traditional Chinese</option>\n</select>\n<ef-button id=\"open_btn\">Open Dialog</ef-button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"CF_VOLUMN\", \"date\", \"PCTCHNG2\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 6 });\n\nvar allColumns = [\n  { name: \"Company\", field: fields[0], disabled: true },\n  { name: \"Market\", field: fields[1], width: 100 },\n  { name: \"Last\", field: fields[2], width: 80, alignment: \"right\" },\n  { name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\" },\n  { name: \"Industry\", field: fields[4] },\n  { name: \"Volumn\", field: fields[5], alignment: \"right\" },\n  { name: \"IPO Date\", field: fields[6] },\n  { name: \"Pct. Chng\", field: fields[7], alignment: \"right\" }\n];\n\nvar configObj = {\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.columns = [\n  allColumns[0],\n  allColumns[1],\n  allColumns[2],\n  allColumns[3],\n  allColumns[4]\n];\n\nvar dialog = document.createElement(\"column-selection-dialog\");\ndialog.config = {\n  data: allColumns,\n  defaultItems: grid.columns\n};\ndialog.addEventListener(\"confirm\", function(e) {\n  grid.columns = e.detail.value;\n});\n\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  var lang = document.getElementById(\"lang_selector\").value;\n  dialog.lang = lang;\n  dialog.visibleItems = grid.api.getConfigObject().columns;\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Setup guide","tagName":"h3"},{"text":"// efx-grid\nimport '@refinitiv-ui/efx-grid';\nimport '@refinitiv-ui/efx-grid/themes/halo/light';\n\n// Column Selection Dialog module\nimport '@refinitiv-ui/efx-grid/column-selection-dialog';\nimport '@refinitiv-ui/efx-grid/column-selection-dialog/themes/halo/light';","tagName":"pre"},{"text":"Create a column-selection-dialog using the document.createElement method. This way, the column-selection-dialog DOM instance will not be mounted initially.","tagName":"p"},{"text":"var dialog = document.createElement(\"column-selection-dialog\");","tagName":"pre"},{"text":"Then you need to subscribe to confirm event which will be fired when the user has confirmed their changes. It is also required to directly manipulate grid.columns with the e.detail.value like below.","tagName":"p"},{"text":"dialog.addEventListener(\"confirm\", function (e) {\n  var grid = document.getElementById(\"grid\");\n  grid.columns = e.detail.value;\n});","tagName":"pre"},{"text":"By default, once users click Done the dialog will automatically hide. In order to prevent the dialog from closing (eg. Validate something before closing), use beforeConfirm event and set e.cancel to true.","tagName":"p"},{"text":"dialog.addEventListener(\"beforeConfirm\", function (e) {\n  if (/*Some logic*/) {\n    e.cancel = true;\n    window.alert(\"Don't hide the dialog\");\n  }\n});","tagName":"pre"},{"text":"Then set initial data using the init(configObj) method. This takes a configuration object consisting of two properties, data and visibleItems. Alternatively, the same configuration can be set through config property. For example, dialog.config = configObj;","tagName":"p"},{"text":"var columns = [/* Grid Column Option */];\nvar grid = document.getElementsByTagName(\"efx-grid\")[0];\ngrid.config = {/* Grid Option */};\ngrid.columns = columns; // Explicitly set columns, otherwise it will be undefined\n\ndialog.config = {\n  data: columns, // All columns\n  visibleItems: grid.columns // Currently visible columns\n};","tagName":"pre"},{"text":"Note: grid.columns needs to be set explicitly due to limitations of the Grid.","tagName":"p"},{"text":"Finally, to open the dialog you need to call dialog.show() method on dialog element.","tagName":"p"},{"text":"dialog.show();","tagName":"pre"},{"text":"Changing Language","tagName":"h3"},{"text":"For more information about internationalization and how is it applied in different contexts see Language Support.","tagName":"p"},{"text":"Language Support","tagName":"a"},{"text":"Multi Level with Column Selection","tagName":"h3"},{"text":"<button id=\"open_btn\">Open Dialog</button>\n\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"CF_VOLUMN\", \"date\", \"PCTCHNG2\"];\nvar records = DataGenerator.generateRecords(fields, 20);\n\nvar allColumns = [\n  { name: \"Company\", field: fields[0], disabled: true },\n  { name: \"Market\", field: fields[1], width: 100 },\n  { name: \"Last\", field: fields[2], width: 80, alignment: \"right\" },\n  { name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\" },\n  { name: \"Industry\", field: fields[4] },\n  { name: \"Volumn\", field: fields[5], alignment: \"right\" },\n  { name: \"IPO Date\", field: fields[6] },\n  { name: \"Pct. Chng\", field: fields[7], alignment: \"right\" }\n];\n\nvar configObj = {\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.columns = [\n  allColumns[0],\n  allColumns[1],\n  allColumns[2],\n  allColumns[3],\n  allColumns[4]\n];\n\nvar columnTree = [\n  allColumns[0],\n  {\n    label: 'Basic Info',\n    items: [\n      allColumns[1],\n      allColumns[4],\n      allColumns[6]\n    ]\n  },\n  {\n    label: 'Trading Info',\n    items: [{\n        label: 'Net.',\n        items: [\n          allColumns[2],\n          allColumns[3],\n          allColumns[5]\n        ]\n      },\n      {\n        label: 'Percent',\n        items: [\n          allColumns[7]\n        ]\n      }\n    ]\n  }\n];\n\nvar dialog = document.createElement(\"column-selection-dialog\");\ndialog.config = {\n  data: columnTree\n};\n\ndialog.addEventListener(\"confirm\", function(e) {\n  grid.columns = e.detail.value;\n});\n\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  dialog.visibleItems = grid.api.getConfigObject().columns;\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Disabled column","tagName":"h3"},{"text":"In case you do not want specific columns to move out of the grid, you can set the flag as disabled for that specific column, as the example below:","tagName":"p"},{"text":"var columns = [/* Grid Column Option */];\nvar grid = document.getElementById(\"grid_id\");\ngrid.config = {/* Grid Option */};\ngrid.columns = columns; // Explicitly set columns, otherwise it will be undefined\n\ncolumns[1].disabled = true; // To prevent this column from moving between the lists\ndialog.config = {\n    data: columns, // All columns\n    visibleItems: columns// Currently visible columns\n};","tagName":"pre"},{"text":"Stationary column","tagName":"h3"},{"text":"In case you are having pinned columns, and you do not want pinned columns to be moved or removed from the grid, you can enable the stationary flag to disable select and moving operation for that specific column.","tagName":"p"},{"text":"<button id=\"open_btn\">Open Dialog</button>\n\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"CF_VOLUMN\", \"date\", \"PCTCHNG2\"];\nvar records = DataGenerator.generateRecords(fields, 20);\n\nvar allColumns = [\n  { name: \"Company\", field: fields[0], width: 250, leftPinned: true, stationary: true },\n  { name: \"Market\", field: fields[1], width: 250 },\n  { name: \"Last\", field: fields[2], width: 120, alignment: \"right\" },\n  { name: \"Net. Chng\", field: fields[3], width: 100, alignment: \"right\" },\n  { name: \"Industry\", field: fields[4], width: 200 },\n  { name: \"Volumn\", field: fields[5], width: 100, alignment: \"right\" },\n  { name: \"IPO Date\", field: fields[6], width: 100 },\n  { name: \"Pct. Chng\", field: fields[7], width: 100, alignment: \"right\" }\n];\n\nvar configObj = {\n  dataModel: {\n    data: records\n  }\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.columns = [\n  allColumns[0],\n  allColumns[1],\n  allColumns[2],\n  allColumns[3],\n  allColumns[4]\n];\n\nvar columnTree = [\n  allColumns[0],\n  {\n    label: 'Basic Info',\n    items: [\n      allColumns[1],\n      allColumns[4],\n      allColumns[6]\n    ]\n  },\n  {\n    label: 'Trading Info',\n    items: [{\n        label: 'Net.',\n        items: [\n          allColumns[2],\n          allColumns[3],\n          allColumns[5]\n        ]\n      },\n      {\n        label: 'Percent',\n        items: [\n          allColumns[7]\n        ]\n      }\n    ]\n  }\n];\n\nvar dialog = document.createElement(\"column-selection-dialog\");\ndialog.config = {\n  data: columnTree\n};\n\ndialog.addEventListener(\"confirm\", function(e) {\n  grid.columns = e.detail.value;\n});\n\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  dialog.visibleItems = grid.api.getConfigObject().columns;\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Note: ","tagName":"p"},{"text":"Hide Columns in Visible Columns","tagName":"h3"},{"text":"There is a use case where you might not want some columns to be moved. You can disable the number of columns in the visible columns using excludedColumns config.","tagName":"p"},{"text":"dialog.config = {\n    // Other dialog config\n    excludedColumns: 2, // This will make column index 0-1 hidden in the Visible Columns.\n};","tagName":"pre"},{"text":"Default Columns","tagName":"h3"},{"text":"The \"RESTORE DEFAULT\" button will show only when defaultItems has been set. This button will reset all visible columns to default.","tagName":"p"},{"text":"var allColumns = [\n    {name: \"Company\", field: fields[0], disabled: true},\n    {name: \"Market\", field: fields[1], width: 100},\n    {name: \"Last\", field: fields[2], width: 80, alignment: \"right\"},\n    {name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\"},\n    {name: \"Industry\", field: fields[4]},\n    {name: \"Volumn\", field: fields[5], alignment: \"right\"},\n    {name: \"IPO Date\", field: fields[6]},\n    {name: \"Pct. Chng\", field: fields[7], alignment: \"right\"}\n];\n\ngrid.columns = [\n    allColumns[0],\n    allColumns[1],\n    allColumns[2],\n    allColumns[3],\n    allColumns[4]\n];\n\ndialog.config = {\n    // Other dialog config\n    defaultItems: grid.columns\n};","tagName":"pre"},{"text":"Note: availableItems is deprecated.","tagName":"p"},{"text":"Restoring columns with retaining sorting and filtering states","tagName":"h3"},{"text":"The Column Selection Dialog only provides column information to the user. If you wish to retain certain states, such as sorting and filtering, you will need to utilize the grid API to restore the updated data back to the grid from your side.","tagName":"p"},{"text":"In the example below, we will demonstrate how to retain the sorting and filtering state in the grid when confirming the column selection dialog.","tagName":"p"},{"text":"<button id=\"open_btn\">Open Dialog</button>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var rowFilteringExt = new RowFiltering();\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\", \"CF_VOLUMN\", \"date\", \"PCTCHNG2\"];\nvar records = DataGenerator.generateRecords(fields, 20);\nvar allColumns = [\n  { name: \"Company\", field: fields[0], disabled: true },\n  { name: \"Market\", field: fields[1], width: 100 },\n  { name: \"Last\", field: fields[2], width: 80, alignment: \"right\" },\n  { name: \"Net. Chng\", field: fields[3], width: 80, alignment: \"right\" },\n  { name: \"Industry\", field: fields[4] },\n  { name: \"Volumn\", field: fields[5], alignment: \"right\" },\n  { name: \"IPO Date\", field: fields[6] },\n  { name: \"Pct. Chng\", field: fields[7], alignment: \"right\" }\n];\n\nvar configObj = {\n  dataModel: {\n    data: records\n  },\n  extensions: [rowFilteringExt],\n  rowFiltering: {\n    iconActivation: \"always\"\n  },\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.columns = [\n  allColumns[0],\n  allColumns[1],\n  allColumns[2],\n  allColumns[3],\n  allColumns[4]\n];\n\nvar dialog = document.createElement(\"column-selection-dialog\");\ndialog.config = {\n  data: allColumns,\n  defaultItems: grid.columns\n};\n\ndialog.addEventListener(\"confirm\", function(e) {\n  grid.api.restoreColumns(e.detail.data, true);\n});\n\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  dialog.visibleItems = grid.api.getConfigObject().columns;\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Tag searching","tagName":"h3"},{"text":"To add available tag list to the dialog, set an array of tags to tags property on the dialog configuration object. tags property can also be set on column configuration object for matching. ","tagName":"p"},{"text":"<button id=\"open_btn\">Open Dialog</button>\n<hr>\n<big id=\"msg_big\"></big>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var availableTags = [\"Runner\", \"Swimmer\", \"Flier\", \"red\", \"green\", \"blue\"];\nvar fieldDefs = [\n  [\"Red Dog\", [\"red\", \"runner\", \"running\"]],\n  [\"Red Snake\", [\"red\"]],\n  [\"Blue Penguin\", [\"Blue\", \"Runner\", \"Running\", \"Swimmer\"]],\n  [\"Blue Bird\", [\"Blue\", \"Flier\"]],\n  [\"Blue Chicken\", [\"Blue\", \"runner\", \"running\"]],\n  [\"Green Lion\", [\"Green\", \"Runner\", \"running\"]],\n  [\"Red Bat\", [\"red\", \"Flier\"]],\n  [\"Green Frog\", [\"Green\", \"Swimmer\"]],\n  [\"Blue Rabbit\", [\"Blue\", \"Runner\", \"running\"]],\n  [\"Red Fish\", [\"red\", \"Swimmer\"]]\n];\ndocument.getElementById(\"msg_big\").textContent = \"Available tags: \" + availableTags.join(\", \");\nvar columnDefMap = fieldDefs.reduce(function(obj, def) {\n  var field = def[0];\n  var tag = def[1];\n  obj[field] = {\n    field: field,\n    id: field,\n    tags: tag\n  };\n  return obj;\n}, {});\n\nfunction idToColumnDef(colId) {\n  return columnDefMap[colId] || null;\n}\n\nvar fields = Object.keys(columnDefMap);\nvar availableColumns = Object.values(columnDefMap);\n\nvar records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });\nvar configObj = {\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\ngrid.columns = availableColumns.slice(0, 4);\n\nfunction onConfirm(e) {\n  grid.columns = e.detail.value;\n}\n\nvar dialog = null;\ndocument.getElementById(\"open_btn\").addEventListener(\"click\", function() {\n  if (!dialog) {\n    dialog = document.createElement(\"column-selection-dialog\");\n\n    dialog.config = {\n      data: availableColumns,\n      confirm: onConfirm,\n      tags: availableTags,\n      infoTooltip: \"Search Column to add to the right list. Press Tab to add a Tag. Available tags for Search: Red, Blue, Green, Runner, Swimmer, and Flier\",\n      searchPlaceholder: \"Search Column. Press Tab to add a Tag\"\n    };\n  }\n\n  var columnIds = grid.api.getColumnIds();\n  dialog.visibleItems = columnIds.map(idToColumnDef);\n\n  dialog.show();\n});","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Config","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Default                Description    ","tagName":"tr"},{"text":"                            data                                                    Array.<Object>                                                                                                                                                                                                    All possible columns for selection.        ","tagName":"tr"},{"text":"                            visibleItems                                                    Array.<Object>                                                                                        <optional>                                                                                                                                                Column list that is in existing Grid.        ","tagName":"tr"},{"text":"                            defaultItems                                                    Array.<Object>                                                                                        <optional>                                                                                                                                                Column list that is default.        ","tagName":"tr"},{"text":"                            confirm                                                    function                                                                                        <optional>                                                                                                                                                Confirm event callback.        ","tagName":"tr"},{"text":"                            cancel                                                    function                                                                                        <optional>                                                                                                                                                Cancel event callback.        ","tagName":"tr"},{"text":"                            excludedColumns                                                    number                                                                                        <optional>                                                                                                                                                Deprecated, Alias wigh excludedLeftColumns.        ","tagName":"tr"},{"text":"                            excludedLeftColumns                                                    number                                                                                        <optional>                                                                                                                                                Number of columns on the left side that should be hidden from Visible Columns.        ","tagName":"tr"},{"text":"                            excludedRightColumns                                                    number                                                                                        <optional>                                                                                                                                                Number of columns on the right side that should be hidden from Visible Columns.        ","tagName":"tr"},{"text":"                            unmovableColumns                                                    number                                                                                        <optional>                                                                                                                                                Depricated, Alias with stationary column option. Number of columns that is unmovable in Visible Columns.        ","tagName":"tr"},{"text":"                            descriptionBox                                                    boolean                                                                                        <optional>                                                                                                                                                Show description box        ","tagName":"tr"},{"text":"                            middleSeparator                                                    string                                                                                        <optional>                                                                                                                                                Field of column which used as middle separator to divide grid into two sides        ","tagName":"tr"},{"text":"                            collapseAll                                                    boolean                                                                                        <optional>                                                                                                                            false                                                        Default collapse property applies to all groups        ","tagName":"tr"},{"text":"                            width                                                    number                                                                                        <optional>                                                                                                                                                Specify width of the dialog, with the minimum width of 490px        ","tagName":"tr"},{"text":"                            height                                                    number                                                                                        <optional>                                                                                                                                                Specify height of the dialog        ","tagName":"tr"},{"text":"                            tags                                                    Array.<string>                                                                                        <optional>                                                                                                                            null                                                        All available tags for filtering        ","tagName":"tr"},{"text":"                            infoTooltip                                                    string                                                                                        <optional>                                                                                                                            \"\"                                                        If specified, an informational icon will appear on the top with the given text as its tooltip        ","tagName":"tr"},{"text":"                            searchPlaceholder                                                    string                                                                                        <optional>                                                                                                                            \"Search\"                                                        Placeholder text inside the search input.        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"hide()","tagName":"h4"},{"text":"init(optionsopt)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"ColumnSelectionDialog~Config","tagName":"a"},{"text":"show()","tagName":"h4"}]},{"title":"Filter Dialog","filename":"widgets/filter-dialog.html","contents":[{"text":"Filter Dialog","tagName":"h2"},{"text":"The Filter Dialog is a user-friendly interface for filtering and sorting. The example below shows how Filter Dialog can be used in conjunction with Row Filtering Extension. Users can hover over column header to show filter icon. Clicking on the icon will open Filter Dialog.","tagName":"p"},{"text":"Row Filtering Extension","tagName":"a"},{"text":"<efx-grid id=\"grid\">\n\n</efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 0, 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: 100 },\n    { name: \"Industry\", field: fields[4] }\n  ],\n  staticDataRows: records,\n  rowFiltering: {\n    iconActivation: \"onHover\"\n  },\n  extensions: [\n    new RowFiltering()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Setup guide","tagName":"h3"},{"text":" // efx-grid\nimport \"@refinitiv-ui/efx-grid\";\nimport \"@refinitiv-ui/efx-grid/themes/halo/light\";\n\n// Extensions\nimport { RowFiltering } from \"@refinitiv-ui/efx-grid/extensions\";\n\n// Filter Dialog module\nimport \"@refinitiv-ui/efx-grid/filter-dialog\";\nimport \"@refinitiv-ui/efx-grid/filter-dialog/themes/halo/light\";  // !Important. Theme must be imported.\n","tagName":"pre"},{"text":"The dialog cannot be used without Row Filtering Extension. So, initialize Row Filtering Extension instance and add it to extensions property on the grid configuration object. To open the dialog, you can either use iconActivation property or openDialog method from the extension.","tagName":"p"},{"text":"var rowFilteringExt = new RowFiltering();\n\nvar configObj = {\n    extensions: [\n        rowFilteringExt\n    ],\n    rowFiltering:{\n        iconActivation: \"onHover\"\n    },\n    columns: columns, // Columns config\n    staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid_id\");\ngrid.config = configObj;\n\nfunction onClickButton(e) {\n  rowFilteringExt.openDialog(columnIndex);\n}","tagName":"pre"},{"text":"Advanced condition tab","tagName":"h3"},{"text":"Filter dialog has three types of condition tabs: generic value condition (default), numeric value condition, and date time value condition. Each type has a different list of available operators. For example, numeric value condition contains only nemeric operators, such as Less than or Greater than operators. To specify the type for the dialog, define fieldDataType property on the column configuration object to one of the following values: number, datetime, and text or nothing (default). ","tagName":"p"},{"text":"<efx-grid id=\"grid\">\n\n</efx-grid>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"CF_NETCHNG\", \"ISODate\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 20 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: \"companyName\" },\n    { name: \"Company (text)\", field: \"companyName\", fieldDataType: \"text\" },\n    { name: \"Date (generic)\", field: \"ISODate\", width: 180 },\n    { name: \"Date (datetime)\", field: \"ISODate\", width: 180, fieldDataType: \"datetime\" },\n    { name: \"Change (generic)\", field: \"CF_NETCHNG\", width: 130 },\n    { name: \"Change (number)\", field: \"CF_NETCHNG\", width: 130, fieldDataType: \"number\" }\n  ],\n  staticDataRows: records,\n  rowFiltering: {\n    iconActivation: \"onHover\"\n  },\n  extensions: [\n    new RowFiltering()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Dialog options","tagName":"h3"},{"text":"Filter Dialog can be customized by setting dialogOptions property on the Row Filtering Extension configuration object as shown in the following code snippet:","tagName":"p"},{"text":"var configObj = {\n    rowFiltering: {\n        dialogOptions: {\n            sortUI: false\n        }\n    }\n};","tagName":"pre"},{"text":"The options will be applied for every column in the grid. The options can be overriden on a column basis by using beforeDialogOpened event. You can specify dialogOptions property on the event argument and override the options set on the grid level as shown in the following code snippet:","tagName":"p"},{"text":"var configObj = {\n    rowFiltering: {\n        dialogOptions: {\n            sortUI: false\n        },\n        beforeDialogOpened: function(e) {\n            if(e.field === \"field A\") {\n                e.dialogOptions = {\n                    sortUI: true\n                };\n            }\n        }\n    }\n};","tagName":"pre"},{"text":"Customizing filter item list","tagName":"h3"},{"text":"By default, the item list in Filter Dialog is generated from existing data on the column, where the dialog is openned. Any duplicate value is automatically removed from the list. If there is formatting applied by Text Formatting Extension on the column, the items will also be formatted. ","tagName":"p"},{"text":"itemList property on the dialog options can be used to replace the autogenerated one. This is useful when you want to prevent some values from being available for  filtering. ","tagName":"p"},{"text":"additionalItems property on the dialog options can be used to add more values to the existing list. The property can be used to include some nonexistent values (e.g., you have some server side filtering).","tagName":"p"},{"text":"formattedDataAccessor property on the dialog options allows you to specify a method for transforming and displaying items on the list. The method will be called on each item and it should return the formatted text you want to display in the dialog. The method can also be used to retrieve data from an object (i.e., data with non-premitive data type).","tagName":"p"},{"text":"sortLogic property on the dialog options allows you to specify a method for reordering items on the list. The method will be used by Array.sort method","tagName":"p"},{"text":"Array.sort method","tagName":"a"},{"text":"<efx-grid id=\"grid\">\n\n</efx-grid>","tagName":"pre"},{"text":"var sortIdInDescendingOrder = function(valA, valB) {\n  if (valA < valB) {\n    return 1;\n  }\n  if (valB < valA) {\n    return -1;\n  }\n  return 0;\n};\nvar booleanToYesNo = function(val) {\n  if (val != null) {\n    return val ? \"Yes\" : \"No\";\n  }\n  return \"\";\n};\nvar onBeforeDialogOpened = function(e) {\n  var colIndex = e.colIndex;\n  if (colIndex === 0) { // id\n    e.dialogOptions = {\n      sortLogic: sortIdInDescendingOrder\n    };\n  } else if (colIndex === 2) { // replacement\n    e.dialogOptions = {\n      itemList: [\"Left\", \"Center\", \"Right\"]\n    };\n  } else if (colIndex === 3) { // addition\n    e.dialogOptions = {\n      additionalItems: [1, 0, \"N/A\"]\n    };\n  } else if (colIndex === 4) { // formatted\n    e.dialogOptions = {\n      formattedDataAccessor: booleanToYesNo\n    };\n  }\n};\nvar fields = [\"id\", \"boolean\"];\nvar records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 10 });\nvar configObj = {\n  rowFiltering: {\n    iconActivation: \"onHover\",\n    beforeDialogOpened: onBeforeDialogOpened\n  },\n  columns: [\n    { name: \"Id\", field: \"id\", width: 80 },\n    { name: \"Boolean (default)\", field: \"boolean\" },\n    { name: \"Boolean (replacement)\", field: \"boolean\" },\n    { name: \"Boolean (addition)\", field: \"boolean\" },\n    { name: \"Boolean (formatted)\", field: \"boolean\" }\n  ],\n  staticDataRows: records,\n  extensions: [\n    new RowFiltering()\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"efx-grid {\n  height: 300px;\n}","tagName":"pre"},{"text":"Changing dialog language","tagName":"h3"},{"text":"For more information about internationalization and how is it applied in different contexts see Language Support.","tagName":"p"},{"text":"Language Support","tagName":"a"},{"text":"Opening Filter Dialog using an API","tagName":"h3"},{"text":"The dialog can be openned from anywhere, not just from filter icon on the column header. Use openDialog method from Row Filtering extension instance, so that the dialog can be openned for specific column and linked up with grid instance. ","tagName":"p"},{"text":"The following example illustrates how the dialog can be opened from context menu using Context Menu Extension. Right click on the column header to see the dialog.","tagName":"p"},{"text":"Context Menu Extension","tagName":"a"},{"text":" Language:\n<select id=\"lang_selector\">\n    <option value=\"en\">English</option>\n    <option value=\"ja\">Japanese</option>\n    <option value=\"de\">German</option>\n    <option value=\"zh\">Simplified Chinese</option>\n    <option value=\"zh-Hant\">Traditional Chinese</option>\n</select>\n<hr>\n<efx-grid id=\"grid\"></efx-grid>","tagName":"pre"},{"text":"var rowFilteringExt = new RowFiltering();\nvar contextMenuExt = new ContextMenu();\n\nvar fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"ISODate\"];\nvar records = DataGenerator.generateRecords(fields, { numRows: 10 });\nvar configObj = {\n  columns: [\n    { name: \"Company\", field: fields[0], sortable: true, fieldDataType: \"text\" },\n    { name: \"Market\", field: fields[1], width: 100, sortable: true, fieldDataType: \"text\" },\n    { name: \"Last\", field: fields[2], width: 100, sortable: true, fieldDataType: \"number\" },\n    { name: \"Net. Chng\", field: fields[3], width: 100, sortable: true, fieldDataType: \"number\" },\n    { name: \"IPO Date\", field: fields[4], sortable: true, fieldDataType: \"datetime\" }\n  ],\n  dataModel: {\n    data: records\n  },\n  contextMenu: {\n    items: {\n      MENU_1: {\n        text: \"Filter\",\n        callback: function(e) {\n          var colIndex = e.colIndex;\n          var lang = document.getElementById(\"lang_selector\").value;\n          var dialogOptions = {\n            sortUI: true, // Show sorting section\n            filterUI: true, // Show filtering section\n            lang: lang,\n            fieldDataType: grid.api.getColumnDataType(colIndex)\n          };\n          rowFilteringExt.openDialog(colIndex, dialogOptions);\n        }\n      },\n    },\n    onMenu: function(e) {\n      e.menu.addItem(\"MENU_1\");\n    }\n  },\n  extensions: [\n    rowFilteringExt,\n    contextMenuExt\n  ]\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"html hr {\n  margin: 5px;\n}\n\nefx-grid {\n  height: 500px;\n}","tagName":"pre"},{"text":"Listening an event","tagName":"h3"},{"text":"If you want to do a custom task after the dialog has been commited, you can listen for dialogCommitted event from Row Filtering Extension. The change from the dialog will be passed as value property in the event argument. ","tagName":"p"},{"text":"var onDialogCommitted = function (e) {\n    if(e.value) { // When user confirm dialog\n        console.log(e)\n    } else { // When user sort data from dialog\n        console.log(e);\n    }\n}\n\nvar gridConfig = {\n    rowFiltering: {\n        dialogCommitted: onDialogCommitted\n    }\n};\n\n// Alternatively\nrowFilteringExt.addEventListener(\"dialogCommitted\", onDialogCommitted);","tagName":"pre"},{"text":"API Reference","tagName":"h2"},{"text":"Type Definitions","tagName":"h3"},{"text":"Config","tagName":"h4"},{"text":"Type:","tagName":"h5"},{"text":"Properties:","tagName":"h5"},{"text":"                Name                Type                Attributes                        Description    ","tagName":"tr"},{"text":"                            data                                                    Object                                                                                                                                        Column data        ","tagName":"tr"},{"text":"                            sortState                                                    string                                                                                        <optional>                                                                                    \"a\" for ascending or \"d\" for descending        ","tagName":"tr"},{"text":"                            sortUI                                                    boolean                                                                                        <optional>                                                                                    Show Sort area        ","tagName":"tr"},{"text":"                            filterUI                                                    boolean                                                                                        <optional>                                                                                    Show Filter area        ","tagName":"tr"},{"text":"                            blankValues                                                    string | boolean                                                                                        <optional>                                                                                    Display a Blanks item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item        ","tagName":"tr"},{"text":"                            filterChanged                                                    function                                                                                        <optional>                                                                                    Filter changed handler        ","tagName":"tr"},{"text":"                            confirm                                                    function                                                                                        <optional>                                                                                    Alias of filterChanged        ","tagName":"tr"},{"text":"                            cancel                                                    function                                                                                        <optional>                                                                                    Alias of dialog cancel        ","tagName":"tr"},{"text":"                            sortChanged                                                    function                                                                                        <optional>                                                                                    Sort changed handler        ","tagName":"tr"},{"text":"Methods","tagName":"h3"},{"text":"hide()","tagName":"h4"},{"text":"hideSortUI(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"init(options)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"FilterDialog~Config","tagName":"a"},{"text":"setSortState(val)","tagName":"h4"},{"text":"Parameters:","tagName":"h5"},{"text":"show()","tagName":"h4"}]},{"title":"Language Support","filename":"widgets/language-support.html","contents":[{"text":"Widgets support localization, including translated messages and formatting. In your app, setting your html lang attribute will trigger that language to be applied to widget elements.","tagName":"p"},{"text":"<html lang=\"ja\">\n\n</html>","tagName":"pre"},{"text":"Alternatively, setting the lang attribute directly on elements will have the same effect.","tagName":"p"},{"text":"lang on an element supersedes the html lang, meaning multiple languages can exist on the same page.","tagName":"p"},{"text":"var dialog = document.createElement(\"column-selection-dialog\");\ndialog.lang = \"ja\";","tagName":"pre"},{"text":"Currently, the following languages are supported:","tagName":"p"},{"text":"\nLanguage\nlang value\n","tagName":"tr"},{"text":"\nEnglish (default)\nen\n","tagName":"tr"},{"text":"\nJapanese\nja\n","tagName":"tr"},{"text":"\nGerman\nde\n","tagName":"tr"},{"text":"\nSimplified Chinese\nzh\n","tagName":"tr"},{"text":"\nTraditional Chinese\nzh-Hant\n","tagName":"tr"},{"text":"If an unsupported language is set, English is the default fallback.","tagName":"p"},{"text":"More details about localization is avaiable on Internationalization","tagName":"p"},{"text":"Internationalization","tagName":"a"}]},{"title":"Using Core APIs","filename":"misc/core-apis.html","contents":[{"text":"Core Grid is the internal part of Grid, containing logics for UI and layout manipulation. Grid is just a wrapper that make the JavaScript grid component (Core Grid) become a custom element in the Web Components standard. ","tagName":"p"},{"text":"custom element","tagName":"a"},{"text":"Web Components","tagName":"a"},{"text":"Some of the APIs are already propagated and exposed to the api property of the element. However, most of the APIs are still only available in the core part of Grid. ","tagName":"p"},{"text":"To unlock all the APIs you need to get a reference to the Core Grid by using the getCoreGrid method from api as shown in the below sample:","tagName":"p"},{"text":"var grid = document.getElementsByTagName(\"atlas-blotter\")[0];\ngrid.addEventListener(\"configured\", function(e) {\n    var core = e.detail.api.getCoreGrid(); // Getting Core Grid reference\n\n    var titleSection = core.getSection(\"title\");\n    var contentSection = core.getSection(\"content\");\n    var colCount = core.getColumnCount();\n});","tagName":"pre"},{"text":"Note: The custom elements are not defined immediately after the page load. api will only be available after the element is defined. So, use the configured event to ensure the existence of the api property.","tagName":"p"},{"text":"custom elements","tagName":"a"},{"text":"For all available Core Grid APIs, see this page.","tagName":"p"},{"text":"this page","tagName":"a"},{"text":"Getting built-in plugins and extensions","tagName":"h2"},{"text":"Due to the long history of its development, Grid contains a lot of legacy codes, including built-in plugins. A plugin is just an old name for an extension. So, to get a reference for plugins or extensions, you can use the getPlugin method from the Core Grid. ","tagName":"p"},{"text":"Note: The \"SortableTitlePlugin\" is the only notable plugin worth mentioning among built-in plugins, since it manages how Grid sorts the data. ","tagName":"p"},{"text":"The following example shows how you can listen to the columnSorted event fired after each sorting state change from the SortableTitlePlugin.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"<big id=\"msg_div\">Click grid top section to sort</big>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 6 });\n\nvar onColumnSorted = function(e) {\n  msg_div.textContent = \"Column \" + e.colIndex + \" is sorted in \" + (e.sortOrder === \"a\" ? \"ascending\" : \"descending\") + \" order\";\n};\n\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};\n\nvar grid = document.getElementById(\"grid\");\ngrid.addEventListener(\"configured\", function(e) {\n  var core = e.detail.api.getCoreGrid();\n\n  var plugin = core.getPlugin(\"SortableTitle\");\n  plugin.listen(\"columnSorted\", onColumnSorted);\n});\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Note: you can use the listen method to listen to a custom event fired from Grid and Grid's plugins, instead of the conventional addEventListener method.","tagName":"p"}]},{"title":"Pagination","filename":"misc/pagination.html","contents":[{"text":"In case you want to retrieve a chunk of data from the server and do not want to load all of the data at once, you need to do server side pagination. The pagination component is enough to do this. Do not use the Pagination Extension for server side pagination. ","tagName":"p"},{"text":"pagination","tagName":"a"},{"text":"All related logics (such as data requesting, validation, and transformation) must be implemented on the application side. Once data is received, you can just assign data to Grid's data property. ","tagName":"p"},{"text":"See more details about data setting at Columns and Data Properties.","tagName":"p"},{"text":"Columns and Data Properties","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"    function onServerResponse(data) {\n        hideLoadingMask();\n        grid.data = data; // Setting data from server\n    }\n    function onRowCountRecieved(total) {\n        pagination_ui.max = Math.ceil(total / PAGE_SIZE);\n    }\n    function onPageChanged(e) {\n        requestData(e.detail.value, PAGE_SIZE, onServerResponse);\n    }","tagName":"pre"},{"text":"<div id=\"container_div\">\n  <atlas-blotter id=\"grid\"></atlas-blotter>\n  <emerald-pagination id=\"pagination_ui\" value=\"1\"></emerald-pagination>\n</div>","tagName":"pre"},{"text":"var paginationUI = document.getElementById(\"pagination_ui\");\nvar SERVER_DELAY = 300;\nvar loading_mask = document.createElement(\"amber-loader\");\nvar PAGE_SIZE = 5;\n\nfunction showLoadingMask() {\n  if (!loading_mask.parentElement) {\n    container_div.classList.add('blur');\n    container_div.append(loading_mask);\n  }\n\n  paginationUI.disabled = true;\n}\n\nfunction hideLoadingMask() {\n  if (loading_mask.parentElement) {\n    container_div.classList.remove('blur');\n    loading_mask.parentElement.removeChild(loading_mask);\n  }\n\n  paginationUI.disabled = false;\n}\n\n// Event handlers\nfunction onServerResponse(data) {\n  hideLoadingMask();\n  grid.data = data; // Setting data from server\n}\n\nfunction onRowCountRecieved(total) {\n  paginationUI.max = Math.ceil(total / PAGE_SIZE);\n}\n\nfunction onPageChanged(e) {\n  requestData(e.detail.value, PAGE_SIZE, onServerResponse);\n}\n\n// Mocking Server\nfunction requestTotalPage(callback) {\n  setTimeout(function() { // Simulate network delay when requesting data from server\n    callback(serverData.length);\n  }, SERVER_DELAY);\n}\n\nfunction requestData(page, itemPerPage, callback) {\n  showLoadingMask();\n  page = parseInt(page);\n  itemPerPage = parseInt(itemPerPage);\n  setTimeout(function() { // Simulate network delay when requesting data from server\n    var start = itemPerPage * (page - 1);\n    var end = start + itemPerPage;\n    callback(serverData.slice(start, end));\n  }, SERVER_DELAY);\n}\n\n// Mocking Data\nvar totalCount = 100;\ntr.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 serverData = tr.DataGenerator.generateRecords(fields, { numRows: totalCount });\n\n// Initializing UIs\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  // ,dataModel: {...} Initial data is optional\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\npaginationUI.addEventListener(\"value-changed\", onPageChanged);\n\n// Start app by getting total number of items and data\nrequestTotalPage(onRowCountRecieved);\nrequestData(paginationUI.value, PAGE_SIZE, onServerResponse);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 169px;\n}\n\nemerald-pagination {\n  margin-bottom: 30px;\n}\n\n.blur {\n  filter: blur(2px);\n}","tagName":"pre"},{"text":"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.","tagName":"p"},{"text":"pagination","tagName":"a"},{"text":"Pagination Extension","tagName":"a"},{"text":"Example","tagName":"h2"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>\n<emerald-pagination id=\"pagination\"></emerald-pagination>","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: 100 });\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  dataModel: {\n    data: records\n  },\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"}]},{"title":"Loading Mask","filename":"misc/loading-mask.html","contents":[{"text":"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.","tagName":"p"},{"text":"loader","tagName":"a"},{"text":"Basic Example","tagName":"h2"},{"text":"<button id=\"show_btn\">Show Masking</button>\n<button id=\"hide_btn\">Hide Masking</button>\n<br><br>\n<div id=\"container_div\">\n  <atlas-blotter id=\"grid\"></atlas-blotter>\n</div>","tagName":"pre"},{"text":"var loadingMaskEl = document.createElement(\"amber-loader\"); // Element can be created at runtime \n\ntr.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: 10 });\nvar configObj = {\n  columns: [\n    { name: \"ID\", field: fields[5], alignment: \"center\", width: 80 },\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(\"show_btn\").addEventListener(\"click\", function() {\n  document.getElementById(\"container_div\").appendChild(loadingMaskEl);\n});\n\ndocument.getElementById(\"hide_btn\").addEventListener(\"click\", function() {\n  loadingMaskEl.remove();\n});","tagName":"pre"},{"text":"#container_div {\n  position: relative;\n  /*amber-loader has position absolute*/\n  height: 250px;\n}\n\natlas-blotter {\n  height: 100%;\n}","tagName":"pre"},{"text":"Infinite Scrolling with Data Fetching Example","tagName":"h2"},{"text":"<button id=\"fetch_btn\">Fetch Data</button>\n\n<button id=\"clear_btn\">Clear Data</button>\n<big>Total rows: <span id=\"total_row\">0</span></big>\n<br>\n<div id=\"container_div\">\n  <atlas-blotter id=\"grid\"></atlas-blotter>\n</div>","tagName":"pre"},{"text":"var loading_mask = null; // Cache the element for re-using multiple times\ntr.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\"];\n\nfunction fetchData() { // Simulate Data Fetching\n  if (!loading_mask) { // If we are not loading anything\n    toggleLoadingMask();\n    setTimeout(onDataReceived, 1500); // Simulate delay for communication with a server\n  }\n};\n\nfunction clearData() {\n  grid.api.removeAllRows();\n  document.getElementById(\"total_row\").textContent = 0;\n};\n\nfunction onDataReceived() {\n  toggleLoadingMask(); // Remove loading mask\n\n  var records = tr.DataGenerator.generateRecords(fields, { numRows: 20 });\n  grid.api.addStaticDataRows(records);\n\n  document.getElementById(\"total_row\").textContent = grid.api.getRowCount(); // Update UI\n}\n\nfunction onScrollEnd(e) {\n  var vScrollbar = grid.api.getCoreGrid().getVScrollbar();\n  if (vScrollbar.isEndOfVerticalScroll()) {\n    fetchData();\n  }\n}\n\nfunction toggleLoadingMask() {\n  if (loading_mask) {\n    grid.classList.remove(\"blur\");\n\n    loading_mask.remove();\n    loading_mask = null;\n  } else {\n    grid.classList.add(\"blur\");\n\n    loading_mask = document.createElement(\"amber-loader\");\n    document.getElementById(\"container_div\").appendChild(loading_mask);\n  }\n}\n\nvar configObj = {\n  columns: [\n    { name: \"ID\", field: fields[5], alignment: \"center\", width: 80 },\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};\n\nvar grid = document.getElementById(\"grid\");\ngrid.addEventListener(\"configured\", function(e) {\n  fetchData();\n  var vScrollbar = e.detail.api.getCoreGrid().getVScrollbar();\n  vScrollbar.listen(\"scroll\", onScrollEnd);\n});\ngrid.config = configObj;\n\ndocument.getElementById(\"fetch_btn\").addEventListener(\"click\", fetchData);\ndocument.getElementById(\"clear_btn\").addEventListener(\"click\", clearData);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 250px;\n}\n\n.blur {\n  filter: blur(2px);\n}\n\n#container_div {\n  position: relative;\n  /*amber-loader has position absolute*/\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"50,000 Rows Handling","filename":"misc/fifty-thosand-rows.html","contents":[{"text":"Grid utilizes a virtual rendering technique that renders a range of visible rows and uses/shares the same cells across multiple rows. This allows you to display an extraordinarily large number of rows on the grid, as shown in the example below.","tagName":"p"},{"text":"Note that by default, the grid's wheel scrolling behavior will skip multiple rows based on the total number of rows, to avoid small and tiresome scrolling. Use the linearWheelScrolling flag to enable native wheel scrolling behavior.","tagName":"p"},{"text":"Example","tagName":"h2"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","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: 5000 });\nvar configObj = {\n  linearWheelScrolling: true,\n  columns: [\n    { name: \"ID\", field: fields[5], alignment: \"center\", width: 80 },\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: 500px;\n}","tagName":"pre"}]},{"title":"Row Span","filename":"misc/row-span.html","contents":[{"text":"Setting row span on a cell can be done through Core Grid API (e.g., setCellRowSpan). A cell with row span will simply be expanded on top of cells below it. Cells are not actually merged by row span, but appeared as if they are merged together.","tagName":"p"},{"text":"Since cells in grid are reused across multiple rows by default, rowVirtualization need to be turned off for row span to work properly.","tagName":"p"},{"text":"Row virtualization mode","tagName":"h2"},{"text":"Grid does not support row span in row virtualization mode. The row virtualization mode can be set using rowVirtualization: false in the configs.","tagName":"p"},{"text":"Example 1: setting row span after initialization","tagName":"h3"},{"text":"<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"id\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 10 });\nvar configObj = {\n  rowVirtualization: false,\n  columns: [\n    { name: \"Row Index\", field: fields[0], width: 60 },\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.addEventListener(\"configured\", function(e) {\n  var core = e.detail.api.getCoreGrid();\n  var section = core.getSection('content');\n  section.setCellRowSpan(1, 0, 2);\n  section.setCellRowSpan(4, 4, 3);\n  section.setCellRowSpan(0, 4, 4);\n});\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Example 2: setting row span in data binding","tagName":"h3"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"id\", \"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 0, numRows: 20 });\n\nvar onCustomBinding = function(e) {\n  if (e.rowIndex % 2 === 0) {\n    e.section.setCellRowSpan(e.colIndex, e.rowIndex, 2);\n  }\n  e.cell.setContent(e.data);\n};\n\nvar configObj = {\n  rowVirtualization: false,\n  columns: [\n    { name: \"Row Index\", field: fields[0], width: 60 },\n    { name: \"Company Name\", field: fields[1], width: 120, binding: onCustomBinding },\n    { name: \"Market\", field: fields[2], width: 120, binding: onCustomBinding },\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};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 300px;\n  margin-bottom: 40px;\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"Row Expansion","filename":"misc/row-expansion.html","contents":[{"text":"Row expansion is an extra row that is extended directly from a normal row. It's a great place to show extra information which cannot normally be shown on a single row. ","tagName":"p"},{"text":"It looks just like a normal row but, unlike a normal row, it has no data from the main data table associated with it. This means that the states or data of the row expansion have to come from the expanded row. Grid will not perform sorting or filtering on the row expansion, as it has no data. ","tagName":"p"},{"text":"In effect, row expansion is completely different from row grouping, where rows are grouped based on their data. Row expansion is tightly connected to the expanded row and cannot be separated. When the expanded row is moved, the row expansion is also moved. So, be aware that operations like sorting, filtering, or pagination can still have an impact on how row expansion is displayed.","tagName":"p"},{"text":"To add a row expansion, call addRowExpansion(rowId) or toggleRowExpansion(rowId) from Grid's data view. rowId is the row ID of the row to be expanded. ","tagName":"p"},{"text":"To remove all row expansions at once, use removeAllRowExpansions(). ","tagName":"p"},{"text":"To get existing rows with an expansion, use getRowsWithExpansion().","tagName":"p"},{"text":"To render content on the row expansion, define renderer property of rowExpansion on the grid configuration object, like so:","tagName":"p"},{"text":"var configObj = {\n    //...\n    rowExpansionBinding: function (e) {\n        var rowIndex = e[\"rowIndex\"];\n        var section = e[\"section\"];\n\n        if(e.rowExpansion) {\n            // render\n            var rowData = e.originalRowData;\n            var cell = section.stretchCell(0, rowIndex);\n            var str = \"expanded from row \\\"\" + rowData[\"col1\"] + \", \" + rowData[\"col2\"] + \", \" + rowData[\"col3\"] + \"\\\"\";\n            cell.setContent(str);\n            cell.setStyle(\"background-color\", \"lightblue\");\n        } else {\n            //dispose\n            var cell = section.stretchCell(0, rowIndex, false);\n            cell.setStyle(\"background-color\", \"\");\n        }\n    },\n    //...\n};","tagName":"pre"},{"text":"Note: the same cell element is used for both normal row and row expansion due to the virtualization technique. Any custom style has to be removed using the dispose part.","tagName":"p"},{"text":"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.","tagName":"p"},{"text":"<button id=\"save_states\">Save</button>\n\n<button id=\"load_states\">Load</button>\n<button id=\"clear_row_expan\">Clear all row expansions</button>\n<hr>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<hr>\n<pre id=\"msg\"></pre>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { seed: 1, numRows: 10 });\n\nfunction onCellCliked(e) {\n  var pos = grid.api.getRelativePosition(e);\n  if (pos.sectionType === \"content\") { // Prevent clicking on header section\n    var dv = grid.api.getDataView();\n    dv.toggleRowExpansion(pos.rowIndex);\n  }\n}\n\ndocument.getElementById(\"save_states\").addEventListener(\"click\", function() {\n  var dv = grid.api.getDataView();\n  var rowWithExpansions = dv.getRowsWithExpansion();\n  var rowIds = rowWithExpansions.filter(function(id) {\n    return id;\n  });\n\n  msg.textContent = \"Row Ids saved:\\n\" + JSON.stringify(rowIds, null, 4);\n  sessionStorage.setItem(\"row_expansion_data\", JSON.stringify(rowIds));\n});\n\ndocument.getElementById(\"load_states\").addEventListener(\"click\", function() {\n  // Initial row expansion from rowId\n  var dv = grid.api.getDataView();\n  var data = sessionStorage.getItem(\"row_expansion_data\");\n  msg.textContent = \"Data loaded: \" + data;\n  const rowIds = JSON.parse(data);\n  dv.removeAllRowExpansions();\n  for (var rowId of rowIds) {\n    dv.addRowExpansion(rowId);\n  }\n});\n\ndocument.getElementById(\"clear_row_expan\").addEventListener(\"click\", function() {\n  var dv = grid.api.getDataView();\n  dv.removeAllRowExpansions();\n  msg.textContent = \"Row expansions are cleared\";\n});\n\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  rowExpansionBinding: function(e) {\n    var rowIndex = e[\"rowIndex\"];\n    var section = e[\"section\"];\n    var colCount = section.getColumnCount();\n    if (e.rowExpansion) {\n      for (var c = 0; c < colCount; ++c) {\n        var cell = section.getCell(c, rowIndex);\n        cell.setContent(\"Row Expansion_\" + c);\n        cell.setStyle(\"backgroundColor\", \"mistyrose\");\n      }\n    } else {\n      for (var c = 0; c < colCount; ++c) {\n        var cell = section.getCell(c, rowIndex);\n        cell.setStyle(\"backgroundColor\", \"\");\n      }\n    }\n  },\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.addEventListener(\"click\", onCellCliked);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"},{"text":"Managing states for row expansion","tagName":"h2"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\n\nvar buttonFormatter = function(e) {\n  var cell = e[\"cell\"];\n  var content = cell.getContent();\n  if (!content || !cell._buttons) {\n    var buttonsContainer = (cell._buttons = document.createElement(\"div\"));\n    var firstButton = document.createElement(\"coral-button\");\n    firstButton.icon = \"edit\";\n    firstButton.addEventListener(\"click\", onFirstClickButton);\n\n    var secondButton = document.createElement(\"coral-button\");\n    secondButton.icon = \"filter\";\n    secondButton.addEventListener(\"click\", onSecondClickButton);\n    buttonsContainer.appendChild(firstButton);\n    buttonsContainer.appendChild(secondButton);\n  }\n  cell.setContent(cell._buttons);\n};\n\nvar onFirstClickButton = function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  var dv = grid.api.getDataView();\n\n  // Save the state to the expanded row\n  dv.setDataAt(pos.rowIndex, \"My_Clicked_Button\", 1);\n\n  dv.toggleRowExpansion(pos.rowIndex);\n};\n\nvar onSecondClickButton = function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  var dv = grid.api.getDataView();\n\n  // Save the state to the expanded row\n  dv.setDataAt(pos.rowIndex, \"My_Clicked_Button\", 2);\n\n  dv.toggleRowExpansion(pos.rowIndex);\n};\n\nvar configObj = {\n  columns: [{\n      name: \"Buttons\",\n      field: \"btnClicked\",\n      binding: buttonFormatter,\n      width: 80,\n      alignment: \"center\"\n    },\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  rowExpansionBinding: function(e) {\n    var rowIndex = e[\"rowIndex\"];\n    var section = e[\"section\"];\n    if (e.rowExpansion) {\n      // render\n      var cell = section.stretchCell(0, rowIndex, true);\n      var rowData = e.originalRowData;\n      if (rowData[\"My_Clicked_Button\"] === 1) {\n        cell.setContent(\"First button was clicked\");\n      } else {\n        cell.setContent(\"Second button was clicked\");\n      }\n      cell.setStyle(\"backgroundColor\", \"mistyrose\");\n      cell.setStyle(\"textAlign\", \"left\");\n    } else {\n      // dispose\n      var cell = section.stretchCell(0, rowIndex, false);\n      cell.setStyle(\"backgroundColor\", \"\");\n      cell.setStyle(\"textAlign\", \"\");\n    }\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"},{"text":"Multiple row expansions from a single row","tagName":"h2"},{"text":"You can specify the number of row expansions to be added on a single row by passing the number as the third parameter for toggleRowExpansion(rowId, null, numRows). ","tagName":"p"},{"text":"Note that row expansion has no row data. So the entire data set for multiple row expansions have to be stored on the expanded row. Luckily, any data structure can be stored on the row data. For instance, you can have an array of objects representing states of row expansions, like so:","tagName":"p"},{"text":"dv.setData(rowId, \"My_Row_Expansion_States\", [ \n    {name: \"Row 1\", value: 1},\n    {name: \"Row 2\", value: 2},\n    // ...\n]);","tagName":"pre"},{"text":"Handling asynchronous content","tagName":"h2"},{"text":"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. ","tagName":"p"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\">\n\n</atlas-blotter>\n<hr>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\", \"CF_LAST\", \"CF_NETCHNG\", \"industry\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\n\nvar onRowExpansionBinding = function(e) {\n  var rowData = e.originalRowData;\n  var rowIndex = e[\"rowIndex\"];\n  var section = e[\"section\"];\n  if (e.rowExpansion && rowData) {\n    // render\n    var cell = section.stretchCell(0, rowIndex, true);\n    cell.setStyle(\"backgroundColor\", \"mistyrose\");\n    section.setRowHeight(rowIndex, 72); // Customized height\n\n    var expContent = cell.getContent();\n    if (!expContent || !expContent._myExpansion) {\n      expContent = document.createElement(\"div\");\n      expContent._myExpansion = true;\n\n      var firstLine = expContent._firstLine = document.createElement(\"div\");\n      var secondLine = expContent._secondLine = document.createElement(\"div\");\n      var loader = expContent._loader = document.createElement(\"amber-loader\");\n      var button = document.createElement(\"button\");\n      button.textContent = \"Column & Row Index\";\n      button.addEventListener(\"click\", function(e) {\n        var pos = grid.api.getRelativePosition(e);\n        alert(pos.colIndex + \", \" + pos.rowIndex);\n      });\n\n      secondLine.appendChild(button);\n\n      expContent.appendChild(firstLine);\n      expContent.appendChild(secondLine);\n      expContent.appendChild(loader);\n    }\n\n    var rowData = e.originalRowData;\n    if (rowData[\"My_Expansion_Status\"] === \"loading\") {\n      expContent._firstLine.style.display = \"none\";\n      expContent._secondLine.style.display = \"none\";\n      expContent._loader.style.display = \"\";\n    } else {\n      expContent._firstLine.style.display = \"\";\n      expContent._secondLine.style.display = \"\";\n      expContent._loader.style.display = \"none\";\n    }\n    cell.setContent(expContent);\n  } else {\n    // dispose\n    var cell = section.stretchCell(0, rowIndex, false);\n    cell.setStyle(\"backgroundColor\", \"\");\n    section.setRowHeight(rowIndex, section.getDefaultRowHeight()); // Default height\n  }\n}\n\nvar onCellCliked = function(e) {\n  var pos = grid.api.getRelativePosition(e);\n  if (pos.sectionType === \"content\") { // Prevent clicking on header section\n    var rowIndex = pos.rowIndex;\n    var rowDef = grid.api.getRowDefinition(rowIndex);\n    if (rowDef) { // Prevent clicking on expanded row\n      var rowId = rowDef.getRowId();\n      var dv = grid.api.getDataView();\n      if (!dv.isRowExpansion(rowId)) {\n        if (rowDef.getData(\"My_Expansion_Status\") == null) {\n          rowDef.setData(\"My_Expansion_Status\", \"loading\");\n          // Simulate delay from data request\n          setTimeout(onServerResponse.bind(null, dv, rowDef), 3000); // Asynchronous\n        }\n        dv.toggleRowExpansion(pos.rowIndex);\n      }\n    }\n  }\n};\nvar onServerResponse = function(dv, rowDef) {\n  if (!dv.isRowExpansion(rowDef.getRowId())) {\n    rowDef.setData(\"My_Expansion_Status\", \"data received\");\n  }\n  grid.api.getCoreGrid().requestRowRefresh(); // WORKAROUND: Force re-rendering\n};\n\nvar configObj = {\n  columnReorder: true,\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  rowExpansionBinding: onRowExpansionBinding,\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;\n\ngrid.addEventListener(\"click\", onCellCliked);","tagName":"pre"},{"text":"atlas-blotter {\n  height: 200px;\n}\n\nhtml hr {\n  margin: 5px;\n}","tagName":"pre"}]},{"title":"Text Selection","filename":"misc/text-selection.html","contents":[{"text":"Text selection has 2 scopes. It's grid scope and column scope. The default value of text selection is disabled, but you can enable it. If you enable it, users can select text in scope.","tagName":"p"},{"text":"Grid","tagName":"a"},{"text":"Columns","tagName":"a"},{"text":"Limitation with safari","tagName":"h2"},{"text":"Row Dragging","tagName":"a"},{"text":"Custom Formatter","tagName":"a"},{"text":"Example","tagName":"h3"},{"text":"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.","tagName":"p"},{"text":"<atlas-blotter id=\"grid\"></atlas-blotter>","tagName":"pre"},{"text":"var fields = [\"companyName\", \"market\"];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 10 });\nvar buttonDisplay = {\n  binding: function(e) {\n    var cellData = e.cell;\n    var buttonContent = document.createElement(\"button\");\n    var spanContent = document.createElement(\"span\");\n    buttonContent.addEventListener(\"click\", () => {\n      alert(e.data);\n    });\n    spanContent.textContent = `${e.data}`;\n    buttonContent.appendChild(spanContent);\n    cellData.setContent(buttonContent);\n  }\n};\n\nvar configObj = {\n  rowVirtualRendering: false,\n  textSelect: true,\n  columns: [\n    { name: \"Company\", field: fields[0] },\n    { name: \"Market\", field: fields[1], formatter: buttonDisplay, width: 120 }\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = configObj;","tagName":"pre"},{"text":"","tagName":"pre"},{"text":"Limitation with row virtualization","tagName":"h2"},{"text":"Text 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.","tagName":"p"},{"text":"Custom Formatter","tagName":"a"},{"text":"Example","tagName":"h3"},{"text":"<atlas-blotter id=\"grid\">\n</atlas-blotter>\n<hr>\n<textarea placeholder=\"Paste text here\"></textarea>","tagName":"pre"},{"text":"var fields = [\n  \"id\",\n  \"companyName\",\n  \"market\",\n  \"CF_LAST\",\n  \"CF_NETCHNG\",\n  \"industry\"\n];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 50, seed: 0 });\nvar config = {\n  textSelect: true,\n  columns: [{\n      field: fields[0],\n      name: \"ID\"\n    },\n    {\n      field: fields[1],\n      name: \"Company Name\"\n    },\n    {\n      field: fields[2],\n      name: \"Market\"\n    },\n    {\n      field: fields[3],\n      name: \"Last\"\n    },\n    {\n      field: fields[4],\n      name: \"Net. Chng\"\n    },\n    {\n      field: fields[5],\n      name: \"Industry\"\n    },\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = config;\nwindow.grid = grid;","tagName":"pre"},{"text":"atlas-blotter {\n  height: 300px;\n}\n\ntextarea {\n  height: 200px;\n  width: 100%;\n}","tagName":"pre"},{"text":"Copying all content in the grid without text selection","tagName":"h2"},{"text":"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.","tagName":"p"},{"text":"Example","tagName":"h3"},{"text":"<div id=\"header\"> Click for focus in the grid and copy text with &quot;ctrl+c&quot; inside grid, it will be write your clipboard with all data in the grid </div>\n<div id=\"feedback\"></div>\n<atlas-blotter id=\"grid\"></atlas-blotter>\n<hr>\n<textarea placeholder=\"Paste text here\"></textarea>","tagName":"pre"},{"text":"var fields = [\n  \"id\",\n  \"companyName\",\n  \"market\",\n  \"CF_LAST\",\n  \"CF_NETCHNG\",\n  \"industry\"\n];\nvar records = tr.DataGenerator.generateRecords(fields, { numRows: 50, seed: 0 });\nvar config = {\n  columns: [{\n      field: fields[0],\n      name: \"ID\"\n    },\n    {\n      field: fields[1],\n      name: \"Company Name\"\n    },\n    {\n      field: fields[2],\n      name: \"Market\"\n    },\n    {\n      field: fields[3],\n      name: \"Last\"\n    },\n    {\n      field: fields[4],\n      name: \"Net. Chng\"\n    },\n    {\n      field: fields[5],\n      name: \"Industry\"\n    },\n  ],\n  staticDataRows: records\n};\n\nvar grid = document.getElementById(\"grid\");\ngrid.config = config;\nwindow.grid = grid;\n\ngrid.addEventListener(\"click\", onGridClick);\ngrid.addEventListener(\"copy\", onGridCopy);\n\nfunction onGridClick(e) {\n  // We need to listen for a click event on the grid to focus on it, which will allow us to track the copy event\n  grid.api.focus();\n}\n\nfunction onGridCopy(e) {\n  // When the grid is focused, the listen function will be triggered and we can provide data to be copied to the clipboard before the copy event occurs\n  var allNames = grid.api.getColumnNames();\n\n  var i;\n  var colValues = allNames;\n\n  var rows = grid.api.getMultipleRowData();\n\n  // We can use the join method to map the rows of object data to a string, separating each row with a tab character. This can be useful when trying to paste the data into an Excel spreadsheet.\n  var rowValues = rows.map(function(row) {\n    return [\n      row[\"id\"],\n      row[\"companyName\"],\n      row[\"market\"],\n      row[\"CF_LAST\"],\n      row[\"CF_NETCHNG\"],\n      row[\"industry\"]\n    ].join(\"\\t\");\n  });\n  var text = colValues.join(\"\\t\") + \"\\n\" + rowValues.join(\"\\n\");\n  e.clipboardData.setData(\"text/plain\", text);\n  // Below is a feedback message that is displayed to the user when they have successfully copied text. The message will automatically clear after 3 seconds\n  feedback.textContent = \"Successfully copied text from the grid\";\n  setTimeout(function(e) {\n    feedback.textContent = \"\";\n  }, 3000);\n\n  e.preventDefault();\n}","tagName":"pre"},{"text":"atlas-blotter {\n  height: 300px;\n}\n\ntextarea {\n  height: 200px;\n  width: 100%;\n}\n\n#feedback {\n  color: green;\n}","tagName":"pre"},{"text":"","tagName":"p"}]},{"title":"Emerald Grid","filename":"migrating/from-emerald-grid.html","contents":[{"text":"Emerald Grid has a lot of built-in features which make it big. Moving from Emerald Grid to EFX Grid usually involves around using extensions as a replacement for the built-ins. In this guide, we are going to list out all the differences and how you can migrate those features to EFX grid. ","tagName":"p"},{"text":"Deprecated properties","tagName":"h2"},{"text":"The following properties are available in Emerald Grid configuration object, but not available in EFX Grid configuration object. ","tagName":"p"},{"text":"formatter property","tagName":"h3"},{"text":"Change","tagName":"h4"},{"text":"formatter, formatter.render, and formatter.bind properties should be replaced by binding property. Any logic in formatter.render method should be combined with formatter.bind method for simplication. The parameters passed to formatter.render and formatter.bind methods are grouped into a single parameter in binding method.","tagName":"p"},{"text":"Reason","tagName":"h4"},{"text":"formatter property requires render and bind methods to be defined, which is quite clunky. In addition, there are too many parameters passed to the methods. Most of them are not useful in most cases. They are locked into the function signature. They are inflexible and cumbersome to write.","tagName":"p"},{"text":"Sample","tagName":"h4"},{"text":"If you have the following Emerald Grid configuration:","tagName":"p"},{"text":"var configObj = {\n    columns: [\n        {\n            // Column options\n            formatter: {\n                render: function() {},\n                binding: function(rowIndex, colIndex, data, cell) {\n                    var inputElem = cell.getContent();\n                    if (!inputElem) {\n                        inputElem = document.createElement(\"input\");\n                    }\n\n                    inputElem.value = data;\n                    cell.setContent(inputElem);\n                }\n            }\n        },\n        ...\n    ]\n\n};","tagName":"pre"},{"text":"then you would change to the following EFX Grid configuration:","tagName":"p"},{"text":"var configObj = {\n    columns: [\n        {\n            // Column options\n            binding: function(e) {\n                var cell = e.cell;\n                var inputElem = cell.getContent();\n                if (!inputElem) {\n                    inputElem = document.createElement(\"input\");\n                }\n\n                inputElem.value = e.data;\n                cell.setContent(inputElem);\n            }\n        },\n        ...\n    ]\n\n};","tagName":"pre"},{"text":"Note that the parameter names are now defined by the event argument. Some parameters may have its name changed. Please use the debugger to check for the parameters' availability.","tagName":"p"},{"text":"dataModel property","tagName":"h3"},{"text":"Change","tagName":"h4"},{"text":"dataModel property is replaced by staticDataRows property. value in dataModel.data should be used as staticDataRows value. dataModel.fields and dataModel.format will be automatically resolved by EFX Grid and should be safely removed. For reliable conversion, array of object maps should be used instead of two dimentional array. ","tagName":"p"},{"text":"Reason","tagName":"h4"},{"text":"A row in EFX Grid can contains some information (i.e., real-time related metadata) other than just data content. rows property is created to hold the additional information. In the same sense, staticDataRows property is created for rows with only data content.","tagName":"p"},{"text":"Sample","tagName":"h4"},{"text":"If you have the following Emerald Grid configuration:","tagName":"p"},{"text":"var configObj = {\n    dataModel: {\n        fields: [\"field1\", \"field2\"],\n        format: \"array\",\n        data: [\n            [1, 2],\n            [3, 4]\n        ]\n    }\n};","tagName":"pre"},{"text":"then you would change to the following EFX Grid configuration:","tagName":"p"},{"text":"var configObj = {\n    staticDataRows: [\n        {\"field1\": 1, \"field2\": 2},\n        {\"field1\": 3, \"field2\": 4}\n    ]\n};","tagName":"pre"},{"text":"title and titleAlignment properties","tagName":"h3"},{"text":"Title keyword is used in HTML tag as global attribute for tooltips. To avoid confusion between tooltip and header text, title and titleAlignment properties are renamed to name and headerAlignment, respectively.","tagName":"p"},{"text":"global attribute","tagName":"a"},{"text":"blinkBy and blinker properties","tagName":"h3"},{"text":"Blinking related features have been moved to Conditional Coloring extension. ","tagName":"p"},{"text":"Conditional Coloring extension","tagName":"a"},{"text":"cellEditing and autoEdit properties","tagName":"h3"},{"text":"Cell editing related features have been moved to In-Cell Editing extension.","tagName":"p"},{"text":"In-Cell Editing extension","tagName":"a"},{"text":"checkboxSelector property","tagName":"h3"},{"text":"Checkbox related features have been moved to Checkbox extension.","tagName":"p"},{"text":"Checkbox extension","tagName":"a"},{"text":"filterRow property","tagName":"h3"},{"text":"Filter row feature has been moved to Filter Input extension.","tagName":"p"},{"text":"Filter Input extension","tagName":"a"},{"text":"Built-in filter related methods and events","tagName":"h2"},{"text":"Filter related feature has been moved to Row Filtering extension.","tagName":"p"},{"text":"Row Filtering extension","tagName":"a"},{"text":"The following filter related methods are not available in EFX Grid. Use methods provided from the extension instead. ","tagName":"p"},{"text":"The following custom events are not available in EFX Grid. Use events provided from the extension instead.","tagName":"p"},{"text":"Built-in cell editing related methods and events","tagName":"h2"},{"text":"Cell editing related features have been moved to In-Cell Editing extension.","tagName":"p"},{"text":"In-Cell Editing extension","tagName":"a"},{"text":"The following cell editing related methods are not available in EFX Grid. Use methods provided from the extension instead. ","tagName":"p"},{"text":"The following custom events are not available in EFX Grid. Use events provided from the extension instead.","tagName":"p"},{"text":"Built-in formatters","tagName":"h2"},{"text":"All provided built-in formatters (formatter/AsyncFormatter, formatter/CheckBox, and formatter/UpDownColor) are replaced by predefined formatters.","tagName":"p"},{"text":"predefined formatters","tagName":"a"},{"text":"Built-in plugins","tagName":"h2"},{"text":"the following table shows plugins and its equivalent extension ","tagName":"p"},{"text":"\nPlugin:\nExtension\n","tagName":"tr"},{"text":"\nCellBlinkingPlugin\nConditional Coloring extension\n","tagName":"tr"},{"text":"Conditional Coloring extension","tagName":"a"},{"text":"\nCellEditingPlugin\nIn-Cell Editing extension\n","tagName":"tr"},{"text":"In-Cell Editing extension","tagName":"a"},{"text":"\nColumnGroupingPlugin\nColumn Stack extension\n","tagName":"tr"},{"text":"Column Stack extension","tagName":"a"},{"text":"\nGroupStatisticsPlugin\nStatistics Row extension\n","tagName":"tr"},{"text":"Statistics Row extension","tagName":"a"},{"text":"\nRowHeightAdjustingPlugin\nContent Wrap extension\n","tagName":"tr"},{"text":"Content Wrap extension","tagName":"a"},{"text":"\nColumnWidthAdjustingPlugin\nColumn Fitter extension\n","tagName":"tr"},{"text":"Column Fitter extension","tagName":"a"},{"text":"Accessing Data","tagName":"h2"},{"text":"Accessing data in Emerald Grid is done directly to its internal data stores (i.e., DataTable and DataView). This works fine, since rows in Emerald Grid contain only data content. However, the direct interaction with internal data store can cause out of synchronization with other parts in EFX Grid. ","tagName":"p"},{"text":"Change","tagName":"h3"},{"text":"Direct access to grid's internal data stores are removed. Data can be set or retrieved through grid's APIs or row definition objects instead.","tagName":"p"},{"text":"Reason","tagName":"h3"},{"text":"The change in data has to be recognized by Grid in order to synchronize with their corresponding rows and real-time data requests. ","tagName":"p"},{"text":"Sample","tagName":"h3"},{"text":"If you have the following code with Emerald Grid:","tagName":"p"},{"text":"var dv = grid.api.getDataView();\n\ndv.getRowDataAt(1);\n\ndv.getMultipleRowData([\"1\", \"2\"]);\n\ndv.getAllRowData();","tagName":"pre"},{"text":"then you would change to the following code for EFX Grid:","tagName":"p"},{"text":"grid.api.getRowData(1); // Note getRowDataAt is shorthen to getRowData\ngrid.api.getRowDefinition(1).getRowData(); // Alternatively, RowDefinition object can be used for referencing\n\ngrid.api.getMultipleRowData([\"1\", \"2\"]);\n\ngrid.api.getMultipleRowData(); // getAllRowData is replaced with getMultipleRowData() for simplicity","tagName":"pre"}]},{"title":"License","filename":"license.html","contents":[{"text":"Copyright © 2022 LSEG. All rights reserved.","tagName":"p"},{"text":"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:","tagName":"p"},{"text":"The person is an active LSEG Subscription License holder currently using LSEG products or services.","tagName":"p"},{"text":"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.","tagName":"p"},{"text":"Redistribution of the Software in source code in any form must retain the above copyright notice, this list of conditions, and the following disclaimer.","tagName":"p"},{"text":"Redistribution of the Software in binary form must reproduce the above copyright notice, this list of conditions, and the following disclaimer, in the documentation and/or other materials provided with the distribution.","tagName":"p"},{"text":"Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this Software without specific prior written authorization.","tagName":"p"},{"text":"DISCLAIMERTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.","tagName":"p"}]}]
\ No newline at end of file
diff --git a/book/en/showcases/comprehensive.html b/book/en/showcases/comprehensive.html
index 1d082762..ecc2a202 100644
--- a/book/en/showcases/comprehensive.html
+++ b/book/en/showcases/comprehensive.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/showcases/comprehensive" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="showcase">Showcase</h1>
 
             <div class="pandora-code-viewer" id="pid-7">
diff --git a/book/en/showcases/grid-builder.html b/book/en/showcases/grid-builder.html
index f47714e4..3ffd211a 100644
--- a/book/en/showcases/grid-builder.html
+++ b/book/en/showcases/grid-builder.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/showcases/grid-builder" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="grid-builder-loader">Grid Builder / Loader</h1>
             <h2 id="grid-builder">Grid Builder</h2>
             <p>The grid configuration builder provide a quick start way of using grid in your application. This will help new users to getting started with grid easier. You can try with different grid customization and grid extensions with a realtime result, then this configuration can be copy and paste into any application to get the same result as seen from this section.</p>
diff --git a/book/en/showcases/realtime-data.html b/book/en/showcases/realtime-data.html
index be43c6c7..c21ff33f 100644
--- a/book/en/showcases/realtime-data.html
+++ b/book/en/showcases/realtime-data.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/showcases/realtime-data" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="realtime-data">Realtime Data</h1>
 
             <div class="pandora-code-viewer" id="pid-8">
@@ -393,16 +393,20 @@ <h1 id="realtime-data">Realtime Data</h1>
   cell.setContent(content);
 };
 
-bkr_btn.addEventListener("click", addRic.bind(null, bkr_btn.textContent));
-usd_btn.addEventListener("click", addRic.bind(null, usd_btn.textContent));
-jyp_btn.addEventListener("click", addRic.bind(null, jyp_btn.textContent));
-ndx_btn.addEventListener("click", function(e) {
-  grid.api.insertRow("0#.NDX", 0);
-
+bkr_btn.addEventListener("click", insertRic.bind(null, bkr_btn.textContent));
+usd_btn.addEventListener("click", insertRic.bind(null, usd_btn.textContent));
+jyp_btn.addEventListener("click", insertRic.bind(null, jyp_btn.textContent));
+ndx_btn.addEventListener("click", function(e) { // Chain ric
+  grid.api.insertRow({ ric: ".NDX", asChain: true }, 0);
 });
-insert_ric_btn.addEventListener("click", addRic.bind(null, ric_txt.value));
+insert_ric_btn.addEventListener("click", onClickInsertButton);
+
+function onClickInsertButton(e) {
+  var ric = document.getElementById("ric_txt").value;
+  insertRic(ric.toUpperCase()); // Ric upper case
+}
 
-function addRic(ric) {
+function insertRic(ric) {
   grid.api.insertRow(ric, 0);
 }</pre>
                   <pre class="pandora-tab-view tab-css">body {
diff --git a/book/en/showcases/realtime-data.md b/book/en/showcases/realtime-data.md
index 93f57c83..5f56b0a8 100644
--- a/book/en/showcases/realtime-data.md
+++ b/book/en/showcases/realtime-data.md
@@ -82,15 +82,18 @@
 		cell.setContent(content);
 	};
 
-	bkr_btn.addEventListener("click", addRic.bind(null, bkr_btn.textContent));
-	usd_btn.addEventListener("click", addRic.bind(null, usd_btn.textContent));
-	jyp_btn.addEventListener("click", addRic.bind(null, jyp_btn.textContent));
-	ndx_btn.addEventListener("click", function(e) {
-		grid.api.insertRow("0#.NDX", 0);
-
+	bkr_btn.addEventListener("click", insertRic.bind(null, bkr_btn.textContent));
+	usd_btn.addEventListener("click", insertRic.bind(null, usd_btn.textContent));
+	jyp_btn.addEventListener("click", insertRic.bind(null, jyp_btn.textContent));
+	ndx_btn.addEventListener("click", function(e) { // Chain ric
+		grid.api.insertRow({ ric: ".NDX", asChain: true}, 0);
 	});
-	insert_ric_btn.addEventListener("click", addRic.bind(null, ric_txt.value));
-	function addRic(ric) {
+	insert_ric_btn.addEventListener("click", onClickInsertButton);
+	function onClickInsertButton(e) {
+		var ric = document.getElementById("ric_txt").value;
+		insertRic(ric.toUpperCase()); // Ric upper case
+	}
+	function insertRic(ric) {
 		grid.api.insertRow(ric, 0);
 	}
 </script>
diff --git a/book/en/sorting/custom-sort-logic.html b/book/en/sorting/custom-sort-logic.html
index 9262eabe..77f9d211 100644
--- a/book/en/sorting/custom-sort-logic.html
+++ b/book/en/sorting/custom-sort-logic.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/sorting/custom-sort-logic" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="custom-sort-logic">Custom Sort Logic</h1>
             <p>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.</p>
             <blockquote>
diff --git a/book/en/sorting/default-sorting.html b/book/en/sorting/default-sorting.html
index 69769226..7add5404 100644
--- a/book/en/sorting/default-sorting.html
+++ b/book/en/sorting/default-sorting.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/sorting/default-sorting" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="default-sort">Default Sort</h1>
             <p>You can sort data in the grid automatically after initialization by specifying the <code>initialSort</code> option, which receives the following two options: <code>colIndex</code> and <code>sortOrder</code>.</p>
             <p>The possible values of <code>sortOrder</code> are:</p>
diff --git a/book/en/sorting/multi-column-sorting.html b/book/en/sorting/multi-column-sorting.html
index ebae9f69..7ac916d7 100644
--- a/book/en/sorting/multi-column-sorting.html
+++ b/book/en/sorting/multi-column-sorting.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/sorting/multi-column-sorting" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="multi-column-three-state-sorting">Multi-column/three-state sorting</h1>
             <p>Sorting can be done on several columns together. You need to add the <code>sorting</code> property with two sub-properties: <code>multiColumn</code> and <code>threeStateSorting</code>.</p>
             <p>The property <code>threeStatesSorting</code> allows the column to be reset to the neutral state at every third click. Turning on <code>threeStatesSorting</code> makes multi-column sorting easier to use.</p>
diff --git a/book/en/sorting/server-side-sorting.html b/book/en/sorting/server-side-sorting.html
index 57eb9939..604a717a 100644
--- a/book/en/sorting/server-side-sorting.html
+++ b/book/en/sorting/server-side-sorting.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/sorting/server-side-sorting" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="server-side-sorting">Server-side Sorting</h1>
             <p>In manual sorting mode, clicking on the column title will change the sorting status, but no actual sorting is done on the grid data.</p>
             <p>One use case is, if you want to do server-side sorting, you can use manual sorting mode in conjunction with the <code>columnSorted</code> event and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">XMLHttpRequest</a> method.</p>
diff --git a/book/en/sorting/sorting-get-reset.html b/book/en/sorting/sorting-get-reset.html
index 4c3a67d9..89fb8eb7 100644
--- a/book/en/sorting/sorting-get-reset.html
+++ b/book/en/sorting/sorting-get-reset.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/sorting/sorting-get-reset" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="get-sorting-states-reset-all">Get Sorting States/Reset All</h1>
             <p>The <code>getSortedColumns()</code> method returns an array of the currently applied sorting states (with the <code>colIndex</code> and <code>sortOrder</code> properties).</p>
             <p>Additionally, the <code>clearSortState()</code> method resets the current sorting states to their default neutral state.</p>
diff --git a/book/en/sorting/sorting.html b/book/en/sorting/sorting.html
index 19ccd2e4..c202f688 100644
--- a/book/en/sorting/sorting.html
+++ b/book/en/sorting/sorting.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/sorting/sorting" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="basic-sorting">Basic Sorting</h1>
             <p>Grid support sorting out of the box. By default, sorting is turned off for all columns. To turn it on, set <code>sortableCoumns</code> to <code>true</code>. This allow users to click at the Grid header section to sort the clicked column.</p>
             <pre><code><span class="hljs-keyword">var</span> config = {
diff --git a/book/en/support.html b/book/en/support.html
index d31317ed..99db3776 100644
--- a/book/en/support.html
+++ b/book/en/support.html
@@ -10,7 +10,7 @@
   <script defer src="../../resources/scripts/book.js"></script>
   <script defer src="./search.index.js"></script>
   <link rel="icon" href="resources/images/icon.png">
-<script src="node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="./index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="./index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/support" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="support">Support</h1>
             <p>If you need help, simply go to the proper channel, post your questions or difficulties, and provide your live example.</p>
             <p>There are two possible channels:</p>
diff --git a/book/en/utilities/data-generator.html b/book/en/utilities/data-generator.html
index 1686d7fe..a8a963ac 100644
--- a/book/en/utilities/data-generator.html
+++ b/book/en/utilities/data-generator.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/utilities/data-generator" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h1 id="data-generator">Data generator</h1>
diff --git a/book/en/utilities/multi-table.html b/book/en/utilities/multi-table.html
index 78e1ef10..27b349ab 100644
--- a/book/en/utilities/multi-table.html
+++ b/book/en/utilities/multi-table.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/utilities/multi-table" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h1 id="multi-table-feature">Multi-table feature</h1>
diff --git a/book/en/utilities/native-table.html b/book/en/utilities/native-table.html
index 5dafb005..919427ce 100644
--- a/book/en/utilities/native-table.html
+++ b/book/en/utilities/native-table.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/utilities/native-table" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h1 id="native-html-table">Native HTML table</h1>
diff --git a/book/en/utilities/printing.html b/book/en/utilities/printing.html
index f79d9954..eeed2403 100644
--- a/book/en/utilities/printing.html
+++ b/book/en/utilities/printing.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/utilities/printing" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h1 id="printing">Printing</h1>
diff --git a/book/en/widgets/column-format-dialog.html b/book/en/widgets/column-format-dialog.html
index 098a2b5c..c2c16e5e 100644
--- a/book/en/widgets/column-format-dialog.html
+++ b/book/en/widgets/column-format-dialog.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/widgets/column-format-dialog" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="column-format-dialog">Column Format Dialog</h2>
diff --git a/book/en/widgets/column-selection-dialog.html b/book/en/widgets/column-selection-dialog.html
index 5e5807af..1d33e91e 100644
--- a/book/en/widgets/column-selection-dialog.html
+++ b/book/en/widgets/column-selection-dialog.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/widgets/column-selection-dialog" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="column-selection-dialog">Column Selection Dialog</h2>
diff --git a/book/en/widgets/filter-dialog.html b/book/en/widgets/filter-dialog.html
index 8f8bf8e8..060f68f2 100644
--- a/book/en/widgets/filter-dialog.html
+++ b/book/en/widgets/filter-dialog.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/widgets/filter-dialog" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <link rel="stylesheet" href="../resources/styles/elf-template.css">
 
             <h2 id="filter-dialog">Filter Dialog</h2>
diff --git a/book/en/widgets/language-support.html b/book/en/widgets/language-support.html
index 9c9bbe17..77408475 100644
--- a/book/en/widgets/language-support.html
+++ b/book/en/widgets/language-support.html
@@ -10,7 +10,7 @@
   <script defer src="../../../resources/scripts/book.js"></script>
   <script defer src="../search.index.js"></script>
   <link rel="icon" href="../resources/images/icon.png">
-<script src="../node_modules/tr-grid-test-resource-v6/dist/elf-halo-light.js"></script><style>
+<script src="../node_modules/tr-grid-test-resource-v4/dist/elf-halo-light.js"></script><style>
   header {
     height: unset;
     background-color: unset;
@@ -47,7 +47,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
     </div>
     <div class="content">
       <div class="sidebar" no-print="">
-        <pandora-nav id="ba6b844c-3b04-44ac-9863-c31f448b3b6f">
+        <pandora-nav id="c618424d-e0e3-4849-a41c-49f9e2348757">
           <ul>
             <li parent="" id="cid-0" collapsible="" collapsed="">
               <div collapser="">Getting Started</div>
@@ -298,7 +298,7 @@ <h1><a href="../index.html">Grid Usage Guide</a></h1>
       </div>
       <div class="main">
         <div class="reader">
-          <pandora-page><ef-notification =""><span class="noti-msg">This page is now available at the new alternative site <a href="https://204090.pages.dx1.lseg.com/grid/efx-grid/#/widgets/language-support" target="_blank">here</a>.</span></ef-notification>
+          <pandora-page>
             <h1 id="internationalization">Internationalization</h1>
             <p>Widgets support localization, including translated messages and formatting. In your app, setting your html lang attribute will trigger that language to be applied to widget elements.</p>
             <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ja"</span>&gt;</span>