Change number format to match valueFormat column in kendo grid

Kendo's grid column formatting option won't work for you, as it applies the same formatting to all cells in the column, but you're going to use different formatting on each row.

In this case, you must provide a custom template for the ActualValue column. Within this template, you can use a formatting function to process your value. Since you are already using Kendo, you can use kendo.format (), for example:

template: "#: kendo.format(ValueFormat, AcualValue)#"

      

        
        
        
      

    

However, this does not work with all of your data, because some format strings are already parenthesized and have an index like "{0: c2}", while others are "#. ###". Thus, you must create a function that ensures their consistency before passing them to kendo.format (). I did it with fixValueFormatString (ValueFormat) below.

Here's a link to a working sample: http://jsbin.com/jejixediga/edit?js,console,output

And here's the code:

var data = [{

  "Dept": "Dev",
  "CalculateValue": 0 ,
  "AcualValue": 341.917,
  "ValueFormat": "#.###"
}, {

  "Dept": "Dev",
  "CalculateValue": 0,
  "AcualValue": 5333.083,
  "ValueFormat": "#.###"
}, {

  "Dept": "Dev",
  "CalculateValue":0 ,
  "AcualValue": 8735.666,
  "ValueFormat": "{0:c2}"
}, {

  "Dept": "Dev",
  "CalculateValue":0,
  "AcualValue": 126.000,
  "ValueFormat": "{0:c2}"
}];

var dateFields = [];

// Make sure all format strings are consistent
function fixValueFormatString(ValueFormat){
  if(!ValueFormat.startsWith("{")){
      ValueFormat = "{0:" + ValueFormat + "}";
  }
  return ValueFormat;
}

generateGrid(data)

  function generateGrid(gridData) {
            if ($(".k-header").length > 0) {
                grid = $("#grid").data("kendoGrid");
                grid.destroy();
                $("#grid").empty();
            }

            $("#grid").kendoGrid({
                toolbar: ["excel"],
                excel: {
                    allPages: true,
                    filterable: true,
                    fileName: 'Aggregate Expenditure/Utilization Report_.xlsx'
                },
                dataSource: {

                    pageSize: 100,
                    schema: {
                        data: function () { return gridData; },
                        total: function () {
                            return gridData.length;
                        }
                    }
                },
                sortable: true,
                filterable: true,
                groupable: true,
                pageable: true,
                autoBind: true,
                columns: [{
                    field: "Dept"
                }, {
                    field: "CalculateValue",
                }, {
                    template: "#: kendo.format(fixValueFormatString(ValueFormat), AcualValue)#",
                    field: "AcualValue"
                }, {
                    field: "ValueFormat"
                }]
            });
            $("#grid").data("kendoGrid").refresh();
        }

function generateModel(gridData) {
  var model = {};
  model.id = "ID";
  var fields = {};
  for (var property in gridData) {
    var propType = typeof gridData[property];

    if (propType == "number") {
      fields[property] = {
        type: "number",
        validation: {
          required: true
        }
      };
    } else if (propType == "boolean") {
      fields[property] = {
        type: "boolean",
        validation: {
          required: true
        }
      };
    } else if (propType == "string") {
      var parsedDate = kendo.parseDate(gridData[property]);
      if (parsedDate) {
        fields[property] = {
          type: "date",
          validation: {
            required: true
          }
        };
        dateFields.push(property);
      } else {
        fields[property] = {
          validation: {
            required: true
          }
        };
      }
    } else {
      fields[property] = {
        validation: {
          required: true
        }
      };
    }

  }
  model.fields = fields;

  return model;
}

      

        
        
        
      

    

UPDATE - VARIOUS PERFORMANCE REQUIREMENTS

In response to OP's request for a solution that works with dynamic columns, here's the code below ( http://jsbin.com/jinowamosa/edit?js,console,output ):

var data = [{

  "Dept": "Dev",
  "CalculateValue": 0 ,
  "AcualValue": 341.917,
  "ValueFormat": "#.###"
}, {

  "Dept": "Dev",
  "CalculateValue": 0,
  "AcualValue": 5333.083,
  "ValueFormat": "#.###"
}, {

  "Dept": "Dev",
  "CalculateValue":0 ,
  "AcualValue": 8735.666,
  "ValueFormat": "{0:c2}"
}, {

  "Dept": "Dev",
  "CalculateValue":0,
  "AcualValue": 126.000,
  "ValueFormat": "{0:c2}"
}];

var dateFields = [];

function fixValueFormatString(ValueFormat){
  if(!ValueFormat.startsWith("{")){
      ValueFormat = "{0:" + ValueFormat + "}";
  }
  return ValueFormat;
}

generateGrid(data)

  function generateGrid(gridData) {
            if ($(".k-header").length > 0) {
                grid = $("#grid").data("kendoGrid");
                grid.destroy();
                $("#grid").empty();
            }

            $("#grid").kendoGrid({
                toolbar: ["excel"],
                excel: {
                    allPages: true,
                    filterable: true,
                    fileName: 'Aggregate Expenditure/Utilization Report_.xlsx'
                },
                dataSource: {
                    pageSize: 100,
                    schema: {
                        data: function () { return gridData; },
                        total: function () {
                            return gridData.length;
                        }
                    }
                },
                sortable: true,
                filterable: true,
                groupable: true,
                pageable: true,
                autoBind: true,
                columns: generateColumns(gridData[0])
            });
            $("#grid").data("kendoGrid").refresh();
        }

function generateColumns(gridData) {
  var fields = {};
  var columns = [];

  for (var property in gridData) {
    var propType = typeof gridData[property];

    if (propType == "number") {
      fields[property] = {
        type: "number",
        validation: {
          required: true
        }
      };
    } else if (propType == "boolean") {
      fields[property] = {
        type: "boolean",
        validation: {
          required: true
        }
      };
    } else if (propType == "string") {
      var parsedDate = kendo.parseDate(gridData[property]);
      if (parsedDate) {
        fields[property] = {
          type: "date",
          validation: {
            required: true
          }
        };
        dateFields.push(property);
      } else {
        fields[property] = {
          validation: {
            required: true
          }
        };
      }
    } else {
      fields[property] = {
        validation: {
          required: true
        }
      };
    }

  }

  for (var field in fields) { 
        if(field == 'AcualValue'){
          columns.push({ field: field, template: "#: kendo.format(fixValueFormatString(ValueFormat), AcualValue)#" });
        } else {
          columns.push({ field: field });
        }
    }

  return columns;
}

      

        
        
        
      

    

Hope this helps!