IgGrid updating feature EditMode 'row' and 'cell' (tab-lost focus and validations)

I am working with IgGrid jquery based and I am trying to set up the grid as per following:

function igGridBind() {
    $("#JournalGrid").igGrid({
        dataSourceType: 'json',
        dataSource: journals,
        primaryKey: "journal_id",
        featureChooserIconDisplay: "always",
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        rowVirtualization: true,
        virtualizationMode: "continuous",
        autoCommit: true,
        width: "100%",
        height: "800px",
        columns: columns,
        features: [
        { name: "Paging", pageSize: 20 },
        {
            name: 'Updating',
            enableAddRow: true,
            enableDeleteRow: true,
            editMode: 'row',
            columnSettings: [{
                columnKey: "journal_id",
                editorType: 'numeric',
                editorOptions: { readOnly: true }
            }, {
                columnKey: "journal_gl_id",
                editorType: 'numeric',
                editorOptions: { readOnly: true }
            }, {
                columnKey: "journal_gl_chart_id",
                editorType: 'combo',
                required: true,
                editorOptions: {
                    mode: "dropdown",
                    dataSourceType: 'json',
                    dataSource: chartCombo,
                    textKey: "chart_master_code",
                    valueKey: "chart_master_id"
                }
            }, {
                columnKey: "journal_gl_description",
                editorType: 'string',
                validation: true,
                editorOptions: { required: true }
            }, {
                columnKey: "journal_gl_net",
                editorType: 'numeric',
                validation: false,
                editorOptions: { required: false }
            }, {
                columnKey: "journal_gl_debit",
                editorType: 'numeric',
                validation: false,
                editorOptions: { required: false }
            }, {
                columnKey: "journal_gl_credit",
                editorType: 'numeric',
                validation: false,
                editorOptions: { required: false }
            }]
        }
        ]
    });
}

var columns = [
        { headerText: "JournalID", key: "journal_id", dataType: "number", hidden: true, allowHiding: false },
        { headerText: "JournalGlID", key: "journal_gl_id", dataType: "number", hidden: true, allowHiding: false },
        { headerText: "Chart", key: "journal_gl_chart_id", dataType: "number", width: "30%", formatter: formatChartCombo },
        { headerText: "Description", key: "journal_gl_description", dataType: "string", width: "30%" },
        { headerText: "Net", key: "journal_gl_net", dataType: "number", hidden: true, allowHiding: false },
        { headerText: "Debit", key: "journal_gl_debit", dataType: "number", width: "20%" },
        { headerText: "Credit", key: "journal_gl_credit", dataType: "number", width: "20%" }

If I use editMode: 'row', done and cancel button works and grid.on("iggridupdatingeditrowended", function (e, args) is called after clicking done button. However none of the validations work. And when I use tab, focus will be into the next column and if its the last one, it will focus done button and after clicked Done, rowended method is called (as expected). However I am getting these errors every time I lost focus from one column and go to the next one

On the other hand, if I use editMode : 'cell', this error will not appear and validations will work and events "keydown" and "keyup" will be triggered. However Done and Cancel buttons are not rendered.

Does anyone know if there is a way to set up both features at the same time? If this is not achievable out of the box, how I will be able to open Done and Cancel button modal popup? so I will be able to rendered in the first focus column, and focus Done click after last column? or if anyone can point out to a sample code where I can follow customizable igGrid updating feature

Current project use these versions:

• Infragistics.Web.Mvc version 5.17.2.183.
• jquery-1.10.2.min.js
• jquery-ui-1.10.4.min.js

My company has 2017 version, but I was wondering which is the best jquery version to work with 2017 version, and if this 5.17.2.183 is the latest dll I can use with 2017 license?

Edit:

Adding also that EditMode : 'dialog' is not an option, which basically renders a modal popup with all columns so row is threated as it was a form

After doing more investigation, igGrid has been modified (syntax). I was following one of the most "complete" documentation 2012 Version and this syntax has been changed during the last few years:

• No need to add Columns which do not required validations, and this is the actual set up for new syntax:

function igGridBind() {
	$("#JournalGrid").igGrid({
		dataSourceType: 'json',
		dataSource: journals,
		primaryKey: "journal_id",
		featureChooserIconDisplay: "always",
		autoGenerateColumns: false,
		autoGenerateLayouts: false,
		rowVirtualization: true,
		virtualizationMode: "continuous",
		autoCommit: true,
		width: "100%",
		height: "800px",
		columns: columns,
		features: [
		{ name: "Paging", pageSize: 20 },
		{
			name: 'Updating',
			enableAddRow: true,
			enableDeleteRow: true,
			editMode: 'row',
			columnSettings: [
				{
					columnKey: "journal_gl_chart_id",
					editorType: 'combo',
					required: true,
					editorOptions: {
						mode: "dropdown",
						dataSourceType: 'json',
						dataSource: chartCombo,
						textKey: "chart_master_code",
						valueKey: "chart_master_id"
					}
				}
				,
				{
					columnKey: "journal_gl_description",
					editorType: 'string',
					required: true
				}
			]
		}
		]
	});
}