Allowing Grid Widget entries to autopopulate as it "grows"

[rleyba]

Hi Steve,

We have been using the grid widget in our forms and it's great, allowing us to grow specific fields in our forms as required. We have a request from our staff to "pre-populate" new rows and inherit values from the last-entered row in the grid widget as the form grows. The nature of some of our fields is such that a lot of the data being entered is repetitive and it becomes tedious if we add 20 rows to our grid widget and we are only changing one field in the row at a time? Would there be an easy way to do this?

Thanks and regards,

[shannah]

There isn't an easy way to do it in the current release.
However, in 2.0, the grid will respect field default values. E.g. If you specify a default value for the fields in the related tables, then will be used (as defaults) when new rows are added in the grid.

In addition 2.0 adds the widget:onFieldChange directive for the grid widget so that you can assign a javascript handler
widget:onFieldChange="onGridFieldChanged"

Then you just have to make sure that you have a Javascript function included in your app called onGridFieldChanged, which will be called whenever one of the fields in the grid is changed.

e.g.

Code: Select all

//require <xatajax.form.core.js>
(function(){
    var $ = jQuery;
    var xform = XataJax.load('XataJax.form');

    // Make onGridFieldChanged function in the global scope
     //  FOR DEMONSTRATION ONLY... YOU SHOULD USE YOUR OWN CONSISTENT
     // NAMESPACING AND NOT CLUTTER THE GLOBAL SCOPE
    window.onGridFieldChanged = onGridFieldChanged;
/**
    * A callback to handle when an ingredient is changed.  This is registered
    * in the dtg_recipe_ingredients fields.ini file.
    * @param {HTMLElement} el The field that was changed.
    */
   function onGridFieldChanged(el){
                // get the other fields in the current row
                var taxPercentField = xform.findField(el, 'taxPercent');
                var taxAmountField = xform.findField(el, 'taxPercent');
                var priceField = xform.findField(el, 'price');
                var totalField = xform.findField(el, 'price');

                $(taxAmountField).val(
                    parseFloat($(priceField).val()) * parseFloat($(taxPercentField).val())
                );
      
      
      
   }
})();


This example makes use of the XataJax.form.findField() function that will find a field in a Xataface form or a specified name that is in the same field group as a source field. This would be a field in the same row of a grid, or in the same field group, or the same form, working up the chain.
JSDoc here
http://xataface.com/dox/core/trunk/jsdo ... .findField

-Steve