如何在syncfusion vue js数据网格中使用计算字段。

Question

如何在syncfusion vue js数据网格中使用计算值？

例如

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.

我如何才能实现这一点在syncfusion vue js databgrid？谢谢你的帮助。

Answer 1

https:/vuejs.orgv2guidecomputed.html您可以阅读关于默认的vue计算值，并添加 v-bind:value='computedProperty' 到你需要计算的单元格。如果你给一个沙盒与你的代码，我会尽量帮助你更多。

Answer 2

通过验证您的查询，我们了解到在初始页面加载时，您希望根据其他三个字段的值来计算总价和折扣价。根据您的查询，我们准备了一个示例，通过使用queryCellInfo事件来实现您的要求。请参考下面的代码示例和示例以获得更多信息。

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 
                    } 
                } 
            } 
        });

样品。 https:/www.syncfusion.comdownloadssupportforum154221ze1542211673557847.zip

文档。https:/ej2.syncfusion.comdocumentationapigrid#querycellinfo。

祝贺。

Rajapandiyan S