Enhance Site Translations DataGrid Functionality: Updated the DataGrid view to include the wire:ignore directive for improved Livewire compatibility. Adjusted the theme application logic to dynamically respond to changes in the document's class, ensuring a seamless user experience across different themes. Enabled remote operations for the DataGrid, enhancing data handling capabilities.
This commit is contained in:
@@ -12,7 +12,7 @@
|
|||||||
$csrfToken = csrf_token();
|
$csrfToken = csrf_token();
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<div id="site-translations-datagrid" style="margin-top: 1rem;">
|
<div wire:ignore id="site-translations-datagrid" style="margin-top: 1rem;">
|
||||||
<div style="padding: 20px; text-align: center; color: #666;">
|
<div style="padding: 20px; text-align: center; color: #666;">
|
||||||
<p>DataGrid yükleniyor...</p>
|
<p>DataGrid yükleniyor...</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -43,23 +43,33 @@
|
|||||||
<link id="devextreme-theme-css" rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
|
<link id="devextreme-theme-css" rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
// Filament 4 varsayılan olarak 'dark'/'light' modunu body class'ı ile belirtir (ör: 'fi-dark' veya 'fi-light')
|
|
||||||
function setDevExtremeThemeCss() {
|
function setDevExtremeThemeCss() {
|
||||||
var themeCss = document.getElementById('devextreme-theme-css');
|
var themeCss = document.getElementById('devextreme-theme-css');
|
||||||
if (!themeCss) return;
|
if (!themeCss) return;
|
||||||
var isDark = document.body.classList.contains('fi-dark');
|
// Filament v3 usually uses 'dark' class on document.documentElement
|
||||||
// Eğer dark mod ise dark css'i, değilse light css'i kullan
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
|
||||||
var href = isDark
|
var href = isDark
|
||||||
? 'https://cdn3.devexpress.com/jslib/23.1.5/css/dx.dark.css'
|
? 'https://cdn3.devexpress.com/jslib/23.1.5/css/dx.dark.css'
|
||||||
: 'https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css';
|
: 'https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css';
|
||||||
|
|
||||||
if (themeCss.getAttribute('href') !== href) {
|
if (themeCss.getAttribute('href') !== href) {
|
||||||
themeCss.setAttribute('href', href);
|
themeCss.setAttribute('href', href);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Yüklendiğinde uygula
|
|
||||||
|
// Apply on load
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
document.addEventListener('DOMContentLoaded', setDevExtremeThemeCss);
|
document.addEventListener('DOMContentLoaded', setDevExtremeThemeCss);
|
||||||
// Tema değişirse tekrar uygula (Filament 4 sisteminde 'body' class'ı değişir)
|
} else {
|
||||||
new MutationObserver(setDevExtremeThemeCss).observe(document.body, { attributes: true, attributeFilter: ['class'] });
|
setDevExtremeThemeCss();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Watch for theme changes on html element
|
||||||
|
new MutationObserver(setDevExtremeThemeCss).observe(document.documentElement, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ['class']
|
||||||
|
});
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script>
|
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script>
|
||||||
@@ -227,6 +237,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
const dataGridInstance = new DevExpress.ui.dxDataGrid(gridElement, {
|
const dataGridInstance = new DevExpress.ui.dxDataGrid(gridElement, {
|
||||||
|
remoteOperations: true,
|
||||||
dataSource: dataGrid,
|
dataSource: dataGrid,
|
||||||
columns: columns,
|
columns: columns,
|
||||||
editing: {
|
editing: {
|
||||||
|
|||||||
Reference in New Issue
Block a user