Hi,
I have been having some fun with Select2 and Editor, and am slowly making progress. My final hurdle is to set the "selected" option in the Select2 dropdowns (I have two).
I need to replace 'Caption' and 'ID' in the snippet below with the actual values of the text and the value of the option respectively when a record is edited.
"templateSelection": function (data) {
console.log(data); // Simply displays the placeholder so is not worth much
return 'Caption' || 'ID';
},
The text is displayed in the table, so I am hoping I can get it from there somehow, and the value is the actual item being edited in the Select2 control.
The complete code is as follows:
(function ($) {
$(document).ready(function () {
var filter;
var job_titles;
var editor = new $.fn.dataTable.Editor({
ajax: {
url: 'jobdescription',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
},
table: '#indexTable',
idSrc: 'id',
fields: [
{
"label": "Occupation Group:",
"name": "occgroup_id",
"type": "select2",
"data": "occgroup_id",
"opts": {
"templateSelection": function (data) {
console.log(data);
return 'Caption' || 'ID';
},
"minimumInputLength": 3,
"placeholder": 'Search for a Occupation Group',
"allowClear": true,
"ajax": {
"url": 'http://mibco.jobdesc.wnn/jobdesc/occgroup',
"dataType": 'json',
"delay": 250,
"cache": false,
"headers": {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
"data": function (params) {
var query = {
"q": params.term,
"action": "select2",
"field": "occupation_group",
"filter": filter
};
return query;
},
"processResults": function (data, params) {
job_titles = data.results;
return {results: data.results};
}
}
},
"fieldInfo": ""
}
, {
"label": "Occupation Title:",
"name": "occtitle_id",
"type": "select2",
"data": "occtitle_id",
"opts": {
"templateSelection": function (data) {
console.log(data);
return 'Caption' || 'ID';
},
"minimumInputLength": 3,
"placeholder": 'Search for a Occupation Title',
"allowClear": true,
"ajax": {
"url": 'http://mibco.jobdesc.wnn/jobdesc/occtitle',
"dataType": 'json',
"delay": 250,
"cache": false,
"headers": {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
"data": function (params) {
var query = {
"q": params.term,
"action": "select2",
"field": "occupation_title",
"filter": filter
};
return query;
},
"processResults": function (data, params) {
job_titles = data.results;
return {results: data.results};
}
}
},
"fieldInfo": ""
}
, {
"label": "Job Title:",
"name": "job_title",
"type": "text",
"fieldInfo": ""
}
, {
"label": "Description:",
"name": "description",
"type": "textarea",
"fieldInfo": ""
}
,
,
]
});
// Set the value of the filter
editor.dependent('occgroup_id', function (val) {
filter = val;
});
// Set the value of the dependant fields
editor.dependent('occtitle_id', function (val) {
$.each(job_titles, function (key, result) {
if (result.id == val) {
editor.val('job_title', result.text);
editor.val('description', result.desc);
}
});
});
// New record
$('a.editor_create').on('click', function (e) {
e.preventDefault();
editor.create({
title: 'Create new record',
buttons: 'Add'
});
});
// Edit record
$('#indexTable').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor.edit($(this).closest('tr'), {
title: 'Edit record',
buttons: 'Update'
});
});
// Delete a record
$('#indexTable').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.remove($(this).closest('tr'), {
title: 'Delete record',
message: 'Are you sure you wish to remove this record?',
buttons: 'Delete'
});
});
$('#indexTable').DataTable({
processing: true,
serverSide: true,
ajax: 'jobdescription/?action=dte',
responsive: true,
columns: [
{
"data": "job_title"
},
{
"data": "description"
},
{
"data": "occupation_group.occupation_group"
},
{
"data": "occupation_title.occupation_title"
},
{data: 'id',
className: "center nowrap",
bSortable: false,
render: function (data, type, row) {
return '<a href="" class="editor_edit"><button class="btn btn-primary">Edit</button></a> \n\
<a href="" class="editor_remove"><button class="btn btn-danger">Delete</button></a>';
}
}
],
select: false,
lengthChange: false
});
});
}(jQuery));