How to add custom field (computed field) in Column

[Digesh]

How can i calculate column value based on another column in vue grid? 

For example

Suppose i have 5 column as QUANTITY,  MRP,  DISCOUNT,  DISCOUNTED PRICE,  TOTAL. 

I want to calculate DISCOUNTED PRICE from given values MRP and DISCOUNT. 

And also want to calculate TOTAL from given value QUANTITY and DISCOUNTED PRICE.

How can i achieve this in syncfusion vue js databgrid? Thanks in advance for help.

[Rajapandi Ravi]

Hi Digesh, 

Query#: How can i calculate column value based on another column in vue grid? 

Based on your query we have prepared a sample of Grid with 5 columns(QUANTITY,  MRP,  DISCOUNT,  DISCOUNTED PRICE &  TOTAL) and achieve your requirement by using actionComplete event. In this event, we have binded the keyup event to the form element and we have perform the calculation based on the other column values. Pleasee refer the below  code example and sample for more information. 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      id="Grid" 

      ref="grid" 

      :dataSource="data" 

      :allowPaging="true" 

      :load="load" 

      :editSettings="editSettings" 

      :actionComplete="complete" 

      :selectionSettings="selectionSettings" 

      :toolbar="toolbar" 

    > 

      <e-columns> 

        <e-column field="ID" headerText="ID" width="90" isPrimaryKey="true"></e-column> 

        <e-column field="QUANTITY" headerText="QUANTITY" width="120"></e-column> 

        <e-column field="MRP" headerText="MRP" width="120"></e-column> 

        <e-column field="DISCOUNT" headerText="DISCOUNT" width="120"></e-column> 

        <e-column field="DISCOUNTEDPRICE" headerText="DISCOUNT Price" width="120"></e-column> 

        <e-column field="TOTAL" headerText="TOTAL" width="120"></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Edit, 

  Resize, 

  ForeignKey, 

  Aggregate, 

  Group 

} from "@syncfusion/ej2-vue-grids"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: [ 

        { 

          ID: 1, 

          QUANTITY: 1, 

          MRP: 2000, 

          DISCOUNT: 20, 

          DISCOUNTEDPRICE: 1800, 

          TOTAL: 1800 

        }, 

        { 

          ID: 2, 

          QUANTITY: 2, 

          MRP: 1000, 

          DISCOUNT: 10, 

          DISCOUNTEDPRICE: 900, 

          TOTAL: 900 

        } 

      ], 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Normal" 

      }, 

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 

    }; 

  }, 

  methods: { 

    load() {}, 

    complete(args) { 

      if (args.requestType === "beginEdit") { 

        var grid = document.getElementsByClassName("e-grid")[0] 

          .ej2_instances[0]; 

        grid.editModule.formObj.element[1].addEventListener("keyup", function(    //bind the event for quantity column 

          e 

        ) { 

          var grid = document.getElementsByClassName("e-grid")[0] 

            .ej2_instances[0]; 

          var Totalquantity = +e.target.value; 

          var GivenMrp = +grid.editModule.formObj.element[2].value; 

          var Discount = +grid.editModule.formObj.element[3].value; 

          var offerprice = (GivenMrp * Discount) / 100;                 //while changing quantity we have calculate the Total price based on (MRP and Discount) column and update the value to the Total column 

          var Res = GivenMrp - offerprice; 

          grid.editModule.formObj.element[5].value = Res * Totalquantity; 

        }); 

        grid.editModule.formObj.element[2].addEventListener("keyup", function(                   //bind the event for MRP column  

          e 

        ) { 

          //For calculating price 

          var grid = document.getElementsByClassName("e-grid")[0] 

            .ej2_instances[0]; 

          var GivenMrp = +e.target.value; 

          var Totalquantity = grid.editModule.formObj.element[1].value; 

          var Discount = +grid.editModule.formObj.element[3].value; 

          var offerprice = (GivenMrp * Discount) / 100; 

          var discountprice = GivenMrp - offerprice; 

          grid.editModule.formObj.element[4].value = discountprice; 

          grid.editModule.formObj.element[5].value =                                                               //While changing the MRP value we have calculate the discount price based on (MRP and Discount) column value and update the values to Total and Discount price column 

            Totalquantity * discountprice; 

        }); 

        grid.editModule.formObj.element[3].addEventListener("keyup", function(           //bind the event for Discount column 

          e 

        ) { 

          //For calculating price 

          var grid = document.getElementsByClassName("e-grid")[0] 

            .ej2_instances[0]; 

          var discount = +e.target.value; 

          var GivenMrp = +grid.editModule.formObj.element[2].value; 

          var Totalquantity = grid.editModule.formObj.element[1].value; 

          var offerprice = (GivenMrp * discount) / 100; 

          var prc = GivenMrp - offerprice; 

          grid.editModule.formObj.element[4].value = prc; 

          grid.editModule.formObj.element[5].value = Totalquantity * prc;                //While changing the Discount value we have calculate the discount price based on (MRP and Discount) column value and update the values to Total and Discount price column 

 

        }); 

      } 

    } 

  }, 

  provide: { 

    grid: [Edit, Resize, ForeignKey, Aggregate, Group] 

  } 

}; 

</script> 

 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

 

Sample: https://codesandbox.io/s/upbeat-hugle-ugy3x-1e8jd?file=/src/App.vue 

Regards,
Rajapandi R 

[Digesh]

Dear Sir / Madam

Thanks for your fast reply.

i would like to draw your attention that i am fetching data using api from database when page load.

i am getting just 3 field (e.g. QUANTITY, MRP and DISCOUNT)

i want to calculate rest of 2 field from above 3 fields.

how can i do that ?

[Rajapandi Ravi]

Hi Digesh, 

Based on your we found that on the initial page load you like to calculate the Total and Discount price based on the other three field values. To achieve your requirement we suggest you to use queryCellInfo event of EJ2 Grid. For your convenience we have attached the sample and please find the sample from the below link 

Please refer the below code example and sample for more information. 

 

var templateGrid = Vue.component('ShowerTemplateList', { 

            template: ` 

                    <ejs-grid ref='grid' id='grid' :dataSource="data" :columns='columns' 

                        :editSettings='editSettings' :toolbar='toolbar' :queryCellInfo='queryCellInfo' :actionComplete='actionComplete'> 

                    </ejs-grid> 

                `, 

            data: function () { 

                return { 

                    data: new ej.data.DataManager({ 

                        url: "/Home/UrlDatasourceone", 

                        updateUrl: "Home/Updateone", 

                        insertUrl: "Home/Insertone", 

                        removeUrl: "Home/Removeone", 

                        adaptor: new ejs.data.UrlAdaptor() 

                    }), 

                    columns: [ 

                        { field: 'OrderID', headerText: 'ID', isPrimaryKey: true, width: 100 }, 

                        { field: 'Quantity', headerText: 'Quantity', width: 100 }, 

                        { field: 'MRP', headerText: 'MRP', width: 100 }, 

                        { field: 'Discount', headerText: 'Discount', width: 100 }, 

                        { field: 'Discountprice', headerText: 'Discount price', width: 100 }, 

                        { field: 'Total', headerText: 'Total', width: 100 } 

                    ], 

                    editSettings: { 

                        allowEditing: true, 

                        allowAdding: true, 

                        allowDeleting: true, 

                        mode: "Normal" 

                    }, 

                    toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 

                } 

            }, 

            methods: { 

                actionComplete: function (args) { 

                    if (args.requestType === "beginEdit") { 

                        var grid = document.getElementsByClassName("e-grid")[0] 

                            .ej2_instances[0]; 

                        grid.editModule.formObj.element[1].addEventListener("keyup", function ( 

                            e 

                        ) { 

                           var grid = document.getElementsByClassName("e-grid")[0] 

                                .ej2_instances[0]; 

                            var Totalquantity = +e.target.value; 

                            var GivenMrp = +grid.editModule.formObj.element[2].value; 

                            var Discount = +grid.editModule.formObj.element[3].value; 

                            var offerprice = (GivenMrp * Discount) / 100; 

                            var Res = GivenMrp - offerprice; 

                            grid.editModule.formObj.element[5].value = Res * Totalquantity; 

                        }); 

                        grid.editModule.formObj.element[2].addEventListener("keyup", function ( 

                            e 

                        ) { 

                            //For calculating price 

                            var grid = document.getElementsByClassName("e-grid")[0] 

                                .ej2_instances[0]; 

                            var GivenMrp = +e.target.value; 

                            var Totalquantity = grid.editModule.formObj.element[1].value; 

                            var Discount = +grid.editModule.formObj.element[3].value; 

                            var offerprice = (GivenMrp * Discount) / 100; 

                            var discountprice = GivenMrp - offerprice; 

                            grid.editModule.formObj.element[4].value = discountprice; 

                            grid.editModule.formObj.element[5].value = 

                                Totalquantity * discountprice; 

                        }); 

                        grid.editModule.formObj.element[3].addEventListener("keyup", function ( 

                            e 

                        ) { 

                           var grid = document.getElementsByClassName("e-grid")[0] 

                                .ej2_instances[0]; 

                            var discount = +e.target.value; 

                            var GivenMrp = +grid.editModule.formObj.element[2].value; 

                            var Totalquantity = grid.editModule.formObj.element[1].value; 

                            var offerprice = (GivenMrp * discount) / 100; 

                            var prc = GivenMrp - offerprice; 

                            grid.editModule.formObj.element[4].value = prc; 

                            grid.editModule.formObj.element[5].value = Totalquantity * prc; 

                        }); 

                    } 

                }, 

                queryCellInfo: function (args) { 

                    if (args.column.field === "Discountprice") {          //the querycellinfo triggers for every cell rendering 

                        var discount = (args.data.MRP * args.data.Discount) / 100; 

                        var discountprice = args.data.MRP - discount; 

                        args.data.Discountprice = discountprice;  //here we have calculated the discount price and updated the value to datasource 

                        args.cell.innerText = discountprice;     //here we have set the discount price to the cell value for UI changes 

                    } 

                    if (args.column.field === "Total") { 

                        var discountprice = (args.data.Discountprice * args.data.Quantity); 

                        args.data.Total = discountprice;          //here we have calculated the Total price and updated the value to datasource 

                        args.cell.innerText = discountprice;      //here we have set the Total price to the cell value for UI changes 

                    } 

                } 

            } 

        }); 

 

Sample:  https://www.syncfusion.com/downloads/support/forum/154221/ze/1542211673557847.zip 

Documentation: https://ej2.syncfusion.com/documentation/api/grid/#querycellinfo 

Regards, 

Rajapandi R