DHTMLX Docs & Samples Explorer

Math in Grid

Math Extension

dhtmlxgrid_math.js required

Math Formulas with Script

The user can attach the necessary math formula to a column while defining its type with setColTypes() method. [=…] should be used to set formula to the necessary column. At the same time, the user still uses any of available eXcells to format the result:

        grid.setColTypes("ed,ed,ed,ed,ed[=c2*c3]");

In the example above, c2*c3 means that the value of the last column should be equal to the product of column 2 value and column 3 value. Column indexes are zero-based. The user may apply any JavaScript math operators as long as he refers to correct columns (existing columns with numeric values).

Math Formulas with XML

To set a formula for a single cell, the user can define it directly in XML as a cell value, starting expression with ”=”. Column type should still be defined with Math formula (see above), or as type “math”.

    <row> 
        ...
        <cell>=c2*c3</cell> 
    </row>

Rounding Resulting Values

Together with Math formulas, the user may need to use the following grid method to round resulting values:

        grid.setMathRound(decimal_places); // decimal_places - number of digits after the point

Editing Formulas in Grid

By default, all cells with formulas are read-only, thus, the user can't change the formula on the fly. But he still can enable formula editing using the following method:

        grid.enableMathEditing(state);
 

The parameter state can be either false (by default) meaning that all formula cells are read-only, or to true - all formula cells are made editable.

Automatically Calculated Values for Header/Footer

Starting from v1.5, it became quite easy to add automatically calculated values to grid footer or header. Here is the list of available types:

  • stat_total - calculates the sum of all values in the column;
  • stat_multi_total - calculates multiplication of two cells sum (cell indexes for multiplication should be passed as arguments: {#stat_multi_total}1:2, where 1 and 2 are indexes of columns to get values from);
  • stat_max - shows maximal value in the column;
  • stat_min - shows minimal value in the column;
  • stat_average - shows simple average of column values;
  • stat_count - counts number of rows in the grid.

To activate this functionality, the user should include dhtmlxgrid_filter.js into the page and use names listed above with prefix (#) as header/footer cell content. Any HTML can also be added to it, like:

  <b>Total:</b> {#stat_total}

Note: Only one type of an auto-calculated value can be used in a single cell.

If automatically calculated values were added after grid's initialization, the user can force recalculation using the following command:

  <script>
      grid.callEvent("onGridReconstructed",[]);
  </script>

Custom Statistics Counters