Optgroups inside field select option..

Optgroups inside field select option..

rcoblesrcobles Posts: 1Questions: 1Answers: 0

i'm trying to create a select multiple field with optgroups:
i create the html field with create function, and it shows fine but when i try to save the selected options but doesn't do nothing, the same thing when i click on editor inline, doesn't show the setted values.

here is my code..

```
// Todo field type plug-in code
(function ($, DataTable) {

if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}

var Editor = DataTable.Editor;
var _fieldTypes = DataTable.ext.editorFields;

_fieldTypes.select = {
    create: function ( conf ) {
        var that = this;
        // Create the elements to use for the input

        //Utilizamos el método jquery .when() para esperar que finalice ajax1() y tenga la variable html seteada
        conf._input = $('<select>'+
                            '<optgroup label="Options 1">'+
                                '<option>Option 1.1</option>'+
                                '<option>Option 1.2</option>'+
                            '</optgroup>'+
                            '<optgroup label="Options 2">'+
                                '<option>Option 2.1</option>'+
                                '<option>Option 2.2</option>'+
                            '</optgroup>'+
                        'select>');

        return conf._input;
    }
};

})(jQuery, jQuery.fn.dataTable);

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {

editor = new $.fn.dataTable.Editor( {
    ajax: "./resources/modules/dataTables/php/mm_exp_userProfiles.php",
    table: "#tableditor",
    fields: [
        { label: "Name:",  name: "name" },
        { label: "Pages:",  name: "pages", type: "select", separator: ',', multiple: true }
    ]
} );

// Activate an inline edit on click of a table cell
$('#tableditor').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this );
    console.log(this);
} );

$('#tableditor').DataTable( {
    dom: "Bfrtlp",
    ajax: "./resources/modules/dataTables/php/mm_exp_userProfiles.php",
    columns: [
        { data: "name" },
        { data: "pages" }
    ],
    select: {
        style:    'multiple',
        selector: 'td:first-child'
    },
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ]
} );

$('#approve').on( 'click', function () {
    editor
        .edit( false )
        .val( 'approved', 1 )
        .submit();
} );

} );
```

Answers

  • allanallan Posts: 63,552Questions: 1Answers: 10,477 Site admin

    Hi,

    I've afraid that this currently isn't possible with Editor. Editor uses a property attached to the option elements called _editor_val which is used to store the value. It does this in order to allow type safe selection (e.g. 0 v '0' and true v 'true').

    You could try adding that property to each DOM node (e.g. option._editor_val = ... - not just an attribute) I think it would work, but that's a bit of an "if"!

    Regards,
    Allan

This discussion has been closed.