Knowledge Base
Knowledge Base
  • Login
Font Size:
Ask Joget AI

Duplicate a Form Grid

Introduction

In this article, you'll learn how to copy all the contents of one form grid and paste all to another form grid, containing it's own data as well. The overall result comes out as Grid 1 with it's own data, and Grid 2 with it's own data concatenated along with Grid 1 data, streamlining the data entry process and improving user experience. 

How does it work? 

Joget allows you to clone/duplicate entries from one Form Grid to another. To do so, follow these steps and to set up your form and implement the Bean Shell script needed to achieve this:
 
  1. Access the Form Grid you want to duplicate.
  2. Add a second grid.
  3. Add a CustomHTML.
  4. Insert the following script (replacing the source and target form grid field IDs accordingly on lines 5 and 6):
    <p><a class="copy btn">Copy Grid 1 to Grid 2</a></p>
<script>
$(function(){
    $(".copy").on("click", function() {
        var grid1 = FormUtil.getField("field1");
        var grid2 = FormUtil.getField("field2");
 
        $(grid1).find(".grid-row").each(function(){
            var json = $(this).find("textarea").val();
 
            //remove id
            var obj = JSON.parse(json);
            if (obj.id !== undefined) {
                delete obj.id;
                json = JSON.stringify(obj);
            }
 
            $(grid2).enterpriseformgrid("addRow", {result: json });
        });
    });
});
</script>
  5. Save and preview your Form. You will get the following result:

Video Tutorial

Download sample app

Download the demo app for Duplicate a Form Grid:
Created by Aadrian Last modified by Debanraj Ravindran on Apr 24, 2026
Tags:
Previous Copy rows in Form Grid and List Grid using a script NextValidating Row Count Between Two Form Grids