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

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

@@ -1,4 +1,4 @@
-<ejs-pivotview id="PivotView" height="300">
+<ejs-pivotview id="PivotView" height="300" showGroupingBar="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" showAggregationOnValueField="false">
         <e-rows>
             <e-field name="Country"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/classic-layout/ClassicLayout.cs

@@ -3,6 +3,7 @@ public ActionResult Index()
     var data = GetPivotData();
     ViewBag.DataSource = data;
     ViewBag.drilledMembers = new string[] { "Accessories", "Bikes" };
+    ViewBag.drilledMembersProducts = new string[] { "Helmets" };
     ViewBag.filterSettings = new string[] { "Cleaners", "Fenders" };
     return View();
 }

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

@@ -1,15 +1,15 @@
 <ejs-pivotview id="PivotView" load="onLoad" showFieldList="true" width="100%" height="450">
-    <e-datasourcesettings dataSource="@data" expandAll="false" enableSorting="true">
+    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
         <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1"
                 useGrouping="true"></e-field>
         </e-formatsettings>
         <e-drilledmembers>
-            <e-field name="Product_Categories" items="@drilledMembers"></e-field>
-            <e-field name="Products" delimiter="##" items="@drilledMembersProducts"></e-field>
+            <e-field name="Product_Categories" items="@ViewBag.drilledMembers"></e-field>
+            <e-field name="Products" delimiter="##" items="@ViewBag.drilledMembersProducts"></e-field>
         </e-drilledmembers>
         <e-filtersettings>
-            <e-field name="Products" type="Exclude" items="@filtersettings"></e-field>
+            <e-field name="Products" type="@FilterType.Exclude" items="@ViewBag.filterSettings"></e-field>
         </e-filtersettings>
         <e-rows>
             <e-field name="Product_Categories" caption="Product Categories"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/conditional-formatting/code-behind-specific/tagHelper

@@ -22,7 +22,7 @@
             <e-field name="Product_Categories" caption="Product Categories"></e-field>
         </e-filters>
         <e-conditionalformatsettings>
-            <e-format measure="In_Stock" conditions="LessThan" value1="500">
+            <e-format measure="In_Stock" conditions="@Condition.LessThan" value1="500">
                 <e-fieldlist-style backgroundColor="#80cbc4" color="black" fontFamily="Tahoma" fontSize="12px" />
             </e-format>
         </e-conditionalformatsettings>

ej2-asp-core-mvc/code-snippet/pivot-table/conditional-formatting/code-behind/tagHelper

@@ -22,7 +22,7 @@
             <e-field name="Product_Categories" caption="Product Categories"></e-field>
         </e-filters>
         <e-conditionalformatsettings>
-            <e-format conditions="GreaterThan" value1="500">
+            <e-format conditions="@Condition.GreaterThan" value1="500">
                 <e-fieldlist-style backgroundColor="#80cbc4" color="black" fontFamily="Tahoma" fontSize="12px" />
             </e-format>
         </e-conditionalformatsettings>

ej2-asp-core-mvc/code-snippet/pivot-table/conditional-formatting/event/tagHelper

@@ -23,10 +23,10 @@
             <e-field name="Product_Categories" caption="Product Categories"></e-field>
         </e-filters>
         <e-conditionalformatsettings>
-            <e-format measure="In_Stock" conditions="LessThan" value1="1000">
+            <e-format measure="In_Stock" conditions="@Condition.LessThan" value1="1000">
                 <e-fieldlist-style backgroundColor="#80cbc4" color="black" fontFamily="Tahoma" fontSize="12px" />
             </e-format>
-            <e-format measure="Sold" conditions="Between" value1="500" value2="40000">
+            <e-format measure="Sold" conditions="@Condition.Between" value1="500" value2="40000">
                 <e-fieldlist-style backgroundColor="#f48fb1" color="black" fontFamily="Tahoma" fontSize="12px" />
             </e-format>
         </e-conditionalformatsettings>

ej2-asp-core-mvc/code-snippet/pivot-table/conditional-formatting/label/tagHelper

@@ -19,7 +19,7 @@
                         <e-field name="Product_Categories" caption="Product Categories"></e-field>
                     </e-filters>
                     <e-conditionalformatsettings>
-                        <e-format label="Germany" conditions="Between" value1="500" value2="50000">
+                        <e-format label="Germany" conditions="@Condition.Between" value1="500" value2="50000">
                             <e-fieldlist-style backgroundColor="#f48fb1" color="black" fontFamily="Tahoma" fontSize="12px" />
                         </e-format>
                     </e-conditionalformatsettings>

ej2-asp-core-mvc/code-snippet/pivot-table/conditional-formatting/tool-bar/tagHelper

@@ -22,10 +22,10 @@
             <e-field name="Product_Categories" caption="Product Categories"></e-field>
         </e-filters>
         <e-conditionalformatsettings>
-            <e-format measure="In_Stock" conditions="LessThan" value1="5000">
+            <e-format measure="In_Stock" conditions="@Condition.LessThan" value1="5000">
                 <e-fieldlist-style backgroundColor="#80cbc4" color="black" fontFamily="Tahoma" fontSize="12px" />
             </e-format>
-            <e-format measure="Sold" conditions="Between" value1="3400" value2="40000">
+            <e-format measure="Sold" conditions="@Condition.Between" value1="3400" value2="40000">
                 <e-fieldlist-style backgroundColor="#f48fb1" color="black" fontFamily="Tahoma" fontSize="12px" />
             </e-format>
         </e-conditionalformatsettings>

ej2-asp-core-mvc/code-snippet/pivot-table/conditional-formatting/ui/tagHelper

@@ -23,10 +23,10 @@
             <e-field name="Product_Categories" caption="Product Categories"></e-field>
         </e-filters>
         <e-conditionalformatsettings>
-            <e-format measure="In_Stock" conditions="GreaterThan" value1="1000">
+            <e-format measure="In_Stock" conditions="@Condition.GreaterThan" value1="1000">
                 <e-fieldlist-style backgroundColor="#80cbc4" color="black" fontFamily="Tahoma" fontSize="12px" />
             </e-format>
-            <e-format measure="Sold" conditions="Between" value1="500" value2="40000">
+            <e-format measure="Sold" conditions="@Condition.Between" value1="500" value2="40000">
                 <e-fieldlist-style backgroundColor="#f48fb1" color="black" fontFamily="Tahoma" fontSize="12px" />
             </e-format>
         </e-conditionalformatsettings>

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

@@ -5,7 +5,7 @@
             <e-field name="Products" showNoDataItems="true"></e-field>
         </e-rows>
         <e-columns>
-            <e-field name="Products" showNoDataItems="true"></e-field>
+            <e-field name="Year" showNoDataItems="true"></e-field>
             <e-field name="Quarter" showNoDataItems="true"></e-field>
         </e-columns>
         <e-values>

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

@@ -1,6 +1,6 @@
 <ejs-pivotview id="PivotView" height="300">
     <e-datasourcesettings>
-        <e-data-manager url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/" adaptor="ODataAdaptor" crossdomain="true"></e-data-manager>
+        <e-data-manager url="https://services.syncfusion.com/js/production/api/Orders" adaptor="ODataAdaptor" crossdomain="true"></e-data-manager>
         <e-rows>
             <e-field name="ShipCountry"></e-field>
             <e-field name="ShipCity"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/editing/Inline-editing/tagHelper

@@ -6,13 +6,14 @@
 		</e-formatsettings>
 		<e-rows>
 			<e-field name="Country"></e-field>
+			<e-field name="Product"></e-field>
 		</e-rows>
 		<e-columns>
-			<e-field name="Date"></e-field>
-			<e-field name="Product"></e-field>
+			<e-field name="Year"></e-field>
+			<e-field name="Quarter"></e-field>
 		</e-columns>
 		<e-values>
-			<e-field name="Quantity" caption="Units Sold"></e-field>
+			<e-field name="Sold" caption="Units Sold"></e-field>
 			<e-field name="Amount" caption="Sold Amount"></e-field>
 		</e-values>
 	</e-datasourcesettings>

ej2-asp-core-mvc/code-snippet/pivot-table/field-list/static-fieldlist-virtualization/tagHelper

@@ -1,7 +1,7 @@
 <ejs-pivotview id="PivotView" enablevirtualization="true" enginePopulated="onGridEnginePopulate" height="300"></ejs-pivotview>
 <br />
 <ejs-pivotfieldlist id="PivotFieldList" renderMode="Fixed" load="onLoad" enginePopulated="onFieldListEnginePopulate">
-    <e-datasourcesettings dataSource="data(1000)" expandAll="false" enableSorting="true">
+    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
         <e-fieldlist-rows>
             <e-field name="ProductID"></e-field>
         </e-fieldlist-rows>
@@ -36,41 +36,6 @@
 </style>
 
 <script>
-
-    var dt = 0;
-    var data = function (count) {
-        var result = [];
-        for (var i = 1; i < (count + 1); i++) {
-            dt++;
-            var round = void 0;
-            var toString_1 = i.toString();
-            if (toString_1.length === 1) {
-                round = '0000' + (i);
-            }
-            else if (toString_1.length === 2) {
-                round = '000' + i;
-            }
-            else if (toString_1.length === 3) {
-                round = '00' + i;
-            }
-            else if (toString_1.length === 4) {
-                round = '0' + i;
-            }
-            else {
-                round = toString_1;
-            }
-            result.push({
-                ProductID: 'PRO-' + round,
-                Year: "FY " + (dt + 2013),
-                Price: Math.round(Math.random() * 5000) + 5000,
-                Sold: Math.round(Math.random() * 80) + 10,
-            });
-            if (dt / 4 == 1)
-                dt = 0;
-        }
-        return result;
-    };
-
     var pivotObj; var fieldListObj;
     function onGridEnginePopulate(args) {
         pivotObj = document.getElementById('PivotView').ej2_instances[0];
@@ -94,6 +59,6 @@
         //Generating page settings based on pivot table component’s size.
         pivotObj.updatePageSettings(true);
         //Assigning page settings to field list component.
-        fieldListObj.pageSettings =  pivotObj.pageSettings;
+        fieldListObj.pageSettings = pivotObj.pageSettings;
     }
 </script>

ej2-asp-core-mvc/code-snippet/pivot-table/field-list/static-fieldlist-virtualization/virtualization.cs

@@ -1,5 +1,7 @@
 public ActionResult Index()
 {
+    var data = GetPivotData(1000);
+    ViewBag.DataSource = data; 
     return View();
 }
 
@@ -9,27 +11,27 @@ public class PivotData
     public string Year { get; set; }
     public double Sold { get; set; }
     public double Price { get; set; }
+}
 
-    public static List<PivotData> GetPivotData(int count)
-    { 
-        var result = new List<PivotData>();
-        int dt = 0;
+public static List<PivotData> GetPivotData(int count)
+{ 
+    var result = new List<PivotData>();
+    int dt = 0;
 
-        for (int i = 1; i <= count; i++)
+    for (int i = 1; i <= count; i++)
+    {
+        dt++;
+        string round = i.ToString().PadLeft(5, '0');
+        result.Add(new PivotData
         {
-            dt++;
-            string round = i.ToString().PadLeft(5, '0');
-            result.Add(new PivotData
-            {
-                ProductID = "PRO-" + round,
-                Year = "FY " + (dt + 2013),
-                Price = new Random(Guid.NewGuid().GetHashCode()).Next(5000, 10001),
-                Sold = new Random(Guid.NewGuid().GetHashCode()).Next(10, 91),
-            });
+            ProductID = "PRO-" + round,
+            Year = "FY " + (dt + 2013),
+            Price = new Random(Guid.NewGuid().GetHashCode()).Next(5000, 10001),
+            Sold = new Random(Guid.NewGuid().GetHashCode()).Next(10, 91),
+        });
 
-            if (dt / 4 == 1)
-                dt = 0;
-        }
-        return result;
+        if (dt / 4 == 1)
+            dt = 0;
     }
+    return result;
 }

ej2-asp-core-mvc/code-snippet/pivot-table/filtering/label-filtering/filtering-ui/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="PivotView" height="300">
+<ejs-pivotview id="PivotView" height="300" showFieldList="true" showGroupingBar="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" allowLabelFilter="true">
         <e-rows>
             <e-field name="Country"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/filtering/max-node/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="PivotView" height="300" maxNodeLimitInMemberEditor=500>
+<ejs-pivotview id="PivotView" height="300" maxNodeLimitInMemberEditor=500 showFieldList="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
         <e-rows>
             <e-field name="DeliveryDate"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/filtering/member-filtering/tagHelper

@@ -1,7 +1,7 @@
 <ejs-pivotview id="PivotView" height="300">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
         <e-filtersettings>
-            <e-field name="Year" type="Exclude" items="@ViewBag.filterMembers"></e-field>
+            <e-field name="Year" type="@FilterType.Exclude" items="@ViewBag.filterMembers"></e-field>
         </e-filtersettings>
         <e-rows>
             <e-field name="Country"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/filtering/value-filtering-ui/tagHelper

@@ -1,4 +1,4 @@
-<ejs-pivotview id="PivotView" height="300">
+<ejs-pivotview id="PivotView" height="300" showFieldList="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" allowValueFilter="true">
         <e-rows>
             <e-field name="Country"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/getting-start-mvc/field-mapping/tagHelper

@@ -3,6 +3,11 @@
         <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
         </e-formatsettings>
+        <e-fieldmapping>
+            <e-field name="Quarter" showSortIcon="false"></e-field>
+            <e-field name="Products" showFilterIcon="false" showRemoveIcon="false"></e-field>
+            <e-field name="Amount" caption="Sold Amount" showValueTypeIcon="false"></e-field>
+        </e-fieldmapping>
         <e-rows>
             <e-field name="Country" caption="Country"></e-field>
         </e-rows>
@@ -12,10 +17,5 @@
         <e-values>
             <e-field name="Sold" caption="Units Sold"></e-field>
         </e-values>
-         <e-fieldmapping>
-            <e-field name="Quarter" showSortIcon="false"></e-field>
-            <e-field name="Products" showFilterIcon="false" showRemoveIcon="false"></e-field>
-            <e-field name="Amount" caption="Sold Amount" showValueTypeIcon="false"></e-field>
-        </e-fieldmapping>
     </e-datasourcesettings>
 </ejs-pivotview>

ej2-asp-core-mvc/code-snippet/pivot-table/grid-customization/allowAutoResizing/tagHelper

@@ -2,7 +2,7 @@
 <ejs-pivotview id="PivotView" height="300">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
         <e-filtersettings>
-            <e-field name="Year" type="Exclude" items="@ViewBag.filterMembers"></e-field>
+            <e-field name="Year" type="@FilterType.Exclude" items="@ViewBag.filterMembers"></e-field>
         </e-filtersettings>
         <e-rows>
             <e-field name="Country"></e-field>

ej2-asp-core-mvc/code-snippet/pivot-table/grid-customization/excel-headercell/tagHelper

@@ -1,4 +1,5 @@
-<ejs-pivotview id="PivotView" height="300">
+<ejs-button id="Excel" content="Excel Export" isPrimary="true"></ejs-button>
+<ejs-pivotview id="PivotView" height="300" allowExcelExport="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
         <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
@@ -19,6 +20,11 @@
     <e-gridSettings columnWidth=120 excelHeaderCellInfo="excelHeaderCell"></e-gridSettings>
 </ejs-pivotview>
 <script>
+    var pivotObj;
+    document.getElementById('Excel').onclick = function () {
+        pivotObj = document.getElementById('PivotView').ej2_instances[0];
+        pivotObj.excelExport();
+    }
     function excelHeaderCell(args) {
 
     }

ej2-asp-core-mvc/code-snippet/pivot-table/grid-customization/excel-querycell/tagHelper

@@ -1,4 +1,6 @@
-<ejs-pivotview id="PivotView" height="300">
+<ejs-button id="Excel" content="Excel Export" isPrimary="true"></ejs-button>
+
+<ejs-pivotview id="PivotView" height="300" allowExcelExport="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
         <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
@@ -19,6 +21,11 @@
     <e-gridSettings columnWidth=120 excelHeaderCellInfo="excelHeaderCell"></e-gridSettings>
 </ejs-pivotview>
 <script>
+    var pivotObj;
+    document.getElementById('Excel').onclick = function () {
+        pivotObj = document.getElementById('PivotView').ej2_instances[0];
+        pivotObj.excelExport();
+    }
     function excelHeaderCell(args) {
 
     }

ej2-asp-core-mvc/code-snippet/pivot-table/grid-customization/pdf-headercell/tagHelper

@@ -1,4 +1,6 @@
-<ejs-pivotview id="PivotView" height="300">
+<ejs-button id="Pdf" content="PDF Export" isPrimary="true"></ejs-button>
+
+<ejs-pivotview id="PivotView" height="300" allowPdfExport="true">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
         <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
@@ -19,6 +21,11 @@
     <e-gridSettings columnWidth=120 pdfHeaderCellInfo="pdfHeaderCell"></e-gridSettings>
 </ejs-pivotview>
 <script>
+    var pivotObj;
+    document.getElementById('Pdf').onclick = function () {
+        pivotObj = document.getElementById('PivotView').ej2_instances[0];
+        pivotObj.excelExport();
+    }
     function pdfHeaderCell(args) {
 
     }

ej2-asp-core-mvc/code-snippet/pivot-table/grid-customization/pdf-querycell/tagHelper

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

ej2-asp-core-mvc/code-snippet/pivot-table/hyper-link/all-cells/tagHelper

@@ -16,5 +16,16 @@
             <e-field name="Amount" caption="Sold Amount"></e-field>
         </e-values>
     </e-datasourcesettings>
-    <e-hyperlinkSettings showHyperlink="true"></e-hyperlinkSettings>
-</ejs-pivotview>
+    <e-hyperlinkSettings showHyperlink="true" cssClass="e-custom-class"></e-hyperlinkSettings>
+</ejs-pivotview>
+
+<style>
+    .e-custom-class {
+        text-decoration: underline;
+        color: deepskyblue;
+    }
+    .e-custom-class:hover {
+        color: red;
+        text-decoration: none;
+    }
+</style>