Populating an Advanced Grid with jQuery

Introduction

Using jQuery, you learn how to populate data into an Advanced Grid Form Element. This article shows a sample application with interactive form elements, including text fields, a select box, a date picker, and a dynamically updated grid. Through these steps, you enhance your application's functionality and provide a hands-on experience managing data within an Advanced Grid. It also equips you with the necessary skills to implement these features effectively, optimizing your projects' user experience and productivity.

Before you begin, ensure you have a basic understanding of HTML and jQuery. Familiarity with form elements and grid configurations is also beneficial.

How does it work?

Below, you will find the step-by-step guide for the sample application:

1. Open your form editor.
2. Drag and drop the following form elements into the top section of your form:
   • Two text fields
     
     
     
     
   • One select box
     
   • One date picker
     
     Form Elements
     
3. Drag a Custom HTML form element into the form.
4. Transform it into a button using the following HTML code:
   

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

   Button appearance
   
5. Add a new section below the top form elements.
6. Drag a Custom HTML and an Advanced Grid form element into this new section.
   
   
   Advanced Grid Configuration
   
7. Insert the following jQuery script into the Custom HTML element:
   

   <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>
   
   <!-- Note: If you are not following the example provided in this article, set the following according to the number of columns you want to show in the advanced grid and replace each value inside FormUtil.getValue("..") with the respective ID of each form element 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 start counting from 0, not 1. Otherwise, the added row will be empty.
   Also, 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 the advanced grid field ID and any of your column IDs.
   
   var values = FormUtil.getGridCellValues("gridField.item_name");
   -->

8. Adapt this script by replacing placeholders with actual IDs from your form elements.
9. Once the application setup is complete, generate a CRUD.
   
10. Begin testing to ensure all elements are functioning as intended.

Download sample app

You should now have a functional application where the top section collects user inputs, and the bottom section displays this data in an Advanced Grid dynamically updated with jQuery.