notesEditor = new $.fn.dataTable.Editor({
	ajax: {
		create: '/Home/NewNotesData',
		edit: {
			type: 'PUT',
			url: '/Home/EditNotesData'
		},
		remove: {
			type: 'DELETE',
			url: '/Home/DeleteNotesData'
		}
	},
	idSrc: 'id',
	table: "#notesTable",
	fields: [{
		label: "Type:",
		name: "type"
	}, {
		label: "Note File:",
		name: "noteFile"
	}, {
		label: "Value:",
		name: "value"
	}
	]
});

// Activate an inline edit on click of a table cell
$('#notesTable').on('click', 'tbody td', function (e) {
	// Focus on the input in the cell that was clicked when Editor opens
	notesEditor.one('open', () => {
		$('input', this).focus();
	});

	notesEditor.inline(notesTable.cells(this.parentNode, '*').nodes(), {
		submitTrigger: -2,
		submitHtml: '<i class="fa fa-check" style="color:green"/>'
	});
});

// Delete row
$('#notesTable').on('click', 'tbody td.row-remove', function (e) {
	notesEditor.remove(this.parentNode, {
		title: 'Delete record',
		message: 'Are you sure you wish to delete this record?',
		buttons: 'Delete'
	});
});

var notesTable = $('#notesTable').DataTable({
	dom: "Bfrtp",
	ajax: {
		"type": "GET",
		"url": "/Home/GetNotesData",
		"contentType": "application/json; charset=utf-8",
		"dataType": "json"
	},
	columns: [
		{ "data": 'type' },
		{ "data": 'noteFile' },
		{ "data": 'value' },
		{
			data: null,
			defaultContent: '<i class="fa fa-pencil" style="color:dodgerblue"/>',
			className: 'row-edit dt-center',
			orderable: false
		},
		{
			data: null,
			defaultContent: '<i class="fa fa-trash" style="color:darkred"/>',
			className: 'row-remove dt-center',
			orderable: false
		},
	],
	select: {
		style: 'os',
		selector: 'td:first-child'
	},
	buttons: [{
		extend: "createInline",
		text: "Create New Entry",
		editor: notesEditor,
		formOptions: {
			submitTrigger: -2,
			submitHtml: '<i class="fa fa-check" style="color:green"/>'
		}
	}]
});