How to close selectize dropdown when used with Datatables?

96 Views Asked by At

I have a datatables Editor used with the following definition:

editor = new $.fn.dataTable.Editor({
    ajax: "./DataServlet",
    table: "#example",
    legacyAjax: true,
    idSrc: "rowID",
    fields: [{
        label: "Data ID",
        name: "dataId",
        type: "readonly"
    },
    {
        label: "Category Type",
        name: "categoryType",
        type: "selectize",
        options: getCategoryType(),
        opts: {
            placeholder: 'Enter a search',
            delimiter: ';',
            searchField: 'label',
            valueField: 'value',
            persist: true,
            maxItems: null,
            create: false
        }
    },{
        label: "Country",
        name: "country",
        type: "readonly"
    },{
        label: "User Name",
        name: "userName",
        type: "readonly"
    },{
        label: "Row ID",
        name: "rowID",
    }],
});

The datatables table definition is as follows:

var table = $('#example').DataTable({
    dom : "Bfrtlip",
    ajax : './DataServlet?buster=' + new Date().getTime(),
    lengthMenu : [ [ 10, 25, 50, -1 ], [ 10, 25, 50, "All" ] ],
    select: {
        style:    'multi',
        selector: 'td:first-child'
    },
    order : [ [2, "asc"] ],
    columns : [ {
        data : null,
        defaultContent : '',
        className: 'select-checkbox',
        orderable: false
    }, {
        data : "dataId",
        defaultContent : ''
    },{
        data : "categoryName",
        defaultContent : ''
    }, {
        data : "categoryType",
        defaultContent : '',
        render: "[;]"
    }, {
        data : "country",
        defaultContent : ''
    }, {
        data : "userName",
        defaultContent : ''
    }, {
        data : "updateDate",
        defaultContent : ''
    }],
    fixedHeader: true,
    buttons: [{     
        extend: "edit", 
        className: 'btn btn-primary bg-purple text-white',
        editor: editor 
    }]
});

Now, when I click on edit, and select/remove the values from the selectize dropdown, the dropdown remains open and when I click on Update on the datatables editor screen, the screen closes without processing the change made. However, when I close the dropdown first and then click on Update, the record change is saved successfully.

How can I update the record, without closing the selectize dropdown? I added the closeAfterSelect: true under the opts, and that closes the dropdown when I add an item. However, when I remove an item, it again closes the editor without any update happening.

I also tried the following code:

$(".DTE_Form_Buttons .btn").on('click',function() {
    let selectize = $("#DTE_Field_categoryType")[0].selectize;
    selectize.close();
});

I tried the same thing into the editor events like preSubmit and initSubmit, it is still not working.

What can I do to allow the dropdown to close and the record to update?

0

There are 0 best solutions below