Skip to content

P
portal-apps-manage
Commit f0065caa by Ooh-Ao
Options

datagrid

parent 05002a9d
Showing with 579 additions and 115 deletions
src/app/portal-manage/dashboard-management/widget-config/services/widget-config-registry.service.ts
...@@ -175,13 +175,13 @@ export class WidgetConfigRegistryService { ...@@ -175,13 +175,13 @@ export class WidgetConfigRegistryService {
// ======================================== // ========================================
this.registerWidgetWithMetadata('SyncfusionDatagridWidgetComponent', SyncfusionDatagridConfigComponent, { this.registerWidgetWithMetadata('SyncfusionDatagridWidgetComponent', SyncfusionDatagridConfigComponent, {
name: 'SyncfusionDatagridWidgetComponent', name: 'SyncfusionDatagridWidgetComponent',
displayName: 'Data Grid Widget', displayName: 'Advanced Data Grid',
description: 'Advanced data grid with sorting, filtering, paging, and export capabilities', description: 'Comprehensive data grid with advanced features including sorting, filtering, paging, grouping, editing, export capabilities, and real-time data management',
category: WidgetCategory.DATA_GRID, category: WidgetCategory.DATA_GRID,
icon: 'grid', icon: 'grid',
version: '1.0.0', version: '2.0.0',
author: 'Portal Team', author: 'Portal Team',
tags: ['datagrid', 'table', 'data', 'syncfusion', 'advanced'], tags: ['datagrid', 'table', 'data', 'syncfusion', 'advanced', 'enterprise', 'grid', 'spreadsheet'],
isDeprecated: false, isDeprecated: false,
minWidth: 400, minWidth: 400,
minHeight: 300, minHeight: 300,
...@@ -189,11 +189,12 @@ export class WidgetConfigRegistryService { ...@@ -189,11 +189,12 @@ export class WidgetConfigRegistryService {
maxHeight: 800, maxHeight: 800,
defaultWidth: 600, defaultWidth: 600,
defaultHeight: 400, defaultHeight: 400,
supportedDataSources: [DataSourceType.STATIC, DataSourceType.API, DataSourceType.DATASET, DataSourceType.ODATA, DataSourceType.WEBAPI], supportedDataSources: [DataSourceType.STATIC, DataSourceType.API, DataSourceType.DATASET, DataSourceType.ODATA, DataSourceType.WEBAPI, DataSourceType.WEBSOCKET],
features: [ features: [
WidgetFeature.EXPORT, WidgetFeature.FILTER, WidgetFeature.SORT, WidgetFeature.PAGINATION, WidgetFeature.EXPORT, WidgetFeature.FILTER, WidgetFeature.SORT, WidgetFeature.PAGINATION,
WidgetFeature.SEARCH, WidgetFeature.GROUPING, WidgetFeature.EDITING, WidgetFeature.SELECTION, WidgetFeature.SEARCH, WidgetFeature.GROUPING, WidgetFeature.EDITING, WidgetFeature.SELECTION,
WidgetFeature.REFRESH, WidgetFeature.CUSTOMIZATION, WidgetFeature.RESPONSIVE, WidgetFeature.PRINT WidgetFeature.REFRESH, WidgetFeature.CUSTOMIZATION, WidgetFeature.RESPONSIVE, WidgetFeature.PRINT,
WidgetFeature.ANIMATION, WidgetFeature.TOOLTIP, WidgetFeature.ZOOM
], ],
complexity: 'advanced' complexity: 'advanced'
}); });
...@@ -1004,8 +1005,14 @@ export class WidgetConfigRegistryService { ...@@ -1004,8 +1005,14 @@ export class WidgetConfigRegistryService {
allowMultiSelection: false, allowMultiSelection: false,
allowEditing: false, allowEditing: false,
allowAdding: false, allowAdding: false,
allowPageSize: true,
allowPageNavigation: true,
allowMultiSorting: false,
allowAdvancedFiltering: false,
allowSearching: false,
pageSize: 10, pageSize: 10,
pageSizes: [5, 10, 20, 50, 100], pageSizes: [5, 10, 20, 50, 100],
showPageInfo: true,
// UI Settings // UI Settings
showToolbar: true, showToolbar: true,
...@@ -1015,6 +1022,16 @@ export class WidgetConfigRegistryService { ...@@ -1015,6 +1022,16 @@ export class WidgetConfigRegistryService {
alternateRowColor: '#F9FAFB', alternateRowColor: '#F9FAFB',
rowHeight: 40, rowHeight: 40,
headerRowHeight: 40, headerRowHeight: 40,
headerTextColor: '#374151',
// Filter Settings
showFilterBar: false,
filterType: 'menu',
filterBarHeight: 40,
// Aggregate Settings
showAggregate: false,
aggregateColumns: [],
// Export Settings // Export Settings
enableExport: true, enableExport: true,
...@@ -1023,17 +1040,16 @@ export class WidgetConfigRegistryService { ...@@ -1023,17 +1040,16 @@ export class WidgetConfigRegistryService {
includeHeaders: true, includeHeaders: true,
includeFilters: false, includeFilters: false,
// Search Settings // Selection & Editing
enableSearch: false, selectionMode: 'none',
searchSettings: { editMode: 'none',
fields: [],
operator: 'contains',
key: '',
ignoreCase: true
},
// Virtualization // Data Management
dataSourceType: 'local',
enableVirtualization: false, enableVirtualization: false,
enableInfiniteScroll: false,
enableLazyLoad: false,
cacheDuration: 300,
// Style Settings // Style Settings
backgroundType: 'solid', backgroundType: 'solid',
...@@ -1041,7 +1057,6 @@ export class WidgetConfigRegistryService { ...@@ -1041,7 +1057,6 @@ export class WidgetConfigRegistryService {
borderColor: '#E5E7EB', borderColor: '#E5E7EB',
textColor: '#374151', textColor: '#374151',
headerBackgroundColor: '#F9FAFB', headerBackgroundColor: '#F9FAFB',
headerTextColor: '#374151',
borderRadius: 8, borderRadius: 8,
borderWidth: 1, borderWidth: 1,
fontSize: 14, fontSize: 14,
...@@ -1064,11 +1079,8 @@ export class WidgetConfigRegistryService { ...@@ -1064,11 +1079,8 @@ export class WidgetConfigRegistryService {
dataValidation: 'basic', dataValidation: 'basic',
showDataCount: true, showDataCount: true,
showLastUpdated: true, showLastUpdated: true,
enableFilter: false, dataTransform: '',
filterField: '', errorMessage: 'Failed to load data',
filterOperator: 'contains',
filterValue: '',
filterLabel: 'Filter',
// Security Settings // Security Settings
requireAuth: false, requireAuth: false,
......
src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.scss
...@@ -9,9 +9,10 @@ ...@@ -9,9 +9,10 @@
// Widget Header // Widget Header
.widget-header { .widget-header {
flex-shrink: 0; flex-shrink: 0;
padding: 12px 16px; padding: 16px 20px;
border-bottom: 1px solid rgba(229, 231, 235, 0.5); border-bottom: 1px solid rgba(229, 231, 235, 0.5);
position: relative; position: relative;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(249, 250, 251, 0.9));
.header-content { .header-content {
display: flex; display: flex;
...@@ -21,13 +22,30 @@ ...@@ -21,13 +22,30 @@
.header-left { .header-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 12px;
.widget-title { .widget-title {
font-size: 16px; font-size: 18px;
font-weight: 600; font-weight: 700;
margin: 0; margin: 0;
color: inherit; color: inherit;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.data-count {
display: flex;
align-items: center;
gap: 6px;
background: rgba(59, 130, 246, 0.1);
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
color: #3B82F6;
i {
font-size: 10px;
}
} }
} }
...@@ -35,33 +53,40 @@ ...@@ -35,33 +53,40 @@
display: flex; display: flex;
gap: 8px; gap: 8px;
.export-button, .action-button {
.refresh-button { width: 36px;
width: 32px; height: 36px;
height: 32px; border-radius: 8px;
border-radius: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.8);
color: inherit; color: inherit;
opacity: 0.7; border: 1px solid rgba(229, 231, 235, 0.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
&:hover { &:hover {
opacity: 1; background: rgba(59, 130, 246, 0.1);
background: rgba(255, 255, 255, 0.2); border-color: rgba(59, 130, 246, 0.3);
transform: translateY(-1px); color: #3B82F6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
} }
&:active { &:active {
transform: translateY(0); transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
i { i {
font-size: 14px; font-size: 14px;
} }
&.rotating i {
animation: spin 1s linear infinite;
}
} }
} }
} }
...@@ -69,24 +94,38 @@ ...@@ -69,24 +94,38 @@
.data-source-info { .data-source-info {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 16px; left: 20px;
right: 16px; right: 20px;
background: rgba(59, 130, 246, 0.1); background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
border: 1px solid rgba(59, 130, 246, 0.2); border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 4px; border-radius: 8px;
padding: 4px 8px; padding: 8px 12px;
font-size: 11px; font-size: 12px;
color: #3B82F6; color: #3B82F6;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
margin-top: 8px;
backdrop-filter: blur(10px);
i {
font-size: 12px;
margin-right: 6px;
}
.last-updated {
display: flex;
align-items: center;
gap: 4px; gap: 4px;
margin-top: 4px; font-size: 11px;
opacity: 0.8;
i { i {
font-size: 10px; font-size: 10px;
} }
} }
} }
}
// Security Warning // Security Warning
.security-warning { .security-warning {
...@@ -122,6 +161,147 @@ ...@@ -122,6 +161,147 @@
overflow: hidden; overflow: hidden;
} }
// Loading State
.loading-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
background: linear-gradient(135deg, rgba(249, 250, 251, 0.8), rgba(243, 244, 246, 0.8));
.loading-spinner {
margin-bottom: 16px;
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(59, 130, 246, 0.1);
border-top: 4px solid #3B82F6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
}
.loading-text {
font-size: 14px;
color: #6B7280;
font-weight: 500;
margin: 0;
}
}
// Error State
.error-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
background: linear-gradient(135deg, rgba(254, 242, 242, 0.8), rgba(252, 231, 243, 0.8));
.error-icon {
margin-bottom: 16px;
i {
font-size: 48px;
color: #EF4444;
}
}
.error-title {
font-size: 18px;
font-weight: 600;
color: #DC2626;
margin: 0 0 8px 0;
}
.error-message {
font-size: 14px;
color: #6B7280;
text-align: center;
margin: 0 0 20px 0;
max-width: 300px;
}
.retry-button {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #EF4444;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: #DC2626;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
&:active {
transform: translateY(0);
}
i {
font-size: 12px;
}
}
}
// Empty State
.empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
background: linear-gradient(135deg, rgba(249, 250, 251, 0.8), rgba(243, 244, 246, 0.8));
.empty-icon {
margin-bottom: 16px;
i {
font-size: 48px;
color: #9CA3AF;
}
}
.empty-title {
font-size: 18px;
font-weight: 600;
color: #374151;
margin: 0 0 8px 0;
}
.empty-message {
font-size: 14px;
color: #6B7280;
text-align: center;
margin: 0;
max-width: 300px;
}
}
// Grid Container
.grid-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
// Interaction States // Interaction States
&.hover-enabled:hover { &.hover-enabled:hover {
transform: translateY(-2px); transform: translateY(-2px);
...@@ -189,6 +369,11 @@ ...@@ -189,6 +369,11 @@
} }
// Animation Keyframes // Animation Keyframes
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
...@@ -238,6 +423,15 @@ ...@@ -238,6 +423,15 @@
} }
} }
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
// Aspect Ratio Constraints // Aspect Ratio Constraints
&.aspect-ratio-16-9 { &.aspect-ratio-16-9 {
aspect-ratio: 16/9; aspect-ratio: 16/9;
...@@ -312,38 +506,50 @@ ...@@ -312,38 +506,50 @@
} }
.e-pager { .e-pager {
background-color: rgba(249, 250, 251, 0.8); background: linear-gradient(135deg, rgba(249, 250, 251, 0.9), rgba(243, 244, 246, 0.9));
border-top: 1px solid rgba(229, 231, 235, 0.5); border-top: 1px solid rgba(229, 231, 235, 0.5);
padding: 8px 16px; padding: 12px 20px;
backdrop-filter: blur(10px);
.e-pagercontainer { .e-pagercontainer {
.e-pagercontrol { .e-pagercontrol {
color: inherit; color: #6B7280;
font-size: 12px; font-size: 13px;
font-weight: 500;
} }
} }
} }
.e-toolbar { .e-toolbar {
background-color: rgba(249, 250, 251, 0.8); background: linear-gradient(135deg, rgba(249, 250, 251, 0.9), rgba(243, 244, 246, 0.9));
border-bottom: 1px solid rgba(229, 231, 235, 0.5); border-bottom: 1px solid rgba(229, 231, 235, 0.5);
padding: 8px 16px; padding: 12px 20px;
backdrop-filter: blur(10px);
.e-toolbaritems { .e-toolbaritems {
.e-toolbaritem { .e-toolbaritem {
.e-btn { .e-btn {
background-color: transparent; background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(229, 231, 235, 0.5); border: 1px solid rgba(229, 231, 235, 0.5);
color: inherit; color: #6B7280;
font-size: 12px; font-size: 13px;
padding: 4px 8px; font-weight: 500;
border-radius: 4px; padding: 8px 16px;
transition: all 0.2s ease; border-radius: 6px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
&:hover { &:hover {
background-color: rgba(59, 130, 246, 0.1); background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3); border-color: rgba(59, 130, 246, 0.3);
color: #3B82F6; color: #3B82F6;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
&:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
} }
} }
......
src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts
import { Component, ViewChild, OnInit, OnDestroy, AfterViewInit, Input } from '@angular/core'; import { Component, ViewChild, OnInit, OnDestroy, AfterViewInit, Input } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { GridModule, PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, GridComponent, ToolbarItems, SearchSettingsModel, GroupSettingsModel, FilterSettingsModel, SelectionSettingsModel, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, PdfExportProperties, ExcelExportProperties, LoadingIndicatorModel, Column, SearchService, ResizeService } from '@syncfusion/ej2-angular-grids'; import { GridModule, PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, GridComponent, ToolbarItems, SearchSettingsModel, GroupSettingsModel, FilterSettingsModel, SelectionSettingsModel, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, PdfExportProperties, ExcelExportProperties, LoadingIndicatorModel, Column, SearchService, ResizeService, FreezeService, VirtualScrollService, InfiniteScrollService, LazyLoadGroupService, RowDDService, ContextMenuService } from '@syncfusion/ej2-angular-grids';
import { MenuEventArgs } from '@syncfusion/ej2-navigations'; import { MenuEventArgs } from '@syncfusion/ej2-navigations';
import { ClickEventArgs } from '@syncfusion/ej2-navigations'; import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { DataManager, Query } from '@syncfusion/ej2-data'; import { DataManager, Query } from '@syncfusion/ej2-data';
...@@ -53,7 +53,28 @@ L10n.load({ ...@@ -53,7 +53,28 @@ L10n.load({
selector: 'app-syncfusion-datagrid-widget', selector: 'app-syncfusion-datagrid-widget',
standalone: true, standalone: true,
imports: [CommonModule, GridModule], imports: [CommonModule, GridModule],
providers: [PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, SearchService, ResizeService], providers: [
PageService,
SortService,
FilterService,
GroupService,
ToolbarService,
ExcelExportService,
PdfExportService,
AggregateService,
ColumnMenuService,
DetailRowService,
ReorderService,
EditService,
SearchService,
ResizeService,
FreezeService,
VirtualScrollService,
InfiniteScrollService,
LazyLoadGroupService,
RowDDService,
ContextMenuService
],
templateUrl: './syncfusion-datagrid-widget.component.html', templateUrl: './syncfusion-datagrid-widget.component.html',
styleUrls: ['./syncfusion-datagrid-widget.component.scss'] styleUrls: ['./syncfusion-datagrid-widget.component.scss']
}) })
...@@ -209,7 +230,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -209,7 +230,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public selectedRowColor: string = '#DBEAFE'; public selectedRowColor: string = '#DBEAFE';
public hoverRowColor: string = '#F3F4F6'; public hoverRowColor: string = '#F3F4F6';
// New configuration properties from SyncfusionDatagridConfigComponent // Enhanced configuration properties from SyncfusionDatagridConfigComponent
public allowPaging: boolean = true; public allowPaging: boolean = true;
public allowPageSize: boolean = true; public allowPageSize: boolean = true;
public showPageInfo: boolean = true; public showPageInfo: boolean = true;
...@@ -243,6 +264,14 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -243,6 +264,14 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public includeHeaders: boolean = true; public includeHeaders: boolean = true;
public includeFilters: boolean = false; public includeFilters: boolean = false;
// Enhanced UI properties
public dataCount: number = 0;
public lastUpdated: Date = new Date();
public override originalData: any[] = [];
// Enhanced styling properties
public shadow: string = 'medium';
// Size options for configuration // Size options for configuration
public sizeOptions = [ public sizeOptions = [
{ id: 'small', label: 'Small', description: '400x300px' }, { id: 'small', label: 'Small', description: '400x300px' },
...@@ -445,7 +474,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -445,7 +474,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.selectedRowColor = this.configObj.selectedRowColor || '#DBEAFE'; this.selectedRowColor = this.configObj.selectedRowColor || '#DBEAFE';
this.hoverRowColor = this.configObj.hoverRowColor || '#F3F4F6'; this.hoverRowColor = this.configObj.hoverRowColor || '#F3F4F6';
// New configuration properties // Enhanced configuration properties
this.allowPaging = this.configObj.allowPaging !== undefined ? this.configObj.allowPaging : true; this.allowPaging = this.configObj.allowPaging !== undefined ? this.configObj.allowPaging : true;
this.allowPageSize = this.configObj.allowPageSize !== undefined ? this.configObj.allowPageSize : true; this.allowPageSize = this.configObj.allowPageSize !== undefined ? this.configObj.allowPageSize : true;
this.showPageInfo = this.configObj.showPageInfo !== undefined ? this.configObj.showPageInfo : true; this.showPageInfo = this.configObj.showPageInfo !== undefined ? this.configObj.showPageInfo : true;
...@@ -481,6 +510,15 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -481,6 +510,15 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.exportFilename = this.configObj.exportFilename || 'data-export'; this.exportFilename = this.configObj.exportFilename || 'data-export';
this.includeHeaders = this.configObj.includeHeaders !== undefined ? this.configObj.includeHeaders : true; this.includeHeaders = this.configObj.includeHeaders !== undefined ? this.configObj.includeHeaders : true;
this.includeFilters = this.configObj.includeFilters !== undefined ? this.configObj.includeFilters : false; this.includeFilters = this.configObj.includeFilters !== undefined ? this.configObj.includeFilters : false;
// Enhanced UI properties
this.dataCount = this.configObj.dataCount || 0;
this.lastUpdated = this.configObj.lastUpdated ? new Date(this.configObj.lastUpdated) : new Date();
// Enhanced styling properties
this.shadow = this.configObj.shadow || 'medium';
// Security configuration
this.requireAuth = this.configObj.requireAuth !== undefined ? this.configObj.requireAuth : false; this.requireAuth = this.configObj.requireAuth !== undefined ? this.configObj.requireAuth : false;
this.allowedRoles = this.configObj.allowedRoles || ''; this.allowedRoles = this.configObj.allowedRoles || '';
this.permissionLevel = this.configObj.permissionLevel || 'read'; this.permissionLevel = this.configObj.permissionLevel || 'read';
...@@ -522,6 +560,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -522,6 +560,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
} }
onDataUpdate(data: any[]): void { onDataUpdate(data: any[]): void {
// Store original data
this.originalData = data || [];
this.dataCount = this.originalData.length;
this.lastUpdated = new Date();
// Transform data if transform function is provided // Transform data if transform function is provided
let transformedData = this.transformData(data); let transformedData = this.transformData(data);
...@@ -543,17 +586,30 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -543,17 +586,30 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.columns = Object.keys(transformedData[0]).map(key => ({ this.columns = Object.keys(transformedData[0]).map(key => ({
field: key, field: key,
headerText: this.formatHeader(key), headerText: this.formatHeader(key),
width: 150 width: 150,
textAlign: 'left',
format: 'none',
visible: true,
sortable: this.allowSorting,
filterable: this.allowAdvancedFiltering
})); }));
} }
// Update loading and error states
this.isLoading = false;
this.hasError = false;
} }
onDataBound(args: any): void { onDataBound(args: any): void {
// Apply perspective after data is loaded and rendered, but only once. // Apply perspective after data is loaded and rendered, but only once.
if (this.perspective && !this.isPerspectiveApplied && this.grid) { if (this.perspective && !this.isPerspectiveApplied && this.grid) {
try {
setTimeout(() => { setTimeout(() => {
this.setWidgetState(this.perspective as string); this.setWidgetState(this.perspective as string);
}, 50); // Small delay to ensure rendering is complete }, 50); // Small delay to ensure rendering is complete
} catch (error) {
console.warn('Error applying perspective to grid:', error);
}
} }
} }
...@@ -673,6 +729,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -673,6 +729,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
toolbarClick(args: ClickEventArgs): void { toolbarClick(args: ClickEventArgs): void {
if (!this.grid || !args?.item?.id) return; if (!this.grid || !args?.item?.id) return;
try {
const fileName = `${this.title}.xlsx`; const fileName = `${this.title}.xlsx`;
if (args.item.id.includes('_excelexport')) { if (args.item.id.includes('_excelexport')) {
let exportProperties: ExcelExportProperties = { let exportProperties: ExcelExportProperties = {
...@@ -693,6 +750,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -693,6 +750,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
} else if (args.item.id.includes('_print')) { } else if (args.item.id.includes('_print')) {
this.grid.print(); this.grid.print();
} }
} catch (error) {
console.error('Error in toolbar click:', error);
this.hasError = true;
this.errorMessage = 'Export failed. Please try again.';
}
} }
actionComplete(args: any) { actionComplete(args: any) {
...@@ -704,6 +766,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -704,6 +766,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
onColumnMenuClick(args: MenuEventArgs): void { onColumnMenuClick(args: MenuEventArgs): void {
if (!args.item?.id || !this.grid) { return; } if (!args.item?.id || !this.grid) { return; }
try {
if (args.item.id.startsWith('aggregate_')) { if (args.item.id.startsWith('aggregate_')) {
const colField = (args as any)?.column?.field; const colField = (args as any)?.column?.field;
if (!colField) { return; } if (!colField) { return; }
...@@ -764,6 +827,9 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -764,6 +827,9 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.grid?.refreshColumns(); // Refresh columns to show/hide aggregates this.grid?.refreshColumns(); // Refresh columns to show/hide aggregates
this.grid?.refresh(); // Refresh grid to recalculate aggregates this.grid?.refresh(); // Refresh grid to recalculate aggregates
} }
} catch (error) {
console.error('Error in column menu click:', error);
}
} }
private formatHeader(key: string): string { private formatHeader(key: string): string {
......
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