Hello Rohit,

I have been looking into your follow-up question, however, the described behavior is not reproducible with the sample that I have previously provided.

As can be observed in the below attachment, when adding a new row, entering a value for the 8D Action textbox, and selecting a value for the Location of Action dropdown, the appropriate function is called (getComboValueFor / getTextboxValueFor) and the correct value is returned. The same is valid when editing a row as well.

Having this in mind, since the sample provided by me seems to work successfully and as expected, this might indicate that the issues are local to your own environment and configuration.

Please check out once again the previously provided sample and test it on your side. If the behavior is not reproducible, review how each function is configured and how they are combined to work together.

It is possible that the current version of your application may differ from the one that I have used, so any new functionality that you have implemented may cause this unexpected behavior. Nevertheless, as previously mentioned, any further adjustments should be handled entirely by the developer since this functionality is not provided by the igGrid or the editors out of the box.

Attached can be found my sample for your reference.

Sincerely,
Riva Ivanova
Software Developer

Hello Rohit,

Thank you for your patience while I was looking into this matter for you.

After an investigation, what I can say is that there is no straightforward way provided by our API that allows getting a reference to the “Add new row” element and getting information about the entered data. A possible approach I can suggest is getting this reference manually via jQuery functions. Then, you should target the TD element that holds the combo editor and find the input element that holds the combo value.

For example:

function getComboValueFor(columnKey) {

    // Get "Add new row" TR element.
    const addRow = $("#grid").find('thead').children('tr[data-role="newrow"]')[0];

    // Get target column index.
    const columnIndex = $("#grid").igGrid("option", "columns").findIndex(x => x.key === columnKey);

    // Get TD element of target column combo.
    const comboCell = addRow.cells[columnIndex];

    // Get combo input element that holds combo value.
    const comboInput = $(comboCell).find('input.ui-igcombo-hidden-field');

    // Get combo value.
    const comboValue = $(comboInput).val();

    return comboValue;
}

This custom getComboValueFor function can be used in the selectionChanged event for both editors. To get the appropriate value, you should provide the target column key.

For example:

{
    columnKey: "action_id",
    editorType: "combo",
    required: true,
    editorOptions: {
        dataSource: [{ code: "", name: "Select 8D Action" }].concat(data_ddl.actions),
        textKey: "name",
        valueKey: "code",
        mode: "dropdown",
        visibleItemsCount: 5,
         selectionChanged: function (evt, ui) {
            const combo = ui.owner;
            const rowId = combo.element.closest("tr[data-id]").attr("data-id");
            // If rowID is undefined/null -> Add new row operation.
            if (!rowID) {
                const locationValue = getComboValueFor('location_of_action_id');
                console.log(locationValue)
            } else {
                // Edit operation.
            }
        },
    },
},