Adding attributes to option element of select control

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).

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);

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");