Introduction

This article discusses how to populate data into an Advanced Grid Form Element using JQuery. 
For this tutorial, we will be creating the following app:

Figure 1: Populate Advanced Grid Sample App

Steps Example

Step 1

Drag the desired form elements into the top section as shown in the following. In this example, we have 2 text fields, 1 select box, and 1 date picker form elements. 

Item Name

Category

Expiry Date

 

Price


Figure 2: Top Section Form Elements

Step 2

Next, drag a Custom HTML form element into the form. It will be turn into a button with the following code as shown:
 

Figure 3: Apply Button 


Code:

<br>
<div class="text-center">
    <button type="button" id="apply-button" class="btn btn-primary">Apply</button>
</div>

Step 3

Once the top section is completed, add another section below and drag a custom HTML and Advanced Grid form elements into the newly created bottom section as shown in the following:

Figure 4: Bottom Section Form Elements


Advanced Grid Configuration:

Figure 5: Advanced Grid  Configuration

Step 4

Insert the following code into the custom HTML. The code will be responsible for adding and showing data dynamically.

If you are not following the example in this article. Set the following according to the number of columns you want to show in advanced from grid and replace each value inside FormUtil.getValue("..") with each respective form element ID you have in the top section.
              
setValue(advgrid,values.length ,0, FormUtil.getValue("item_name"));
setValue(advgrid,values.length ,1, FormUtil.getValue("category"));
setValue(advgrid,values.length ,2, FormUtil.getValue("expiry_date"));
setValue(advgrid,values.length ,3, FormUtil.getValue("price"));

It will always count start from 0 not 1. Otherwise, the added row will be empty.

Besides that, make sure to replace the value in FormUtil.getField(..) with the advanced grid field ID

var advgrid = FormUtil.getField("gridField"); 
Replace the following FormUtil.getGridCellValues(..) with advanced grid field ID . any of your column ID
var values = FormUtil.getGridCellValues("gridField.item_name");


<script>
  $(document).ready(function(){
    
    // Define setValue function here
    function setValue(grid, rowIndx, colIndx, colValue) {
        var DM = $(grid).find(".pq_grid").pqGrid("option", "dataModel");
        var data = DM.data;
        var json = data[rowIndx][data[rowIndx].length - 1];
        var obj = eval("[" + json + "]");
    
        var colKey = DM.columnKey[colIndx];
    
        obj[0][colKey] = colValue;
    
        //update data
        json = JSON.encode(obj); // Assuming this should be JSON.stringify(obj)
        json = json.substring(1, json.length - 1);
        DM.data[rowIndx][colIndx+1] = colValue;
        DM.data[rowIndx][data[rowIndx].length - 1] = json;
    
        //update hidden table
        var indexKey = DM.data[rowIndx][0];
        var tbl = $(grid).find('.table_container table');
        tbl.find("tr.key_" + indexKey).find("[column_key=" + colKey + "]").text(colValue);
        tbl.find("tr.key_" + indexKey).find("textarea").val(json);
    
        //update table cell
        var colCell = $(grid).find("tr[pq-row-indx="+rowIndx+"] .pq-grid-cell[pq-col-indx=" + (colIndx+1) + "]");
        $(colCell).find(".pq-td-div").html('<div class="form-cell-value"><span>'+colValue+'</span></div>');
    }
    
    // Rest of the code

    $("#apply-button").click(function(){
        
        var advgrid = FormUtil.getField("gridField"); 
        var values = FormUtil.getGridCellValues("gridField.item_name");
        
        // add single row
        var btn_plus = advgrid.find(".ui-icon-circle-plus");
        btn_plus.trigger("click");
        
        if(values.length > 0){
            setTimeout(function () {
                //Change the following according to the no. of columns you have and form element ID
                setValue(advgrid,values.length ,0, FormUtil.getValue("item_name"));
                setValue(advgrid,values.length ,1, FormUtil.getValue("category"));
                setValue(advgrid,values.length ,2, FormUtil.getValue("expiry_date"));
                setValue(advgrid,values.length ,3, FormUtil.getValue("price"));
            }, 10);
        }else{
            setTimeout(function () {
				//Change the following according to the no. of columns you have and form element ID
                setValue(advgrid,0 ,0, FormUtil.getValue("item_name"));
                setValue(advgrid,0 ,1, FormUtil.getValue("category"));
                setValue(advgrid,0,2, FormUtil.getValue("expiry_date"));
                setValue(advgrid,0 ,3, FormUtil.getValue("price"));
            }, 10);
        }
    });
  });
</script>

Step 5

Once done, generate a CRUD and start testing:

Figure 6: Result

Sample App