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.

resources/views/filament/admin/resources/site-translations/datagrid.blade.php

@@ -12,7 +12,7 @@
         $csrfToken = csrf_token();
     @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;">
             <p>DataGrid yükleniyor...</p>
         </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" />
     <script>
         (function() {
-            // Filament 4 varsayılan olarak 'dark'/'light' modunu body class'ı ile belirtir (ör: 'fi-dark' veya 'fi-light')
             function setDevExtremeThemeCss() {
                 var themeCss = document.getElementById('devextreme-theme-css');
                 if (!themeCss) return;
-                var isDark = document.body.classList.contains('fi-dark');
-                // Eğer dark mod ise dark css'i, değilse light css'i kullan
+                // Filament v3 usually uses 'dark' class on document.documentElement
+                var isDark = document.documentElement.classList.contains('dark');
+                
                 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.light.css';
+                
                 if (themeCss.getAttribute('href') !== href) {
                     themeCss.setAttribute('href', href);
                 }
             }
-            // Yüklendiğinde uygula
+
+            // Apply on load
+            if (document.readyState === 'loading') {
                 document.addEventListener('DOMContentLoaded', setDevExtremeThemeCss);
-            // Tema değişirse tekrar uygula (Filament 4 sisteminde 'body' class'ı değişir)
-            new MutationObserver(setDevExtremeThemeCss).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+            } else {
+                setDevExtremeThemeCss();
+            }
+
+            // Watch for theme changes on html element
+            new MutationObserver(setDevExtremeThemeCss).observe(document.documentElement, { 
+                attributes: true, 
+                attributeFilter: ['class'] 
+            });
         })();
     </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, {
+                    remoteOperations: true,
                     dataSource: dataGrid,
                     columns: columns,
                     editing: {