jQuery Chosen for Editor select fields?

emt

I'm looking to apply jQuery Chosen (http://harvesthq.github.io/chosen/) to Editor's select fields, and I saw this discussion and how I would need to create a custom field type: https://datatables.net/forums/discussion/16714/jquery-chosen-for-select-fields/p1

I'm not sure how I would go about this, as I simply need to apply Chosen to Editor's select fields. It would normally look like this: $("select").chosen();

How would I go about creating this field type? I read the tutorial and example and I'm still not clear on how my specific functionality would be used in the context of the tutorial.

allan

You could basically copy the `select` code from Editor's source - pulling it into a plug-in field type as described in the tutorial, with the `chosen()` call added in.

Allan

emt

Thanks Allan, something like this?

[code]
var Editor = $.fn.DataTable.Editor;
$.fn.DataTable.Editor.fieldTypes.chosen = $.extend( true, {}, Editor.models.fieldType, {
// Locally "private" function that can be reused for the create and update methods
"_addOptions": function ( conf, opts ) {
var elOpts = conf._input[0].options;

elOpts.length = 0;

if ( opts ) {
for ( var i=0, iLen=opts.length ; i

emt

Could someone point me in the direction of what I might be doing wrong?

allan

Do you get any errors when you run that code? The basic idea looks okay to me, although I would suggest perhaps initialising `chosen()` once the select has been populated with data, rather than before - otherwise chosen isn't going to know that the data is present I suspect.

Allan

emt

This is the error I'm getting: TypeError: d.fieldTypes[a.type] is undefined

allan

Are you using DataTables 1.9? Try using:

[code]
$.fn.dataTable.Editor.fieldTypes.chosen
[/code]

If its not that, then I'd need to be able to see the page to understand what is going wrong.

Allan

emt

Yep, 1.9. This is the same page the websockets work will be done on: https://www.dcturano.com/to-do_list/

steven.habex@zion.be

I've been trying to get this working, but it seems not to be easy. @emt : in your source code you are using
$.fn.DataTable.Editor.fieldTypes.chosen which should be $.fn.dataTable.Editor.fieldTypes.chosen (note the capital from Datatable).

I got this running untill the point where the dropdown from chosen is not being displayed because of the fact it will drop down under the Lightbox content from the editor.

emt

@steven.habex@zion.be : Can you post your code? I still can't get it to work with the code I posted before.

allan

$.fn.DataTable.Edito

Capitalisation will make no difference there as the Editor object is attached to both (assuming you are using 1.3 or newer).

Beyond that, I think I would need to be able to see a test case if that is possible?

Allan

steven.habex@zion.be

I am working as follows : created the chosen fieldtype as follows :

$.fn.dataTable.Editor.fieldTypes.chosen = $.extend(true, {}, $.fn.dataTable.Editor.models.fieldType, {
        // Locally "private" function that can be reused for the create and update methods
        "_addOptions": function (conf, opts) {
            var elOpts = conf._input[0].options;

            elOpts.length = 0;

            if (opts) {
                labelValPair(opts, function (val, label, i) {
                    elOpts[i] = new Option(label, val);
                });
            }
        },

        "create": function (conf) {
            conf._input = $('<select/>').attr($.extend({
                id: conf.id
            }, conf.attr || {}));

            $(conf._input).addClass("chosen");

            $.fn.dataTable.Editor.fieldTypes.select._addOptions(conf, conf.ipOpts);

            return conf._input[0];
        },

        "update": function (conf, ipOpts) {
            // Get the current value
            var currVal = $(conf._input).val();

            $.fn.dataTable.Editor.fieldTypes.select._addOptions(conf, ipOpts);

            // Set the old value, if it exists
            $(conf._input).val(currVal);
        }
    });

and at the page where I use the chosen fields, I still have to add the following, because the select element is only created at the moment the editor is opened :

editor.on('open', function() {
                $(".chosen").chosen();
    });

allan

Very nice - thanks for sharing this with us.

Allan

steven.habex@zion.be

Only problem with that piece of code is the fact that the chosen dropdown is being displayed under the lightbox, so the dropdown is not fully visible and not usable. I tried to play with z-index, but did not get it working.

I didn't spend much time trying to get that part working (guess it will be some z-index overrides in your stylesheet), but if anyone ever finds a solution for this, let us know.

allan

I'm going to take a poke at a select2 plug-in later on today. i'll look at this then as well.

Allan

allan

I've just put together plug-ins for Chosen and Select2, in addition to the existing Selectize plug-in for Editor. There are all available on the Editor site.

Regarding the z-index issue with the Chosen plug-in, this is happening because Chosen puts the control inline with the select element, and its z-index is in a different context to the header and footer of the lightbox - so it can never be higher than the header and footer. The Select2 and Selectize libraries don't have that issue.

Allan

steven.habex@zion.be

Great. The selectize plug-in is even better for our use case. Thanks.

emt

Thank you both for your input! Works great.