@@ -1,4 +1,4 @@

 <h3><?= $this->generateLabel().$this->xlabel ?></h3>

 <div class="grid-container" data-rows="<?= $this->intRows ?>" data-cols="<?= $this->intCols ?>" data-field-id="<?= $this->id ?>">

 </div>

-<input type="hidden" name="<?= $this->id ?>" id="<?= $this->id ?>" value="<?= $this->value ?>">

\ No newline at end of file

+<input type="hidden" name="<?= $this->id ?>" id="ctrl_<?= $this->id ?>" value="<?= $this->value ?>">

\ No newline at end of file

@@ -1,4 +1,4 @@

-document.addEventListener('DOMContentLoaded', () => {

+function init() {

   const gridContainer = document.querySelector('.grid-container');

   if (!gridContainer) return;

@@ -11,7 +11,8 @@ document.addEventListener('DOMContentLoaded', () => {

   // Grid erstellen

   const fragment = document.createDocumentFragment();

   // Erstelle die Zellen basierend auf Reihen und Spalten (gridRows * gridCols)

-  for (let i = 0; i < gridRows * gridCols; i++) {

+  for (let i = 0; i < gridRows * gridCols; i++)

+  {

     const gridItem = document.createElement('div');

     gridItem.classList.add('grid-cell');

     gridItem.dataset.index = i; // Weise jeder Zelle ihren Index zu

@@ -25,10 +26,12 @@ document.addEventListener('DOMContentLoaded', () => {

    * @param {number} index - Der Index der Zelle

    */

   function toggleCell(index) {

-    if (selectedIndices.includes(index)) {

+    if (selectedIndices.includes(index))

+    {

       // Zelle abwählen

       removeRowOrColumn(index);

-    } else {

+    } else

+    {

       // Zelle hinzufügen

       selectedIndices.push(index);

       fillSelection(); // Rechteck auffüllen

@@ -46,14 +49,16 @@ document.addEventListener('DOMContentLoaded', () => {

     const row = Math.floor(index / gridCols); // Berechnet die aktuelle Reihe

     const col = index % gridCols; // Berechnet die aktuelle Spalte

-    if (col === 0) {

+    if (col === 0)

+    {

       // Entferne die gesamte Reihe, wenn das Feld in der ersten Spalte ist

       // UND entferne alle darunterliegenden Reihen

       selectedIndices = selectedIndices.filter(cell => {

         const cellRow = Math.floor(cell / gridCols);

         return cellRow < row; // Entferne alle Reihen >= der aktuellen

       });

-    } else {

+    } else

+    {

       // Entferne die gesamte Spalte, wenn das Feld NICHT in der ersten Spalte ist

       selectedIndices = selectedIndices.filter(cell => {

         const cellCol = cell % gridCols;

@@ -76,11 +81,13 @@ document.addEventListener('DOMContentLoaded', () => {

     const lastCol = Math.max(...selectedIndices.map(cell => cell % gridCols));

     // Prüfe jede Spalte von links nach rechts

-    for (let col = firstCol; col <= lastCol; col++) {

+    for (let col = firstCol; col <= lastCol; col++)

+    {

       // Überprüfen, ob diese Spalte komplett leer ist

       const isColumnEmpty = !selectedIndices.some(cell => cell % gridCols === col);

-      if (isColumnEmpty) {

+      if (isColumnEmpty)

+      {

         // Entferne alle Zellen in Spalten rechts von der leeren Spalte

         selectedIndices = selectedIndices.filter(cell => cell % gridCols < col);

         break; // Stoppe, wenn wir eine leere Spalte finden

@@ -102,8 +109,10 @@ document.addEventListener('DOMContentLoaded', () => {

     // Rechteck auffüllen: Alle Zellen zwischen den Ecken hinzufügen

     const newSelection = [];

-    for (let row = firstRow; row <= lastRow; row++) {

-      for (let col = firstCol; col <= lastCol; col++) {

+    for (let row = firstRow; row <= lastRow; row++)

+    {

+      for (let col = firstCol; col <= lastCol; col++)

+      {

         const cellIndex = row * gridCols + col;

         newSelection.push(cellIndex);

       }

@@ -133,9 +142,12 @@ document.addEventListener('DOMContentLoaded', () => {

    * Speichert die Auswahl in einem versteckten Eingabeelement

    */

   function saveSelection() {

-    const gridDataInput = document.getElementById('grid-data');

-    if (gridDataInput) {

+    const gridDataInput = document.getElementById('ctrl_vr_gpw_grid');

+    if (gridDataInput)

+    {

       gridDataInput.value = JSON.stringify(selectedIndices);

     }

   }

-});

+}

+document.addEventListener('DOMContentLoaded', () => {init()});

+document.addEventListener('turbo:render', () => {init()});