From 92165fa4ad9975141fc00730b247a74fa7190090 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Kucharski?= <rkucharski.81@gmail.com>
Date: Thu, 24 Sep 2020 20:32:12 +0200
Subject: [PATCH] Adding attributes to option element of select control

---
 README.md                         | 24 +++++++++++++++++++++++-
 src/fields/jsgrid.field.select.js |  8 +++++++-
 tests/jsgrid.field.tests.js       | 21 +++++++++++++++++++++
 3 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2bc58269..71df01c1 100644
--- a/README.md
+++ b/README.md
@@ -561,7 +561,8 @@ Custom properties:
     textField: "",              // name of property of item to be used as displaying value
     selectedIndex: -1,          // index of selected item by default
     valueType: "number|string", // the data type of the value
-    readOnly: false             // a boolean defines whether select is readonly (added in v1.4)
+    readOnly: false,            // a boolean defines whether select is readonly (added in v1.4)
+    optionAttributes: []        // an array of attributes to add to option elements
 }
 
 ```
@@ -603,6 +604,27 @@ or more complex with items as objects:
 `valueType` defines whether the field value should be converted to a number or returned as a string. 
 The value of the option is determined automatically depending on the data type of `valueField` of the first item, but it can be overridden.
 
+`optionAttributes` can be used to define attributes that will be added to all `option` elements. 
+
+```javascript
+{
+    name: "Country",
+    type: "select"
+    items: [
+         { Name: "", Iso3: "", Id: 0 },
+         { Name: "United States", Iso3: "USA", Id: 1 },
+         { Name: "Canada", Iso3: "CAN", Id: 2 },
+         { Name: "United Kingdom", Iso3: "GBR", Id: 3 }
+    ],
+    valueField: "Id",
+    textField: "Name",
+    optionAttributes: [
+        { name: "data-kind", value: "country" },
+        { name: "data-iso-3", valueField: "Iso3" },
+    ]
+}
+```
+
 ### checkbox
 Checkbox field renders `<input type="checkbox">` in filter, inserting and editing rows.
 Filter checkbox supports intermediate state for, so click switches between 3 states (checked|intermediate|unchecked).
diff --git a/src/fields/jsgrid.field.select.js b/src/fields/jsgrid.field.select.js
index b2e5d345..0dfcd26f 100755
--- a/src/fields/jsgrid.field.select.js
+++ b/src/fields/jsgrid.field.select.js
@@ -96,7 +96,8 @@
             var $result = $("<select>"),
                 valueField = this.valueField,
                 textField = this.textField,
-                selectedIndex = this.selectedIndex;
+                selectedIndex = this.selectedIndex,
+                optionAttributes = this.optionAttributes;
 
             $.each(this.items, function(index, item) {
                 var value = valueField ? item[valueField] : index,
@@ -107,6 +108,11 @@
                     .text(text)
                     .appendTo($result);
 
+                if (optionAttributes) {
+                    $.each(optionAttributes, function(attributeIndex, attribute) {
+                        $option.attr(attribute.name, attribute.value || item[attribute.valueField]);
+                    });
+                }
             });
 
             $result.prop("disabled", !!this.readOnly);
diff --git a/tests/jsgrid.field.tests.js b/tests/jsgrid.field.tests.js
index 9c8c26ec..867505c3 100755
--- a/tests/jsgrid.field.tests.js
+++ b/tests/jsgrid.field.tests.js
@@ -337,6 +337,27 @@ $(function() {
         strictEqual(field.itemTemplate(1), "test1");
     });
 
+    test("option attributes", function() {
+        var field = new jsGrid.SelectField({
+            name: "testField",
+            items: [
+                { text: "test1", subtext: "sub-test-1", value: 1 }
+            ],
+            optionAttributes: [
+                { name: "data-sub-fixed", value: "sub-text-fixed" },
+                { name: "data-sub-from-item", valueField: "subtext" },
+            ]
+        });
+
+        var insertTemplate = field.insertTemplate();
+        equal(insertTemplate.children().eq(0).attr("data-sub-fixed"), "sub-text-fixed");
+        equal(insertTemplate.children().eq(0).attr("data-sub-from-item"), "sub-test-1");
+
+        var editTemplate = field.editTemplate(0);
+        equal(editTemplate.children().eq(0).attr("data-sub-fixed"), "sub-text-fixed");
+        equal(editTemplate.children().eq(0).attr("data-sub-from-item"), "sub-test-1");
+    });
+
 
     module("jsGrid.field.control");