use select2 in editable columns

README.rst

@@ -93,6 +93,7 @@ For all the tests to pass successfully, you'll need Postgres & MongoDB to be run
 
     CREATE DATABASE flask_admin_test;
     CREATE EXTENSION postgis;
+    CREATE EXTENSION hstore;
 
 You can also run the tests on multiple environments using *tox*.
 

flask_admin/model/widgets.py

@@ -72,7 +72,8 @@ class XEditableWidget(object):
         field inside of the FieldList (StringField, IntegerField, etc).
     """
     def __call__(self, field, **kwargs):
-        kwargs.setdefault('data-value', kwargs.pop('display_value', ''))
+        display_value = kwargs.pop('display_value', '')
+        kwargs.setdefault('data-value', display_value)
 
         kwargs.setdefault('data-role', 'x-editable')
         kwargs.setdefault('data-url', './ajax/update/')
@@ -91,7 +92,7 @@ class XEditableWidget(object):
 
         return HTMLString(
             '<a %s>%s</a>' % (html_params(**kwargs),
-                              escape(kwargs['data-value']))
+                              escape(display_value))
         )
 
     def get_kwargs(self, field, kwargs):
@@ -104,7 +105,7 @@ class XEditableWidget(object):
             kwargs['data-type'] = 'textarea'
             kwargs['data-rows'] = '5'
         elif field.type == 'BooleanField':
-            kwargs['data-type'] = 'select'
+            kwargs['data-type'] = 'select2'
             # data-source = dropdown options
             kwargs['data-source'] = json.dumps([
                 {'value': '', 'text': gettext('No')},
@@ -112,7 +113,7 @@ class XEditableWidget(object):
             ])
             kwargs['data-role'] = 'x-editable-boolean'
         elif field.type in ['Select2Field', 'SelectField']:
-            kwargs['data-type'] = 'select'
+            kwargs['data-type'] = 'select2'
             choices = [{'value': x, 'text': y} for x, y in field.choices]
 
             # prepend a blank field to choices if allow_blank = True
@@ -144,7 +145,7 @@ class XEditableWidget(object):
         elif field.type in ['QuerySelectField', 'ModelSelectField',
                             'QuerySelectMultipleField', 'KeyPropertyField']:
             # QuerySelectField and ModelSelectField are for relations
-            kwargs['data-type'] = 'select'
+            kwargs['data-type'] = 'select2'
 
             choices = []
             selected_ids = []
@@ -162,12 +163,13 @@ class XEditableWidget(object):
             kwargs['data-source'] = json.dumps(choices)
 
             if field.type == 'QuerySelectMultipleField':
-                kwargs['data-type'] = 'select2'
                 kwargs['data-role'] = 'x-editable-select2-multiple'
 
                 # must use id instead of text or prefilled values won't work
                 separator = getattr(field, 'separator', ',')
                 kwargs['data-value'] = separator.join(selected_ids)
+            else:
+                kwargs['data-value'] = text_type(selected_ids[0])
         else:
             raise Exception('Unsupported field type: %s' % (type(field),))
 

flask_admin/static/admin/css/bootstrap2/admin.css

@@ -139,3 +139,7 @@ table.filters tr td {
     */
     #no-more-tables td:before { content: attr(data-title); }
 }
+
+.editable-input .select2-container {
+    min-width: 220px;
+}