jQuery jEditables - Select with optgroup

Question

I am using jEditable and am wondering if if it is possible to have a select (type=select) with optgroups?

Why wouldn't it work? What do you mean `type=select`? Do you mean a ` — Ian, Dec 19 '12 at 08:45
the jEditable documentation only shows how to pass a JSON encoded array to populate the select box when input is selected, not how to add optgroups. — Rooneyl, Dec 19 '12 at 08:50

score 1 · Accepted Answer · answered Dec 20 '12 at 16:23

I have managed to do this by creating a custom input type (I called it optgroup).

It works on the assumption the json for data is in the form;

var json = [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}];

This is the code;

optgroup: {
   element : function(settings, original) {
        var select = $('<select class="opt" />');
        $(this).append(select);
        return(select);
    },
    content : function(data, settings, original) {
        if (String == data.constructor) {      
            eval ('var json = ' + data);
        } else {
            var json = data;
        }

        var addto = $('select', this);
        $.each(json, function(i, optgroups) {
            $.each(optgroups, function(groupName, options) {
                var $optgroup = $("<optgroup>", {label: groupName});
                $optgroup.appendTo(addto);
                $.each(options, function(j, option) {
                    var $option = $("<option>", {text: option.name, value: option.id});
                    $option.appendTo($optgroup);
                });
            });
        });
    }
}

To use;

$('.editable').find('td').editable(
    function(v, s) {
        // do whatevere you need to...
    }, 
    {
        "data"   : [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}],
        "indicator": 'Saving ...',
        "tooltip": 'Double Click to edit',
        "type": 'optgroup',
        "submit": 'Save changes',
        "event": 'dblclick'
    }
);

where should we put the code? is it inside this: `$.editable.addInputType('optgroup', { ..?here?.. });` ? — Kamal, Feb 21 '13 at 03:53

Kenlly Acosta · Answer 2 · 2019-02-24T15:14:59.183

You have to add

optgroup: {
    element: function (settings, original) {
        var select = $('<select />');
        $(this).append(select);
        return (select);
    },

    content: function (data, settings, original) {
        if (String == data.constructor) {
            eval('var json = ' + data);
        } else {
            var json = data;
        }

        var addto = $('select', this);
        $.each(json, function (i, optgroups) {
            $.each(optgroups, function (groupName, options) {
                var $optgroup = $("<optgroup>", {
                    label: groupName
                });

                $optgroup.appendTo(addto);

                $.each(options, function (j, option) {
                    var $option = $("<option>", {
                        text: option.name,
                        value: option.id
                    });

                    if (option.selected !== null && option.selected !== undefined && option.selected) {
                        $option.attr('selected', 'selected');
                    }
                    $option.appendTo($optgroup);
                });
            });
        });
    }
}

into your jquery.jeditable.js, find "types" and paste into that array. After that you file should look like:

types: {
   textarea:...,
   select:...
   number:...
   ...
   optgroup:...
}

Next you have to use it.

$("#yourControlSelect").editable("/controllerName/ActionToExecute", {
   data: @Html.Action("JEditbaleOptGroup", "ControllerName"),
   type: 'optgroup', //Same as you created before
   ...
});

Remember the format of data, it has to be:

[
   {"Category1": [{"id": 1,"name": "Product1"}, {"id": 2,"name": "Product2"}]}, 
   {"Category2": [{"id": 3,"name": "Product3"}, {"id": 4,"name": "Product4"}]}, 
   {"Category3": [{"id": 5,"name": "Product5"}, {"id": 6,"name": "Product6"}]}
]

Finally, here's the model to create and return it

    public class JEditable
    {
        public string Id { get; set; }
        public string Descripcion { get; set; }
    }

    public class JEditableOptGroup
    {
        public string Nombre { get; set; }        
        public IEnumerable<JEditable> Hijos { get; set; }
    }

Fill the model

var grupos = Repositorio.SelectListOfYourDataType(x => true).GroupBy(x => x.ColToGrouping);

foreach (var grupo in grupos)
{
   List<JEditable> hijos = new List<JEditable>();
   foreach (var item in grupo.OrderBy(x=>x.nombre_g5))
      hijos.Add(new JEditable() { Id = item.Id_g5, Descripcion = item.nombre_g5.Trim() + " (" + item.Balance_g5 + ") " + item.cuenta_g5.Trim() });

      jEditable.Add(new JEditableOptGroup() { Nombre = grupo.Key + " " + grupo.FirstOrDefault().cuenta_g4.Trim(), Hijos = hijos });
 }
return Funciones.JEditableDropDownList(jEditable);

Tranform data to the correct format:

internal static string JEditableDropDownList(List<JEditableOptGroup> grupos)
   {
       StringBuilder sb = new StringBuilder();
       sb.Append("[");
       foreach (var grupo in grupos)
       {
         StringBuilder hijos = new StringBuilder();    
         foreach (var item in grupo.Hijos)
           hijos.Append("{" + string.Format("id:'{0}',name:'{1}'", item.Id, item.Descripcion) + "},");

           sb.Append("{" + string.Format("'{0}':[{1}]", grupo.Nombre, hijos) + "},");
                }
           sb.Append("]");
           return sb.ToString();
        }

Enjoy it!

jQuery jEditables - Select with optgroup

2 Answers2