Wijmo 5 : Power of itemFormatter

Wijmo 5 are the true set of Javascript controls and are specifically designed with the motive of "Touch First, Mobile First". Most of Wijmo 5 controls have a very powerful property called 'itemFormatter' which gets or sets a formatter function used to customize the UI of the control. This blog would try to demonstrate some of the things which you can easily achieve using itemFormatter :

1. Calculated Column in Wijmo's JavaScript DataGrid, FlexGrid
2. Individual color for each bar in FlexChart

Calculated column in FlexGrid

A common requirement in any JavaScript DataGrid is to create a calculated column based on other columns. Ideally, you fetch the values of other columns for that specific row, perform the calculations and then, set the resultant value in the calculated cell. This task becomes easy because of the rich API of FlexGrid and one can easily achieve the same using getCellData()/setCellData() methods. Here is the code snippet wherein profit is calculated based on sales and expenses : MarkUp

<wj-flex-grid items-source="data" item-formatter="itemFormatter">  
  <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>  
  <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>  
  <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>  
  <wj-flex-grid-column header="Profit" data-type="Number"></wj-flex-grid-column>  
</wj-flex-grid>

Controller

$scope.itemFormatter = function (panel, r, c, cell) {  
   if (panel.cellType == wijmo.grid.CellType.Cell) {  
      var flex = panel.grid;  
      //if its calculated column  
      if (c == 3) {  
        flex.beginUpdate();  
        //get data from other columns for this row i.e. profilt=sales-expenses  
        var calculatedData = parseInt(flex.getCellData(r, 1, false)) - parseInt(flex.getCellData(r, 2, false));  
        //set the value in the calculated column  
        flex.setCellData(r, c, calculatedData, true);  
        flex.endUpdate();  
      }  
     }  
   }

Individual color for each bar in FlexChart

When single series is plotted in a JavaScript Chart, most developers want to display each bar with different color or want to change of color of a specific bar. Here is the simple way to achieve the same using itemFormatter property of FlexChart:

    var defaultColor;  
    $scope.itemFormatter = function (engine, hitTestInfo, defaultFormat) {  
          if (!defaultColor)  
             defaultColor = engine.fill;  

          if (hitTestInfo.chartElement == wijmo.chart.ChartElement.SeriesSymbol) {  
              //check for specific bar using value property of hitTestInfo object  
              //Here, change of color of bars having value greater than 5000  
              if (hitTestInfo.value < 5000)  
                  engine.fill = get\_random\_color();  
              else  
                  engine.fill = defaultColor;  

          defaultFormat();  
        }  
      };  
    };

Here are jsFiddles to try the above implementations : Calculated Column in FlexGrid Individual bar color in FlexChart You can also display sparklines etc in a FlexGrid cell using itemFormatter and can refer to this demo.