Issue with Duplicate Check on Newly Added Rows in Grid.

1375

Rohit Rawat posted 5 months ago

Hi Sir/Mam,

I hope you're doing well.

I'm working with an editable grid that has two dropdowns: location_of_action_id and action_id. On change of either dropdown, I need to check if the selected combination already exists in the grid using a checkIfDuplicateExists(location, action, rowId) function. This works perfectly during row editing, as the rowId is available and I can reference the pendingVersionUpdate[rowId] object to get the other value.

However, when a new row is added, it doesn’t yet have a rowId, so I can't reliably access the corresponding entry in pendingVersionUpdate. As a result, I'm unable to fetch the other dropdown’s value for the duplicate check logic.

Is there a recommended way to handle this scenario, such as identifying the current row context or maintaining values for new rows before a rowId is assigned?

Any suggestions or best practices would be greatly appreciated.

Best regards,
Rohit Rawat

CODE REFERENCE

{
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,
//value: function (rowIndex, columnKey) {
// return this.grid.dataSource[rowIndex][columnKey];
//},
selectionChanged: function (evt, ui) {
const combo = ui.owner;
const selectedItem = ui.items[0];
debugger;
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
}
}
}
},
{
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,
//value: function (rowIndex, columnKey) {
// return this.grid.dataSource[rowIndex][columnKey];
//},
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].action_id = newValue;

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

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

Parents

No Data

Reply

1375

Offline Rohit Rawat posted 5 months ago

Please help me out with this.
Cancel
Reply

Cancel

Children

800

Offline Riva Ivanova posted 5 months ago in reply to Rohit Rawat

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.
            }
        },
    },
},

Here can be found a simplified sample demonstrating my suggestion.

Please keep in mind that since the igGrid does not provide this functionality out of the box, the provided sample is entirely implemented on the application level and aims to demonstrate a possible approach in achieving your requirements. It has not been tested for all possible scenarios and may require further adjustments.

Let me know if you need any further information on the matter.

Sincerely,
Riva Ivanova
Software Developer