From 1ce765eb94d99465b77e752da3e0371e2bb176c2 Mon Sep 17 00:00:00 2001
From: indumathi-murali <57896631+indumathi-murali@users.noreply.github.com>
Date: Wed, 20 Aug 2025 14:57:27 +0530
Subject: [PATCH] 969759: committed sample level issues reported from dev team.
---
src/components/TreeGrid/App.css | 8 ++--
src/components/TreeGrid/App.tsx | 74 ++++++++++++++++++++++++++++-----
2 files changed, 68 insertions(+), 14 deletions(-)
diff --git a/src/components/TreeGrid/App.css b/src/components/TreeGrid/App.css
index 82e8233..e6653a4 100644
--- a/src/components/TreeGrid/App.css
+++ b/src/components/TreeGrid/App.css
@@ -1552,14 +1552,14 @@ th[aria-colindex="5"] .e-filtermenudiv {
}
@media (min-width: 1023px) {
- .e-menu-wrapper.e-popup.e-menu-popup,
- .e-menu-container.e-popup.e-menu-popup {
+ .e-template-menu.e-menu-wrapper.e-popup.e-menu-popup,
+ .e-template-menu.e-menu-container.e-popup.e-menu-popup {
margin-left: -5%;
top: 66px !important;
}
}
@media (min-width: 800px) and (max-width: 1024px) {
- .e-menu-wrapper.e-popup.e-menu-popup {
+ .e-template-menu.e-menu-wrapper.e-popup.e-menu-popup {
margin-left: 5px !important;
}
}
@@ -1574,7 +1574,7 @@ th[aria-colindex="5"] .e-filtermenudiv {
margin-left: 0px !important;
}
}
-.e-menu-wrapper ul .e-menu-item .e-caret {
+.e-template-menu.e-menu-wrapper ul .e-menu-item .e-caret {
top: 0px !important;
right: 0px !important;
}
diff --git a/src/components/TreeGrid/App.tsx b/src/components/TreeGrid/App.tsx
index 53a686c..8803639 100644
--- a/src/components/TreeGrid/App.tsx
+++ b/src/components/TreeGrid/App.tsx
@@ -4,7 +4,7 @@ import { useMemo, useRef, useState, useEffect } from 'react';
import { parentsUntil, ValueType, FilterBarMode, CheckboxSelectionType, SelectionType, CommandModel, FailureEventArgs, ContextMenuClickEventArgs, getObject } from '@syncfusion/ej2-react-grids';
import { TreeGridComponent, FilterType, LoadingIndicatorModel, AggregateTemplateContext, RowPosition, AggregatesDirective, AggregateDirective, AggregateColumnsDirective, AggregateColumnDirective, ColumnModel, FilterHierarchyMode, SelectionSettingsModel, ContextMenuItem, ToolbarItems, FilterSettingsModel, EditMode, TreeGridColumn, RowDD, Aggregate, Resize, Toolbar, ColumnChooser, CommandColumn, Edit, ContextMenu, ColumnMenu, VirtualScroll, Page, PdfExport, ExcelExport, Freeze, ColumnsDirective, ColumnDirective, Filter, Sort, Reorder, Inject, ITreeData } from '@syncfusion/ej2-react-treegrid';
import { projectDetails } from './datasource';
-import { ButtonComponent, CheckBoxComponent, ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
+import { ButtonComponent, CheckBoxComponent, ChipListComponent, ChipsDirective, ChipDirective, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
import { AppBarComponent, MenuComponent, SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { AutoComplete, FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';
import { isNullOrUndefined, DateFormatOptions, createElement, closest } from '@syncfusion/ej2-base';
@@ -43,7 +43,7 @@ export const App = () => {
let selectionType: string = "Multiple";
let selectNewRowPosition: string = "Top";
let selectEditMode: string = "Row";
- const dateRules: object = { date: ['M/d/yyyy', 'Please enter a valid date']};
+ const dateRules: object = { date: ['M/d/yyyy', 'Please enter a valid date'], required: true };
let dateParams : any = { params: { format: 'M/d/yyyy' } };
let showEditLabel: boolean = false;
const durationIDRules: object = { required: true, number: true };
@@ -84,6 +84,10 @@ export const App = () => {
let menuObj: MenuComponent;
const taskIDRules = { required: true };
const taskNameRules = { required: true };
+ let dateFormat = {
+ format: "dd/MM/yyyy",
+ type: "date"
+ };
const costRules = { required: true, number: true };
let menuRef!: MenuComponent;
let menuMobileRef!: MenuComponent;
@@ -430,6 +434,7 @@ export const App = () => {
filterBarTypeOptions: [
{ value: "CheckBox", text: "CheckBox" },
{ value: "Excel", text: "Excel" },
+ { value: "Menu", text: "Menu" },
{ value: "FilterBar", text: "FilterBar" }
],
filterHierarchyOptions: [
@@ -927,6 +932,19 @@ export const App = () => {
startWalkthrough();
},
+ onDataBound: () => {
+ if (treegridInst) {
+ if (treegridInst.filterSettings.type === "FilterBar") {
+ document.querySelectorAll('.e-filterbar th[e-mappinguid="grid-column10005"], .e-filterbar th[e-mappinguid="grid-column10004"], .e-filterbar th[e-mappinguid="grid-column10012"], .e-filterbar th[e-mappinguid="grid-column10008"], .e-filterbar th[e-mappinguid="grid-column10007"]').forEach(cell => {
+ var val: any = (cell as any).querySelector('div.e-fltrinputdiv');
+ if (!isNullOrUndefined(val)) {
+ val.style.display = "none";
+ }
+ });
+ }
+ }
+ },
+
exportComplete:(args : any) => {
treegridInst.showColumns(['Priority']);
},
@@ -989,7 +1007,7 @@ export const App = () => {
textboxInstance.value = "";
dialogInstance!.hide();
} else if (args.target.textContent === "Search") {
- if (selectedField && selectedOperator && selectedHierarchy) {
+ if (selectedField && selectedOperator && selectedHierarchy && !isNullOrUndefined(searchText)) {
treegridInst.searchSettings = {
fields: [selectedField],
operator: selectedOperator,
@@ -1351,20 +1369,40 @@ export const App = () => {
}
},
- singleColumnSettingsDateFormat : ((args: any) => {
+ singleColumnSettingsDateFormat: ((args: any) => {
let columns = treegridInst.getColumns();
for (let i = 0; i < columns.length; i++) {
if (columns[i].field === 'EndDate') {
+ const aggregate = treegridInst.aggregates[0];
+ if (aggregate && aggregate.columns) {
+ const endDateAggregate = aggregate.columns.find(col => col.field === 'EndDate');
+ if (endDateAggregate) {
+ endDateAggregate.format = { format: args.event.currentTarget.innerText, type: 'date' };
+ }
+ }
if (typeof treegridInst.getColumns()[i].format === 'string' || !treegridInst.getColumns()[i].format) {
treegridInst.getColumns()[i].format = { format: '', type: 'date' };
- }
+ }
(treegridInst.getColumns()[i].format as DateFormatOptions).format = args.event.currentTarget.innerText;
(treegridInst.getColumns()[i].format as DateFormatOptions).type = 'date';
- treegridInst.refreshColumns();
+ treegridInst.columns = columns;
}
}
}),
+
+ singleColumnSettingsFreeze: ((args: any, data?: any) => {
+ if (treegridInst) {
+ let columns = treegridInst.getColumns();
+ columns.forEach((col) => {
+ if (col.field === "EndDate") {
+ col.freeze = data.properties.text;
+ treegridInst.columns = columns;
+ }
+ });
+ }
+ }),
+
handleFilterTypeChange: (value: any, dropRef: any) => {
const barstatusElement = document.getElementById("barstatus");
const filterbarmodeElement = document.getElementById("filterbarmode");
@@ -1481,12 +1519,25 @@ export const App = () => {
text: 'Column Date',
iconCss: 'e-icons e-settings icon',
items: [
+ {
+ text: 'Format',
+ items: [
{ text: 'yMMM', id:'yMMM', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: false },
{ text: 'dd/MM/yyyy', id: 'dd/MM/yyyy', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: true },
{ text: 'dd.MM.yyyy', id: 'dd.MM.yyyy', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: false },
{ text: 'dd/MM/yyyy hh:mm a', id: 'dd/MM/yyyy hh:mm a', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: false },
{ text: 'MM/dd/yyyy hh:mm:ss a', id: 'MM/dd/yyyy hh:mm:ss a', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: false },
]
+ }, {
+ text: 'Freeze',
+ items: [
+ { text: 'Left', id: 'Freeze Left', method: menuItemMethods.singleColumnSettingsFreeze, checkbox: true },
+ { text: 'Right', id: 'Freeze Right', method: menuItemMethods.singleColumnSettingsFreeze, checkbox: false },
+ { text: 'Fixed', id: 'Freeze Fixed', method: menuItemMethods.singleColumnSettingsFreeze, checkbox: false },
+ { text: 'None', id: 'Freeze None', method: menuItemMethods.singleColumnSettingsFreeze, checkbox: false },
+ ]
+ }
+ ],
},
],
};
@@ -1510,6 +1561,7 @@ export const App = () => {
items: [
{ id: 'selection', label: 'Allow Selection', defaultChecked: true },
{ id: 'textwrap', label: 'Allow Text Wrap', defaultChecked: false },
+ { id: 'paging', label: 'Allow Paging', defaultChecked: true },
{ id: 'showcolumnmenu', label: 'Show Column Menu', defaultChecked: false },
{ id: 'general_treegrid', type: 'Separator' }
]
@@ -2042,6 +2094,8 @@ export const App = () => {
}
else if (selectedListItemRef.current === "Tree Grid Settings") {
treegridInst.allowTextWrap = prev.textwrap;
+ treegridInst.allowPaging = prev.paging;
+ treegridInst.enableVirtualization = !prev.paging;
treegridInst.showColumnMenu = prev.showcolumnmenu;
treegridInst.enableAltRow = prev.altrow;
if (treegridInst.enableAltRow) {
@@ -2284,7 +2338,6 @@ export const App = () => {
allowSorting: false,
headerTemplate: treegridCommonTemplates.durationTemplate,
validationRules: durationIDRules,
- filterTemplate: treegridFilterTemplates.filterTemplate,
editType: "numericedit",
minWidth: 50,
maxWidth: 200
@@ -2330,6 +2383,7 @@ export const App = () => {
actionBegin={handleTreeGridEvent.actionBegin}
toolbarClick={handleTreeGridEvent.toolbarClick}
created={handleTreeGridEvent.onTreeGridCreated}
+ dataBound={handleTreeGridEvent.onDataBound}
excelExportComplete={handleTreeGridEvent.exportComplete}
>
@@ -2337,12 +2391,12 @@ export const App = () => {
-
-
+
+
-
+