Skip to content

P
portal-apps-manage
Commit fe894dc1 by Nattana Chaiyamat
Options

แสดง Datagrid Pivot

parent 4e9b6454
Showing with 30 additions and 23 deletions
src/app/datagrid-syncfution/datagrid-syncfution.component.html
<ejs-grid #grid id='Grid' [dataSource]="dataSourceSearch" [allowFiltering]="allowFiltering" <ejs-grid #grid id='Grid' allowScrolling="true" [dataSource]="dataSourceSearch" [allowFiltering]="allowFiltering"
[filterSettings]="filterSettings" (actionComplete)="actionComplete($event)" [searchSettings]="searchSettings" [filterSettings]="filterSettings" (actionComplete)="actionComplete($event)" [searchSettings]="searchSettings"
[groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings" allowPaging='true' [groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings" allowPaging='true'
allowGrouping='true' allowSorting='true' [showColumnMenu]="true" (columnMenuClick)="onColumnMenuClick($event)" allowGrouping='true' allowSorting='true' [showColumnMenu]="true" (columnMenuClick)="onColumnMenuClick($event)"
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
[loadingIndicator]='loadingIndicator' [query]="query" rowHeight='60' allowEditing='false' [pageSettings]='initialPage' [loadingIndicator]='loadingIndicator' [query]="query" rowHeight='60' allowEditing='false' [pageSettings]='initialPage'
[allowMultiSorting]='true' [columnMenuItems]="columnMenuItems"> [allowMultiSorting]='true' [columnMenuItems]="columnMenuItems">
<e-columns> <e-columns>
<e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width" <e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText"
[format]="col.format" [textAlign]="'center'" [isPrimaryKey]="col.isPrimaryKey" [editType]="false" [width]="checkWidth()" [format]="col.format" [textAlign]="'center'"
[validationRules]="col.validationRules" [allowEditing]="false" [allowSorting]="'true'" [allowFiltering]="true" [isPrimaryKey]="col.isPrimaryKey" [editType]="false" [validationRules]="col.validationRules"
[visible]="col.visible" [type]="col.type"> [allowEditing]="false" [allowSorting]="'true'" [allowFiltering]="true" [visible]="col.visible" [type]="col.type">
<ng-template #headerTemplate let-data> <ng-template #headerTemplate let-data>
<span class="font-size-12px font-weight-700">{{ col.headerText }}</span> <span class="font-size-12px font-weight-700">{{ col.headerText }}</span>
</ng-template> </ng-template>
......
src/app/datagrid-syncfution/datagrid-syncfution.component.scss
...@@ -14,20 +14,23 @@ ...@@ -14,20 +14,23 @@
background-color: rgb(96 165 250 / 0.1) !important; background-color: rgb(96 165 250 / 0.1) !important;
} }
.e-pager .e-currentitem, .e-pager .e-currentitem:hover { .e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
background: rgb(96 165 250) !important; background: rgb(96 165 250) !important;
color: #fff; color: #fff;
opacity: 1 !important; opacity: 1 !important;
} }
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check { .e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
background-color: rgb(96 165 250) !important; background-color: rgb(96 165 250) !important;
border-color: transparent; border-color: transparent;
color: #fff; color: #fff;
} }
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame { .e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
border: 1px solid !important; border: 1px solid !important;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
...@@ -46,3 +49,8 @@ ...@@ -46,3 +49,8 @@
.e-grid td.e-selectionbackground { .e-grid td.e-selectionbackground {
background-color: #aec2ec !important; background-color: #aec2ec !important;
} }
::ng-deep .e-grid .e-content {
overflow-x: scroll !important;
}
\ No newline at end of file
src/app/datagrid-syncfution/datagrid-syncfution.component.ts
...@@ -102,7 +102,7 @@ L10n.load({ ...@@ -102,7 +102,7 @@ L10n.load({
MatDialogModule, MatDialogModule,
NgbPaginationModule, NgbPaginationModule,
GridModule GridModule
], ],
selector: 'app-datagrid-syncfution', selector: 'app-datagrid-syncfution',
templateUrl: './datagrid-syncfution.component.html', templateUrl: './datagrid-syncfution.component.html',
styleUrls: ['./datagrid-syncfution.component.scss'], styleUrls: ['./datagrid-syncfution.component.scss'],
...@@ -239,7 +239,7 @@ export class DatagridSyncfutionComponent implements OnInit { ...@@ -239,7 +239,7 @@ export class DatagridSyncfutionComponent implements OnInit {
let exportProperties: ExcelExportProperties = { let exportProperties: ExcelExportProperties = {
columns: this.columns.map(col => ({ columns: this.columns.map(col => ({
field: col.field, field: col.field,
headerText: col.headerText headerText: col.headerText,
})) as Column[] })) as Column[]
}; };
this.grid?.excelExport(exportProperties); this.grid?.excelExport(exportProperties);
...@@ -435,6 +435,9 @@ export class DatagridSyncfutionComponent implements OnInit { ...@@ -435,6 +435,9 @@ export class DatagridSyncfutionComponent implements OnInit {
this.sendNextPageForm.emit(data); this.sendNextPageForm.emit(data);
} }
checkWidth(width?: string) {
return +(width || '') < 120 ? 120 : width
}
} }
src/app/pivot-syncfution/pivot-syncfution.component.ts
...@@ -95,9 +95,6 @@ export class PivotSyncfutionComponent implements OnInit { ...@@ -95,9 +95,6 @@ export class PivotSyncfutionComponent implements OnInit {
filters: [], filters: [],
formatSettings: [] formatSettings: []
}; };
console.log("dataSourceSettings:", this.dataSourceSettings);
console.log(this.dataSource);
console.log(this.columns);
} }
if (changes['pivotLayout']) { if (changes['pivotLayout']) {
if (changes['pivotLayout'].currentValue) { if (changes['pivotLayout'].currentValue) {
......
src/app/portal-manage/my-portal/excel-list/excel-list.component.html
...@@ -1031,16 +1031,17 @@ ...@@ -1031,16 +1031,17 @@
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div> </div>
</div> --> </div> -->
<div *ngIf="!variableSheet.length" <!-- <div *ngIf="!variableSheet.length"
class="col-12 justify-content-center align-content-center d-flex" class="col-12 justify-content-center align-content-center d-flex"
style="margin-bottom: 1rem;margin-top: 1rem;"> style="margin-bottom: 1rem;margin-top: 1rem;">
<div <div
class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14"> class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14">
{{'No Data Found' }} {{'No Data Found' }}
</div> </div>
</div> </div> -->
<div class="row col-12 flex justify-center" <div class="row col-12 flex justify-center"
*ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')"> *ngIf="(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')"
[ngStyle]="{'padding-top': variableSheet.length?'0px':'50px'}">
<div class="col-12 d-flex justify-content-center align-content-center"> <div class="col-12 d-flex justify-content-center align-content-center">
<button type="button" *ngIf="excelReport.isDataGrid=='1'" <button type="button" *ngIf="excelReport.isDataGrid=='1'"
class="ti-btn ti-btn-primary-full" class="ti-btn ti-btn-primary-full"
......
src/app/portal-manage/my-portal/excel-list/excel-list.component.ts
...@@ -888,10 +888,6 @@ export class ExcelListComponent implements OnInit { ...@@ -888,10 +888,6 @@ export class ExcelListComponent implements OnInit {
}).subscribe(response => { }).subscribe(response => {
this.dataList = response.excelData as any this.dataList = response.excelData as any
this.loadingExcel = false this.loadingExcel = false
console.log('🟢 dataList:', this.dataList); // ตรวจสอบว่ามีข้อมูลไหม
console.log('🟢 pivotStr:', (response.excelPerspective as any).pivotStr); // ตรวจสอบ layout ที่ส่งมา
console.log('🟢 columns:', this.pivotColumns); // ดูว่า columns ถูกเซ็ตหรือยัง
if (type === 'grid') { if (type === 'grid') {
this.modalRefgridModal = this.modal.open(this.gridModal, { this.modalRefgridModal = this.modal.open(this.gridModal, {
width: '1000px', width: '1000px',
......
src/app/portal-manage/my-portal/excel-report-toggle/excel-report-toggle.component.html
...@@ -508,16 +508,17 @@ ...@@ -508,16 +508,17 @@
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div> </div>
</div> --> </div> -->
<div *ngIf="!variableSheet.length" <!-- <div *ngIf="!variableSheet.length"
class="col-12 justify-content-center align-content-center d-flex" class="col-12 justify-content-center align-content-center d-flex"
style="margin-bottom: 1rem;margin-top: 1rem;"> style="margin-bottom: 1rem;margin-top: 1rem;">
<div <div
class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14"> class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14">
{{'No Data Found' }} {{'No Data Found' }}
</div> </div>
</div> </div> -->
<div class="row col-12 flex justify-center" <div class="row col-12 flex justify-center"
*ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')"> *ngIf="(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')"
[ngStyle]="{'padding-top': variableSheet.length?'0px':'50px'}">
<div class="col-12 d-flex justify-content-center align-content-center"> <div class="col-12 d-flex justify-content-center align-content-center">
<button type="button" *ngIf="excelReport.isDataGrid=='1'" <button type="button" *ngIf="excelReport.isDataGrid=='1'"
class="ti-btn ti-btn-primary-full" class="ti-btn ti-btn-primary-full"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment