From 7219c161474c028c499fcb52faeaef46b4f1e885 Mon Sep 17 00:00:00 2001 From: Aleksey Semikozov Date: Fri, 22 May 2026 05:35:40 -0300 Subject: [PATCH] Revert "Grid Demos: fix csp in treelist-overview and grid-rowselection (#33618)" This reverts commit 685ce5f5e04fc550ec5aafbd4283188513316515. --- .../DataGrid/RowSelection/jQuery/index.html | 2 +- .../DataGrid/RowSelection/jQuery/index.js | 5 +---- .../DataGrid/RowSelection/jQuery/styles.css | 4 ---- .../Overview/Angular/app/app.component.css | 4 +++- .../Overview/Angular/app/app.component.html | 9 +++++---- .../TreeList/Overview/React/EmployeeCell.tsx | 6 +----- .../Demos/TreeList/Overview/React/styles.css | 4 +++- .../TreeList/Overview/ReactJs/EmployeeCell.js | 5 ++--- .../TreeList/Overview/ReactJs/styles.css | 4 +++- .../TreeList/Overview/Vue/EmployeeCell.vue | 9 +++++---- .../Demos/TreeList/Overview/jQuery/index.js | 2 +- .../Demos/TreeList/Overview/jQuery/styles.css | 4 +++- .../TreeList-Overview (fluent.blue.light).png | Bin 86011 -> 85667 bytes ...reeList-Overview (material.blue.light).png | Bin 82818 -> 82455 bytes apps/demos/utils/server/csp-server.js | 6 ++++++ 15 files changed, 34 insertions(+), 30 deletions(-) diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html index 3df7c4fa3c9a..cf96fef7f47c 100644 --- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html +++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html @@ -16,7 +16,7 @@
- +

diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js index 1dbbf8434c33..e50c86807de7 100644 --- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js +++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js @@ -27,10 +27,7 @@ $(() => { const data = selectedItems.selectedRowsData[0]; if (data) { $('.employeeNotes').text(data.Notes); - $('.employeePhoto').attr('src', data.Picture).removeClass('hidden'); - } else { - $('.employeeNotes').text(''); - $('.employeePhoto').addClass('hidden'); + $('.employeePhoto').attr('src', data.Picture).attr('style', null); } }, }); diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css index 88181fa44e06..5371ee3dbb56 100644 --- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css @@ -4,10 +4,6 @@ padding: 20px; } -#employeeInfo .employeePhoto.hidden { - visibility: hidden; -} - #employeeInfo .employeeNotes { padding-top: 20px; text-align: justify; diff --git a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css index 10d2abe7ba88..85fd92141ed7 100644 --- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css @@ -15,8 +15,10 @@ ::ng-deep .img { height: 50px; width: 50px; - object-fit: contain; margin-right: 10px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; border-radius: 25px; border: 1px solid lightgray; background-color: #fff; diff --git a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html index dc1965d0aa5a..972adc2ba2b8 100644 --- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html +++ b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html @@ -70,11 +70,12 @@ >
@if(options.data.Task_Assigned_Employee) { - + style.background-image="url('{{ + options.data.Task_Assigned_Employee.Picture + }}')" + >
} @if(options.data.Task_Assigned_Employee) { {{ options.data.Task_Assigned_Employee.Name }} } diff --git a/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx b/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx index 1b729d397ad4..54cda7266f8e 100644 --- a/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx +++ b/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx @@ -10,11 +10,7 @@ const EmployeeCell = (props: TreeListTypes.ColumnCellTemplateData) => { return ( <> - +
  {employee.Name} diff --git a/apps/demos/Demos/TreeList/Overview/React/styles.css b/apps/demos/Demos/TreeList/Overview/React/styles.css index ae902455272f..d575b8ee7dfd 100644 --- a/apps/demos/Demos/TreeList/Overview/React/styles.css +++ b/apps/demos/Demos/TreeList/Overview/React/styles.css @@ -15,8 +15,10 @@ .img { height: 50px; width: 50px; - object-fit: contain; margin-right: 10px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; border-radius: 25px; border: 1px solid lightgray; background-color: #fff; diff --git a/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js b/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js index 9dd1aaf40eed..8f89e5e1b932 100644 --- a/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js +++ b/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js @@ -7,10 +7,9 @@ const EmployeeCell = (props) => { } return ( <> -   {employee.Name} diff --git a/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css b/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css index ae902455272f..d575b8ee7dfd 100644 --- a/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css @@ -15,8 +15,10 @@ .img { height: 50px; width: 50px; - object-fit: contain; margin-right: 10px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; border-radius: 25px; border: 1px solid lightgray; background-color: #fff; diff --git a/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue b/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue index 1e14145028ca..7b27f480665c 100644 --- a/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue +++ b/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue @@ -1,9 +1,8 @@