|
| 1 | +@{ |
| 2 | + ViewData["Title"] = "Home Page"; |
| 3 | +} |
| 4 | + |
| 5 | +<ejs-pivotview id="pivotview" allowExcelExport="true" allowConditionalFormatting="true" allowPdfExport="true" showToolbar="true" allowCalculatedField="true" showFieldList="true" width="700" toolbar="@(new List<string>() {"New", "Save", "SaveAs", "Rename", "Remove", "Load", |
| 6 | + "Grid", "Chart", "Export", "SubTotal", "GrandTotal", "Formatting", "FieldList" })" saveReport="saveReport" loadReport="loadReport" fetchReport="fetchReport" renameReport="renameReport" removeReport="removeReport" newReport="newReport" toolbarRender="beforeToolbarRender"> |
| 7 | + <e-datasourcesettings dataSource="@ViewBag.data" expandAll="false"> |
| 8 | + <e-formatsettings> |
| 9 | + <e-field name="Amount" format="C0"></e-field> |
| 10 | + </e-formatsettings> |
| 11 | + <e-rows> |
| 12 | + <e-field name="Country"></e-field> |
| 13 | + <e-field name="Products"></e-field> |
| 14 | + </e-rows> |
| 15 | + <e-columns> |
| 16 | + <e-field name="Year" caption="Production Year"></e-field> |
| 17 | + <e-field name="Quarter"></e-field> |
| 18 | + </e-columns> |
| 19 | + <e-values> |
| 20 | + <e-field name="Sold" caption="Units Sold"></e-field> |
| 21 | + <e-field name="Amount" caption="Sold Amount"></e-field> |
| 22 | + </e-values> |
| 23 | + <e-filters> |
| 24 | + <e-field></e-field> |
| 25 | + </e-filters> |
| 26 | + </e-datasourcesettings> |
| 27 | + <e-displayOption view="Both"></e-displayOption> |
| 28 | + <e-chartSettings value="Amount" enableExport="true" enableMultipleAxis="false"> |
| 29 | + <e-chartSeries type="Column"></e-chartSeries> |
| 30 | + </e-chartSettings> |
| 31 | +</ejs-pivotview> |
| 32 | + |
| 33 | +<script> |
| 34 | + function updateReport(reportList) { |
| 35 | + var pivotTableObj = document.getElementById('pivotview').ej2_instances[0]; |
| 36 | + // Here you can refresh the report list by feeding updated reports fetched from the database. |
| 37 | + var reportListObj = pivotTableObj.element.querySelector( |
| 38 | + "#" + pivotTableObj.element.id + "_reportlist").ej2_instances; |
| 39 | + if (reportListObj) { |
| 40 | + reportListObj[0].dataSource = reportList; |
| 41 | + reportListObj[0].value = pivotTableObj.toolbarModule.currentReport; |
| 42 | + // For remove report |
| 43 | + if (pivotTableObj.toolbarModule.currentReport === "" && (reportListObj[0].itemData === null || reportList.length < 2)) { |
| 44 | + pivotTableObj.toolbarModule.currentReport = reportList[reportList.length - 1]; |
| 45 | + reportListObj[0].value = pivotTableObj.toolbarModule.currentReport; |
| 46 | + loadReport({ reportName: reportList[reportList.length - 1] }) |
| 47 | + } |
| 48 | + } |
| 49 | + } |
| 50 | + function saveReport(args) { |
| 51 | + var report = JSON.parse(args.report); |
| 52 | + report.dataSourceSettings.dataSource = []; |
| 53 | + fetch('https://localhost:44313/Pivot/SaveReport', { |
| 54 | + method: 'POST', |
| 55 | + headers: { |
| 56 | + 'Accept': 'application/json', |
| 57 | + 'Content-Type': 'application/json', |
| 58 | + }, |
| 59 | + body: JSON.stringify({ reportName: args.reportName, report: JSON.stringify(report) }) |
| 60 | + }).then(response => { |
| 61 | + fetchReport(args); |
| 62 | + }); |
| 63 | + } |
| 64 | + function fetchReport(args) { |
| 65 | + fetch('https://localhost:44313/Pivot/FetchReport', { |
| 66 | + method: 'POST', |
| 67 | + headers: { |
| 68 | + 'Accept': 'application/json', |
| 69 | + 'Content-Type': 'application/json', |
| 70 | + }, |
| 71 | + body: "" |
| 72 | + }).then(res => res.json()) |
| 73 | + .then(response => { |
| 74 | + updateReport(response.length > 0 ? response : []); |
| 75 | + }); |
| 76 | + } |
| 77 | + function loadReport(args) { |
| 78 | + fetch('https://localhost:44313/Pivot/LoadReport', { |
| 79 | + method: 'POST', |
| 80 | + headers: { |
| 81 | + 'Accept': 'application/json', |
| 82 | + 'Content-Type': 'application/json', |
| 83 | + }, |
| 84 | + body: JSON.stringify({ reportName: args.reportName }) |
| 85 | + }).then(res => res.json()) |
| 86 | + .then(response => { |
| 87 | + if (response) { |
| 88 | + var report = JSON.parse(response); |
| 89 | + var pivotTableObj = document.getElementById('pivotview').ej2_instances[0]; |
| 90 | + report.dataSourceSettings.dataSource = pivotTableObj.dataSourceSettings.dataSource; |
| 91 | + pivotTableObj.dataSourceSettings = report.dataSourceSettings; |
| 92 | + } |
| 93 | + }); |
| 94 | + } |
| 95 | + function removeReport(args) { |
| 96 | + fetch('https://localhost:44313/Pivot/RemoveReport', { |
| 97 | + method: 'POST', |
| 98 | + headers: { |
| 99 | + 'Accept': 'application/json', |
| 100 | + 'Content-Type': 'application/json', |
| 101 | + }, |
| 102 | + body: JSON.stringify({ reportName: args.reportName }) |
| 103 | + }).then(response => { |
| 104 | + fetchReport(args); |
| 105 | + }); |
| 106 | + } |
| 107 | + function renameReport(args) { |
| 108 | + fetch('https://localhost:44313/Pivot/RenameReport', { |
| 109 | + method: 'POST', |
| 110 | + headers: { |
| 111 | + 'Accept': 'application/json', |
| 112 | + 'Content-Type': 'application/json', |
| 113 | + }, |
| 114 | + body: JSON.stringify({ reportName: args.reportName, renameReport: args.rename, isReportExists: args.isReportExists }) |
| 115 | + }).then(response => { |
| 116 | + fetchReport(args); |
| 117 | + }); |
| 118 | + } |
| 119 | + function newReport() { |
| 120 | + var pivotTableObj = document.getElementById('pivotview').ej2_instances[0]; |
| 121 | + pivotTableObj.setProperties({ |
| 122 | + dataSourceSettings: { |
| 123 | + columns: [], |
| 124 | + rows: [], |
| 125 | + values: [], |
| 126 | + filters: [] |
| 127 | + } |
| 128 | + }, false); |
| 129 | + } |
| 130 | + function beforeToolbarRender(args) { |
| 131 | + args.customToolbar.splice(6, 0, { |
| 132 | + type: 'Separator' |
| 133 | + }); |
| 134 | + args.customToolbar.splice(9, 0, { |
| 135 | + type: 'Separator' |
| 136 | + }); |
| 137 | + } |
| 138 | +</script> |
0 commit comments