Hello sir/mam,

I have created a custom editor. It works on the value of a checkbox and that checkbox is only visible on edit/add row. When that checkbox is checked it should display a dropdown else textbox. When I am checking the checkbox and I am selecting the value of custom editor combo its showing error valuechanged is not defined.Also, sometimes its giving error this.editor.destrory is not defined/ not a function. The last issue is when clicking on add the location of action dropdown is giving validation as soon as i click on edit row which shouldnt happend unless save is clicked. Could you please help me out.

Code:--

function getGridColumnSettings() {
return [
{
columnKey: "action_id",
readOnly: false,
required: true,
editorProvider: new $.ig.EditorProviderComboTextbox()
},
{
columnKey: "Delivered",
editorType: "checkbox",
editorOptions: {
valueChanging: function (evt, ui) {
const checkbox = ui.newValue
const combo = $("#combo")
const txtEditor = $("#textEditor")
// Reset both editors to default
const resetEditors = () => {
combo.igCombo("value", "0");
txtEditor.igTextEditor("value", "");
};
resetEditors();
if (checkbox) {
txtEditor.hide()
combo.show()
editorProvider.currentEditor = combo
} else {
txtEditor.show()
combo.hide()
editorProvider.currentEditor = txtEditor
}
}
}
},
}

--custom editor

var rowID
var editorProvider
$.ig.EditorProviderComboTextbox = $.ig.EditorProvider.extend({
createEditor: function (
callbacks,
key,
editorOptions,
tabIndex,
format,
element,
) {
element = $("<div id='templateContainer'></div>")
element.append('<div id="textEditor"></div>')
element.append('<div id="combo"></div>')
this._super(callbacks, key, editorOptions, tabIndex, format, element)

element.on("keydown", $.proxy(this.keyDown, this))

this.editor = {}
this.editor.element = element

return element
},
getValue: function () {
if (this.currentEditor.attr("id") == "textEditor")
return this.currentEditor.igTextEditor("value")
else return this.currentEditor.igCombo("value")
},
setValue: function (val) {
let checkbox = false
debugger;
if (rowID) {
checkbox = $("#master_grid").igGrid("getCellValue", rowID, "Delivered")
}

this.combo = $("#combo")
this.txtEditor = $("#textEditor")
if (checkbox) {
this.txtEditor.hide()
this.combo.show()
this.currentEditor = this.combo
} else {
this.txtEditor.show()
this.combo.hide()
this.currentEditor = this.txtEditor
}
editorProvider = this

createControls(val)
},
setSize: function (width, height) {
this.editor.element.css({
width: width,
height: height,
})
},
keyDown: function (evt) {
var ui = {}
ui.owner = this.editor.element
ui.owner.element = this.editor.element
this.callbacks.keyDown(evt, ui, this.columnKey)
this.callbacks.textChanged(evt, ui, this.columnKey)
},
})
/**
* @author Rohit Rawat
* @description This function is used to created combo and text editor.
*/
function createControls(val) {
$("#combo").igCombo({
allowCustomValues: false,
dataSource: data_ddl.actions,
textKey: "name",
valueKey: "code",
mode: "dropdown",
visibleItemsCount: 5,
width: "100%",
height: "100%",
selectionChanged: function (evt, ui) {
var ui = {}
ui.owner = editorProvider.editor.element
ui.owner.element = editorProvider.editor.element
editorProvider.callbacks.valueChanged(evt, ui, editorProvider.columnKey)
},
})
$("#combo").igCombo("value", val)

$("#textEditor").igTextEditor({
width: "100%",
placeHolder: "Enter Text",
value: val,
height: "100%",
})
}

I have two svg on click of which i enable edit/delete:-

//enable editing via click of svg.
grid.on("click", ".edit-icon", function () {
// toggleStandardCheckbox(true);
const rowId = $(this).data("id");
if (!rowId) return;

// Allow edit just for this action
window.allowEditFromIcon = true;

// Cancel any ongoing edit
grid.igGridUpdating("endEdit", true);

//  Show the Delivered column manually, then start edit
$("#master_grid").igGrid("showColumn", "Delivered", function () { // to hide and show column
grid.igGridUpdating("startEdit", rowId);
});
// Reset the flag right after so normal clicks are blocked again
setTimeout(() => {
window.allowEditFromIcon = false; // to prevent editing via double click.
}, 100);
});
//This event is created to give user a popup when user clicks on delete row icon.If user clicks yes the row will be deleted.
$("#master_grid").on("click", ".delete-icon", function () {
grid.igGridUpdating("endEdit");
const rowId = $(this).data("id");//fetching id of current row

if (!rowId) {
return;
}

// Show a confirmation dialog to the user
fnShowCommonPopup('confirm', "Are you sure you want to delete this row?", resource_val.Confirmation, function () {
// Call the deleteRowAndCleanUp function after user confirms
deleteRowAndCleanUp(rowId);
}, function () { grid.igGridUpdating("endEdit"); }); //to disable edit when user clicks on no.

});

This is the column which is giving validation automatically when add row is clicked:--

{
columnKey: "location_of_action_id",
editorType: "combo",
required: true,
editorOptions: {
dataSource: [{ code: "", name: "Select Location Of Action" }].concat(data_ddl.location_of_action),
textKey: "name",
valueKey: "code",
mode: "dropdown",
visibleItemsCount: 5,
allowTooltips: true,
selectionChanged: function (evt, ui) {
const combo = ui.owner;
const selectedItem = ui.items[0];

const newValue = selectedItem ? selectedItem.data.code : "";

const rowId = combo.element.closest("tr[data-id]").attr("data-id");
if (!rowId) return;

if (!pendingVersionUpdate[rowId]) {
const rowData = $("#master_grid").igGrid("findRecordByKey", rowId) || {};
pendingVersionUpdate[rowId] = { ...rowData };
}

pendingVersionUpdate[rowId].location_of_action_id = newValue;

const action = pendingVersionUpdate[rowId].action_id || "";
const location = newValue;

if (checkIfDuplicateExists(location, action, rowId)) {
fnShowCommonPopup('error', "This combination already exists.", "Duplicate Entry");
combo.value(""); // Reset the combo
}
}
}
},

This is my updating feature:--

{
name: "Updating",
enableAddRow: true,
enableDeleteRow: false,
showDoneCancelButtons: true,
editMode: "row",
doneLabel: "Save",
columnSettings: getGridColumnSettings(),
editRowStarted: function (evt, ui) {
$("#master_grid_updating_cancel").off("click").on("click", function () {
$("#master_grid").igGrid("hideColumn", "Delivered");
});

$("#master_grid_updating_done").off("click").on("click", function () {
$("#master_grid").igGrid("hideColumn", "Delivered");
});
},
editRowEnding: function (evt, ui) {
if (editStarting) {
$("#master_grid").igGridUpdating("endEdit")
editStarting = false
return false
}
},
editRowStarting: function (evt, ui) {
if (!window.allowEditFromIcon && ui.rowAdding == false) {
evt.preventDefault();
}
rowID = ui.rowID
editStarting = true
$("#master_grid").igGrid("showColumn", "Delivered", function () {
$("#master_grid").igGridUpdating("endEdit")
if (ui.rowID) {
$("#master_grid").igGridUpdating("startEdit", ui.rowID, 0)
} else {
$("#master_grid").igGridUpdating("startAddRowEdit")
}
})
},
editCellStarting: function (evt, ui) {
// Block edit unless it's triggered via the icon
if (!window.allowEditFromIcon && ui.rowAdding == false) {
evt.preventDefault();
}
},
// Handling when the cell edit is ending
editCellEnding: function (evt, ui) {
// toggleStandardCheckbox();
// toggleStandardCheckbox(true);
let rowId = ui.rowID;

// If it's a new row (rowId is null), generate a temporary unique rowId
if (!rowId) {
rowId = `new_row_${Date.now()}`; // Create a unique temporary rowId using timestamp
}

// If no entry exists for this rowId, copy the current row data or create a new entry
if (!pendingVersionUpdate[rowId]) {
const rowData = $("#master_grid").igGrid("findRecordByKey", rowId) || {}; // Fallback to empty object if new row
pendingVersionUpdate[rowId] = { ...rowData }; // Create a shallow copy of row data
}

// Save the in-progress edit for this row
pendingVersionUpdate[rowId][ui.columnKey] = ui.value ?? "";
},

// Handling when the cell edit is completed
editCellEnded: function (evt, ui) {
let rowId = ui.rowID;
// If it's a new row (rowId is null), use the generated temporary rowId
if (!rowId) {
rowId = `new_row_${Date.now()}`;
}

// If no entry exists for this rowId, return (exit)
if (!pendingVersionUpdate[rowId]) return;

const updatedRow = pendingVersionUpdate[rowId];
const location = updatedRow.location_of_action_id || "";
const action = updatedRow.action_id || "";
// Get the location and action values from the edited row

if (location && action) {
const version = generateVersion(location, action);

// Safely update version_no after the grid commits the cell
$("#master_grid").igGridUpdating("updateRow", rowId, {
version_no: version
});
}

// Clear the temporary storage for this row (remove from pending updates)
delete pendingVersionUpdate[rowId];
},

Please help me with issue.

The auto validation issue is because i m calling end edit  it in editRowStarting . If i dont  call it its giving eror grid is already in edit mode.

And the other issue this.editor.destory and valuechanged is undefined i cannot fine why its coming.