CODEWITHSUNDEEP
kendo-uidojokendo-gridkendo-asp.net-mvc
Manprit Singh Sahota
Manprit Singh Sahota

Reputation: 1339

Unable to add simultaneous calculated column in kendo grid MVC

I have implemented kendo grid inline editing in my application. I have columns percentage and percentage amount in my grid which is calculated based on base amount.

I want that when user change the percentage then percentage amount should be calculated automatically. Also, when user change the percentage amount then percentage should be calculated automatically.

I have created this dojo to show the implementation.

Below is the code I am using currently:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>

<button onClick="reset()" class="k-button">Reset test data</button>
<div id="grid"></div>
<script>

function setTestData(){
    var testData = [
      {ID: 1, Value: "TEST1", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
      {ID: 2, Value: "TEST2", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
      {ID: 3, Value: "TEST3", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
      {ID: 4, Value: "TEST4", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
      {ID: 5, Value: "TEST5", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50}  
    ];
    localStorage["grid_data"] = JSON.stringify(testData);
}

function reset(){
    setTestData();
    $("#grid").data("kendoGrid").dataSource.read();
}

$(document).ready(function () {

    if(localStorage["grid_data"] == undefined){
        setTestData();
    }

    var dataSource = new kendo.data.DataSource({
        transport: {
          create: function(options){
            var localData = JSON.parse(localStorage["grid_data"]);
            options.data.ID = localData[localData.length-1].ID + 1;
            localData.push(options.data);
            localStorage["grid_data"] = JSON.stringify(localData);
            options.success(options.data);
          },
          read: function(options){
              var localData = JSON.parse(localStorage["grid_data"]);
              options.success(localData);
          },
          update: function(options){
            var localData = JSON.parse(localStorage["grid_data"]);

            for(var i=0; i<localData.length; i++){
              if(localData[i].ID == options.data.ID){
                localData[i].Value = options.data.Value;
              }
            }
            localStorage["grid_data"] = JSON.stringify(localData);
            options.success(options.data);
          },
          destroy: function(options){
            var localData = JSON.parse(localStorage["grid_data"]);
            for(var i=0; i<localData.length; i++){
                if(localData[i].ID === options.data.ID){
                    localData.splice(i,1);
                    break;
                }
            }
            localStorage["grid_data"] = JSON.stringify(localData);
            options.success(localData);
          },
        },
        schema: {
          model: {
            id: "ID",
            fields: {
              ID: { type: "number", editable: false },
              Value: { type: "string", editable: false },
              BaseAmount:{type: "number" , editable: false},
              IncreasePercentage:{type: "number"},
              IncreaseAmount:{type: "number"}
            }}
        },
        pageSize: 20
    });

    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 500,
        toolbar: ["create", "save", "cancel"],
        columns: [
          { field: "ID", width: "100px" },
          { field: "Value", width: "100px"},
          { field: "BaseAmount", width: "150px"},
          { field: "IncreasePercentage", width: "150px"},
          { field: "IncreaseAmount", width: "150px"},
          { command:  ["edit"], width: "150px" }
        ],
        editable: "inline",
    }).data("kendoGrid");
});
</script>
</body>
</html>

Expected Behaviour:

  1. BaseAmount=500, Percentage(Entered By User)=10, PercentageAmount(Auto Caluclated)=50
  2. BaseAmount=500, Percentage(Auto Caluclated)=10, PercentageAmount(Entered By User)=50

I am using Kendo MVC grid but I cant create dojo for the same so I am providing jquery API. Is there a way out to add two simultaneous calculated column in kendo grid?

Upvotes: 1

Views: 517

Answers (1)

M&#233;toule
M&#233;toule

Reputation: 14472

You can listen to changes on your datasource with the change event :

var dataSource = new kendo.data.DataSource({
  change: function(e) {
  // only triggered when the item changes
  if (e.action !== 'itemchange') {
    return;
  }

  if (e.field === 'IncreasePercentage') {
    $.each(e.items, function(i, item) {
      // calling item.set also triggers the change event, so we need to prevent infinite loops
      var newIncreaseValue = item.BaseAmount * item.IncreasePercentage/100;
      if (item.IncreaseAmount !== newIncreaseValue) {
        item.set('IncreaseAmount', newIncreaseValue);
      }
    });
  } else if (e.field === 'IncreaseAmount') {
    $.each(e.items, function(i, item) {
      // calling item.set also triggers the change event, so we need to prevent infinite loops
      var newIncreaseValue = 100 * item.IncreaseAmount / item.BaseAmount;
      if (item.IncreasePercentage !== newIncreaseValue) {
        item.set('IncreasePercentage', newIncreaseValue);
      }
    });
  }
});

There are various events that you can use depending on your needs; either on the datasource itself (like my example), or on the grid itself.

Upvotes: 2

Related Questions