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?