928535: To update code snippets for Core Pivot Table UG documentation - Section 1

ej2-asp-core-mvc/code-snippet/pivot-table/action-event/actionBegin-fieldList/tagHelper

@@ -1,5 +1,5 @@
-<ejs-pivotview id="PivotGrid" height="300" showFieldList="true" actionBegin="actionBegin">
-    <e-datasource data="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
+<ejs-pivotview id="PivotView" height="300" showFieldList="true" actionBegin="actionBegin">
+    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
         <e-formatsettings>
             <e-field name="Amount" format="C0" useGrouping="true"></e-field>
         </e-formatsettings>
@@ -15,7 +15,7 @@
             <e-field name="Sold" caption="Units Sold"></e-field>
             <e-field name="Amount" caption="Sold Amount"></e-field>
         </e-values>
-    </e-datasource>
+    </e-datasourcesettings>
 </ejs-pivotview>
 
 <script>

ej2-asp-core-mvc/code-snippet/pivot-table/action-event/actionBegin-toolbar/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="pivotview" allowExcelExport="true" allowNumberFormatting="true" allowConditionalFormatting="true" allowPdfExport="true" showToolbar="true" allowCalculatedField="true" showFieldList="true" width="100%" height="300" toolbar="@(new List<string>() {"New", "Save", "SaveAs", "Rename", "Remove", "Load",
+<ejs-pivotview id="PivotView" allowExcelExport="true" allowNumberFormatting="true" allowConditionalFormatting="true" allowPdfExport="true" showToolbar="true" allowCalculatedField="true" showFieldList="true" width="100%" height="300" toolbar="@(new List<string>() {"New", "Save", "SaveAs", "Rename", "Remove", "Load",
 "Grid", "Chart", "Export", "SubTotal", "GrandTotal", "ConditionalFormatting", "NumberFormatting", "FieldList" })" actionBegin="actionBegin">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
         <e-formatsettings>

ej2-asp-core-mvc/code-snippet/pivot-table/action-event/actionComplete-fieldList/tagHelper

@@ -1,5 +1,5 @@
-<ejs-pivotview id="PivotGrid" height="300" showFieldList="true" actionComplete="actionComplete">
-    <e-datasource data="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
+<ejs-pivotview id="PivotView" height="300" showFieldList="true" actionComplete="actionComplete">
+    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
         <e-formatsettings>
             <e-field name="Amount" format="C0" useGrouping="true"></e-field>
         </e-formatsettings>
@@ -15,7 +15,7 @@
             <e-field name="Sold" caption="Units Sold"></e-field>
             <e-field name="Amount" caption="Sold Amount"></e-field>
         </e-values>
-    </e-datasource>
+    </e-datasourcesettings>
 </ejs-pivotview>
 
 <script>

ej2-asp-core-mvc/code-snippet/pivot-table/action-event/actionComplete-toolbar/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="pivotview" allowExcelExport="true" allowNumberFormatting="true" allowConditionalFormatting="true" allowPdfExport="true" showToolbar="true" allowCalculatedField="true" showFieldList="true" width="100%" height="300" toolbar="@(new List<string>() {"New", "Save", "SaveAs", "Rename", "Remove", "Load",
+<ejs-pivotview id="PivotView" allowExcelExport="true" allowNumberFormatting="true" allowConditionalFormatting="true" allowPdfExport="true" showToolbar="true" allowCalculatedField="true" showFieldList="true" width="100%" height="300" toolbar="@(new List<string>() {"New", "Save", "SaveAs", "Rename", "Remove", "Load",
 "Grid", "Chart", "Export", "SubTotal", "GrandTotal", "ConditionalFormatting", "NumberFormatting", "FieldList" })" actionComplete="actionComplete">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
         <e-formatsettings>

ej2-asp-core-mvc/code-snippet/pivot-table/action-event/actionFailure-fieldList/tagHelper

@@ -1,5 +1,5 @@
-<ejs-pivotview id="PivotGrid" height="300" showFieldList="true" actionFailure="actionFailure">
-    <e-datasource data="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
+<ejs-pivotview id="PivotView" height="300" showFieldList="true" actionFailure="actionFailure">
+    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
         <e-formatsettings>
             <e-field name="Amount" format="C0" useGrouping="true"></e-field>
         </e-formatsettings>
@@ -15,7 +15,7 @@
             <e-field name="Sold" caption="Units Sold"></e-field>
             <e-field name="Amount" caption="Sold Amount"></e-field>
         </e-values>
-    </e-datasource>
+    </e-datasourcesettings>
 </ejs-pivotview>
 
 <script>

ej2-asp-core-mvc/code-snippet/pivot-table/action-event/actionFailure-toolbar/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="pivotview" allowExcelExport="true" allowNumberFormatting="true" allowConditionalFormatting="true" allowPdfExport="true" showToolbar="true" allowCalculatedField="true" showFieldList="true" width="100%" height="300" toolbar="@(new List<string>() {"New", "Save", "SaveAs", "Rename", "Remove", "Load",
+<ejs-pivotview id="PivotView" allowExcelExport="true" allowNumberFormatting="true" allowConditionalFormatting="true" allowPdfExport="true" showToolbar="true" allowCalculatedField="true" showFieldList="true" width="100%" height="300" toolbar="@(new List<string>() {"New", "Save", "SaveAs", "Rename", "Remove", "Load",
 "Grid", "Chart", "Export", "SubTotal", "GrandTotal", "ConditionalFormatting", "NumberFormatting", "FieldList" })" actionFailure="actionFailure">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
         <e-formatsettings>

ej2-asp-core-mvc/code-snippet/pivot-table/add-custom-aggregation/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="pivotview" height="300" dataBound="onDataBound" aggregateCellInfo="aggregateCell" showFieldList="true">
+<ejs-pivotview id="PivotView" height="300" dataBound="onDataBound" aggregateCellInfo="aggregateCell" showFieldList="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
         <e-formatsettings>
             <e-field name="Amount" format="C0"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/classic-layout/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="pivotview" load="onLoad" showFieldList="true" width="100%" height="450">
+<ejs-pivotview id="PivotView" load="onLoad" showFieldList="true" width="100%" height="450">
     <e-datasourcesettings dataSource="@data" expandAll="false" enableSorting="true">
         <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1"

ej2-asp-core-mvc/code-snippet/pivot-table/data-binding/engine-populated/tagHelper

@@ -19,4 +19,4 @@
     function enginePopulated(args){
         args.dataSourceSettings.columns[0].caption = 'Full Year';
     }
- <script>
+ </script>

ej2-asp-core-mvc/code-snippet/pivot-table/data-binding/engine-populating/tagHelper

@@ -19,4 +19,4 @@
     function enginePopulating(args){
         args.dataSourceSettings.columns[0].caption = 'Full Year';
     }
- <script>
+ </script>

ej2-asp-core-mvc/code-snippet/pivot-table/data-binding/load/tagHelper

@@ -19,4 +19,4 @@
     function load(args){
         args.dataSourceSettings.columns[0].caption = 'Full Year';
     }
- <script>
+ </script>

ej2-asp-core-mvc/code-snippet/pivot-table/defer-update/static/tagHelper

@@ -1,6 +1,6 @@
 <ejs-pivotview id="PivotView" enginePopulated="onGridEnginePopulate" height="300" allowDeferLayoutUpdate="true"></ejs-pivotview>
 <br />
-<ejs-pivotfieldlist id="Static_FieldList" renderMode="Fixed" allowDeferLayoutUpdate="true" enginePopulated="onFieldListEnginePopulate">
+<ejs-pivotfieldlist id="PivotFieldList" renderMode="Fixed" allowDeferLayoutUpdate="true" enginePopulated="onFieldListEnginePopulate">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
         <e-fieldlist-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
@@ -21,7 +21,7 @@
 </ejs-pivotfieldlist>
 
 <style>
-    #Static_FieldList {
+    #PivotFieldList {
         width: 400px;
     }
 </style>

ej2-asp-core-mvc/code-snippet/pivot-table/display-string-value/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="pivotview" height="300" aggregateCellInfo="aggregateCell" showFieldList="true">
+<ejs-pivotview id="PivotView" height="300" aggregateCellInfo="aggregateCell" showFieldList="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
         <e-formatsettings>
             <e-field name="Amount" format="C0"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/export-table-and-chart/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="pivotview" height="300" actionBegin="actionBegin" showToolbar="true"
+<ejs-pivotview id="PivotView" height="300" actionBegin="actionBegin" showToolbar="true"
                toolbar="@(new List<string>() { "Grid", "Chart", "Export", "FieldList" })" allowPdfExport="true" showFieldList="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
         <e-formatsettings>

ej2-asp-core-mvc/code-snippet/pivot-table/field-list/Search-desired-field-popup/tagHelper

@@ -1,51 +1,19 @@
-<ejs-button id="fieldlistbtn" content="Field List" isPrimary="true"></ejs-button>
-
-<div id="Popup_FieldList"></div>
-
-<ejs-pivotview id="PivotView" enginePopulated="onGridEnginePopulate" height="300" enableFieldSearching="true"></ejs-pivotview>
-
-<ejs-pivotfieldlist id="PivotFieldList" renderMode="Popup" target="#Popup_FieldList" enginePopulated="onFieldListEnginePopulate">
-    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
-        <e-fieldlist-formatsettings>
+<ejs-pivotview id="PivotView" height="300" showFieldList="true" enableFieldSearching="true">
+    <e-datasourcesettings dataSource="ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
+        <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
-        </e-fieldlist-formatsettings>
-        <e-fieldlist-rows>
+        </e-formatsettings>
+        <e-rows>
             <e-field name="Country"></e-field>
             <e-field name="Products"></e-field>
-        </e-fieldlist-rows>
-        <e-fieldlist-columns>
+        </e-rows>
+        <e-columns>
             <e-field name="Year" caption="Year"></e-field>
             <e-field name="Quarter"></e-field>
-        </e-fieldlist-columns>
-        <e-fieldlist-values>
+        </e-columns>
+        <e-values>
             <e-field name="Sold" caption="Units Sold"></e-field>
             <e-field name="Amount" caption="Sold Amount"></e-field>
-        </e-fieldlist-values>
+        </e-values>
     </e-datasourcesettings>
-</ejs-pivotfieldlist>
-
-<style>
-    .e-toggle-field-list {
-        display: none !important;
-    }
-</style>
-
-<script>
-    var pivotObj; var fieldlistObj;
-    function onGridEnginePopulate(args) {
-        pivotObj = document.getElementById('PivotView').ej2_instances[0];
-        fieldlistObj = document.getElementById('PivotFieldList').ej2_instances[0];
-        if (fieldlistObj) {
-            fieldlistObj.update(pivotObj);
-        }
-    }
-    function onFieldListEnginePopulate(args) {
-        pivotObj = document.getElementById('PivotView').ej2_instances[0];
-        fieldlistObj = document.getElementById('PivotFieldList').ej2_instances[0];
-        fieldlistObj.updateView(pivotObj);
-    }
-    document.getElementById('fieldlistbtn').onclick = function () {
-        fieldlistObj = document.getElementById('PivotFieldList').ej2_instances[0];
-        fieldlistObj.dialogRenderer.fieldListDialog.show();
-    };
-</script>
+</ejs-pivotview>

ej2-asp-core-mvc/code-snippet/pivot-table/field-list/Search-desired-field-static/tagHelper

@@ -1,32 +1,40 @@
-<ejs-pivotview id="PivotView" enginePopulated="onGridEnginePopulate" height="300"></ejs-pivotview>
-<br />
-<ejs-pivotfieldlist id="Static_FieldList" renderMode="Fixed" enginePopulated="onFieldListEnginePopulate" enableFieldSearching="true">
-    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
-        <e-fieldlist-formatsettings>
-            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
-        </e-fieldlist-formatsettings>
-        <e-fieldlist-rows>
-            <e-field name="Country"></e-field>
-            <e-field name="Products"></e-field>
-        </e-fieldlist-rows>
-        <e-fieldlist-columns>
-            <e-field name="Year" caption="Year"></e-field>
-            <e-field name="Quarter"></e-field>
-        </e-fieldlist-columns>
-        <e-fieldlist-values>
-            <e-field name="Sold" caption="Units Sold"></e-field>
-            <e-field name="Amount" caption="Sold Amount"></e-field>
-        </e-fieldlist-values>
-    </e-datasourcesettings>
-</ejs-pivotfieldlist>
+<div style="width: 58%;height: 100%; float: left;">
+    <ejs-pivotview id="PivotView" enginePopulated="onGridEnginePopulate" height="300"></ejs-pivotview>
+</div><br />
+<div style="width: 42%;height: 100%; float: right;">
+    <ejs-pivotfieldlist id="PivotFieldList" renderMode="Fixed" enginePopulated="onFieldListEnginePopulate" enableFieldSearching="true">
+        <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
+            <e-fieldlist-formatsettings>
+                <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
+            </e-fieldlist-formatsettings>
+            <e-fieldlist-rows>
+                <e-field name="Country"></e-field>
+                <e-field name="Products"></e-field>
+            </e-fieldlist-rows>
+            <e-fieldlist-columns>
+                <e-field name="Year" caption="Year"></e-field>
+                <e-field name="Quarter"></e-field>
+            </e-fieldlist-columns>
+            <e-fieldlist-values>
+                <e-field name="Sold" caption="Units Sold"></e-field>
+                <e-field name="Amount" caption="Sold Amount"></e-field>
+            </e-fieldlist-values>
+        </e-datasourcesettings>
+    </ejs-pivotfieldlist>
+</div><br />
 
 <style>
-    #Static_FieldList {
+    #PivotFieldList {
         width: 400px;
     }
+
+    .e-pivotfieldlist .e-static {
+        width: 100% !important;
+    }
 </style>
 
 <script>
+
     var pivotObj; var fieldlistObj;
     function onGridEnginePopulate(args) {
         pivotObj = document.getElementById('PivotView').ej2_instances[0];

ej2-asp-core-mvc/code-snippet/pivot-table/field-list/chart/tagHelper

@@ -1,6 +1,6 @@
    <div class="control-section" style="overflow:auto">
         <div class="content-wrapper">
-            <ejs-pivotview id="pivotview" width="100%" height="300" load="onLoad" dataBound="onDataBound" cellSelected="onCellSelected" showTooltip="false">
+            <ejs-pivotview id="PivotView" width="100%" height="300" load="onLoad" dataBound="onDataBound" cellSelected="onCellSelected" showTooltip="false">
                 <e-datasourcesettings dataSource="@ViewBag.data" expandAll="true" enableSorting="true">
                     <e-rows>
                         <e-field name="Country"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/field-list/field-dropped/tagHelper

@@ -1,9 +1,9 @@
 <ejs-button id="Refresh" content="Refresh" isPrimary="true"></ejs-button>
 
-<ejs-pivotview id="PivotGrid" height="300" showFieldList="true" onFieldDropped="onFieldDropped">
-    <e-datasource data="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
+<ejs-pivotview id="PivotGrid" height="300" showFieldList="true" fieldListRefreshed="fieldListRefreshed">
+    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
         <e-formatsettings>
-            <e-field name="Amount" format="C0" useGrouping="true"></e-field>
+            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
         </e-formatsettings>
         <e-rows>
             <e-field name="Country"></e-field>
@@ -17,7 +17,7 @@
             <e-field name="Sold" caption="Units Sold"></e-field>
             <e-field name="Amount" caption="Sold Amount"></e-field>
         </e-values>
-    </e-datasource>
+    </e-datasourcesettings>
 </ejs-pivotview>
 
 <script>

ej2-asp-core-mvc/code-snippet/pivot-table/field-list/refresh-event/tagHelper

@@ -1,7 +1,7 @@
 <ejs-button id="Refresh" content="Refresh" isPrimary="true"></ejs-button>
 
 <ejs-pivotview id="PivotGrid" height="300" showFieldList="true" fieldListRefreshed="fieldListRefreshed">
-    <e-datasource data="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
+    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
         <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
         </e-formatsettings>
@@ -17,7 +17,7 @@
             <e-field name="Sold" caption="Units Sold"></e-field>
             <e-field name="Amount" caption="Sold Amount"></e-field>
         </e-values>
-    </e-datasource>
+    </e-datasourcesettings>
 </ejs-pivotview>
 
 <script>

ej2-asp-core-mvc/code-snippet/pivot-table/field-list/refresh/tagHelper

@@ -1,7 +1,7 @@
 <ejs-button id="Refresh" content="Refresh" isPrimary="true"></ejs-button>
 
-<ejs-pivotview id="PivotGrid" height="300" showFieldList="true">
-    <e-datasource data="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
+<ejs-pivotview id="PivotView" height="300" showFieldList="true">
+    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
         <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
         </e-formatsettings>
@@ -17,7 +17,7 @@
             <e-field name="Sold" caption="Units Sold"></e-field>
             <e-field name="Amount" caption="Sold Amount"></e-field>
         </e-values>
-    </e-datasource>
+    </e-datasourcesettings>
 </ejs-pivotview>
 
 <script>