Skip to content

Grid Demos: fix csp in treelist-overview and grid-rowselection #33618

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
flagmanAndrew merged 5 commits into from
May 19, 2026
Merged

Grid Demos: fix csp in treelist-overview and grid-rowselection #33618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
257db18
csp treelist-overview
flagmanAndrew May 18, 2026
40329e4
treelist-overview fix angular and add alt
flagmanAndrew May 18, 2026
63e1c07
csp grid-rowselection jquery
flagmanAndrew May 18, 2026
5927c41
csp remove grid-rowselection exception
flagmanAndrew May 18, 2026
418f71f
treelist-overview etalon
flagmanAndrew May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<div class="demo-container">
<div id="gridContainer"></div>
<div id="employeeInfo">
<img class="employeePhoto" alt="Employee photo" style="visibility: hidden" />
<img class="employeePhoto hidden" alt="Employee photo" />
<p class="employeeNotes"></p>
</div>
</div>
Expand Down
5 changes: 4 additions & 1 deletion apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,10 @@ $(() => {
const data = selectedItems.selectedRowsData[0];
if (data) {
$('.employeeNotes').text(data.Notes);
$('.employeePhoto').attr('src', data.Picture).attr('style', null);
$('.employeePhoto').attr('src', data.Picture).removeClass('hidden');
} else {
$('.employeeNotes').text('');
$('.employeePhoto').addClass('hidden');
Comment thread
dmirgaev marked this conversation as resolved.
}
},
});
Expand Down
4 changes: 4 additions & 0 deletions apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
padding: 20px;
}

#employeeInfo .employeePhoto.hidden {
visibility: hidden;
}

#employeeInfo .employeeNotes {
padding-top: 20px;
text-align: justify;
Expand Down
4 changes: 1 addition & 3 deletions apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,8 @@
::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;
Expand Down
9 changes: 4 additions & 5 deletions apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,11 @@
></dxi-tree-list-column>
<div *dxTemplate="let options of 'employeeTemplate'">
@if(options.data.Task_Assigned_Employee) {
<div
<img
class="img"
style.background-image="url('{{
options.data.Task_Assigned_Employee.Picture
}}')"
></div>
[src]="options.data.Task_Assigned_Employee.Picture"
alt=""
Comment thread
dmirgaev marked this conversation as resolved.
/>
} @if(options.data.Task_Assigned_Employee) {
<span class="name">{{ options.data.Task_Assigned_Employee.Name }}</span>
}
Expand Down
6 changes: 5 additions & 1 deletion apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ const EmployeeCell = (props: TreeListTypes.ColumnCellTemplateData) => {

return (
<>
<div className="img" style={{ backgroundImage: `url(${employee.Picture})` }} />
<img
className="img"
src={employee.Picture}
alt=""
Comment thread
dmirgaev marked this conversation as resolved.
/>
&nbsp;
<span className="name">{employee.Name}</span>
</>
Expand Down
4 changes: 1 addition & 3 deletions apps/demos/Demos/TreeList/Overview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,8 @@
.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;
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ const EmployeeCell = (props) => {
}
return (
<>
<div
<img
className="img"
style={{ backgroundImage: `url(${employee.Picture})` }}
src={employee.Picture}
Comment thread
flagmanAndrew marked this conversation as resolved.
alt=""
Comment thread
dmirgaev marked this conversation as resolved.
/>
&nbsp;
<span className="name">{employee.Name}</span>
Expand Down
4 changes: 1 addition & 3 deletions apps/demos/Demos/TreeList/Overview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,8 @@
.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;
Expand Down
9 changes: 4 additions & 5 deletions apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<template>
<div>
<div
<img
v-if="cellData.Task_Assigned_Employee"
:style="'background-image:url(' + cellData.Task_Assigned_Employee.Picture + ')'"
:src="cellData.Task_Assigned_Employee.Picture"
Comment thread
flagmanAndrew marked this conversation as resolved.
alt=""
Comment thread
dmirgaev marked this conversation as resolved.
class="img"
/>
<span
Expand All @@ -28,10 +29,8 @@ withDefaults(defineProps<{
.img {
height: 50px;
width: 50px;
object-fit: contain;
margin-right: 14px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border-radius: 25px;
border: 1px solid lightgray;
background-color: #fff;
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/TreeList/Overview/jQuery/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ $(() => {
const currentEmployee = options.data.Task_Assigned_Employee;
if (currentEmployee) {
container
.append($('<div>', { class: 'img', style: `background-image:url(${currentEmployee.Picture});` }))
.append($('<img>', { class: 'img', src: currentEmployee.Picture, alt: '' }))
Comment thread
dmirgaev marked this conversation as resolved.
.append('\n')
.append($('<span>', { class: 'name', text: currentEmployee.Name }));
}
Expand Down
4 changes: 1 addition & 3 deletions apps/demos/Demos/TreeList/Overview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,8 @@
.img {
height: 50px;
width: 50px;
object-fit: contain;
Comment thread
dmirgaev marked this conversation as resolved.
margin-right: 10px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border-radius: 25px;
border: 1px solid lightgray;
background-color: #fff;
Expand Down
Binary file modified apps/demos/testing/etalons/TreeList-Overview (fluent.blue.light).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified apps/demos/testing/etalons/TreeList-Overview (material.blue.light).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 0 additions & 6 deletions apps/demos/utils/server/csp-server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,6 @@ const CSP_DEMO_ALLOWLIST = {
},
'TreeList/Overview': {
'img-src': ['data:'],
Comment thread
flagmanAndrew marked this conversation as resolved.
// TODO: fix inline style in cellTemplate (background-image)
'style-src': ["'unsafe-inline'"],
},
// globalize/message.js uses new Function() internally
'Localization/UsingGlobalize': {
Expand All @@ -192,10 +190,6 @@ const CSP_DEMO_ALLOWLIST = {
'HtmlEditor/MarkdownSupport': {
'script-src': ["'unsafe-inline'"],
},
// TODO: fix inline style attribute
'DataGrid/RowSelection': {
'style-src': ["'unsafe-inline'"],
},
// AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh
'Chat/AIAndChatbotIntegration': {
'script-src': ["'unsafe-inline'"],
Expand Down
Loading