Index: sources/gui/qml/components/GridSelection.qml
===================================================================
diff -u -reefe8acbe5b10deb379c5e4ceabeaa95d429410e -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/GridSelection.qml	(.../GridSelection.qml)	(revision eefe8acbe5b10deb379c5e4ceabeaa95d429410e)
+++ sources/gui/qml/components/GridSelection.qml	(.../GridSelection.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,15 +1,15 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2020-2024 Diality Inc. - All Rights Reserved.
  * \copyright
  * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
  * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
  *
- * \file RectSelectCreateTreatment.qml
- * \author (last) Peter Lucia
- * \date (last) 06-Oct-2020
- * \author (original) Peter Lucia
- * \date (original) 03-Aug-2020
+ * \file    GridSelection.qml
+ * \author  (last)      Behrouz NematiPour
+ * \date    (last)      12-Jan-2024
+ * \author  (original)  Peter Lucia
+ * \date    (original)  25-Sep-2020
  *
  */
 
@@ -27,81 +27,66 @@
  * \brief   A selectable grid of options with customizable number of rows and columns
  *          where only one option is selected by the user
  */
-Rectangle {
-    id: _root
+Rectangle { id: _root
+    property int    rowCount        :  _rowCount
+    property int    colCount        :  _colCount
+    property int    curIndex        : -1
+    property int    optionHeight    : Variables.gridSelectionButtonHeight
+    property int    optionWidth     : Variables.gridSelectionButtonWidth
+    property alias  title           : _title.text
+    property var    labels          : []
+    property bool   active          : false
+    property bool   valid           : true
+
+    readonly property int _itemCount: labels.length
+    readonly property int _rowCount : Math.ceil( _itemCount / _colCount )
+    readonly property int _colCount : 2
+
     anchors.horizontalCenter: parent.horizontalCenter
-    color: "transparent"
-    property int numRows         : 2
-    property int numCols         : 2
-    property int buttonHeight    : Variables.gridSelectionButtonHeight
-    property int buttonWidth     : Variables.gridSelectionButtonWidth
-    property var buttonNames     : ["Button 1", "Button 2", "Button 3"]
-    property alias name          : _text.text
-    property int selectedIndex   : unselectedIndex
-    property int unselectedIndex : 9999
-    height: numRows * buttonHeight
-    width: numCols * buttonWidth
-    signal buttonClicked()
+    color   : Colors.transparent
+    height  : _root.rowCount * _root.optionHeight + _title.height + _grid.anchors.topMargin
+    width   : _root.colCount * _root.optionWidth
 
+    signal clicked(int vIndex)
 
-    function setValid(valid) {
-        if (valid) {
-            _text.color = Colors.textMain
-        } else {
-            _text.color = Colors.textInvalid
-        }
+    function clear() {
+        _root.curIndex = -1
+        _root.active   = false
     }
 
-    function setActive(active) {
-        if (!active) {
-            for (let i = 0; i < _repeater.count; i++) {
-                _repeater.itemAt(i).setSelected(false)
-            }
-            selectedIndex = unselectedIndex
-        }
+    function reset(vIndex) {
+        _root.curIndex = vIndex
+        _root.active   = true
     }
 
-    Text {
-        id: _text
-        text: "Title"
-        font.pixelSize: Fonts.fontPixelFluidText
-        color: Colors.textMain;
+    Text { id           : _title
+        text            : ""
+        color           : _root.valid ? Colors.textMain : Colors.createTreatmentInvalidParam
+        font.pixelSize  : Fonts.fontPixelFluidText
     }
 
-    Grid {
-        id: _grid
-        anchors.top: _text.bottom
-        anchors.topMargin: Variables.sliderTextMargin
-        rows: parent.numRows
-        columns: parent.numCols
-
-        Repeater { id: _repeater
-            model: buttonNames
-            TouchRect {
-                id: _touchRect
-                objectName: _root.objectName + index
-                text.text: modelData;
-                selectable: true
-                height: _root.buttonHeight
-                width: _root.buttonWidth
-                radius: 0
-                borderColor: Colors.borderButtonUnselected
+    Grid { id   : _grid
+        spacing : 5
+        anchors {
+            top         : _title.bottom
+            topMargin   : Variables.sliderTextMargin
+        }
+        rows    : _root.rowCount
+        columns : _root.colCount
+        Repeater { id   : _repeater
+            model       : labels
+            TouchRect { id  : _touchRect
+                objectName  : _root.objectName + index
+                text.text   : modelData
+                selectable  : true
+                height      : _root.optionHeight
+                width       : _root.optionWidth
+                radius      : Variables.dialogRadius
+                selected    : _root.curIndex > -1 ? index === _root.curIndex : false
                 onClicked: {
-                    _text.color = Colors.textMain
-                    if (selectedIndex === index) {
-                        _repeater.itemAt(index).setSelected(false)
-                        selectedIndex = unselectedIndex
-                    } else {
-                        _repeater.itemAt(index).setSelected(true)
-                        selectedIndex = index
-                    }
-
-                    for (let j = 0; j < _repeater.count; j += 1) {
-                        if (index !== j) {
-                            _repeater.itemAt(j).setSelected(false)
-                        }
-                    }
-                    buttonClicked()
+                    _root.curIndex = index
+                    _root.clicked  ( index )
+                    _root.active   = true
                 }
             }
         }