From bb7ae17b4a3fe77cf32e82f59a4fe03f268ac116 Mon Sep 17 00:00:00 2001
From: indumathi-murali <57896631+indumathi-murali@users.noreply.github.com>
Date: Thu, 28 Aug 2025 11:42:31 +0530
Subject: [PATCH] Revert "969759: committed sample level issues reported from
dev team."
This reverts commit 1ce765eb94d99465b77e752da3e0371e2bb176c2.
964831: disable properties issue in selection.
978353: revert this commit.
---
src/components/TreeGrid/App.css | 8 ++--
src/components/TreeGrid/App.tsx | 74 +++++----------------------------
2 files changed, 14 insertions(+), 68 deletions(-)
diff --git a/src/components/TreeGrid/App.css b/src/components/TreeGrid/App.css
index e6653a4..82e8233 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-template-menu.e-menu-wrapper.e-popup.e-menu-popup,
- .e-template-menu.e-menu-container.e-popup.e-menu-popup {
+ .e-menu-wrapper.e-popup.e-menu-popup,
+ .e-menu-container.e-popup.e-menu-popup {
margin-left: -5%;
top: 66px !important;
}
}
@media (min-width: 800px) and (max-width: 1024px) {
- .e-template-menu.e-menu-wrapper.e-popup.e-menu-popup {
+ .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-template-menu.e-menu-wrapper ul .e-menu-item .e-caret {
+.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 8803639..53a686c 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, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
+import { ButtonComponent, CheckBoxComponent, ChipListComponent, ChipsDirective, ChipDirective } 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'], required: true };
+ const dateRules: object = { date: ['M/d/yyyy', 'Please enter a valid date']};
let dateParams : any = { params: { format: 'M/d/yyyy' } };
let showEditLabel: boolean = false;
const durationIDRules: object = { required: true, number: true };
@@ -84,10 +84,6 @@ 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;
@@ -434,7 +430,6 @@ export const App = () => {
filterBarTypeOptions: [
{ value: "CheckBox", text: "CheckBox" },
{ value: "Excel", text: "Excel" },
- { value: "Menu", text: "Menu" },
{ value: "FilterBar", text: "FilterBar" }
],
filterHierarchyOptions: [
@@ -932,19 +927,6 @@ 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']);
},
@@ -1007,7 +989,7 @@ export const App = () => {
textboxInstance.value = "";
dialogInstance!.hide();
} else if (args.target.textContent === "Search") {
- if (selectedField && selectedOperator && selectedHierarchy && !isNullOrUndefined(searchText)) {
+ if (selectedField && selectedOperator && selectedHierarchy) {
treegridInst.searchSettings = {
fields: [selectedField],
operator: selectedOperator,
@@ -1369,40 +1351,20 @@ 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.columns = columns;
+ treegridInst.refreshColumns();
}
}
}),
-
- 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");
@@ -1519,25 +1481,12 @@ 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 },
- ]
- }
- ],
},
],
};
@@ -1561,7 +1510,6 @@ 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' }
]
@@ -2094,8 +2042,6 @@ 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) {
@@ -2338,6 +2284,7 @@ export const App = () => {
allowSorting: false,
headerTemplate: treegridCommonTemplates.durationTemplate,
validationRules: durationIDRules,
+ filterTemplate: treegridFilterTemplates.filterTemplate,
editType: "numericedit",
minWidth: 50,
maxWidth: 200
@@ -2383,7 +2330,6 @@ export const App = () => {
actionBegin={handleTreeGridEvent.actionBegin}
toolbarClick={handleTreeGridEvent.toolbarClick}
created={handleTreeGridEvent.onTreeGridCreated}
- dataBound={handleTreeGridEvent.onDataBound}
excelExportComplete={handleTreeGridEvent.exportComplete}
>
@@ -2391,12 +2337,12 @@ export const App = () => {
-
-
+
+
-
+