Batch creation of fields and columns

The realgrid2-utils.js file is provided when downloading the RealGrid2 product file. We have compiled a collection of utility functions provided as examples of how to use RealGrid2 (opens in a new tab).

Among them, this is an example of using setFieldsNColumns(), a function that simultaneously creates a DataProvider Field and a GridView Column with only simple column information.

   var dataProvider, gridView;
   var rows;
    
   //If dataType is not text, specify in tag property
   var columns_01 = [{
       "name": "Country",
       "type": "data",
       "width": "100",
       "header": {
           "text": "Country"
       }
   }, {
       "name": "Quantity",
       "type": "data",
       "width": "100",
       "tag": {"dataType": "number"}, //If dataType is not text, specify in tag property
       "header": {
           "text": "Quantity"
       },
       "footer": {
           "expression": "sum",
       },
       "numberFormat": "#,##0"
   }, {
       "name": "OrderDate",
       "type": "data",
       "width": "100",
       "tag": {"dataType": "datetime"}, //If dataType is not text, specify in tag property
       "header": {
           "text": "OrderDate"
       }
   }]
 
   dataProvider = new RealGrid.LocalDataProvider();
   gridView = new RealGrid.GridView("realgrid");
   gridView.setDataSource(dataProvider);
  
   setFieldsNColumns(dataProvider, gridView, columns_01);
  
   //Dynamically create fields and columns
   function setFieldsNColumns(provider, grid, columnInfo) {
       var fields = [];
 
       for (var key in columnInfo) {
           var col = columnInfo[key];
 
       if (!col.fieldName) col.fieldName = col.name;
         if (col && (!col.items)) {
           //field configuration
           var f = {};
           f.fieldName = col.name;
           if (col.tag && col.tag.dataType) f.dataType = col.tag.dataType;
 
           fields
           fields. push(f);
         };
       };
 
       provider.setFields(fields);
       grid.setColumns(columnInfo);
     };

The setFieldsNColumns function creates fields and columns based on the information defined in columnInfo.