Validate Duplicate Values In the Interactive Grid Using JavaScript

1. Overview

This blog talks about finding duplicate values in the Interactive Grid using JavaScript.

2. Technologies and Tools Used

The following technologies have been used to achieve this functionality,

• JavaScript

3. Use Case

I had a situation a few days ago to validate Interactive Grid to check if the entered value in the column already exists or not. I found a way to handle this situation both in PLSQL (via Ajax call) and JavaScript. This post will share the way of validating duplicates using JavaScript and soon, the way for validating the same in PLSQL (via Ajax call) will be posted and the link will be shared in this post itself.

4. Architecture

Assume that there is an editable Interactive grid for the table EMP and the scenario is to validate the column ENAME to check it contains the duplicate value or not.

Let us see step by step,

Step 1: Create an Interactive Grid for the table EMP and navigate to the advanced section of the region and provide the static id as EMP_IG.

Step 2: Then, go to the column ENAME and navigate to the Advanced section and provide the static id as ENAME.

Step 3: Then, create a dynamic action for the ENAME column as below,

                e.g.

                                 Name – On change of ENAME

                                Event – Change

                                Selection Type – Column(s)

                                Region – EMP Interactive Grid <Your Interactive Region>

                                Column(s) – ENAME      

                               Action – Execute JavaScript Code

                               Code –

                                           var $te = $(this.triggeringElement);

                                           var cur_row_id = $te.closest(‘tr’).data(‘id’);

                                          //EMP_IG is static id of your Interactive Grid

                                            var widget = apex.region(‘EMP_IG’).widget();

                                           var grid = widget.interactiveGrid(‘getViews’, ‘grid’);

                                           var model = grid.model;

                                          //Column to check duplicate exists

                                           var cur_row_val = apex.item(‘ENAME’).getValue();

                                          model.forEach(function(record) {

                                              //Use Primary key column. Here EMPNO is Primary key column

                                               if (cur_row_id != model.getValue(record, ‘EMPNO’)) {         

                                               if (cur_row_val == model.getValue(record, ‘ENAME’)) {

                                                       apex.message.showErrors([{

                                                       type: “error”,

                                                       location: “page”,

                                                       message: “Entered Employee Name already exists!!!”,

                                                       unsafe: false

                                                      }]);

                                                  }

                                             }

                                      })

Step 4: Finally, save the changes and run the page.

Note: Using the above steps will help to validate the duplicate for the rows that exist on the page and for the newly added rows only. If pagination or lazy loading has been enabled to the interactive grid then we need to add one more True action for calling the Ajax process in the existing Dynamic action. Please visit the following link Validate duplicates using PLSQL